:root{--bg: #0d1017;--bg-soft: #151a24;--panel: #1b2130;--line: #2a3243;--text: #eef1f7;--muted: #98a2b8;--accent: #ff9f1c;--radius: 16px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;background:radial-gradient(120% 80% at 50% 0%,#1a2233 0%,var(--bg) 60%),var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;overscroll-behavior:none}body.playing{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:manipulation}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}.screen{min-height:100dvh;padding:calc(12px + var(--safe-top)) 14px calc(12px + var(--safe-bottom));display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}.screen--center{align-items:center;justify-content:center}.muted{color:var(--muted)}.small{font-size:13px}.error{color:#ff8189;font-size:14px;margin:0}.home__hero{text-align:center;padding:18px 0 4px}.home__title{margin:0;font-size:clamp(34px,11vw,52px);letter-spacing:-.03em;background:linear-gradient(95deg,#ff9f1c,#ff5ea8 40%,#2ec4ff 80%);-webkit-background-clip:text;background-clip:text;color:transparent}.home__title span{opacity:.85}.home__tagline{margin:10px auto 0;max-width:34ch;color:var(--muted);font-size:15px;line-height:1.45}.home__menu{display:flex;flex-direction:column;gap:12px;margin-top:auto;margin-bottom:auto}.home__rules{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;color:var(--muted);font-size:14px}.home__rules summary{cursor:pointer;color:var(--text);font-weight:600}.home__rules ol{margin:10px 0 0;padding-left:18px;line-height:1.5}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.field input{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);font-size:16px}.field input:focus-visible{outline:2px solid var(--accent)}.code-input{text-transform:uppercase;letter-spacing:.4em;font-weight:700;text-align:center;font-size:26px!important}.settings{display:flex;flex-direction:column;gap:10px}.choice{display:flex;align-items:center;justify-content:space-between;gap:10px}.choice__label{font-size:14px;color:var(--muted)}.choice__options{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.chip{min-width:44px;padding:8px 10px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);font-size:14px}.chip--active{background:var(--accent);border-color:var(--accent);color:#201404;font-weight:700}.primary-button,.secondary-button,.ghost-button{border-radius:14px;padding:14px 18px;font-weight:700;font-size:16px;transition:transform .08s ease}.primary-button{background:linear-gradient(120deg,#ff9f1c,#ff7a3c);color:#22150a}.secondary-button{background:var(--bg-soft);border:1px solid var(--line);color:var(--text)}.ghost-button{color:var(--muted);padding:10px 12px;font-weight:600}.primary-button:active,.secondary-button:active{transform:scale(.98)}.primary-button:disabled,.secondary-button:disabled{opacity:.45;cursor:not-allowed}.big{padding:18px;font-size:17px}.lobby__head{display:flex;justify-content:space-between;align-items:center}.share{background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:8px;justify-items:center;text-align:center}.share__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.share__code{font-size:44px;letter-spacing:.25em;font-weight:800;line-height:1.1;text-indent:.25em;-webkit-user-select:all;user-select:all}.share__buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}.share__buttons button{flex:1 1 120px;padding:12px 10px;font-size:15px}.share__url{display:block;width:100%;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text);word-break:break-all;user-select:all;-webkit-user-select:all}.share__hint{margin:0;font-size:12px;color:var(--muted)}.invite{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,var(--bg-soft));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);font-size:14px;text-align:center}.invite strong{letter-spacing:.2em}.lobby__players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.lobby__seat{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.lobby__seat--empty{opacity:.5;border-style:dashed}.lobby__seat--you{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}.lobby__seat-dot{width:12px;height:12px;border-radius:50%}.lobby__seat-name{flex:1;font-weight:600}.lobby__seat-corner{font-size:12px;color:var(--muted);text-transform:capitalize}.lobby__kick{color:var(--muted);padding:4px 8px}.lobby__actions{display:flex;gap:10px}.lobby__actions button{flex:1}.game{gap:8px;height:100dvh;overflow:hidden}.game__top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);flex:0 0 auto}.game__round{font-weight:700;color:var(--text)}.game__code{color:var(--muted);font-weight:500}.game__status{font-size:12px}.game__status--online{color:#31d16b}.game__status--reconnecting{color:#f5c518;animation:pulse 1s infinite}.game__opponents{display:flex;gap:8px;flex:0 0 auto}.game__opponents>*{flex:1}.game__opponents--duel{transform:rotate(180deg)}.game__board{display:grid;place-items:center;min-height:0;flex:1 1 auto;container-type:size}.board{display:grid;gap:2px;padding:6px;background:#0a0d13;border:1px solid var(--line);border-radius:14px;box-shadow:inset 0 0 40px #0009,0 0 0 2px color-mix(in srgb,var(--turn-accent, transparent) 60%,transparent);transition:box-shadow .22s ease;width:100%;max-width:min(100%,62dvh);width:min(100cqw,100cqh * var(--cols) / var(--rows));height:min(100cqh,100cqw * var(--rows) / var(--cols));max-width:100%;max-height:100%}.tile{position:relative;border-radius:3px;padding:0;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}.tile--owned{box-shadow:inset 0 0 0 2px var(--accent),0 0 6px #0006;border-radius:5px}.tile--mine{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 10px color-mix(in srgb,var(--accent) 55%,transparent)}.tile--captured{animation:pop .32s ease;z-index:2}.tile--pickable:active{transform:scale(.88)}.tile__crown{position:absolute;top:32%;right:32%;bottom:32%;left:32%;border-radius:50%;background:var(--accent);opacity:.75}.tile--mine .tile__crown{top:26%;right:26%;bottom:26%;left:26%;background:#fff;opacity:.92;box-shadow:0 0 0 1.5px var(--accent)}@keyframes pop{0%{transform:scale(.55);filter:brightness(1.9)}60%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes pulse{50%{opacity:.4}}.game__turn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--turn-accent) 18%,var(--panel));border:1.5px solid color-mix(in srgb,var(--turn-accent) 55%,transparent);font-size:16px;font-weight:700;flex:0 0 auto}.game__turn--mine{background:color-mix(in srgb,var(--turn-accent) 30%,var(--panel));border-color:var(--turn-accent);box-shadow:0 0 18px color-mix(in srgb,var(--turn-accent) 35%,transparent);animation:breathe 2.2s ease-in-out infinite}.game__turn-dot{width:12px;height:12px;border-radius:50%;background:var(--turn-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--turn-accent) 25%,transparent);flex:0 0 auto}.game__turn-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game__last{color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}.game__hint{margin:0;text-align:center;color:var(--muted);font-size:12px}@keyframes breathe{50%{box-shadow:0 0 26px color-mix(in srgb,var(--turn-accent) 55%,transparent)}}.game__bottom{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}.you-pill{background:var(--text);color:var(--bg);font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:999px;flex:0 0 auto}.hud__turn-pill{background:var(--accent);color:#1c1204;font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:999px;flex:0 0 auto}.hud__corner{font-size:11px;color:var(--muted);text-transform:capitalize;margin-left:auto}.hud{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:6px}.hud--turn{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}.hud--you{border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel))}.hud--flipped{transform:rotate(180deg)}.hud--away{opacity:.6}.hud__row{display:flex;align-items:center;gap:8px}.hud__chip{width:16px;height:16px;border-radius:5px;border:1px solid rgba(255,255,255,.25)}.hud__name{flex:1;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud__wins{color:var(--accent);font-size:13px;letter-spacing:.1em}.hud__row--stats{align-items:baseline;gap:6px}.hud__tiles{font-size:22px;line-height:1}.hud__target,.hud__away-tag{font-size:12px;color:var(--muted)}.hud__timer{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}.hud__bar{height:6px;border-radius:999px;background:var(--bg-soft);overflow:hidden}.hud__bar-fill{height:100%;background:var(--accent);border-radius:inherit;transition:width .26s ease}.hud--compact{padding:7px 9px;gap:4px}.hud--compact .hud__name{font-size:12px}.hud--compact .hud__chip{width:12px;height:12px;border-radius:4px}.hud--compact .hud__tiles{font-size:15px}.hud--compact .hud__wins,.hud--compact .hud__target{display:none}.hud--compact .hud__turn-pill{font-size:9px;padding:1px 5px;letter-spacing:.04em}.hud--compact .hud__bar{height:4px}.palette{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}.swatch{height:clamp(44px,8.5dvh,66px);border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:inset 0 -4px #00000038,0 3px 10px #00000059;transition:transform .08s ease,filter .15s ease}.palette--waiting{opacity:.55}.swatch:active:not(:disabled){transform:scale(.94)}.swatch:disabled{cursor:not-allowed}.swatch--locked{filter:grayscale(.55) brightness(.6);box-shadow:inset 0 0 0 3px var(--holder)}.swatch__lock{font-size:12px;letter-spacing:.05em}.swatch__gain{font-variant-numeric:tabular-nums}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#06080dc7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s ease;z-index:10}.overlay__card{width:min(420px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:14px;text-align:center}.overlay__title{margin:0;font-size:24px}.overlay__subtitle{margin:0;color:var(--muted);font-size:14px}.overlay__actions{display:flex;gap:10px;flex-direction:column}.scoreboard{list-style:none;margin:0;padding:0;display:grid;gap:6px}.scoreboard__row{display:flex;align-items:center;gap:8px;background:var(--bg-soft);border-radius:10px;padding:10px 12px;font-size:14px}.scoreboard__dot{width:10px;height:10px;border-radius:50%}.scoreboard__name{flex:1;text-align:left;font-weight:600}.scoreboard__wins{color:var(--accent);font-weight:700}.scoreboard__points{color:var(--muted);font-size:12px;min-width:68px;text-align:right}@keyframes fade{0%{opacity:0}}.toast{position:fixed;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translate(-50%);background:#35202a;border:1px solid #6b2c3a;color:#ffd7dc;padding:10px 16px;border-radius:999px;font-size:14px;z-index:20;animation:fade .16s ease}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(orientation:landscape)and (max-height:560px){.screen.game{display:grid;max-width:none;grid-template-columns:minmax(0,1fr) minmax(210px,34%);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"board top" "board opponents" "board turn" "board bottom";column-gap:12px;row-gap:8px}.game__top{grid-area:top}.game__opponents{grid-area:opponents}.game__board{grid-area:board;height:100%}.game__turn{grid-area:turn;padding:8px 10px;font-size:14px}.game__bottom{grid-area:bottom;overflow-y:auto}.game__opponents--duel,.hud--flipped{transform:none}.palette{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}.hud__bar{height:5px}}