:root{--bg:#14121f;--bg-elevated:#1e1b30;--text:#f4f2ff;--text-dim:#a9a4c4;--accent:#fc3;--accent-2:#5865f2;--accent-3:#ff5d73;--border:#322c4d;--radius:14px}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,sans-serif}#app{max-width:1100px;margin:0 auto;padding:0 20px 60px}.is-hidden{display:none!important}.mode-btn{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:8px 16px;font-size:.85rem}.mode-btn:hover{border-color:var(--accent-2)}h1,h2,h3{margin:0}:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.avatar-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:inline-flex;overflow:hidden}.avatar-box-sm{border-radius:7px;width:26px;height:26px}.avatar-box-lg{border-radius:14px;width:88px;height:88px}.avatar-img{object-fit:contain;width:100%;height:100%;image-rendering:pixelated}.avatar-fallback{color:#14121f;justify-content:center;align-items:center;width:100%;height:100%;font-weight:800;display:flex}.primary-btn{background:var(--accent);color:#14121f;cursor:pointer;border:none;border-radius:999px;padding:12px 24px;font-weight:700;transition:filter .15s}.primary-btn:hover:not(:disabled){filter:brightness(1.1)}.primary-btn:disabled{background:var(--border);color:var(--text-dim);opacity:1;cursor:not-allowed;filter:none}.secondary-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:999px;padding:12px 24px}.secondary-btn:hover{border-color:var(--accent-2)}.dev-panel{border:1px dashed var(--accent-3);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;display:flex}.dev-label{color:var(--accent-3);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.dev-actions{flex-wrap:wrap;gap:8px;display:flex}.site-header{justify-content:space-between;align-items:center;padding:20px 0;display:flex}.logo{letter-spacing:.5px;font-size:1.5rem;font-weight:800}.logo em{color:var(--accent);font-style:normal}.hero{text-align:center;padding:30px 0 20px}.hero h1{background:linear-gradient(90deg, var(--accent-2), var(--accent-3));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:2.6rem}.hero p{color:var(--text-dim);margin-top:8px}.search-bar{max-width:480px;margin:0 auto 20px}.search-bar input{border:1px solid var(--border);background:var(--bg-elevated);width:100%;color:var(--text);border-radius:999px;padding:12px 18px;font-size:1rem}.search-bar input:focus{outline:2px solid var(--accent-2)}.filters{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px;display:flex}.filter-chip{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:999px;padding:8px 16px;font-size:.9rem}.filter-chip:hover{border-color:var(--accent-2);color:var(--text)}.filter-chip.is-active{background:var(--accent-2);color:var(--text);border-color:var(--accent-2)}.game-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;display:grid}.game-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:20px;display:flex}.game-card h3{font-size:1.2rem}.game-card p{color:var(--text-dim);flex-grow:1;font-size:.9rem}.tags{flex-wrap:wrap;gap:6px;display:flex}.tag{color:var(--text-dim);background:#ffffff14;border-radius:999px;padding:4px 10px;font-size:.75rem}.play-btn{background:var(--accent);color:#14121f;cursor:pointer;border:none;border-radius:999px;padding:10px;font-weight:700;transition:filter .15s}.play-btn:hover{filter:brightness(1.1)}.game-card.is-locked{opacity:.55}.coming-badge{text-align:center;color:var(--text-dim);padding:10px 0;font-size:.85rem}#game-view{padding-top:20px}.back-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;margin-bottom:20px;font-size:.95rem}.back-btn:hover{color:var(--text)}.mode-select{text-align:center;max-width:380px;margin:0 auto}.mode-question{color:var(--text-dim);margin:8px 0 0}.mode-options{flex-direction:column;gap:10px;margin-top:20px;display:flex}.modal-overlay{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);text-align:center;width:min(90vw,380px);padding:30px;position:relative}.modal-close-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:1.4rem;line-height:1;position:absolute;top:10px;right:12px}.modal-close-btn:hover{color:var(--text)}.dialog-message{color:var(--text-dim);margin:8px 0 0}.dialog-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;display:flex}.dialog-actions.is-stacked{flex-direction:column}.modal-options{flex-direction:column;gap:10px;margin:20px 0;display:flex}.modal-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;padding:12px;font-size:.95rem}.modal-btn:hover{border-color:var(--accent-2)}.coming-soon-note{color:var(--text-dim);margin-top:-4px;display:block}.modal-checkbox{color:var(--text-dim);justify-content:center;align-items:center;gap:8px;font-size:.85rem;display:flex}.room-flow{flex-direction:column;gap:14px;max-width:420px;margin:0 auto;display:flex}.room-step{color:var(--text-dim);margin:-6px 0 0;font-size:.85rem}.sim-note{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-dim);border-radius:10px;margin:0;padding:10px 14px;font-size:.85rem}.field-label{color:var(--text-dim);margin-bottom:-8px;font-size:.85rem}.text-input{border:1px solid var(--border);background:var(--bg-elevated);width:100%;color:var(--text);border-radius:999px;padding:10px 14px}.field-error{color:var(--accent-3);margin:-6px 0 0;font-size:.85rem}.avatar-picker{flex-direction:column;align-items:center;gap:10px;padding:10px 0;display:flex}.avatar-preview-row{display:inline-flex;position:relative}.shuffle-btn{background:var(--accent);color:#14121f;border:2px solid var(--bg-elevated);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.95rem;line-height:1;display:flex;position:absolute;bottom:-6px;right:-6px}.shuffle-btn:hover{filter:brightness(1.1)}.avatar-search{width:100%;max-width:300px;position:relative}.avatar-search-results{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:2px;max-height:220px;margin-top:6px;display:flex;overflow-y:auto}.avatar-search-option{text-align:left;width:100%;color:var(--text);text-transform:capitalize;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:6px 12px;display:flex}.avatar-search-option:hover{background:#ffffff0f}.avatar-search-option img{object-fit:contain;flex-shrink:0;width:28px;height:28px}.preset-group{border:none;margin:0;padding:0}.preset-group legend{color:var(--text-dim);margin-bottom:6px;padding:0;font-size:.85rem}.preset-options{flex-wrap:wrap;gap:8px;display:flex}.preset-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:999px;padding:8px 16px}.preset-btn:hover{border-color:var(--accent-2)}.preset-btn.is-active{background:var(--accent-2);color:var(--text);border-color:var(--accent-2)}.lobby{flex-direction:column;gap:16px;display:flex}.lobby-header{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:16px}.connection-status{color:var(--text-dim);background:#ffffff0f;border-radius:999px;margin-bottom:8px;padding:2px 10px;font-size:.75rem;display:inline-block}.connection-status--connected{color:#2ecc71}.connection-status--disconnected{color:var(--accent-3)}.ws-debug{border:1px dashed var(--border);color:var(--text-dim);background:#ffffff0f;border-radius:8px;padding:8px 12px;font-family:monospace;font-size:.75rem;line-height:1.5}.room-code-block{flex-direction:column;align-items:center;gap:6px;display:flex}.room-code-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-size:.75rem}.room-code{letter-spacing:.1em;color:var(--accent);font-size:1.8rem;font-weight:800}.room-code-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.copy-feedback{color:#2ecc71;font-size:.8rem}.lobby-toast{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);text-align:center;border-radius:10px;margin:0;padding:8px 14px;font-size:.85rem}.invite-code-display{letter-spacing:.1em;color:var(--accent);text-align:center;margin:-4px 0 4px;font-size:1.4rem;font-weight:800}.room-settings-summary{color:var(--text-dim);margin:10px 0 0;font-size:.85rem}.lobby-players{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.lobby-players li{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;align-items:center;gap:10px;padding:8px 12px;display:flex}.lobby-hint{color:var(--text-dim);text-align:center;margin:0;font-size:.85rem}.lobby-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.spectrum-game{flex-direction:column;gap:16px;max-width:480px;margin:0 auto;display:flex}.game-toolbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.prototype-badge{color:var(--text-dim);border:1px solid var(--border);border-radius:999px;margin:0;padding:4px 12px;font-size:.75rem}.menu-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:.9rem}.menu-btn:hover{border-color:var(--accent-2)}.toolbar-actions{align-items:center;gap:8px;display:flex}.audio-control{position:relative}.audio-toggle-btn{background:var(--bg-elevated);border:1px solid var(--border);width:34px;height:34px;color:var(--text);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:0;font-size:1rem;line-height:1;display:inline-flex}.audio-toggle-btn:hover{border-color:var(--accent-2)}.audio-popover{z-index:20;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;align-items:center;gap:8px;min-width:170px;padding:10px 12px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #00000059}.audio-popover.is-hidden{display:none}.audio-volume-range{accent-color:var(--accent);flex:1;min-width:80px}.audio-volume-value{color:var(--text-dim);text-align:right;min-width:34px;font-size:.75rem}.audio-mute-btn{border:1px solid var(--border);width:28px;height:28px;color:var(--text);cursor:pointer;background:0 0;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.9rem;display:inline-flex}.audio-mute-btn:hover{border-color:var(--accent-2)}.dev-switch{gap:6px;display:flex}.dev-player-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:.85rem}.dev-player-btn.is-active{background:var(--accent-3);color:var(--text);border-color:var(--accent-3)}.scoreboard-panel,.used-pokemon-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.used-pokemon-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.used-pokemon-list li{background:var(--bg);border:1px solid var(--border);text-transform:capitalize;border-radius:999px;align-items:center;gap:6px;padding:4px 10px 4px 4px;font-size:.85rem;display:flex}.used-pokemon-list img{object-fit:contain;width:24px;height:24px}.scoreboard-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 0 6px;font-size:.85rem}.turn-indicator{margin:0 0 10px;font-size:.95rem}.turn-indicator strong{color:var(--accent)}.scoreboard-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.scoreboard-list li{background:var(--bg);border:1px solid var(--border);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:.9rem;display:flex}.scoreboard-list li.is-turn{border-color:var(--accent)}.scoreboard-list li.is-disconnected{opacity:.55}.scoreboard-list strong{color:var(--accent)}.status-badge{color:var(--text-dim);white-space:nowrap;font-size:.75rem}.status-badge.is-ready{color:#2ecc71}.status-badge.is-waiting{color:var(--text-dim)}.round-info{text-align:left;color:var(--text-dim);margin:10px 0 0;font-size:.8rem}.timer{font-variant-numeric:tabular-nums;color:var(--text);margin:0 0 10px;font-size:1.4rem;font-weight:700}.timer.is-urgent{color:var(--accent-3);animation:1s ease-in-out infinite spectrum-pulse}@media (prefers-reduced-motion:reduce){.timer.is-urgent{animation:none}}.phase-area{flex-direction:column;align-items:center;gap:14px;display:flex}.status-text{text-align:center;align-items:center;gap:8px;margin:0;font-size:1.05rem;display:flex}.status-dot{background:var(--accent-2);border-radius:50%;width:8px;height:8px;animation:1.2s ease-in-out infinite spectrum-pulse}@keyframes spectrum-pulse{0%,to{opacity:.3}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.status-dot{opacity:1;animation:none}}.clue-instruction{color:var(--text-dim);text-align:center;margin:0}.gauge-slot{width:100%;max-width:clamp(300px,90vw,420px);margin:0 auto}.gauge{touch-action:none;width:100%;height:auto}.gauge-interactive:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:50%}.gauge-track{fill:none;stroke:var(--border);stroke-width:14px;stroke-linecap:round}.gauge-zone{fill:none;stroke-width:14px;stroke-linecap:butt}.gauge-zone-10{stroke:var(--accent);opacity:.9}.gauge-zone-5{stroke:#3aa0ff;opacity:.75}.gauge-zone-3{stroke:#8b5cf6;opacity:.6}.gauge-zone-1{stroke:#6f6790;opacity:.45}.gauge-interactive{cursor:pointer}.gauge-needle{stroke-width:4px;stroke-linecap:round}.gauge-needle-animate{stroke-dashoffset:var(--needle-length);animation:.65s ease-out forwards gauge-draw-line}.gauge-needle-tip-animate{opacity:0;transform-origin:50%;animation:.2s ease-out .65s forwards gauge-pop-in}@keyframes gauge-draw-line{to{stroke-dashoffset:0}}@keyframes gauge-pop-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.gauge-needle-animate,.gauge-needle-tip-animate{stroke-dashoffset:0;opacity:1;animation:none;transform:none}}.gauge-end-label{fill:var(--text-dim);font-size:12px;font-weight:700}.gauge-legend{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:6px;font-size:.85rem;display:flex}.gauge-legend-item{align-items:center;gap:6px;display:inline-flex}.gauge-legend-item i{border-radius:50%;width:10px;height:10px;display:inline-block}.pokemon-preview{flex-direction:column;align-items:center;gap:6px;min-height:40px;display:flex}.pokemon-preview img{object-fit:contain;width:96px;height:96px}.pokemon-preview p{text-transform:uppercase;letter-spacing:.03em;margin:0;font-weight:700}.pokemon-selector{width:100%;max-width:320px;position:relative}.pokemon-search-input{border:1px solid var(--border);background:var(--bg-elevated);width:100%;color:var(--text);border-radius:999px;padding:10px 14px}.pokemon-dropdown{z-index:5;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;max-height:220px;margin-top:4px;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.pokemon-option{text-align:left;width:100%;color:var(--text);text-transform:capitalize;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:6px 14px;display:flex}.pokemon-option:hover{background:#ffffff0f}.pokemon-option-sprite{object-fit:contain;width:28px;height:28px;image-rendering:pixelated;flex-shrink:0}.pokemon-selector-error{color:var(--accent-3);text-align:center;font-size:.85rem}.retry-btn{border:1px solid var(--accent-3);color:var(--accent-3);cursor:pointer;background:0 0;border-radius:999px;margin-left:8px;padding:2px 10px}.lock-note{color:var(--accent);margin:0;font-weight:700}.reveal-panel{flex-direction:column;align-items:center;gap:14px;width:100%;display:flex;position:relative}.reveal-overlay{border-radius:var(--radius);z-index:4;background:#14121f80;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.reveal-overlay-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);width:min(100%,380px);max-height:100%;padding:18px;overflow-y:auto;box-shadow:0 10px 30px #0006}.reveal-overlay-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);text-align:center;margin:0 0 10px;font-size:.85rem}.round-result-table{border-collapse:collapse;width:100%;font-size:.9rem}.round-result-table th{color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;text-align:left;padding-bottom:6px;font-size:.75rem}.round-result-table th:last-child,.round-result-table td:last-child,.round-result-table th:nth-child(3),.round-result-table td:nth-child(3){text-align:right}.round-result-table td{border-top:1px solid var(--border);padding:6px 0}.round-result-table td:first-child{width:30px}.round-result-table td:nth-child(3){color:var(--accent);font-weight:700}.round-result-table tr.is-clue-giver td{color:var(--text-dim)}.bonus-message{text-align:center;color:var(--accent);margin:12px 0 0;font-weight:700;line-height:1.4}.reveal-animate{animation:.25s ease-out spectrum-reveal-in}@keyframes spectrum-reveal-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.reveal-animate{animation:none}}.leaderboard{width:100%;min-height:1px;margin-top:14px;position:relative}.leaderboard-row{background:var(--bg);border:1px solid var(--border);border-radius:10px;align-items:center;gap:10px;padding:6px 10px;transition:transform .5s;display:flex;position:absolute;top:0;left:0;right:0}.leaderboard-row .lb-name{flex-grow:1;font-size:.9rem}.leaderboard-row .lb-round{color:var(--text-dim);font-size:.8rem}.leaderboard-row .lb-total{color:var(--accent);text-align:right;min-width:28px}@media (prefers-reduced-motion:reduce){.leaderboard-row{transition:none}}.ranking-list{flex-direction:column;gap:8px;width:100%;max-width:280px;margin:0;padding:0;list-style:none;display:flex}.ranking-list li{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;align-items:center;gap:10px;padding:10px 14px;display:flex}.ranking-list .player-name{flex-grow:1}.ranking-list strong{color:var(--accent)}.end-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}@media (width>=900px){.spectrum-game{grid-template-columns:240px 1fr;grid-template-areas:"toolbar toolbar""dev dev""score phase""used phase";align-items:start;gap:20px 28px;max-width:880px;display:grid}.game-toolbar{grid-area:toolbar}.dev-panel{grid-area:dev}.scoreboard-panel{grid-area:score;position:sticky;top:20px}.scoreboard-list{flex-direction:column;align-items:stretch}.used-pokemon-panel{grid-area:used}.phase-area{grid-area:phase}.gauge-slot{max-width:500px}}@media (width>=1100px){.spectrum-game{grid-template-columns:minmax(220px,280px) minmax(420px,1fr) minmax(220px,280px);grid-template-areas:"toolbar toolbar toolbar""dev dev dev""score phase used";max-width:1160px}.used-pokemon-panel{max-height:calc(100vh - 40px);position:sticky;top:20px;overflow-y:auto}}