:root{--bg-dark:#0f0f1a;--bg-card:#1a1a2e;--bg-surface:#16213e;--accent:#e94560;--accent-hover:#ff6b81;--accent-green:#2ecc71;--text:#eee;--text-muted:#888;--border:#333;--gold:#f1c40f;--silver:#95a5a6}*{box-sizing:border-box;margin:0;padding:0}body{background:#0f0f1a;background:var(--bg-dark);color:#eee;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overscroll-behavior:none}.app,body{min-height:100vh}.app{display:flex;flex-direction:column}.app-header{align-items:center;background:#16213e;background:var(--bg-surface);border-bottom:2px solid #e94560;border-bottom:2px solid var(--accent);display:flex;justify-content:space-between;padding:1rem 2rem}.app-header h1{cursor:pointer;font-size:1.5rem;-webkit-user-select:none;user-select:none}.room-badge{background:#e94560;background:var(--accent);border-radius:20px;font-size:.9rem;font-weight:700;letter-spacing:2px;padding:.3rem .8rem}.app-main{flex:1 1;margin:0 auto;max-width:1200px;padding:2rem;width:100%}.error-banner{animation:slideDown .3s ease;background:#c0392b;color:#fff;font-weight:700;padding:.8rem 2rem;text-align:center}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.btn{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;padding:.7rem 1.5rem;transition:all .2s}.btn-primary{background:#e94560;background:var(--accent);color:#fff}.btn-primary:hover{background:#ff6b81;background:var(--accent-hover);transform:translateY(-2px)}.btn-primary:disabled{background:#555;cursor:not-allowed;transform:none}.btn-secondary{background:#16213e;background:var(--bg-surface);border:2px solid #333;border:2px solid var(--border);color:#eee;color:var(--text)}.btn-secondary:hover{border-color:#e94560;border-color:var(--accent)}.btn-success{background:#2ecc71;background:var(--accent-green);color:#fff}.btn-success:hover{background:#27ae60}.btn-danger{background:#c0392b;color:#fff}.btn-danger:hover{background:#e74c3c}.input{background:#1a1a2e;background:var(--bg-card);border:2px solid #333;border:2px solid var(--border);border-radius:8px;color:#eee;color:var(--text);font-size:1rem;padding:.7rem 1rem;width:100%}.input:focus{border-color:#e94560;border-color:var(--accent);outline:none}.card{background:#1a1a2e;background:var(--bg-card);border:2px solid #333;border:2px solid var(--border);border-radius:12px;padding:1.5rem}.home{align-items:center;display:flex;flex-direction:column;gap:2rem;justify-content:center;min-height:60vh}.home-title{font-size:3rem;text-align:center}.home-subtitle{color:#888;color:var(--text-muted);font-size:1.2rem;margin-bottom:1rem}.home-actions{display:flex;flex-direction:column;gap:1rem;max-width:400px;width:100%}.home-actions .input-group{display:flex;gap:.5rem}.home-actions .input-group .input{flex:1 1}.lobby{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr}.lobby-players{display:flex;flex-direction:column;gap:.5rem}.player-item{align-items:center;background:#16213e;background:var(--bg-surface);border:1px solid #333;border:1px solid var(--border);border-radius:8px;display:flex;justify-content:space-between;padding:.6rem 1rem}.player-item.disconnected{opacity:.5}.player-item .badges{display:flex;gap:.3rem}.badge{border-radius:4px;font-size:.7rem;font-weight:700;padding:.15rem .4rem;text-transform:uppercase}.badge-host{background:#f1c40f;background:var(--gold);color:#333}.badge-judge{background:#e94560;background:var(--accent);color:#fff}.badge-you{background:#2ecc71;background:var(--accent-green);color:#fff}.badge-offline{background:#555;color:#999}.settings-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.setting-item{display:flex;flex-direction:column;gap:.3rem}.setting-item label{color:#888;color:var(--text-muted);font-size:.85rem}.theme-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:1rem 0}.theme-chip{background:#16213e;background:var(--bg-surface);border:2px solid #333;border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;text-align:center;transition:all .2s}.theme-chip.selected{background:#e9456033;border-color:#e94560;border-color:var(--accent)}.theme-chip:hover{border-color:#ff6b81;border-color:var(--accent-hover)}.game-layout{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 250px;min-height:70vh}.game-main{gap:1.5rem}.game-main,.game-sidebar{display:flex;flex-direction:column}.game-sidebar{gap:1rem}.prompt-card{align-items:center;background:linear-gradient(135deg,#16213e,#1a1a2e);background:linear-gradient(135deg,var(--bg-surface),var(--bg-card));border:3px solid #e94560;border:3px solid var(--accent);border-radius:16px;display:flex;font-size:1.3rem;justify-content:center;min-height:120px;padding:2rem;text-align:center}.hand-area{display:flex;flex-direction:column;gap:1rem}.hand-cards{display:flex;flex-wrap:wrap;gap:.5rem}.word-card{background:#16213e;background:var(--bg-surface);border:2px solid #333;border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:.95rem;padding:.5rem 1rem;touch-action:none;transition:all .15s;-webkit-user-select:none;user-select:none}.word-card:hover{transform:translateY(-3px)}.word-card.selected,.word-card:hover{border-color:#e94560;border-color:var(--accent)}.word-card.selected{background:#e945604d;box-shadow:0 4px 12px #e945604d;transform:translateY(-5px)}.word-card.draggable{cursor:grab;touch-action:none;transition:transform .15s,opacity .15s,box-shadow .15s;-webkit-user-select:none;user-select:none}.word-card.draggable:active{box-shadow:0 6px 16px #00000040;cursor:grabbing;opacity:.7;transform:scale(1.05)}.word-card.played{cursor:default;opacity:.4}.selected-area{align-items:center;background:#16213e;background:var(--bg-surface);border:2px dashed #333;border:2px dashed var(--border);border-radius:12px;display:flex;flex-wrap:wrap;gap:.5rem;min-height:60px;padding:1rem}.selected-area.active{border-color:#e94560;border-color:var(--accent)}.selected-area .placeholder{color:#888;color:var(--text-muted);font-style:italic}.submission-list{display:flex;flex-direction:column;gap:1rem}.submission-item{background:#16213e;background:var(--bg-surface);border:2px solid #333;border:2px solid var(--border);border-radius:12px;cursor:pointer;padding:1rem;transition:all .2s}.submission-item:hover{border-color:#e94560;border-color:var(--accent)}.submission-item.winner{background:#f1c40f1a;border-color:#f1c40f;border-color:var(--gold)}.submission-item.selected-winner{border-color:#f1c40f;border-color:var(--gold);box-shadow:0 0 15px #f1c40f4d}.submission-item.first-loser{background:#95a5a61a;border-color:#95a5a6;border-color:var(--silver);box-shadow:0 0 12px #95a5a64d}.submission-words{display:flex;flex-wrap:wrap;gap:.3rem}.submission-player{color:#888;color:var(--text-muted);font-size:.85rem;margin-top:.5rem}.timer{align-items:center;display:flex;font-size:1.2rem;font-weight:700;gap:.5rem}.timer.warning{color:#f1c40f;color:var(--gold)}.timer.critical{animation:pulse .5s infinite;color:#e94560;color:var(--accent)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.scoreboard{display:flex;flex-direction:column;gap:.4rem}.score-row{align-items:center;border-radius:6px;display:flex;font-size:.9rem;justify-content:space-between;padding:.4rem .6rem}.score-row.is-judge{background:#e9456026}.score-row .score-value{color:#f1c40f;color:var(--gold);font-weight:700}.phase-indicator{background:#16213e;background:var(--bg-surface);border:1px solid #333;border:1px solid var(--border);border-radius:8px;font-size:.9rem;padding:.5rem 1rem}.phase-indicator,.status-message{color:#888;color:var(--text-muted);text-align:center}.status-message{font-size:1.1rem;padding:2rem}.status-message .spinner{animation:spin 1s linear infinite;border:3px solid #333;border-top-color:#e94560;border:3px solid var(--border);border-radius:50%;border-top-color:var(--accent);display:inline-block;height:20px;margin-right:.5rem;vertical-align:middle;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.gameover{align-items:center;display:flex;flex-direction:column;gap:2rem;padding:3rem 1rem;text-align:center}.gameover h2{font-size:2.5rem}.winner-display{background:#f1c40f1a;border:3px solid #f1c40f;border:3px solid var(--gold);border-radius:16px;color:#f1c40f;color:var(--gold);font-size:1.8rem;padding:1rem 2rem}.final-scores{max-width:500px;width:100%}.final-score-row{border-bottom:1px solid #333;border-bottom:1px solid var(--border);display:flex;font-size:1.1rem;justify-content:space-between;padding:.8rem 1rem}.final-score-row:first-child{font-size:1.2rem;font-weight:700}.judge-controls{align-items:center;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.judge-controls .btn{font-size:1.2rem;padding:1rem 2.5rem}.reveal-grid{display:flex;flex-direction:column;gap:1rem}.reveal-item{background:#16213e;background:var(--bg-surface);border:2px solid #333;border:2px solid var(--border);border-radius:12px;padding:1rem}.reveal-item.is-winner{background:#f1c40f1a;border-color:#f1c40f;border-color:var(--gold)}.reveal-item.is-first-loser{border-color:#95a5a6;border-color:var(--silver)}.reveal-item .player-label{font-weight:700;margin-bottom:.5rem}@media (max-width:768px){.game-layout,.lobby,.settings-grid{grid-template-columns:1fr}.app-main{padding:1rem}.prompt-card{font-size:1.1rem;padding:1.5rem}}.judge-submit-view{align-items:center;display:flex;flex-direction:column;gap:1rem}.submission-tracker{background:#16213e;background:var(--bg-surface);border:1px solid #333;border:1px solid var(--border);border-radius:12px;max-width:360px;padding:1rem;width:100%}.tracker-row{align-items:center;border-bottom:1px solid #333;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:.35rem 0}.tracker-row:last-child{border-bottom:none}.tracker-status{font-size:1.1rem}.tracker-status.done{color:#e94560;color:var(--accent)}.tracker-status.pending{opacity:.5}.drag-ghost{filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));opacity:.92;pointer-events:none;position:fixed;transform:scale(1.08) rotate(2deg);transition:none;z-index:10000}.drag-ghost .word-card{background:#e9456066;border-color:#e94560;border-color:var(--accent);box-shadow:0 4px 16px #e9456066;cursor:grabbing}.word-card.drag-source{border-style:dashed!important;box-shadow:none!important;opacity:.25;transform:scale(.95)}.selected-area.drop-highlight{background:#2ecc7114;border-color:#2ecc71!important;border-color:var(--accent-green)!important;border-style:dashed;box-shadow:inset 0 0 24px #2ecc711f}.hand-cards.drop-highlight{background:#2ecc710f;border-radius:12px;outline:2px dashed #2ecc71;outline:2px dashed var(--accent-green);outline-offset:4px}@keyframes nudgeShake{0%,to{transform:translateX(0)}10%{transform:translateX(-12px) rotate(-1deg)}20%{transform:translateX(10px) rotate(1deg)}30%{transform:translateX(-8px) rotate(-.5deg)}40%{transform:translateX(8px) rotate(.5deg)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-3px)}80%{transform:translateX(2px)}90%{transform:translateX(-1px)}}.nudge-shake{animation:nudgeShake .6s ease-in-out;animation-iteration-count:2}.nudge-banner{animation:bannerAppear .25s ease,notificationShake .6s ease-in-out .25s 2;border-radius:12px;box-shadow:0 4px 24px #e9456080;font-size:1.1rem;font-weight:700;left:50%;padding:.75rem 1.5rem;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:9999}.btn-nudge,.nudge-banner{background:#e94560;background:var(--accent);color:#fff}.btn-nudge{border:none;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;padding:.4rem 1rem;transition:background .2s,transform .1s}.btn-nudge:hover:not(:disabled){background:#ff6b81;background:var(--accent-hover);transform:scale(1.05)}.btn-nudge:disabled{cursor:not-allowed;opacity:.5}.fixed-timer{background:#1a1a2e;background:var(--bg-card);border:2px solid #333;border:2px solid var(--border);border-radius:12px;bottom:1.5rem;box-shadow:0 4px 16px #0006;color:#eee;color:var(--text);font-size:1.3rem;font-weight:700;left:1.5rem;padding:.5rem 1rem;pointer-events:none;position:fixed;-webkit-user-select:none;user-select:none;z-index:9000}.fixed-timer.warning{border-color:#f1c40f;border-color:var(--gold);box-shadow:0 4px 16px #f1c40f4d;color:#f1c40f;color:var(--gold)}.fixed-timer.critical{animation:pulse .5s infinite;border-color:#e94560;border-color:var(--accent);box-shadow:0 4px 16px #e9456066;color:#e94560;color:var(--accent)}.fixed-nudge-btn{align-items:center;background:#1a1a2e;background:var(--bg-card);border:2px solid #e94560;border:2px solid var(--accent);border-radius:50%;bottom:1.5rem;box-shadow:0 4px 16px #e9456059;cursor:pointer;display:flex;font-size:1.6rem;height:56px;justify-content:center;position:fixed;right:1.5rem;transition:transform .15s,box-shadow .15s,background .2s;-webkit-user-select:none;user-select:none;width:56px;z-index:9000}.fixed-nudge-btn:hover:not(:disabled){background:#e9456033;box-shadow:0 6px 24px #e9456080;transform:scale(1.12)}.fixed-nudge-btn:active:not(:disabled){transform:scale(.95)}.fixed-nudge-btn.cooldown{border-color:#2ecc71;border-color:var(--accent-green);box-shadow:0 4px 16px #2ecc714d;cursor:not-allowed;opacity:.7}.poke-banner{animation:bannerAppear .25s ease,notificationShake .6s ease-in-out .25s 2;background:#8e44ad;border-radius:12px;box-shadow:0 4px 24px #8e44ad80;color:#fff;font-size:1.1rem;font-weight:700;left:50%;padding:.75rem 1.5rem;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:9999}@keyframes bannerAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes notificationShake{0%,to{transform:translate(-50%,-50%) translateX(0)}10%{transform:translate(-50%,-50%) translateX(-10px) rotate(-1deg)}20%{transform:translate(-50%,-50%) translateX(8px) rotate(1deg)}30%{transform:translate(-50%,-50%) translateX(-6px) rotate(-.5deg)}40%{transform:translate(-50%,-50%) translateX(6px) rotate(.5deg)}50%{transform:translate(-50%,-50%) translateX(-4px)}60%{transform:translate(-50%,-50%) translateX(4px)}70%{transform:translate(-50%,-50%) translateX(-2px)}80%{transform:translate(-50%,-50%) translateX(1px)}}.poke-btn{background:none;border:none;border-radius:6px;cursor:pointer;font-size:1.1rem;line-height:1;padding:.1rem .25rem;transition:transform .12s,background .15s}.poke-btn:hover:not(:disabled){background:#8e44ad33;transform:scale(1.25)}.poke-btn:active:not(:disabled){transform:scale(.9)}.poke-btn.cooldown{cursor:not-allowed;opacity:.6}.app-footer{border-top:1px solid #ffffff14;color:#888;color:var(--text-muted,#888);font-size:.78rem;opacity:.7;padding:.6rem 1rem;text-align:center;-webkit-user-select:none;user-select:none}