:root{--c-bg: #061218;--c-surface: #071a24;--c-surface-raised: #0d2535;--c-grid-bg: #0a1e2a;--c-brand: #00eeff;--c-brand-12: #00eeff1f;--c-brand-27: #00eeff44;--c-brand-40: #00eeff66;--c-brand-53: #00eeff88;--c-text: #ffffff;--c-text-muted: #7aabbb;--c-text-dim: #4a6e77;--c-border: #2a4a5a;--c-hairline: #ffffff22;--c-danger: #ff3131;--c-accent-lime: #ccff14;--font-display: "Unbounded", "Arial Black", sans-serif;--font-ui: "Geist", "Inter", system-ui, sans-serif;--fs-score: 30px;--fs-cta: 20px;--fs-title: 18px;--fs-heading: 24px;--fs-body: 14px;--fs-caption: 12px;--lh-display: 1.24;--lh-ui: 1.3;--r-tile: 24px;--r-card: 19px;--r-panel: 22px;--r-md: 14px;--r-sm: 12px;--r-xs: 5px;--r-pill: 100px;--glow-sm: 0 0 8px;--glow-md: 0 0 10px;--glow-lg: 0 0 12px;--glow-xl: 0 0 16px;--screen-w: 412px;--screen-h: 917px;--gap-content: 14px;--gap-rounds: 10px;--gap-moves: 12px;--gap-grid: 3px;--pad-content: 16px 14px 10px;--pad-grid: 6px;--t-fast: .14s;--t-base: .22s;--t-slow: .42s;--ease: cubic-bezier(.22, .61, .36, 1);color-scheme:dark}@media(prefers-reduced-motion:reduce){:root{--t-fast: 1ms;--t-base: 1ms;--t-slow: 1ms}}@font-face{font-family:Unbounded;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/unbounded-500-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Unbounded;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/unbounded-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/unbounded-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/unbounded-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/geist-600-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/geist-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/geist-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/geist-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-ui);-webkit-font-smoothing:antialiased;display:grid;place-items:center;overscroll-behavior:none}#phone{position:relative;width:100%;max-width:var(--screen-w);height:100dvh;max-height:var(--screen-h);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:var(--c-bg);padding-bottom:env(safe-area-inset-bottom)}@media(min-width:460px)and (min-height:940px){#phone{border-radius:var(--r-panel);border:1px solid var(--c-border);box-shadow:var(--glow-xl) #00eeff24}}#appHeader{position:relative;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;background:var(--c-surface);border-bottom:1px solid var(--c-brand-12)}#brandMark{width:22px;height:22px;border-radius:var(--r-pill);border:2px solid var(--c-brand);box-shadow:var(--glow-sm) var(--c-brand-40);background:radial-gradient(circle at 30% 50%,transparent 5px,var(--c-brand-12) 5px 7px,transparent 7px),radial-gradient(circle at 70% 50%,transparent 5px,var(--c-brand-12) 5px 7px,transparent 7px)}#brandTitle{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-title);line-height:var(--lh-display);letter-spacing:0;text-transform:uppercase;color:var(--c-text);text-shadow:var(--glow-lg) var(--c-brand-53)}#headerActions button[hidden]{display:none}#headerActions button{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-brand);font-size:18px;line-height:1;cursor:pointer;transition:background var(--t-fast) var(--ease)}#headerActions button:hover{background:var(--c-brand-12)}#menuPanel{position:absolute;top:calc(100% + 6px);right:12px;min-width:200px;display:grid;gap:2px;padding:6px;border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface-raised);box-shadow:var(--glow-lg) #0009}#menuPanel[hidden]{display:none}#menuPanel button{border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-text);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:600;text-align:left;padding:10px 12px;cursor:pointer;transition:background var(--t-fast) var(--ease)}#menuPanel button:hover{background:var(--c-brand-12);color:var(--c-brand)}#screens{position:relative;min-height:0}.screen{position:absolute;inset:0;display:none;min-height:0}.screen.is-active{display:grid}.btn{border:0;cursor:pointer;font-family:var(--font-display);font-weight:700;line-height:var(--lh-display);text-transform:uppercase;transition:filter var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}.btn:disabled{opacity:.45;cursor:default}.btn:not(:disabled):hover{filter:brightness(1.08)}.btn:not(:disabled):active{transform:scale(.98)}.btn:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}.btn--cta{width:100%;padding:15px 24px;font-size:var(--fs-cta);border-radius:var(--r-pill);background:var(--c-brand);color:var(--c-bg);box-shadow:var(--glow-md) var(--c-brand-53)}.btn--ghost{background:transparent;color:var(--c-brand);font-family:var(--font-ui);font-size:var(--fs-body);padding:12px 16px;border-radius:var(--r-sm)}.field-label{margin:0;text-align:center;font-size:var(--fs-caption);color:var(--c-text-muted)}.text-field{width:100%;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface-raised);color:var(--c-text);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:700;text-align:center;text-transform:uppercase}.text-field::placeholder{color:var(--c-text-dim);text-transform:none;font-weight:400}.text-field:focus-visible{outline:none;border-color:var(--c-brand);box-shadow:var(--glow-sm) var(--c-brand-40)}.field-error{margin:0;text-align:center;font-size:var(--fs-caption);color:var(--c-danger)}.field-error[hidden]{display:none}.hero{position:absolute;inset:0;overflow:hidden;background:var(--c-bg)}.hero__art{position:absolute;inset:0;background:url(/art/hero.webp) center top / cover no-repeat}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0612181a 40%,#061218eb)}.hero--dim .hero__art{filter:brightness(.4) saturate(.8)}.hero__vortex{position:absolute;inset:0;pointer-events:none;animation:vortex-spin 48s linear infinite}@keyframes vortex-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.hero__vortex{animation:none}}#splashScreen{grid-template-rows:1fr auto}.splash__foot{position:relative;z-index:1;display:grid;gap:12px;padding:0 24px 28px;align-self:end}.splash__meta{margin:0;display:grid;gap:2px;justify-items:center;font-family:var(--font-display);font-weight:500;font-size:var(--fs-caption);line-height:var(--lh-display);color:var(--c-text-dim)}#searchScreen{grid-template-rows:1fr auto auto;align-items:center}.search__body{position:relative;z-index:1;display:grid;gap:22px;justify-items:center;align-content:center}.search__title{margin:0;font-family:var(--font-ui);font-weight:700;font-size:var(--fs-heading);text-transform:uppercase;color:var(--c-text);text-shadow:var(--glow-lg) var(--c-brand-53)}.search__status{position:relative;z-index:1;margin:0;padding:0 24px;text-align:center;font-size:var(--fs-caption);color:var(--c-text-muted);min-height:1.3em}#cancelSearchBtn{position:relative;z-index:1;justify-self:center;margin-bottom:28px}.spinner{width:64px;height:64px;border-radius:var(--r-pill);border:5px solid var(--c-brand-27);border-top-color:var(--c-brand);border-right-color:var(--c-brand);box-shadow:var(--glow-lg) var(--c-brand-40);animation:spinner-rotate 1s linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}#avatarScreen{overflow-y:auto}.avatar__form{display:grid;gap:10px;padding:20px 24px 28px;align-content:start;min-height:100%}#saveProfileBtn{margin-top:auto}.avatar__form .field-label+.avatar-grid{margin-bottom:18px}.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;justify-items:center}.avatar-option{width:90px;height:90px;padding:0;border-radius:var(--r-pill);border:2px solid var(--c-border);background:var(--c-surface-raised) center / cover no-repeat;cursor:pointer;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.avatar-option:hover{transform:scale(1.04)}.avatar-option:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}.avatar-option[aria-checked=true]{border-color:var(--c-brand);box-shadow:var(--glow-lg) var(--c-brand-53)}.avatar-option--upload{display:grid;place-items:center;gap:2px;border-style:dashed;color:var(--c-text-muted);font-family:var(--font-ui);font-size:var(--fs-caption);text-align:center}.avatar-option--upload:hover{border-color:var(--c-brand);color:var(--c-brand)}.avatar-option--upload.has-image{border-style:solid;font-size:0}#gameScreen{grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:var(--gap-content);padding:var(--pad-content);align-content:start;background:linear-gradient(180deg,#061218d1,#061218f0),url(/art/bg-game.webp) center / cover no-repeat}.versus{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.versus__avatar{width:72px;height:72px;border-radius:var(--r-pill);border:2px solid var(--c-border);background:var(--c-surface-raised) center / cover no-repeat;transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}#avatarLeft.is-turn{border-color:var(--c-brand);box-shadow:var(--glow-xl) var(--c-brand-40)}#avatarRight.is-turn{border-color:var(--c-danger);box-shadow:var(--glow-xl) #ff313166}.versus__center{display:grid;gap:4px;justify-items:center}.versus__score{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-score);line-height:var(--lh-display);white-space:nowrap}.versus__names{display:grid;grid-template-columns:1fr 1fr;gap:32px;width:100%}.versus__name{font-size:var(--fs-caption);color:var(--c-text-muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.round-track{display:flex;justify-content:center;gap:var(--gap-rounds)}.round-pill{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);border:1px solid var(--c-hairline);background:transparent;font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);line-height:1;color:var(--c-text-muted);transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}.round-pill.is-active{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-bg);box-shadow:var(--glow-sm) var(--c-brand-53)}.round-pill.is-done{border-color:var(--c-brand-27);color:var(--c-brand)}.moves-row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-moves)}.objective{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--c-brand);background:var(--c-surface-raised);font-family:var(--font-display);font-weight:700;font-size:var(--fs-title);line-height:1}.objective[hidden]{display:none}.moves-dots{display:flex;justify-content:center;gap:16px;min-width:0;margin-inline:auto}.moves-dots__group{display:flex;gap:6px}.move-dot{width:20px;height:20px;flex:0 0 auto;border-radius:var(--r-pill);border:1px solid var(--c-border);background:var(--c-surface-raised);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.moves-dots__group--self .move-dot.is-left{background:var(--c-brand);border-color:var(--c-brand)}.moves-dots__group--rival .move-dot.is-left{background:var(--c-accent-lime);border-color:var(--c-accent-lime)}.moves-dots__group--self.is-active .move-dot.is-left{box-shadow:var(--glow-sm) var(--c-brand-53)}.moves-dots__group--rival.is-active .move-dot.is-left{box-shadow:var(--glow-sm) #ccff1487}.turn-label{position:relative;margin:0;padding:8px 12px;overflow:hidden;border-radius:var(--r-pill);border:1px solid var(--c-border);background:var(--c-surface-raised);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-body);text-align:center;text-transform:uppercase;color:var(--c-text)}.turn-label:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--turn-progress, 0%);background:var(--c-brand);opacity:.22;transition:width var(--t-slow) var(--ease)}.turn-label.is-mine{border-color:var(--c-brand);box-shadow:var(--glow-sm) var(--c-brand-40)}.board{position:relative;min-height:0;display:grid;place-items:center}#game{width:100%;padding:var(--pad-grid);border-radius:var(--r-card);border:1px solid var(--c-brand-27);background:var(--c-grid-bg);box-shadow:var(--glow-lg) var(--c-brand-53)}#game canvas{display:block;width:100%;height:auto;border-radius:var(--r-md)}.combo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--c-brand);background:#0d2535f0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-caption);text-transform:uppercase;white-space:nowrap;color:var(--c-brand);box-shadow:var(--glow-lg) var(--c-brand-53);opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}.combo.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.bottom-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px;border-radius:var(--r-card);border:1px solid var(--c-brand-12);background:var(--c-surface)}.booster{height:40px;border-radius:var(--r-sm);border:1px solid var(--c-brand-27);background:var(--c-surface-raised);color:var(--c-brand);cursor:pointer;transition:box-shadow var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);-webkit-mask-position:center;mask-position:center}.booster:before{content:"";display:block;width:20px;height:20px;margin:0 auto;background:currentColor;-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat}.booster[data-booster=refresh]{--icon: url(/icons/refresh.svg)}.booster[data-booster=gavel]{--icon: url(/icons/gavel.svg)}.booster[data-booster=bolt]{--icon: url(/icons/bolt.svg)}.booster[data-booster=bomb]{--icon: url(/icons/bomb.svg)}.booster:not(:disabled):hover{box-shadow:var(--glow-sm) var(--c-brand-40)}.booster:disabled{opacity:.4;cursor:default}.overlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:#061218e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:overlay-in var(--t-base) var(--ease)}.overlay[hidden]{display:none}@keyframes overlay-in{0%{opacity:0}}.overlay__card{width:100%;display:grid;gap:12px;padding:24px 20px;border-radius:var(--r-panel);border:1px solid var(--c-brand-27);background:var(--c-surface-raised);box-shadow:var(--glow-xl) var(--c-brand-40);text-align:center}.overlay__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-heading);line-height:var(--lh-display);text-transform:uppercase}.overlay__meta{margin:0 0 4px;font-size:var(--fs-body);color:var(--c-text-muted)}
