:root{--bg: #0e0b17;--bg-2: #161224;--panel: #1c1730;--line: #2e2748;--ink: #f3eefe;--ink-2: #a79fc4;--pink: #ff4f9a;--cyan: #4fe3ff;--gold: #ffd166;--good: #5be38c;--bad: #6b6388;--radius: 16px;--display: "Dela Gothic One", system-ui, sans-serif;--body: "Outfit", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0}body{background:radial-gradient(1200px 600px at 85% -10%,#ff4f9a22,transparent 60%),radial-gradient(900px 500px at -10% 110%,#4fe3ff1a,transparent 60%),var(--bg);color:var(--ink);font:16px/1.5 var(--body);min-height:100vh}button,input,select{font:inherit;color:inherit}h1,h2,h3{margin:0;font-weight:400}.dim{color:var(--ink-2)}.small{font-size:.85rem}.shell{max-width:1120px;margin:0 auto;padding:0 16px 32px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0}.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.02em}.brand-mark{width:22px;height:22px;border-radius:50%;border:5px solid var(--pink);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 8px var(--cyan)}.topbar-right{display:flex;align-items:center;gap:12px}.room-chip{background:var(--panel);border:1px solid var(--line);padding:4px 12px;border-radius:999px;font-size:.9rem}.room-chip b{font-family:var(--display);letter-spacing:.12em;color:var(--cyan)}.dot{width:10px;height:10px;border-radius:50%}.dot.on{background:var(--good);box-shadow:0 0 10px var(--good)}.dot.off{background:var(--pink);animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.3}}.foot{text-align:center;color:var(--ink-2);font-size:.8rem;margin-top:48px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}.kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;color:var(--pink);margin:0 0 6px;font-weight:600}.section-title{font-family:var(--display);font-size:1.1rem;margin-bottom:12px}.btn{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:10px 18px;cursor:pointer;font-weight:600;transition:transform .08s,background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--ink-2)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--pink);border-color:var(--pink);color:#1a0b14}.btn.primary:hover:not(:disabled){background:#ff6aab}.btn.ghost{background:transparent}.btn.tiny{padding:4px 10px;font-size:.85rem;border-radius:8px}.btn.big{padding:14px 28px;font-size:1.1rem}.btn.wide{width:100%;margin-top:16px}.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink-2)}input,select{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--ink);font-size:1rem;min-width:0}input:focus,select:focus{outline:2px solid var(--cyan);outline-offset:1px}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:10;background:#3a1530;border:1px solid var(--pink);padding:10px 16px;border-radius:12px;display:flex;gap:12px;align-items:center;cursor:pointer;max-width:calc(100vw - 32px)}.toast-x{background:none;border:0;font-size:1.2rem;cursor:pointer}.home{display:grid;gap:28px}.hero{padding:24px 0 4px}.hero h1{font-family:var(--display);font-size:clamp(2rem,6vw,3.6rem);line-height:1.08}.lede{color:var(--ink-2);font-size:1.1rem;max-width:46ch}.join-panel{display:grid;gap:14px;max-width:620px}.join-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.or{color:var(--ink-2)}.code-input{width:7.5em;text-transform:uppercase;letter-spacing:.25em;font-family:var(--display);text-align:center}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.game-card{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.game-card h3{font-family:var(--display);font-size:1.2rem}.game-card p{margin:4px 0 0;color:var(--ink-2)}.game-card .meta{font-size:.8rem;color:var(--cyan)}.game-card.live{border-color:#ff4f9a66}.game-card.soon{opacity:.55}.game-art{width:96px;height:96px;border-radius:14px;background:var(--bg-2);position:relative;overflow:hidden;display:grid;place-items:center}.seek-art span{position:absolute;border-radius:50%;border:3px solid var(--pink);animation:ripple 2.4s infinite;width:20px;height:20px}.seek-art span:nth-child(2){animation-delay:.8s;border-color:var(--cyan)}.seek-art span:nth-child(3){animation-delay:1.6s}@keyframes ripple{0%{transform:scale(.3);opacity:1}to{transform:scale(4.5);opacity:0}}.soon-art{font-family:var(--display);font-size:2.4rem;color:var(--ink-2)}.board{list-style:none;padding:0;margin:0;display:grid;gap:6px;max-width:620px}.board li{display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center;background:var(--panel);padding:8px 14px;border-radius:10px}.rank{font-family:var(--display);color:var(--gold)}.num{font-variant-numeric:tabular-nums}.lobby{display:grid;grid-template-columns:280px 1fr;gap:16px}.lobby>:last-child{grid-column:1 / -1}.code-panel{text-align:center;display:grid;gap:8px;align-content:center}.big-code{font-family:var(--display);font-size:3.4rem;letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 24px #4fe3ff55}.players{list-style:none;padding:0;margin:0;display:grid;gap:8px}.players li{display:flex;align-items:center;gap:10px}.players li.away,.scoreboard li.away{opacity:.45}.players .who{flex:1}.tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--gold)}.rules{color:var(--ink-2);max-width:70ch;margin-top:0}.rules b{color:var(--ink)}.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}.stepper{display:flex;align-items:center;gap:12px}.stepper b{min-width:2.5ch;text-align:center;font-size:1.2rem;color:var(--ink)}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#120d1d;flex:none}.game{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}.scores{position:sticky;top:16px}.scoreboard{list-style:none;padding:0;margin:0;display:grid;gap:6px}.scoreboard li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;border:1px solid transparent}.scoreboard li.turn{border-color:var(--pink);background:#ff4f9a14}.scoreboard .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pts{font-family:var(--display);color:var(--gold)}.board-area{display:grid;gap:14px;min-width:0}.turn-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}.turn-banner h2{font-family:var(--display);font-size:clamp(1.1rem,3vw,1.5rem)}.turn-banner.mine{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink),0 0 30px #ff4f9a33}.timer{font-family:var(--display);font-size:2rem;color:var(--cyan);min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums}.timer.low{color:var(--pink);animation:pulse .5s infinite alternate}.guess-input{position:relative}.guess-input input{width:100%;font-size:1.15rem;padding:14px 18px}.suggest{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px #0008}.suggest li{display:flex;gap:12px;align-items:center;padding:6px 10px;border-radius:10px;cursor:pointer;line-height:1.2}.suggest li.active{background:var(--panel)}.portrait{width:48px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg-2)}.portrait.fallback{display:grid;place-items:center;font-family:var(--display);color:var(--ink-2)}.portrait.big{width:160px;height:220px;border-radius:14px;font-size:3rem}.latest{margin:0;color:var(--ink-2);animation:fadein .4s}.latest b{color:var(--ink)}@keyframes fadein{0%{opacity:0;transform:translateY(-4px)}}.guesses{list-style:none;padding:0;margin:0;display:grid;gap:8px}.guesses .empty{color:var(--ink-2);padding:20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius)}.guess{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;animation:fadein .35s;--heat: var(--bad)}.guess-main{flex:1;min-width:0;display:grid;gap:6px}.guess-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.guess-name{font-weight:700}.bar{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden}.bar span{display:block;height:100%;background:var(--heat);border-radius:99px;transition:width .6s}.clues{display:flex;flex-wrap:wrap;gap:4px}.clue{font-size:.72rem;padding:1px 7px;border-radius:6px;border:1px solid var(--line)}.clue.yes{color:var(--good);border-color:#5be38c55}.clue.no{color:var(--bad)}.clue.hint{color:var(--gold);border-color:#ffd16655}.heat{font-family:var(--display);font-size:1.4rem;min-width:2.4ch;text-align:right;color:var(--heat, var(--ink));font-variant-numeric:tabular-nums}.h0{--heat: #6b6388}.h20{--heat: #6f8cff}.h40{--heat: #4fe3ff}.h60{--heat: #ffd166}.h80{--heat: #ff8a3d}.h100{--heat: #ff4f9a}.guess.h80,.guess.h100{border-color:color-mix(in srgb,var(--heat) 45%,var(--line))}.reveal{display:flex;gap:24px;align-items:center;animation:fadein .5s;border-color:var(--pink)}.reveal-name{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.6rem);margin:4px 0}.reveal .btn{margin-top:12px}.final{text-align:center;display:grid;gap:16px;justify-items:center}.final-title{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.4rem);color:var(--gold)}.podium{list-style:none;padding:0;margin:0;display:grid;gap:6px;width:min(420px,100%)}.podium li{display:flex;align-items:center;gap:10px;background:var(--bg-2);padding:8px 14px;border-radius:10px}.podium .who{flex:1;text-align:left}.history{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.hist{display:flex;gap:10px;align-items:center;text-align:left;background:var(--bg-2);padding:8px 12px;border-radius:12px}@media(max-width:760px){.lobby,.game{grid-template-columns:1fr}.scores{position:static}.reveal{flex-direction:column;text-align:center}.game-card{grid-template-columns:72px 1fr}.game-art{width:72px;height:72px}.guess .clues{display:none}.guess.h60 .clues,.guess.h80 .clues{display:flex}}
