:root{--ink: #0f171c;--ink-soft: #243039;--paper: #eef3f6;--cyan: #14939a;--cyan-deep: #0e7278;--cyan-glow: #5ec9cf;--amber: #d4a24a;--rose: #d45462;--mist: rgba(15, 23, 28, .06);--font-display: "Sora", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--header-h: 3.75rem;--footer-h: 2.75rem;--stage-pad: 1rem;--stage-size: min( 960px, calc(100vw - (var(--stage-pad) * 2)), calc(100dvh - var(--header-h) - var(--footer-h) - (var(--stage-pad) * 2)) )}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{position:relative;background:radial-gradient(ellipse 75% 50% at 15% 0%,rgba(20,147,154,.18),transparent 55%),radial-gradient(ellipse 60% 40% at 90% 10%,rgba(212,162,74,.12),transparent 50%),linear-gradient(165deg,#e8eef2 0%,var(--paper) 45%,#e3e9ee 100%);color:var(--ink);font-family:var(--font-mono);display:flex;flex-direction:column;min-height:100dvh;height:100dvh;overflow:hidden}.atmosphere{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--mist) 1px,transparent 1px),linear-gradient(90deg,var(--mist) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,black 20%,transparent 85%);mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,black 20%,transparent 85%);animation:grid-drift 40s linear infinite}header,footer{position:relative;z-index:2;flex:0 0 auto;display:flex;justify-content:center;align-items:center;height:var(--header-h);padding:0 1rem}footer{height:var(--footer-h);font-size:.75rem;color:var(--ink-soft);opacity:.75}.brand{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,3.5vw,1.85rem);letter-spacing:-.04em;animation:fade-up .55s ease-out both}main{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center;width:100%;padding:var(--stage-pad)}.stage{position:relative;width:var(--stage-size);height:var(--stage-size);max-width:100%;max-height:100%;border-radius:16px;overflow:hidden;background:#0d1218;box-shadow:0 24px 50px #0f171c2e;outline:1px solid rgba(15,23,28,.1);animation:stage-in .7s cubic-bezier(.22,1,.36,1) both;touch-action:none}#gameCanvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.gameUI{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;display:none;flex-direction:column;justify-content:center;align-items:center;gap:clamp(.45rem,1.5vw,.75rem);padding:clamp(1rem,4vw,2rem);text-align:center;background:radial-gradient(ellipse 90% 70% at 50% 15%,rgba(20,147,154,.2),transparent 55%),linear-gradient(180deg,#0d1218f0,#0a0e12f7);color:var(--paper);opacity:0;pointer-events:none;transition:opacity .35s ease;overflow:auto}.gameUI.is-visible{display:flex;opacity:1;pointer-events:auto}.gameUI.is-leaving{opacity:0;pointer-events:none}.ui-kicker{font-size:clamp(.62rem,1.6vw,.72rem);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-glow);animation:fade-up .45s ease-out both}.gameUI h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,5.5vw,2.6rem);letter-spacing:-.045em;line-height:1.05;animation:fade-up .5s ease-out .05s both}.ui-desc{max-width:min(22rem,92%);font-size:clamp(.74rem,2.1vw,.9rem);line-height:1.6;color:#eef3f6c7;animation:fade-up .5s ease-out .1s both}.ui-meta{list-style:none;width:min(100%,18.5rem);margin:.15rem 0;display:flex;flex-direction:column;gap:.4rem;animation:fade-up .5s ease-out .16s both}.ui-meta li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .75rem;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);font-size:clamp(.68rem,1.9vw,.78rem);color:#eef3f6d1;text-align:left}.ui-meta span{color:var(--cyan-glow);font-weight:500;letter-spacing:.02em}.ui-results{animation:fade-up .5s ease-out .14s both}.ui-results strong{font-family:var(--font-display);font-weight:600;color:var(--amber)}#gameEndDiv.lost .ui-results strong{color:#f0a3aa}#gameWinLoseSpan{color:var(--cyan-glow)}#gameEndDiv.lost #gameWinLoseSpan{color:var(--rose)}#gameEndResultLabel{color:var(--cyan-glow)!important}#gameEndDiv.lost #gameEndResultLabel{color:var(--rose)!important}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;margin-top:.45rem;padding:.85rem 1.6rem;border:none;border-radius:10px;background:var(--cyan);color:#fff;font-family:var(--font-display);font-size:clamp(.9rem,2.4vw,1rem);font-weight:700;letter-spacing:-.02em;cursor:pointer;box-shadow:0 10px 24px #14939a47;transition:background .18s ease,transform .18s ease,box-shadow .18s ease;animation:fade-up .5s ease-out .22s both}button:hover{background:var(--cyan-deep);transform:translateY(-2px);box-shadow:0 14px 28px #14939a57}button:active{transform:translateY(1px) scale(.98)}button:focus-visible{outline:2px solid #fff;outline-offset:3px}button:disabled{opacity:.7;cursor:wait;transform:none}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes stage-in{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes grid-drift{0%{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}@media (max-width: 700px){:root{--header-h: 3.1rem;--footer-h: 2.35rem;--stage-pad: .65rem}.stage{border-radius:12px}button{width:min(100%,14rem)}}@media (max-height: 700px){:root{--header-h: 2.85rem;--footer-h: 2.1rem;--stage-pad: .55rem}.brand{font-size:1.2rem}footer{font-size:.68rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}