:root{--bg: #0f0f23;--bg-card: #1a1a3e;--bg-card-hover: #222255;--text: #f0f0ff;--text-dim: rgba(240, 240, 255, .6);--accent: #6c5ce7;--accent-glow: rgba(108, 92, 231, .3);--success: #00b894;--error: #e74c3c;--gold: #fdcb6e;--radius: 1rem;--radius-sm: .6rem}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}body{background:radial-gradient(ellipse at 20% 50%,rgba(108,92,231,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,184,148,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(225,112,85,.06) 0%,transparent 50%),var(--bg)}.app-root{min-height:100vh;display:flex;flex-direction:column;align-items:center}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.4rem;border:none;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 15px var(--accent-glow)}.btn-primary:hover{background:#7c6df7}.btn-secondary{background:#ffffff14;color:var(--text);border:1px solid rgba(255,255,255,.12)}.btn-secondary:hover{background:#ffffff24}.btn-hint{background:none;border:1px dashed rgba(253,203,110,.4);color:var(--gold);font-size:.85rem;padding:.4rem 1rem;border-radius:var(--radius-sm);cursor:pointer;margin-top:.5rem}.btn-hint:hover{border-color:var(--gold);background:#fdcb6e14}.btn-lg{padding:.85rem 2rem;font-size:1.05rem}.menu-container{max-width:52rem;width:100%;padding:3rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:2.5rem}.menu-header{text-align:center}.menu-title-row{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}.menu-book-emoji{font-size:3rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.menu-title{font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,#6c5ce7,#a29bfe 40%,#fd79a8,#fdcb6e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.menu-subtitle{color:var(--text-dim);font-size:1.1rem;margin-top:.25rem}.menu-stars{margin-top:.75rem}.star-counter{display:inline-flex;align-items:center;gap:.4rem;background:#fdcb6e1f;color:var(--gold);padding:.4rem 1rem;border-radius:2rem;font-weight:700;font-size:1rem}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;width:100%;max-width:40rem}@media(max-width:600px){.mode-grid{grid-template-columns:1fr}.menu-title{font-size:2rem}}.mode-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1.25rem;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);cursor:pointer;transition:all .25s;text-align:center;position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 0%,var(--card-color, var(--accent)),transparent 70%);opacity:0;transition:opacity .3s}.mode-card:hover{border-color:var(--card-color, var(--accent));transform:translateY(-4px);box-shadow:0 8px 30px #0000004d}.mode-card:hover:before{opacity:.15}.mode-emoji{font-size:2.5rem;position:relative;z-index:1}.mode-label{font-size:1.15rem;font-weight:700;color:var(--text);position:relative;z-index:1}.mode-desc{font-size:.82rem;color:var(--text-dim);position:relative;z-index:1}.genre-badges{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.genre-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border-radius:2rem;font-size:.78rem;font-weight:600;color:#fff;opacity:.85}.game-container{max-width:36rem;width:100%;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem}.game-header{display:flex;justify-content:space-between;align-items:center}.game-mode-title{font-size:1.3rem;font-weight:700}.game-score{background:#6c5ce726;color:var(--accent);padding:.35rem .9rem;border-radius:2rem;font-weight:700;font-size:.95rem}.progress-bar-track{width:100%;height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}.game-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:18rem}.game-counter{text-align:center;color:var(--text-dim);font-size:.85rem}.scramble-emoji{font-size:3rem}.scramble-letters{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin:.5rem 0}.scramble-letter{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.6rem;background:#6c5ce726;border:2px solid rgba(108,92,231,.3);border-radius:.5rem;font-size:1.3rem;font-weight:700;text-transform:uppercase;color:#e0d0ff;transition:transform .2s}.scramble-letter:hover{transform:scale(1.08)}.scramble-space{width:1.2rem;background:none;border:none}.scramble-hint-line{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center}.scramble-genre{padding:.25rem .65rem;border-radius:2rem;font-size:.78rem;font-weight:600;color:#fff}.scramble-author{color:var(--text-dim);font-size:.85rem;font-style:italic}.answer-form{display:flex;gap:.6rem;width:100%;max-width:24rem;margin-top:.5rem}.answer-input{flex:1;padding:.7rem 1rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}.answer-input:focus{border-color:var(--accent)}.answer-input.correct{border-color:var(--success);background:#00b8941a}.answer-input.wrong{border-color:var(--error);background:#e74c3c1a}.hint-text{color:var(--gold);font-size:.85rem;background:#fdcb6e14;padding:.4rem .8rem;border-radius:var(--radius-sm)}.fill-emoji{font-size:3rem}.fill-title{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;font-size:1.3rem;font-weight:700;margin:.5rem 0}.fill-word{padding:.2rem .4rem}.fill-blank{background:#00b89426;border-bottom:3px solid var(--success);border-radius:.3rem;padding:.2rem .8rem;color:var(--success);letter-spacing:2px}.fill-meta{display:flex;align-items:center;gap:.75rem}.fill-options{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:22rem}.fill-option{padding:.7rem 1rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.fill-option:hover:not(:disabled){border-color:var(--accent);background:#6c5ce71a}.fill-option-correct{border-color:var(--success)!important;background:#00b89426!important;color:var(--success)!important}.fill-option-wrong{border-color:var(--error)!important;background:#e74c3c26!important;color:var(--error)!important}.genre-book-emoji{font-size:3.5rem}.genre-book-title{font-size:1.4rem;font-weight:700;text-align:center}.genre-book-author{color:var(--text-dim);font-size:.9rem;font-style:italic}.genre-options{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:22rem;margin-top:.5rem}.genre-option{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.2rem;background:#ffffff0a;border:2px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.genre-option:hover:not(:disabled){border-color:var(--genre-color, var(--accent));background:#ffffff14}.genre-option-correct{border-color:var(--success)!important;background:#00b89426!important;color:var(--success)!important}.genre-option-wrong{border-color:var(--error)!important;background:#e74c3c26!important;color:var(--error)!important}.daily-phase-badge{background:#fdcb6e1f;color:var(--gold);padding:.35rem 1rem;border-radius:2rem;font-weight:700;font-size:.9rem}.feedback-banner{width:100%;padding:.8rem 1rem;border-radius:var(--radius-sm);font-weight:700;text-align:center;font-size:1rem;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback-banner.correct{background:#00b89426;color:var(--success);border:1px solid rgba(0,184,148,.3)}.feedback-banner.wrong{background:#e74c3c1f;color:var(--error);border:1px solid rgba(231,76,60,.3)}.results-container{min-height:100vh;display:grid;place-items:center;padding:2rem}.results-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:3rem 2.5rem;max-width:26rem;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}.results-title{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--gold),#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.results-score-circle{width:7rem;height:7rem;border-radius:50%;background:#6c5ce71f;border:3px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center}.results-score-num{font-size:2.2rem;font-weight:800;color:var(--accent)}.results-score-max{font-size:.85rem;color:var(--text-dim)}.star-rating{display:flex;gap:.5rem;font-size:2rem}.star{transition:transform .3s}.star-filled{animation:starPop .4s ease}@keyframes starPop{0%{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}.star-empty{opacity:.3}.results-msg{color:var(--text-dim);font-size:1rem;line-height:1.5}.results-stats{display:flex;gap:2rem}.stat{display:flex;flex-direction:column;gap:.25rem}.stat-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.stat-value{font-size:1.15rem;font-weight:700;color:var(--text)}.results-actions{display:flex;gap:.75rem;margin-top:.5rem}@media(max-width:500px){.game-container{padding:1.25rem 1rem}.game-card{padding:1.5rem 1rem}.scramble-letter{width:1.8rem;height:2.2rem;font-size:1.1rem}.fill-options{grid-template-columns:1fr}.answer-form{flex-direction:column}.results-stats{flex-direction:column;gap:.75rem}.results-actions{flex-direction:column;width:100%}.results-actions .btn{width:100%;justify-content:center}}