:root{--bg-start:#0f172a;--bg-end:#111827;--panel:#0b1220;--panel-2:#111827;--stroke:#2a3759;--accent-1:#22d3ee;--accent-2:#6366f1;--text:#e5e7eb;--muted:#9ca3af;--tile:#1f2937;--shadow:0 10px 30px rgba(0,0,0,.35);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}body,html{height:100%}body{margin:0;color:var(--text);background:radial-gradient(1200px 800px at 30% 10%,var(--bg-start),var(--bg-end));font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:12px;padding-top:calc(12px + var(--safe-top));padding-bottom:calc(12px + var(--safe-bottom));gap:24px}.brand{width:min(1200px,94vw)}.brandHeader{justify-content:space-between;width:100%}.brandHeader,.brandLeft{display:flex;align-items:baseline}.brandLeft{gap:16px}.backLink{color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);transition:all .2s ease}.backLink:hover{color:var(--text-primary);background:var(--bg-tertiary);border-color:var(--accent-1);transform:translateY(-1px)}@media (max-width:600px){.brandLeft{flex-direction:column;gap:8px;align-items:flex-start}.backLink{font-size:12px;padding:6px 10px}.brand h1{font-size:28px}.brandHeader{flex-direction:column;gap:12px;align-items:flex-start}.statusbar{align-self:stretch}}.brand h1{margin:0;letter-spacing:.5px;font-weight:800;font-size:40px;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));-webkit-background-clip:text;background-clip:text;color:transparent}.statusbar{display:flex;gap:18px;color:var(--muted);font-weight:600}.stage{width:min(1200px,94vw);display:grid;grid-template-columns:auto 320px;gap:24px;align-items:start;justify-content:center}@media (max-width:900px){.stage{width:100%;display:grid;grid-template-columns:1fr;justify-items:center;gap:12px}.boardCard{position:relative;transform-origin:top center}.hudOverlay{position:absolute;top:calc(var(--safe-top, 0px) + 8px);left:12px;right:65px;display:flex;gap:8px;z-index:10;flex-wrap:wrap}.chip{background:rgba(17,24,39,.9);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;backdrop-filter:blur(8px);white-space:nowrap}.backChip{background:rgba(59,130,246,.9)!important;border-color:rgba(59,130,246,.5)!important;text-decoration:none!important;transition:all .2s ease}.backChip:hover{background:rgba(59,130,246,1)!important;border-color:rgba(59,130,246,.8)!important;transform:translateY(-1px)}.nextMini{width:24px;height:20px;background:rgba(255,255,255,.1);border-radius:4px;font-size:10px}.nextMini,.pauseBtn{display:flex;align-items:center;justify-content:center}.pauseBtn{position:absolute;top:calc(var(--safe-top, 0px) + 8px);right:12px;width:40px;height:40px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));color:white;z-index:15;cursor:pointer;transition:transform .08s ease,filter .2s ease;font-size:16px;font-weight:700;box-shadow:0 6px 16px rgba(34,211,238,.25)}.pauseBtn:hover{transform:translateY(-1px);filter:brightness(1.08)}.nextChip{margin-left:auto;display:flex;align-items:center;gap:6px}.nextMini{width:44px;height:44px;border-radius:8px;border:1px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.05);position:relative}.sidebar{display:none}}.boardCard{width:auto}.boardCard,.hudCard{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:var(--shadow);padding:18px}.hudCard{width:100%}.boardFrame{border:2px solid var(--stroke);border-radius:12px;padding:12px;width:100%;max-width:216px;height:504px;background:#0b1020;display:flex;align-items:center;justify-content:center}.boardInner{width:192px;height:480px;background:repeating-linear-gradient(90deg,transparent 0 1px,#131b2e 1px 48px),repeating-linear-gradient(180deg,transparent 0 1px,#131b2e 1px 48px);position:relative;overflow:hidden}.hudCard{display:flex;flex-direction:column;gap:16px}.hudGroup{padding:12px 14px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02)}.hudGroup h2{margin:0 0 8px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.statRow{justify-content:space-between;padding:6px 0}.nextPreview,.statRow{display:flex;align-items:center}.nextPreview{height:120px;border-radius:10px;border:1px dashed rgba(255,255,255,.15);background:rgba(255,255,255,.03);justify-content:center;color:var(--muted);position:relative}.piecePreview{position:relative;width:100px;height:80px}.previewTile{position:absolute;width:18px;height:18px;border-radius:3px;background:linear-gradient(135deg,#f4e5b8,#e6d29b 25%,#dcc788 50%,#d4bf7a 75%,#cab56c);color:#2d1810;font-weight:900;font-size:10px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.4);border:1px solid #b8a372;font-family:Inter,sans-serif}.previewTile.rare{background:linear-gradient(135deg,#ffeaa7,#fdcb6e 25%,#f39c12 50%,#e67e22 75%,#d35400);border:1px solid #d68910;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.3),0 3px 8px rgba(230,126,34,.4),0 1px 3px rgba(0,0,0,.4)}.btnGhost,.btnPrimary{width:100%;padding:12px 14px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;margin-bottom:8px}.btnPrimary{border:none;color:white;background:linear-gradient(90deg,var(--accent-2),var(--accent-1));box-shadow:0 6px 16px rgba(34,211,238,.25);transition:transform .08s ease,filter .2s ease}.btnPrimary:hover{transform:translateY(-1px);filter:brightness(1.08)}.btnGhost{border:1px solid rgba(255,255,255,.16);color:var(--text);background:transparent;transition:background .2s ease}.btnGhost:hover{background:rgba(255,255,255,.05)}.loading{color:var(--accent-1);font-weight:600}.gameOver,.loading{text-align:center}.gameOver h3{margin:0 0 8px;color:#ff6b6b;font-size:18px}.gameOver p{margin:0 0 16px;color:var(--muted)}.recentWordsList{display:flex;flex-wrap:wrap;gap:6px}.recentWord{background:linear-gradient(45deg,var(--accent-2),var(--accent-1));padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;color:white;white-space:nowrap}.instructionsList{font-size:13px;line-height:1.5;color:var(--muted)}.instructionsList div{padding:2px 0}.tile{position:absolute;width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#f4e5b8,#e6d29b 25%,#dcc788 50%,#d4bf7a 75%,#cab56c);color:#2d1810;font-weight:900;font-size:24px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);border:1px solid #b8a372;text-shadow:0 1px 1px rgba(255,255,255,.3);font-family:Inter,sans-serif}.tile.rare{background:linear-gradient(135deg,#ffeaa7,#fdcb6e 25%,#f39c12 50%,#e67e22 75%,#d35400);border:1px solid #d68910;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.3),0 3px 8px rgba(230,126,34,.4),0 1px 3px rgba(0,0,0,.4)}.tile.highlighted{animation:wordHighlight 1s ease-in-out}.tile.falling{opacity:.9;z-index:10}@keyframes wordHighlight{0%,to{transform:scale(1)}50%{transform:scale(1.1);filter:brightness(1.3)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.mobileControls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:1000;padding:15px;background:rgba(0,0,0,.8);border-radius:15px;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.controlRow{gap:10px}.controlBtn,.controlRow{display:flex;justify-content:center}.controlBtn{background:var(--panel);border:1px solid rgba(255,255,255,.16);border-radius:8px;color:var(--text);font-size:18px;font-weight:600;padding:12px 16px;min-width:50px;height:50px;align-items:center;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.controlBtn:active,.controlBtn:hover{background:var(--accent-2);border-color:var(--accent-1);color:white;transform:scale(.95)}.controlBtn.wide{min-width:80px;font-size:14px}.status-boot{color:var(--text-secondary);font-style:italic}.status-load_dict{color:var(--accent-1);font-weight:600;display:flex;align-items:center;gap:.5rem}.status-load_dict:after{content:"";width:16px;height:16px;border:2px solid var(--accent-1);border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}.status-ready{color:var(--accent-1);font-weight:600}.status-playing{color:#10b981;font-weight:600}.status-game_over{color:#ef4444;font-weight:600;text-shadow:0 0 8px rgba(239,68,68,.3)}.status-paused{color:#f59e0b;font-weight:600}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.pauseOverlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;border-radius:inherit}.pauseContent{text-align:center;color:var(--text-primary)}.pauseContent h2{font-size:2rem;margin-bottom:1rem;color:var(--accent-primary);text-shadow:0 0 10px rgba(59,130,246,.5)}.loadingOverlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;border-radius:inherit}.loadingContent{text-align:center;color:var(--text-primary)}.loadingSpinner{width:48px;height:48px;border:4px solid rgba(34,211,238,.2);border-top:4px solid var(--accent-1);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}.loadingContent h2{font-size:1.8rem;margin-bottom:.5rem;color:var(--accent-1);text-shadow:0 0 10px rgba(34,211,238,.3)}.loadingContent p{font-size:1rem;color:var(--text-secondary);margin:0}.gameOverOverlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;border-radius:inherit}.gameOverContent{text-align:center;color:var(--text-primary);padding:2rem;background:rgba(255,255,255,.05);border-radius:1rem;border:1px solid rgba(255,255,255,.1)}.gameOverContent h2{font-size:2.5rem;margin-bottom:1.5rem;color:#ef4444;text-shadow:0 0 15px rgba(239,68,68,.4)}.finalScore{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem;padding:1rem;background:rgba(34,211,238,.1);border-radius:.5rem;border:1px solid rgba(34,211,238,.2)}.finalScore span:first-child{font-size:1rem;color:var(--text-secondary);margin-bottom:.5rem}.finalScore span:last-child{font-size:2rem;font-weight:700;color:var(--accent-1);text-shadow:0 0 10px rgba(34,211,238,.3)}.gameOverContent p{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2rem}.gameOverContent .btnPrimary{font-size:1.1rem;padding:.75rem 2rem}@media (max-width:768px){.gameOverContent h2,.loadingContent h2,.pauseContent h2{font-size:1.5rem}.gameOverContent{padding:1.5rem;margin:1rem;max-width:calc(100vw - 2rem)}.finalScore span:last-child{font-size:1.8rem}.loadingSpinner{width:40px;height:40px}}.loadingIndicator{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:rgba(34,211,238,.1);border-radius:.5rem;border:1px solid rgba(34,211,238,.2);color:var(--accent-1);font-size:.9rem}.smallSpinner{width:16px;height:16px;border:2px solid rgba(34,211,238,.2);border-top:2px solid var(--accent-1);border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}.pauseContent p{margin-bottom:2rem;opacity:.8;font-size:1.1rem}.btnSecondary{background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--border-color);padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease;font-size:14px}.btnSecondary:hover{background:var(--surface-card);border-color:var(--accent-primary);transform:translateY(-1px)}@media (max-width:768px){.boardFrame{margin-top:50px}.sidebar{display:none}.controlBtn{font-size:16px;padding:10px 14px;min-width:45px;height:45px}.pauseContent h2{font-size:1.5rem}.pauseContent p{font-size:1rem}}.mobileStartButton{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:40;text-align:center;padding:20px}.startGameBtn{font-size:18px!important;padding:16px 32px!important;border-radius:12px!important;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,.3);background:linear-gradient(45deg,var(--accent-1),var(--accent-2))!important}.startGameBtn:hover{transform:translateY(-2px)!important;box-shadow:0 6px 16px rgba(0,0,0,.4)}.startGameHint{margin:8px 0 0;color:var(--text-secondary);font-size:14px;opacity:.8}.mobilePauseButton{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:40}.pauseGameBtn{font-size:16px!important;padding:12px 24px!important;border-radius:8px!important;box-shadow:0 4px 12px rgba(0,0,0,.3)}