:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-glass: rgba(30, 41, 59, .85);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #8b5cf6;--accent-hover: #7c3aed;--accent-glow: rgba(139, 92, 246, .35);--tile-empty-border: #334155;--tile-active-border: #a855f7;--tile-active-bg: #1e1b4b;--color-correct: #10b981;--color-correct-glow: rgba(16, 185, 129, .4);--color-present: #f59e0b;--color-present-glow: rgba(245, 158, 11, .4);--color-absent: #334155;--key-bg: #334155;--key-text: #f8fafc;--key-hover: #475569;--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Outfit", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Space Grotesk", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px}[data-theme=cyberpunk]{--bg-primary: #09090b;--bg-secondary: #18181b;--bg-glass: rgba(24, 24, 27, .9);--text-primary: #00ffcc;--text-secondary: #ff0055;--accent-color: #ff0055;--accent-hover: #e0004c;--accent-glow: rgba(255, 0, 85, .4);--tile-empty-border: #27272a;--tile-active-border: #00ffcc;--tile-active-bg: #092e2b;--color-correct: #00ffcc;--color-correct-glow: rgba(0, 255, 204, .5);--color-present: #ffcc00;--color-present-glow: rgba(255, 204, 0, .5);--color-absent: #27272a;--key-bg: #27272a;--key-text: #00ffcc}[data-theme=pastel]{--bg-primary: #fdf4ff;--bg-secondary: #fae8ff;--bg-glass: rgba(250, 232, 255, .9);--text-primary: #701a75;--text-secondary: #a21caf;--accent-color: #ec4899;--accent-hover: #db2777;--accent-glow: rgba(236, 72, 153, .3);--tile-empty-border: #f472b6;--tile-active-border: #ec4899;--tile-active-bg: #fce7f3;--color-correct: #34d399;--color-correct-glow: rgba(52, 211, 153, .35);--color-present: #fbbf24;--color-present-glow: rgba(251, 191, 36, .35);--color-absent: #cbd5e1;--key-bg: #f5d0fe;--key-text: #701a75;--key-hover: #f0abfc}[data-theme=classic]{--bg-primary: #121213;--bg-secondary: #1a1a1b;--bg-glass: rgba(26, 26, 27, .95);--text-primary: #ffffff;--text-secondary: #818384;--accent-color: #538d4e;--accent-hover: #457841;--accent-glow: rgba(83, 141, 78, .35);--tile-empty-border: #3a3a3c;--tile-active-border: #565758;--tile-active-bg: #121213;--color-correct: #538d4e;--color-correct-glow: rgba(83, 141, 78, .4);--color-present: #b59f3b;--color-present-glow: rgba(181, 159, 59, .4);--color-absent: #3a3a3c;--key-bg: #818384;--key-text: #ffffff;--key-hover: #565758}[data-theme=emerald]{--bg-primary: #062c24;--bg-secondary: #0a4035;--bg-glass: rgba(10, 64, 53, .9);--text-primary: #e6fffa;--text-secondary: #5eead4;--accent-color: #10b981;--accent-hover: #059669;--accent-glow: rgba(16, 185, 129, .4);--tile-empty-border: #134e4a;--tile-active-border: #2dd4bf;--tile-active-bg: #042f2e;--color-correct: #10b981;--color-correct-glow: rgba(16, 185, 129, .45);--color-present: #f59e0b;--color-present-glow: rgba(245, 158, 11, .45);--color-absent: #134e4a;--key-bg: #0f766e;--key-text: #ccfbf1;--key-hover: #115e59}[data-highcontrast=true]{--color-correct: #f5793a !important;--color-correct-glow: rgba(245, 121, 58, .5) !important;--color-present: #85c0f9 !important;--color-present-glow: rgba(133, 192, 249, .5) !important;--tile-empty-border: #64748b !important}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#0f172a99}.custom-scrollbar::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#a855f799}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-main);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-user-select:none;user-select:none;line-height:1.4;transition:background-color .3s ease,color .3s ease}.app-header{min-height:60px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.6rem 1.25rem;background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;gap:.75rem}.logo-container{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:900;letter-spacing:-.5px;color:var(--text-primary);white-space:nowrap}.mode-badge{font-size:.65rem;font-weight:800;padding:.2rem .5rem;border-radius:20px;background:var(--accent-color);color:#fff;text-transform:uppercase;letter-spacing:.5px;line-height:1}.mode-switcher-container{display:flex;align-items:center;gap:4px;background:#0f172abf;border:1px solid rgba(255,255,255,.1);padding:4px;border-radius:14px;box-shadow:inset 0 2px 4px #0006}.mode-tab-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s cubic-bezier(.16,1,.3,1)}.mode-tab-btn:hover:not(.active){color:var(--text-primary);background:#ffffff0d}.mode-tab-btn.active{background:var(--accent-color);color:#fff;border-color:#fff3;box-shadow:0 4px 12px var(--accent-glow)}.tab-badge{font-size:.6rem;font-weight:800;padding:1px 5px;border-radius:6px;background:#ffffff26;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;line-height:1.2}.tab-badge.active-badge{background:#ffffff40;color:#fff}.streak-pill{display:flex;align-items:center;gap:4px;padding:4px 10px;background:#f59e0b26;border:1px solid rgba(245,158,11,.35);border-radius:10px;color:#fcd34d;font-size:.82rem;font-weight:800}.header-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.icon-btn{background:var(--bg-secondary);border:1px solid rgba(255,255,255,.1);color:var(--text-primary);width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s ease}.icon-btn:hover{background:var(--accent-color);color:#fff;transform:translateY(-1px)}.app-container{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:center}.game-layout{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:500px}.multiplayer-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;width:100%;max-width:1100px}@media(max-width:860px){.multiplayer-layout{grid-template-columns:1fr}}.player-card{background:var(--bg-secondary);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:1.1rem;display:flex;flex-direction:column;align-items:center;gap:.85rem;position:relative;overflow:hidden;box-shadow:0 10px 30px #0003;width:100%}.player-card.active-turn{border-color:var(--accent-color);box-shadow:0 0 20px var(--accent-glow)}.player-header{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.5rem;gap:.5rem}.board-grid{display:flex;flex-direction:column;gap:6px;width:100%;max-width:350px;margin:0 auto}.tile-row{display:grid;gap:6px;width:100%}.tile{width:100%;aspect-ratio:1 / 1;border:2px solid var(--tile-empty-border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:clamp(1.2rem,3.5vw,1.7rem);font-weight:800;font-family:var(--font-mono);text-transform:uppercase;color:var(--text-primary);background:transparent;line-height:1;box-sizing:border-box}.tile.filled{border-color:var(--tile-active-border);background:var(--tile-active-bg);animation:popIn .1s ease-in-out}.tile.correct{background:var(--color-correct)!important;border-color:var(--color-correct)!important;color:#fff;box-shadow:0 0 10px var(--color-correct-glow)}.tile.present{background:var(--color-present)!important;border-color:var(--color-present)!important;color:#fff;box-shadow:0 0 10px var(--color-present-glow)}.tile.absent{background:var(--color-absent)!important;border-color:var(--color-absent)!important;color:var(--text-secondary);opacity:.75}.tile.flip{animation:flipTile .45s ease forwards}.tile.shake{animation:shakeBoard .45s ease-in-out}.tile-row.invalid-row .tile{border-color:#ef4444!important;box-shadow:0 0 14px #ef444480!important;color:#fca5a5!important;background:#ef444426!important}.keyboard{display:flex;flex-direction:column;gap:5px;width:100%;max-width:480px;margin-top:.25rem}.keyboard-row{display:flex;justify-content:center;gap:4px;width:100%}.key-btn{height:48px;border-radius:var(--radius-sm);background:var(--key-bg);color:var(--key-text);border:none;font-weight:700;font-size:clamp(.75rem,2vw,.95rem);font-family:var(--font-main);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1 1 0%;min-width:0;padding:0 2px;white-space:nowrap;line-height:1;transition:all .15s ease}.key-btn.wide{flex:1.5 1 0%;font-size:clamp(.65rem,1.8vw,.8rem)}.key-btn:hover:not(:disabled){background:var(--key-hover)}.key-btn.correct{background:var(--color-correct);color:#fff}.key-btn.present{background:var(--color-present);color:#fff}.key-btn.absent{background:#1e293b;color:#64748b;opacity:.4}.powerups-panel{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;width:100%;max-width:480px;background:var(--bg-glass);padding:.5rem .75rem;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08)}.powerup-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .75rem;background:var(--bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .15s ease}.powerup-btn:hover:not(:disabled){background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.powerup-btn:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .15s ease}.modal-content{background:var(--bg-secondary);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);width:100%;max-width:480px;padding:1.5rem;box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column;gap:1rem}.modal-content.preferences-modal,.modal-content.stats-modal{max-width:440px!important;width:100%!important;padding:0!important;max-height:85vh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:var(--bg-secondary)!important;color:var(--text-primary)!important;border:1px solid var(--tile-empty-border)!important;box-shadow:0 20px 50px #0009!important}.stats-grid-4{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:.5rem!important}.stats-kpi-card{padding:.65rem .5rem;border-radius:10px;background:var(--bg-primary);border:1px solid var(--tile-empty-border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:transform .15s ease,border-color .15s ease}.stats-kpi-card:hover{border-color:var(--accent-color);transform:translateY(-1px)}.stats-kpi-val{font-size:1.25rem;font-weight:900;line-height:1.2;color:var(--text-primary)}.stats-kpi-lbl{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-top:.15rem}.dist-bar-container{height:22px;border-radius:6px;background:var(--bg-primary);border:1px solid var(--tile-empty-border);overflow:hidden;position:relative;display:flex;align-items:center}.dist-bar-fill{height:100%;border-radius:5px;background:var(--accent-color);box-shadow:0 0 10px var(--accent-glow);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-weight:900;font-size:.7rem;color:#fff;transition:width .4s ease-out;min-width:24px}.dist-bar-fill.is-peak{background:var(--color-correct);box-shadow:0 0 12px var(--color-correct-glow)}.pref-header{padding:.85rem 1rem!important;border-bottom:1px solid var(--tile-empty-border)!important;background:var(--bg-glass)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.pref-header-top{display:flex;align-items:center;justify-content:space-between}.pref-icon-box{width:34px;height:34px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent-color);display:flex;align-items:center;justify-content:center;color:var(--accent-color);flex-shrink:0}.pref-pills-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--tile-empty-border)}.pref-pill{font-size:.65rem;font-weight:800;padding:.15rem .45rem;border-radius:6px;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--tile-empty-border);display:flex;align-items:center;gap:.25rem}.pref-body{padding:.85rem 1rem!important;display:flex;flex-direction:column;gap:.75rem!important;overflow-y:auto;flex:1}.pref-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem!important}.pref-section-title{display:flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:var(--text-primary)}.pref-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.pref-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.pref-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.5rem;border-radius:10px;background:var(--bg-primary);border:1px solid var(--tile-empty-border);color:var(--text-primary);cursor:pointer;transition:all .15s ease;position:relative;text-align:center}.pref-card:hover{border-color:var(--accent-color)}.pref-card.active{background:var(--bg-secondary);border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-glow)}.tile-row-mini{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:2px!important;margin:.25rem 0!important;width:100%!important}.tile-mini{width:18px!important;height:22px!important;border-radius:3px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:var(--font-mono)!important;font-weight:900!important;font-size:.6rem!important;text-transform:uppercase!important;flex-shrink:0!important;line-height:1!important;border:1px solid var(--tile-empty-border)!important}.mini-board-preview{display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:6px;border:1px solid var(--tile-empty-border);width:100%}.mini-board-row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:2px}.audio-equalizer{display:flex;align-items:flex-end;gap:2px;height:12px}.eq-bar{width:2.5px;background:var(--accent-color);border-radius:2px;animation:eqPulse .8s ease-in-out infinite alternate}.eq-bar:nth-child(1){height:40%;animation-delay:.1s}.eq-bar:nth-child(2){height:80%;animation-delay:.3s}.eq-bar:nth-child(3){height:100%;animation-delay:.2s}.eq-bar:nth-child(4){height:50%;animation-delay:.4s}@keyframes eqPulse{0%{height:30%}to{height:100%}}.tile-mini.active-theme-tile{background:var(--accent-color);color:#fff;border-color:var(--accent-color)!important}.tile-mini.inactive-theme-tile{background:var(--bg-secondary);color:var(--text-secondary);border-color:var(--tile-empty-border)!important}.pref-switch-card{padding:.6rem .75rem;border-radius:10px;background:var(--bg-primary);border:1px solid var(--tile-empty-border);color:var(--text-primary);cursor:pointer;transition:all .15s ease}.pref-switch-card:hover{border-color:var(--accent-color)}.pref-switch-card.active-switch{border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-glow)}.switch-toggle{width:38px;height:20px;border-radius:10px;background:var(--tile-empty-border);padding:2px;position:relative;transition:background-color .2s ease;flex-shrink:0}.switch-toggle.active-switch{background:var(--accent-color);box-shadow:0 0 8px var(--accent-glow)}.switch-knob{width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.16,1,.3,1)}.switch-toggle.active-switch .switch-knob{transform:translate(18px)}.modal-header{display:flex;align-items:center;justify-content:space-between}.btn-primary{background:var(--accent-color);color:#fff;border:none;padding:.7rem 1.4rem;border-radius:var(--radius-md);font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .15s ease}.btn-primary:hover{background:var(--accent-hover)}@keyframes popIn{0%{transform:scale(.8)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes flipTile{0%{transform:rotateX(0)}50%{transform:rotateX(90deg);background:var(--bg-secondary)}to{transform:rotateX(0)}}@keyframes shakeBoard{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}