.room-overlay{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse 80% 70% at 50% 20%,rgba(255,200,230,.45),transparent 70%),#50376e80;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}.room-card{width:min(400px,100%);padding:32px 30px 26px;text-align:center}.room-card h2{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--pink);margin-bottom:20px}.room-card .field{text-align:left}.room-or{margin:20px 0 12px;font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:10px}.room-or:before,.room-or:after{content:"";flex:1;height:1.5px;background:#a78bfa38}.room-join{display:flex;gap:10px}.room-code-input{flex:1;text-align:center;letter-spacing:5px;text-transform:uppercase;font-weight:700}.room-join .btn{flex:0 0 auto;padding-inline:22px}.room-status{margin-top:14px;font-size:13px;min-height:20px}.room-status.is-error{color:#c9455b;font-weight:600}.rounds-pick{display:flex;gap:8px}.rounds-opt{flex:1;display:grid;gap:1px;padding:10px 4px;border:2px solid transparent;border-radius:var(--r-sm);background:#a78bfa1a;color:var(--ink-soft);font:inherit;cursor:pointer;transition:transform .28s var(--spring),background .2s,border-color .2s,color .2s}.rounds-opt strong{font-size:19px;font-weight:700}.rounds-opt small{font-size:11px}.rounds-opt:hover{background:#a78bfa33;transform:translateY(-2px)}.rounds-opt.on{border-color:var(--pink);background:#fff;color:var(--pink-deep);box-shadow:0 6px 16px -8px #ff8db8e6}.rounds-note{margin-top:8px;font-size:12px;text-align:center}.score-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fffc;border:1.5px solid var(--border);font-size:13px;font-weight:700}.score-chip b{color:var(--pink-deep);font-variant-numeric:tabular-nums}.score-chip small{font-weight:600;color:var(--ink-soft)}.game-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px clamp(14px,3vw,28px)}.code-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#a78bfa24;border:1.5px solid var(--border);font-weight:700;letter-spacing:3px;color:var(--lav);cursor:pointer;transition:background .2s,transform .28s var(--spring)}.code-chip:hover{background:#a78bfa3d;transform:translateY(-1px)}.code-chip small{letter-spacing:0;font-weight:600;color:var(--ink-soft)}.seat-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#ffffffbf;border:1.5px solid var(--border);font-size:13px;font-weight:600}.seat-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--mint)}.seat-chip.waiting .dot{background:var(--butter)}.seat-chip.is-you{border-color:var(--pink)}.turn-banner{margin:0 auto;padding:11px 22px;border-radius:999px;font-weight:700;background:#ffffffd9;border:1.5px solid var(--border);box-shadow:var(--shadow-sm)}.turn-banner.is-mine{background:linear-gradient(135deg,#ffa8c8,var(--pink) 45%,#c9a4ff);color:#fff;border:none}.wait-note{display:grid;gap:8px;justify-items:center;padding:30px 20px;color:var(--ink-soft);text-align:center}.wait-note .pulse{animation:wait-pulse 1.7s ease-in-out infinite}@keyframes wait-pulse{50%{opacity:.45}}.result-card{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:20px;background:#50376e8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.result-inner{width:min(400px,100%);padding:34px 30px 28px;text-align:center;display:grid;gap:12px;justify-items:center}.result-inner .result-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:#fff;background:linear-gradient(140deg,#ffb3c9,var(--lav));box-shadow:0 12px 28px -12px #a78bfaf2}.result-inner h2{font-size:26px;font-weight:700;color:var(--pink)}.result-inner p{color:var(--ink-soft)}.result-inner .reveal{font-family:var(--hand);font-size:24px;color:var(--ink)}.conn-pill{position:fixed;left:50%;bottom:18px;z-index:400;max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink);background:#fffffff2;border:1.5px solid var(--border);box-shadow:var(--shadow-lg);transform:translate(-50%,140%);opacity:0;pointer-events:none;transition:transform .35s var(--spring),opacity .25s}.conn-pill.show{transform:translate(-50%);opacity:1}.conn-pill.is-bad{background:#fff1f3;border-color:#ffb3c0;color:#b23a52}.room-bot{background:#ffffffb3;border:1.5px dashed var(--border-strong);color:var(--ink)}.room-bot small{font-weight:500;color:var(--ink-soft);margin-left:4px}@media(max-width:560px){.conn-pill{bottom:74px}}.room-overlay{background:#fdf0f2d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.room-card{position:relative;animation:fp-pop .5s var(--spring) both}.room-card h2{font-family:var(--display);font-size:30px;color:var(--ink)}.room-card h2:after{content:"";display:block;width:70px;height:8px;margin:6px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 8'%3E%3Cpath d='M2 5c8-5 14 3 22-1s14-4 22 0 14 3 22-2' fill='none' stroke='%23ec4f86' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain}.room-doodle{display:block;width:150px;margin:-6px auto 4px}.room-or:before,.room-or:after{background:var(--ink);height:2px;opacity:.2}.rounds-opt{border:2px solid var(--ink);background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}.rounds-opt:hover{background:var(--butter-soft);transform:translate(-1px,-2px)}.rounds-opt.on{background:var(--pink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-sm)}.rounds-opt.on small{color:#ffffffe6}.room-bot{background:var(--lav-soft);border-style:solid}.code-chip{background:var(--butter);border:2px solid var(--ink);color:var(--ink);font-family:ui-monospace,Cascadia Mono,Consolas,monospace;box-shadow:var(--shadow-sm)}.code-chip:hover{background:var(--butter);transform:translate(-1px,-2px)}.code-chip small{font-family:var(--font);color:var(--ink);opacity:.7}.seat-chip{background:#fff;border:2px solid var(--ink);font-family:var(--display);font-weight:500}.seat-chip.is-you{background:var(--pink-soft);border-color:var(--ink)}.seat-chip .dot{border:1.5px solid var(--ink);animation:fp-pulse 2s infinite}.seat-chip.waiting .dot{animation:none}.score-chip{background:var(--ink);border:2px solid var(--ink);color:#fff;font-family:var(--display)}.score-chip b{color:var(--butter)}.score-chip small{color:#ffffffb3}.turn-banner{border:2.5px solid var(--ink);background:#fff;box-shadow:var(--shadow-sm);font-family:var(--display);font-weight:600;font-size:17px}.turn-banner.is-mine{background:var(--pink);color:#fff;border:2.5px solid var(--ink);animation:fp-wiggle 2.4s ease-in-out infinite}.result-card{background:#fdf0f2c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.result-inner{animation:fp-pop .45s var(--spring) both}.result-inner .result-mark{background:var(--butter);color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);animation:fp-wiggle 1.6s ease-in-out infinite}.result-inner h2{font-family:var(--display);color:var(--ink);font-size:28px}.result-inner .reveal{color:var(--pink-deep)}.conn-pill{border:2px solid var(--ink);box-shadow:var(--shadow-sm)}.room-bot{flex-wrap:wrap;row-gap:0;padding-block:10px}.room-bot small{flex-basis:100%;margin:0;font-family:var(--hand);font-size:17px}.room-together{flex-wrap:wrap;row-gap:2px;animation:together-glow 2.2s ease-in-out infinite}@keyframes together-glow{50%{box-shadow:3px 3px 0 var(--ink),0 0 0 6px #ec4f8640}}.room-together small{flex-basis:100%;font-family:var(--hand);font-size:17px;font-weight:500;opacity:.9}.together-avs{display:inline-flex;margin-right:4px}.together-avs i{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:12px}.together-avs i+i{margin-left:-6px;background:var(--lav-soft)}.together-avs i.on{box-shadow:0 0 0 2px var(--mint)}.room-overlay{overflow-y:auto}.room-split{display:flex;gap:22px;align-items:flex-start;justify-content:center;width:min(860px,100%);margin:auto}.room-split .room-card{flex:0 1 400px}.howto{flex:0 1 400px;display:grid;align-content:start;gap:12px;padding:24px 24px 20px;background:var(--paper-2);transform:rotate(-1deg);animation:fp-pop .5s .05s var(--spring) both;--tilt: -1deg}.howto-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.howto-line{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.2}.howto-illo{display:grid;place-items:center;min-height:116px;padding:14px 10px;border:2px dashed var(--border-strong);border-radius:14px;background:#fff}.howto-steps{list-style:none;display:grid;gap:10px}.howto-steps li{display:flex;gap:11px;align-items:flex-start;animation:fp-rise .45s var(--ease) both;animation-delay:var(--d)}.howto-steps .n{display:grid;place-items:center;width:26px;height:26px;flex:none;border:2px solid var(--ink);border-radius:50%;background:var(--butter);font-family:var(--display);font-size:14px}.howto-steps li:nth-child(2) .n{background:var(--pink);color:#fff}.howto-steps li:nth-child(3) .n{background:var(--lav);color:#fff}.howto-steps .txt{display:grid;gap:1px;font-size:13px;line-height:1.45;color:var(--ink-soft)}.howto-steps .eg b{color:var(--ink)}.howto-steps strong{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink)}.howto-steps u{text-decoration-color:var(--pink);text-decoration-thickness:2px}.ht-tiles{display:inline-flex;gap:3px}.ht-tiles i{display:grid;place-items:center;width:22px;height:24px;border:1.8px solid var(--ink);border-radius:5px;background:#fff;font-family:var(--display);font-style:normal;font-weight:600;font-size:12px}.ht-tiles i.hl{background:var(--butter)}.ht-tiles i.pink{background:var(--pink);color:#fff}.ht-tiles i.blank{color:transparent}.ht-tiles i.g{background:var(--mint);color:#fff}.ht-tiles i.y{background:var(--orange);color:#fff}.ht-tiles i.q{background:var(--lav-soft);color:var(--lav)}.howto-illo b{font-family:var(--display);color:var(--ink-soft)}.ht-ladder{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}.ht-ladder>*{animation:fp-pop .4s var(--spring) both}.ht-ladder>*:nth-child(2){animation-delay:.25s}.ht-ladder>*:nth-child(3){animation-delay:.35s}.ht-ladder>*:nth-child(4){animation-delay:.5s}.ht-ladder>*:nth-child(5){animation-delay:.6s}.ht-ladder>*:nth-child(6){animation-delay:.75s}.ht-ladder>*:nth-child(7){animation-delay:.85s}.ht-ladder>*:nth-child(8){animation-delay:1s}.ht-ladder>*:nth-child(9){animation-delay:1.1s}.ht-jinx{display:flex;align-items:center;gap:14px}.ht-grid3{display:grid;grid-template-columns:repeat(3,22px);gap:3px}.ht-grid3 i{display:grid;place-items:center;height:22px;border:1.8px solid var(--ink);border-radius:5px;background:#fff;font-style:normal;font-weight:700;font-size:11px}.ht-lists{display:grid;gap:4px;font-size:12.5px;font-weight:700}.ht-lists small{display:inline-block;width:38px;font-weight:600;color:var(--ink-soft)}.ht-lists s{color:var(--pink);text-decoration-thickness:2px}.ht-lists em{font-size:19px;color:var(--pink);transform:rotate(-4deg);animation:fp-wiggle 1.4s ease-in-out infinite}.ht-hang{display:flex;align-items:center;gap:14px}.ht-hang svg{width:56px;height:52px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}.ht-hang>span{display:grid;gap:6px}.ht-hang small{font-size:12px;color:var(--ink-soft)}.ht-hang .ok{color:var(--mint)}.ht-hang .no{color:var(--pink);text-decoration:line-through}.ht-bomb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.ht-bomb-ball{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--butter);font-family:var(--display);font-weight:600;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--ink);animation:fp-shake 1.2s infinite}.ht-say{padding:5px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--pink-soft);font-weight:700;font-size:13px}.ht-say.them{background:var(--lav-soft)}.ht-say u{text-decoration-color:var(--pink);text-decoration-thickness:2px}.ht-duel{display:grid;justify-items:center;gap:10px}.ht-duel .ht-tiles i{width:28px;height:30px;font-size:14px}.ht-legend{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--ink-soft);font-weight:600;flex-wrap:wrap;justify-content:center}.ht-legend i{width:12px;height:12px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;margin-left:6px}.ht-legend i.g{background:var(--mint)}.ht-legend i.y{background:var(--orange)}.ht-code{display:grid;gap:8px}.ht-row{display:flex;align-items:center;gap:8px}.ht-row small{width:44px;font-size:11px;font-weight:700;color:var(--ink-soft);text-align:right}.ht-pegs{display:flex;gap:4px}.ht-pegs i,.ht-peg{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);vertical-align:-1px}.ht-pegs i.hit,.ht-peg.hit{background:var(--pink)}.ht-pegs i.near,.ht-peg.near{background:#fff;box-shadow:inset 0 0 0 2px var(--lav)}.ht-pegs i{animation:fp-pop .3s var(--spring) both}.ht-pegs i:nth-child(2){animation-delay:.15s}.ht-pegs i:nth-child(3){animation-delay:.3s}.ht-sea{display:grid;grid-template-columns:repeat(8,16px);gap:3px}.ht-sea i{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:3px;background:#dceffb}.ht-sea i.ship{background:var(--lav)}.ht-sea i.hit{background:var(--pink);animation:fp-twinkle 1.2s infinite}.ht-sea i.miss{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%236d6280' stroke-width='1.6'/%3E%3C/svg%3E")}.ht-dots svg{width:120px;height:76px;overflow:visible}.ht-dots circle{fill:var(--ink)}.ht-dots .ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}.ht-dots .new{stroke:var(--pink);stroke-dasharray:25;stroke-dashoffset:25;animation:fp-draw .8s .5s var(--ease) forwards}.ht-dots text{font-family:var(--hand);font-size:12px;fill:var(--pink);text-anchor:middle;opacity:0;animation:fp-rise .4s 1.2s forwards}.ht-guess{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.ht-q,.ht-a{padding:5px 11px;border:2px solid var(--ink);border-radius:12px;font-weight:700;font-size:13px;background:#fff}.ht-a{background:var(--pink-soft)}.ht-faces{display:flex;gap:5px}.ht-faces .f{position:relative;width:24px;height:30px;border:1.8px solid var(--ink);border-radius:6px;background:var(--butter-soft);transition:transform .4s}.ht-faces .f:before{content:"";position:absolute;top:5px;left:6px;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);background:#fff}.ht-faces .f.gl:after{content:"";position:absolute;top:9px;left:4px;width:14px;height:3px;border:1.5px solid var(--ink);border-radius:2px}.ht-faces .down{animation:ht-flipdown 2.6s ease-in-out infinite}.ht-faces .down:after{box-shadow:none}@keyframes ht-flipdown{0%,30%{filter:none;opacity:1}45%,90%{filter:grayscale(1);opacity:.3;transform:translateY(3px)}to{filter:none;opacity:1}}.ht-clue{display:flex;align-items:center;gap:12px}.ht-cards{display:flex;gap:4px}.ht-cards i{display:grid;place-items:center;width:26px;height:34px;border:2px solid var(--ink);border-radius:5px;background:linear-gradient(150deg,var(--lav),var(--pink));color:#fff;font-style:normal;font-weight:700}.ht-ask{font-size:12.5px;line-height:1.6}.ht-show{display:inline-block;margin-top:3px;padding:2px 9px;border:1.5px solid var(--ink);border-radius:999px;background:var(--lav-soft);font-weight:700;animation:fp-pop .4s .8s var(--spring) both}.ht-draw{display:flex;align-items:center;gap:12px}.ht-draw svg{width:70px;height:52px;fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:fp-draw 1.6s var(--ease) forwards}.ht-bubbles{display:grid;gap:4px}.ht-bubbles i{padding:3px 10px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font-style:normal;font-size:12px;font-weight:700;animation:fp-pop .3s var(--spring) both}.ht-bubbles i:nth-child(2){animation-delay:.6s}.ht-bubbles i:nth-child(3){animation-delay:1.2s}.ht-bubbles i.ok{background:var(--mint-soft);color:#1f7a54}.ht-spot{display:flex;gap:14px}.ht-spot .c{display:flex;align-items:center;justify-content:center;gap:4px;width:84px;height:84px;border:2px solid var(--ink);border-radius:50%;background:#fff;font-size:20px;flex-wrap:wrap;padding:12px}.ht-spot .tw{animation:fp-twinkle 1.4s infinite;filter:drop-shadow(0 0 6px rgba(236,79,134,.8))}.ht-escape{display:flex;align-items:center;gap:10px;font-size:30px}.ht-escape .e{display:grid;place-items:center;width:54px;height:54px;border:2px solid var(--ink);border-radius:14px;background:#fff}.ht-escape .f{background:#ffe0c2;animation:fp-pop .35s var(--spring) both}.ht-escape .w{background:#cdeeff;animation:fp-pop .35s .25s var(--spring) both}.ht-escape .d{background:var(--butter-soft);animation:fp-pop .35s .5s var(--spring) both}.ht-booth{display:flex;align-items:center;gap:8px}.ht-count{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;background:var(--butter);font-family:var(--display);font-weight:600;animation:fp-pop .3s var(--spring) both}.ht-count:nth-child(2){animation-delay:.4s;background:var(--pink);color:#fff}.ht-count:nth-child(3){animation-delay:.8s;background:var(--lav);color:#fff}.ht-strip{display:grid;gap:3px;padding:4px 4px 10px;border:2px solid var(--ink);border-radius:4px;background:#fff;margin-left:8px;transform:rotate(4deg);animation:fp-pop .4s 1.2s var(--spring) both}.ht-strip i{width:30px;height:20px;border:1.5px solid var(--ink);border-radius:2px;background:linear-gradient(135deg,var(--pink-soft),var(--lav-soft))}@media(max-width:760px){.room-overlay{place-items:start center}.room-split{flex-direction:column;align-items:center;gap:14px;padding-top:6px}.room-split .room-card,.howto{flex:none;width:min(420px,100%)}.howto{transform:none;padding:18px}.howto-line{font-size:18px}}