:root{color-scheme:dark;--ink: #eef1e6;--muted: #b2c2bd;--gold: #e8c98a;--gold-hot: #ffd98f;--mint: #a6d8bd;--glass: rgba(14, 26, 38, .82);--glass-edge: rgba(232, 201, 138, .35);--display: "Cormorant Garamond", Georgia, serif;--sans: "Alegreya Sans", system-ui, sans-serif;--caps: "Alegreya Sans SC", var(--sans);--danger: #ff5b45}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0f1b28;color:var(--ink);font-family:var(--sans)}canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}button{font:600 15px var(--caps);letter-spacing:.06em;color:var(--ink);background:#142634e6;border:1px solid var(--glass-edge);border-radius:6px;padding:10px 16px;cursor:pointer}button:hover:not(:disabled){border-color:var(--gold);color:#fff}button:disabled{opacity:.45;cursor:default}button.primary{background:linear-gradient(180deg,#e9c783,#b98d45);color:#1d1406;border-color:#f7dc9f}button.primary:hover:not(:disabled){background:linear-gradient(180deg,#f5d898,#c99b52);color:#120c02}button.big{font-size:22px;padding:14px 26px;width:100%}button.link{background:none;border:none;padding:0;color:var(--gold);text-decoration:underline;font:inherit}input{font:16px var(--sans);color:var(--ink);background:#08121ae6;border:1px solid var(--glass-edge);border-radius:6px;padding:9px 11px;min-width:0}.hidden{display:none!important}select{font:16px var(--sans);color:var(--ink);background:#08121ae6;border:1px solid var(--glass-edge);border-radius:6px;padding:8px}.panel{background:var(--glass);border:1px solid var(--glass-edge);border-radius:10px;padding:18px;backdrop-filter:blur(6px);box-shadow:0 10px 40px #00000059}.row{display:flex;gap:8px;margin-top:10px}.row>*{flex:1}.status{min-height:1.2em;color:var(--muted);font-size:14px;margin:10px 0 0}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:16px;z-index:5;background:radial-gradient(ellipse at center,#0a141e1a,#0a121c8c)}.brand h1{font:700 clamp(44px,8vw,86px)/.95 var(--display);margin:0;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.5)}.brand h1 span{color:var(--gold);font-style:italic}.tagline{text-align:center;font:italic 600 22px var(--display);color:var(--muted);margin:6px 0 0}.menu-panel{width:min(430px,100%)}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;font:14px var(--caps);color:var(--muted)}.controls-hint{font-size:13px;color:var(--muted);text-align:center;max-width:720px}.code{font-family:monospace;color:var(--gold);letter-spacing:.15em}#roster{list-style:none;padding:0;margin:12px 0}#roster li{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}.boot{position:fixed;inset:0;display:grid;place-items:center;font:italic 600 26px var(--display);background:#0f1b28;z-index:20}#labels{position:fixed;inset:0;pointer-events:none;z-index:2}.player-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;font:600 13px var(--caps);text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.6);white-space:nowrap;will-change:transform}.player-label.self b{color:var(--gold-hot)}.player-label .inst{font:700 17px var(--sans)}.player-label .inst.hot{animation:pulse .6s ease-in-out infinite alternate}.player-label .lives{font-size:9px;letter-spacing:2px;color:#ffdca0}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.18)}}#hud{position:fixed;inset:0;pointer-events:none;z-index:3}#hud .top{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:center}.pill{background:var(--glass);border:1px solid var(--glass-edge);border-radius:999px;padding:6px 16px;font:700 22px var(--sans)}.pill.small{font-size:14px;color:var(--muted)}.pill.sudden{color:var(--danger);border-color:var(--danger)}.spectating{position:absolute;top:58px;left:50%;transform:translate(-50%);padding:6px 14px;border:1px solid var(--glass-edge);border-radius:8px;background:var(--glass);color:var(--gold-hot);font:600 16px var(--caps);white-space:nowrap}.help-game{position:absolute;top:12px;left:14px;width:38px;height:38px;padding:0;border-radius:50%;pointer-events:auto;font:700 22px var(--display)}.banner{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);font:700 clamp(40px,9vw,96px) var(--display);color:var(--gold-hot);text-shadow:0 4px 30px rgba(0,0,0,.6);pointer-events:none}#toasts{position:absolute;top:90px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.toast{background:var(--glass);border:1px solid var(--glass-edge);border-radius:8px;padding:6px 14px;font:600 16px var(--caps);animation:toast 2.6s forwards}.toast.warn{border-color:var(--danger);color:#ffd0c4}.toast.combo{border-color:var(--gold);color:var(--gold-hot);font-size:20px}@keyframes toast{0%{opacity:0;transform:translateY(-6px)}10%,80%{opacity:1;transform:none}to{opacity:0}}#feed{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:14px}#feed div{background:var(--glass);border-radius:6px;padding:4px 10px;animation:toast 6s forwards}#feed b{color:var(--gold-hot)}#hud .bottom{position:absolute;bottom:14px;left:14px;right:14px;display:flex;align-items:flex-end;gap:14px}.self{display:flex;flex-direction:column;align-items:center;min-width:118px;padding:10px 14px}.instability{font:700 44px/1 var(--sans)}.lives{font-size:16px;letter-spacing:5px;color:#ffd98f;margin-top:4px}.spellbar{position:relative;display:flex;gap:8px;margin:0 auto}.slot{position:relative;width:62px;height:62px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-edge);display:grid;place-items:center;pointer-events:auto}.slot:focus-visible{outline:2px solid var(--gold-hot);outline-offset:2px}.slot[data-help]:hover:after,.slot[data-help]:focus:after{content:attr(data-help);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%);width:min(260px,75vw);padding:9px 11px;border:1px solid var(--gold);border-radius:8px;background:#0a141ef5;color:var(--ink);text-align:left;white-space:normal;font:15px/1.25 var(--sans);z-index:12;box-shadow:0 8px 24px #00000073}.slot .icon{font-size:26px}.slot .key{position:absolute;top:2px;left:5px;font:700 11px var(--caps);color:var(--muted)}.slot .cd{position:absolute;inset:0;border-radius:inherit;background:conic-gradient(rgba(0,0,0,.62) var(--p, 0%),transparent 0);pointer-events:none}.slot .cd-text{position:absolute;font:700 18px var(--sans);text-shadow:0 1px 3px #000}.slot.ultimate{border-color:var(--gold)}.slot.ultimate .fill{position:absolute;left:0;bottom:0;width:100%;height:var(--u, 0%);background:linear-gradient(0deg,#ff963c8c,#ffd27840)}.slot.ultimate.ready{box-shadow:0 0 18px #ffbe5acc}.slot.dodge{width:46px;height:46px;align-self:center}.net{font-size:11px;color:var(--muted);min-width:118px;text-align:right}#edge-flash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 #fff0;transition:box-shadow .35s}#edge-flash.on{box-shadow:inset 0 0 120px 20px #fff0c8bf;transition:none}.results{width:min(620px,100%);text-align:center}.results h2{font:700 44px var(--display);margin:0;color:var(--gold-hot)}.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:18px 0 6px}.podium-place{flex:1;min-width:0;padding:10px 6px;border:1px solid var(--glass-edge);border-radius:8px 8px 3px 3px;background:#e8c98a1f}.podium-place:first-child{min-height:72px}.podium-place:nth-child(2){min-height:92px;background:#e8c98a3d;border-color:var(--gold)}.podium-place:last-child{min-height:58px}.podium-place b{display:block;color:var(--gold-hot);font:700 22px var(--display)}.podium-place span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}#scoreboard{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}#scoreboard th{font:600 12px var(--caps);color:var(--muted);text-align:left;padding:4px 6px}#scoreboard td{padding:6px;border-top:1px solid rgba(255,255,255,.06);text-align:left}#scoreboard tr.me td{color:var(--gold-hot)}.touch{position:absolute;inset:0;pointer-events:none}.stick{position:absolute;left:24px;bottom:130px;width:130px;height:130px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#0a141e4d;pointer-events:auto;touch-action:none}.stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:#e8c98a8c}.touch-buttons{position:absolute;right:18px;bottom:120px;display:grid;grid-template-columns:repeat(3,62px);gap:10px;pointer-events:auto}.touch-buttons button{width:62px;height:62px;border-radius:50%;font-size:22px;padding:0;touch-action:none}.touch-buttons .t-primary{grid-row:span 2;height:134px;border-radius:30px}@media(max-width:700px){.slot{width:48px;height:48px}.slot .icon{font-size:20px}.instability{font-size:32px}.self{min-width:90px}.net{display:none}}.book{width:min(860px,100%);max-height:92vh;overflow:auto}.book h2{font:700 36px var(--display);margin:0 0 8px;color:var(--gold-hot)}.book h3{font:600 14px var(--caps);color:var(--muted);margin:14px 0 6px}.book-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.book-choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:10px;font-family:var(--sans);letter-spacing:0}.book-choice .icon{font-size:24px}.book-choice b{font:700 15px var(--sans)}.book-choice small{font:12px var(--sans);color:var(--muted);line-height:1.25}.book-choice.chosen{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 16px #e8c98a40}.help-panel{width:min(920px,100%);max-height:92vh;overflow:auto}.help-heading{position:sticky;top:-18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-18px -18px 0;padding:18px 18px 8px;background:#0e1a26fa}.help-heading h2{font:700 42px var(--display);color:var(--gold-hot);margin:0}.help-heading small{color:var(--muted);font-size:13px}.help-heading button{padding:4px 10px}.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.help-grid h3{font:600 17px var(--caps);color:var(--gold);margin:16px 0 4px}.help-grid p{margin:0 0 9px;line-height:1.35}.help-grid ul{list-style:none;padding:0;margin:0}.help-grid li{display:grid;grid-template-columns:116px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.25}.help-grid li b{color:var(--gold-hot)}.help-grid .help-note{margin-top:8px;color:var(--muted);font-size:14px}.help-panel>.help-note{margin:14px 0 0;color:var(--muted);font-size:14px}@media(max-width:650px){.help-grid{grid-template-columns:1fr}.help-grid li{grid-template-columns:100px 1fr}}.discoveries{list-style:none;padding:0;margin:0;display:grid;gap:4px}.discoveries li{color:var(--muted)}.discoveries li.found{color:var(--gold-hot)}.discoveries small{color:var(--muted);margin-left:6px}.slot.ultimate .cd-text{position:absolute;bottom:3px;font-size:12px}.look-row{align-items:center;margin:0 0 12px}.look-row button{flex:0 0 44px}.look-name{text-align:center;font:600 17px var(--display);color:var(--gold)}.screen{justify-content:safe center;overflow-y:auto}@media(max-height:640px){.screen{gap:10px;padding:10px 16px}.brand h1{font-size:clamp(2rem,9vh,3.5rem)}.tagline{font-size:1rem;margin-top:2px}.menu-panel{padding:14px 16px}.menu-panel .field{margin-bottom:8px}.menu-panel button.big{padding:10px 26px}.controls-hint,#bot-difficulty-menu small{display:none}}@media(max-height:520px){.tagline{display:none}}.pip-card{display:none}@media(max-height:240px){#menu{background:#0a121cd1}#menu>:not(.pip-card){display:none!important}#menu .pip-card{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.pip-card b{font:700 1.5rem/1 var(--display)}.pip-card b span{color:var(--gold);font-style:italic}.pip-card small{font-size:.8125rem;color:var(--muted)}}