:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #d5fa32; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; background: #000; }
body { min-height: 100svh; }
main { min-height: 100svh; display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.emblem { width: min(100vw, 100svh, 1100px); aspect-ratio: 1; position: relative; isolation: isolate; user-select: none; -webkit-user-select: none; }
.logo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.logo-complete { opacity: 0; z-index: 4; transition: opacity 750ms ease-in-out; }
.definitions { position: absolute; }
.board { position: absolute; left: 18.6603%; top: 33.0144%; width: 30.7018%; height: 27.1132%; display: grid; grid-template-columns: 129fr 131fr 125fr; grid-template-rows: 113fr 113fr 114fr; z-index: 2; transition: opacity 600ms ease; }
.cell { display: grid; place-items: center; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #b4eb00; position: relative; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cell::before { content: ""; position: absolute; inset: 6%; background: radial-gradient(ellipse, #b0e00014, transparent 75%); opacity: 0; transition: opacity 200ms; }
.cell[aria-disabled="true"] { cursor: default; }
.cell:focus { outline: none; }
.cell:focus-visible { outline: 1px solid #e4ff43; outline-offset: -5px; background: #b5e6000b; }
@media (hover: hover) { .cell[aria-disabled="false"]:hover::before { opacity: 1; } }
.cell svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 2px #b5e60055); animation: mark-in 260ms ease-out both; }
@keyframes mark-in { from { opacity: 0; transform: scale(.78); filter: drop-shadow(0 0 9px #dfff38); } to { opacity: 1; transform: scale(1); } }
.finish { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; transition: opacity 600ms ease; overflow: visible; }
.victory { opacity: 0; }
.strike { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.strike-halo { stroke: #c3fc00; stroke-width: 9; }
.strike-core { stroke: #ffffbc; stroke-width: 2.4; }
.win-ring { fill: none; stroke: #e6ff44; stroke-width: 3; opacity: 0; }
.logo-ring { fill: none; stroke: #efff70; stroke-width: 3; opacity: 0; }
[data-phase="won"] .victory { opacity: 1; }
[data-phase="won"] .strike { animation: draw-strike 1000ms 220ms cubic-bezier(.3,.1,.2,1) forwards; }
[data-phase="won"] .win-ring { animation: light-up 500ms ease forwards; }
[data-phase="won"] .ring-corner { animation-delay: 500ms; }
[data-phase="won"] .logo-ring { animation: light-up 650ms 950ms ease forwards; }
@keyframes draw-strike { to { stroke-dashoffset: 0; } }
@keyframes light-up { from { opacity: 0; } to { opacity: 1; } }
[data-phase="signature"] .logo-complete, [data-phase="leaving"] .logo-complete { opacity: 1; }
[data-phase="signature"] .board, [data-phase="signature"] .finish, [data-phase="leaving"] .board, [data-phase="leaving"] .finish { opacity: 0; }
.loss-line { fill: none; stroke: #bdde23; stroke-width: 3; stroke-linecap: round; opacity: 0; }
[data-phase="lost"] .loss-line { animation: light-up 400ms ease forwards; }
.retry-panel { position: absolute; left: 18.6603%; top: 33.0144%; width: 30.7018%; height: 27.1132%; z-index: 5; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .6rem; padding: .5rem; background: #000e; }
.retry-panel[hidden] { display: none; }
#retry-message { margin: 0; text-align: center; font-size: clamp(11px, 1.5vw, 15px); line-height: 1.4; color: #d4ddaa; }
#retry { font: inherit; font-size: clamp(12px, 1.9vw, 16px); letter-spacing: .035em; border: 1px solid #859f1c; color: #dafa49; background: #050700; padding: .7em .9em; cursor: pointer; display: flex; align-items: center; gap: .6em; min-height: 40px; touch-action: manipulation; }
#retry:focus-visible { outline: 2px solid #efff83; outline-offset: 4px; }
#retry:hover { border-color: #e8ff6b; }
#retry:disabled { cursor: wait; opacity: .65; }
.privacy-link { position: fixed; z-index: 6; bottom: max(.6rem, env(safe-area-inset-bottom)); right: max(.8rem, env(safe-area-inset-right)); font-size: 11px; }
.privacy-link a { color: #929787; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.privacy-link a:hover, .privacy-link a:focus-visible { color: #dafa49; }
#turnstile-container { position: fixed; left: 0; bottom: 0; }
.notice { color: #d3ea86; text-align: center; position: absolute; bottom: 1rem; left: 1rem; right: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}