@charset "utf-8";

*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }

::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }

*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }

::after, ::before { --tw-content: ''; }

:host, html { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }

body { margin: 0px; line-height: inherit; }

hr { height: 0px; color: inherit; border-top-width: 1px; }

abbr:where([title]) { text-decoration: underline dotted; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

a { color: inherit; text-decoration: inherit; }

b, strong { font-weight: bolder; }

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }

button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }

button, select { text-transform: none; }

button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }

progress { vertical-align: baseline; }

::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }

[type="search"] { appearance: textfield; outline-offset: -2px; }

::-webkit-search-decoration { appearance: none; }

::-webkit-file-upload-button { appearance: button; font: inherit; }

summary { display: list-item; }

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }

fieldset { margin: 0px; padding: 0px; }

legend { padding: 0px; }

menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }

dialog { padding: 0px; }

textarea { resize: vertical; }

input::placeholder, textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }

[role="button"], button { cursor: pointer; }

:disabled { cursor: default; }

audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }

img, video { max-width: 100%; height: auto; }

[hidden]:where(:not([hidden="until-found"])) { display: none; }

.mb-2 { margin-bottom: 0.5rem; }

.flex { display: flex; }

.grid { display: grid; }

.w-full { width: 100%; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }
@charset "utf-8";

body { background-color: rgb(0, 0, 0); display: flex; justify-content: center; align-items: center; height: 100vh; }

.game-container { width: 993px; height: 467px; display: grid; grid-template-columns: 1fr 8fr 1fr; grid-template-rows: auto 1fr; gap: 8px; }

.title { grid-column: 2 / 3; text-align: center; }

.title img { display: inline-block; max-height: 80px; object-fit: contain; }

.side-img { display: flex; justify-content: center; align-items: center; }

.side-img img { max-height: 400px; object-fit: cover; }

.grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 8 / 4; width: 100%; height: auto; gap: 4px; }

.grid button { aspect-ratio: 1 / 1; width: 100%; font-family: Impact, sans-serif; font-size: 1.4rem; letter-spacing: 1px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 4px; transition: 0.25s; transform-origin: center center; position: relative; overflow: hidden; }

.grid button:hover { filter: brightness(1.3) drop-shadow(rgba(255, 255, 255, 0.8) 0px 0px 12px); transform: scale(1.04) rotate(var(--rot)); z-index: 5; }

.controls { grid-column: 2 / 3; display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; }

.controls button { background: rgb(34, 34, 34); color: white; padding: 8px 20px; font-size: 1.1rem; border: 2px solid rgb(85, 85, 85); border-radius: 8px; transition: 0.2s; }

.controls button:hover { background: rgb(51, 51, 51); transform: scale(1.05); }

.panel button.active { background: rgb(225, 29, 72); border-color: rgb(255, 255, 255); transform: scale(1.05); }

.mark-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }