:root{--c-red: #e5484d;--c-green: #30a46c;--c-yellow: #f5b800;--c-blue: #3b82f6;--bg: #17142a;--bg-2: #211c3d;--panel: #2a2447;--panel-2: #332c55;--text: #f2f0fa;--muted: #a49ec6;--accent: #7c6cff;--border: #3d3663;--radius: 16px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 800px at 50% -10%,#2a2350,var(--bg));color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}.app{min-height:100%;display:flex;flex-direction:column}.screen{flex:1;padding:clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:20px}.screen.center{align-items:center;justify-content:center}.brand{text-align:center}.brand h1{font-size:clamp(40px,12vw,72px);margin:0;letter-spacing:2px;background:linear-gradient(90deg,var(--c-red),var(--c-yellow),var(--c-green),var(--c-blue));-webkit-background-clip:text;background-clip:text;color:transparent}.brand p{color:var(--muted);margin:8px 0 0}.panel{width:min(94vw,420px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,5vw,28px);display:flex;flex-direction:column;gap:12px}.panel h2{margin:0 0 4px;font-size:22px}.field-label{font-size:13px;color:var(--muted);margin-top:8px}.hint{color:var(--muted);font-size:13px;text-align:center;margin:6px 0 0}.primary-btn,.ghost-btn,.roll-btn{font:inherit;font-weight:600;border-radius:12px;padding:12px 18px;min-height:46px;cursor:pointer;transition:transform .08s ease,filter .15s ease,background .15s ease}.primary-btn:active,.ghost-btn:active,.roll-btn:active{transform:translateY(1px)}.primary-btn{background:linear-gradient(180deg,var(--accent),#6355e6);color:#fff;border:none}.primary-btn:hover{filter:brightness(1.07)}.primary-btn:disabled{background:#40396a;color:var(--muted);cursor:not-allowed;filter:none}.primary-btn.full{width:100%;margin-top:10px}.primary-btn.toggled{background:linear-gradient(180deg,var(--c-green),#268a56)}.ghost-btn{background:transparent;color:var(--text);border:1px solid var(--border)}.ghost-btn:hover{background:var(--panel-2)}.text-input{font:inherit;width:100%;padding:12px 14px;min-height:46px;border-radius:12px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);outline:none}.text-input:focus{border-color:var(--accent)}.code-input{text-transform:uppercase;letter-spacing:8px;text-align:center;font-size:24px;font-weight:700}.segmented{display:flex;gap:8px;margin-bottom:6px}.seg{flex:1;font:inherit;font-weight:700;padding:10px;min-height:46px;border-radius:12px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);cursor:pointer}.seg.active{background:var(--accent);border-color:var(--accent);color:#fff}.row-actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.error-msg{color:#ffb4b4;background:#e5484d1f;border:1px solid rgba(229,72,77,.4);border-radius:10px;padding:10px 12px;font-size:14px}.conn-pill{align-self:flex-start;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border)}.conn-pill.ok{color:#a7f3c9;border-color:#30a46c99}.conn-pill.bad{color:#ffd39b;border-color:#f5b80080}.mode-cards{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}.mode-card{width:min(90vw,280px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px 22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;color:var(--text);cursor:pointer;transition:transform .12s ease,border-color .15s ease}.mode-card:hover{transform:translateY(-3px);border-color:var(--accent)}.mode-emoji{font-size:34px}.mode-title{font-size:19px;font-weight:700}.mode-desc{font-size:14px;color:var(--muted)}.swatch{width:22px;height:22px;border-radius:6px;background:var(--c, #888);flex:none;box-shadow:inset 0 0 0 2px #fff3}.swatch.ghost{background:var(--bg-2);box-shadow:inset 0 0 0 2px var(--border)}.setup-players,.lobby-players{display:flex;flex-direction:column;gap:10px}.setup-row,.lobby-row{display:flex;align-items:center;gap:12px}.lobby-row{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px}.lobby-row.empty{opacity:.6}.lobby-name{flex:1;font-weight:600;display:flex;align-items:center;gap:8px}.lobby-name.muted,.muted{color:var(--muted);font-weight:500}.you-tag,.host-tag{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:6px;background:var(--panel-2);color:var(--muted)}.host-tag{background:#7c6cff40;color:#cfc6ff}.lobby-status .ready{color:#a7f3c9}.lobby-status .notready{color:var(--muted)}.disc{color:#ffb4b4}.code-box{background:var(--bg-2);border:1px dashed var(--border);border-radius:14px;padding:16px;text-align:center}.code-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.code-value{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}.code-chars{font-size:40px;font-weight:800;letter-spacing:10px;color:#fff}.copy-btn{font:inherit;font-weight:600;border-radius:10px;padding:8px 12px;min-height:40px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}.code-hint{color:var(--muted);font-size:13px;margin:8px 0 0}.game-view{flex:1;display:flex;flex-direction:column;padding:12px clamp(8px,3vw,24px) 24px;gap:12px}.game-header{display:flex;align-items:center;gap:12px}.header-spacer{width:72px;flex:none}.turn-indicator{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-weight:600;min-height:46px}.turn-swatch{width:18px;height:18px;border-radius:5px;flex:none}.tone-good{border-color:#30a46c99}.tone-warn{border-color:#f5b80099}.tone-win{border-color:var(--accent)}.notice-bar{text-align:center;background:#f5b8001f;border:1px solid rgba(245,184,0,.4);color:#ffd39b;border-radius:10px;padding:8px 12px;font-size:14px}.your-turn-bar{text-align:center;color:var(--muted);font-size:14px;font-weight:600}.your-turn-bar.active{color:#a7f3c9}.game-body{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:flex-start}.board{position:relative;width:min(94vw,66vh,560px);aspect-ratio:1 / 1;border-radius:14px;box-shadow:var(--shadow);container-type:size;flex:none}.board-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:14px}.tokens-layer{position:absolute;top:0;right:0;bottom:0;left:0}.token-pos{position:absolute;transform:translate(-50%,-50%);transition:left .32s ease,top .32s ease;z-index:2}.token-hit{display:grid;place-items:center;border:none;background:none;padding:0}.token-pos.movable .token-hit{min-width:44px;min-height:44px;cursor:pointer;z-index:5}.token-dot{display:block;width:5.4cqmin;height:5.4cqmin;min-width:15px;min-height:15px;border-radius:50%;border:2px solid;box-shadow:0 2px 4px #0006,inset 0 2px 3px #fff6}.token-pos.movable .token-dot{animation:tokenPulse 1s ease-in-out infinite}@keyframes tokenPulse{0%,to{box-shadow:0 0 #ffffffb3,0 2px 4px #0006;transform:scale(1)}50%{box-shadow:0 0 0 6px #fff0,0 2px 4px #0006;transform:scale(1.18)}}.game-side{display:flex;flex-direction:column;gap:14px;width:min(94vw,260px);flex:1 1 220px;max-width:320px}.player-panel{display:flex;flex-direction:column;gap:8px}.player-card{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-left:5px solid var(--c);border-radius:12px;padding:10px 12px;position:relative}.player-card.active{background:var(--panel-2);box-shadow:0 0 0 2px var(--c) inset}.player-card .swatch{background:var(--c)}.player-meta{flex:1;min-width:0}.player-name{font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-sub{font-size:12px;color:var(--muted)}.pips-home{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.mini-pip{width:9px;height:9px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border)}.mini-pip.filled{background:var(--c);border-color:var(--c)}.turn-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #ffffff26;animation:tokenPulse 1.2s ease-in-out infinite}.die-panel{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}.die{width:72px;height:72px;border-radius:16px;background:#fbfaff;border:2px solid var(--die-accent, #6c63ff);padding:10px;cursor:pointer;box-shadow:0 6px 14px #00000059}.die:disabled{cursor:default;opacity:.9}.die-face{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}.pip{border-radius:50%;background:transparent}.pip.on{background:#24203b}.die.rolling{animation:dieShake .16s linear infinite}@keyframes dieShake{0%{transform:rotate(-8deg) translateY(0)}25%{transform:rotate(8deg) translateY(-2px)}50%{transform:rotate(-6deg) translateY(1px)}75%{transform:rotate(6deg) translateY(-1px)}to{transform:rotate(-8deg)}}.roll-btn{background:var(--accent);color:#fff;border:none;width:100%}.roll-btn:disabled{background:#40396a;color:var(--muted);cursor:not-allowed}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0816b8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.victory-card{background:var(--panel);border:1px solid var(--border);border-top:6px solid var(--c);border-radius:18px;padding:30px;text-align:center;max-width:360px;width:100%;box-shadow:var(--shadow)}.victory-card h2{margin:6px 0;font-size:26px}.victory-card p{color:var(--muted)}.trophy{font-size:56px}.victory-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}@media (max-width: 720px){.game-body{flex-direction:column;align-items:center}.game-side{width:min(94vw,560px);max-width:none}.player-panel{flex-direction:row;flex-wrap:wrap}.player-card{flex:1 1 45%;min-width:140px}.header-spacer{width:56px}}