:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--gold: #c89b3c;--gold-light: #f0e6d2;--blue: #0ac8b9;--blue-dark: #0a7e83;--red: #e84057;--green: #00bba3;--purple: #9b59b6;--bg: #010a13;--bg-card: #0a1a2f;--bg-card-hover: #0f2240;--border: rgba(200, 155, 60, .15);--border-bright: rgba(200, 155, 60, .35);--text: #cdbe91;--text-bright: #f0e6d2;--text-dim: #a09b8c;--accent: #c89b3c}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}.app-shell{min-height:100vh;display:flex;justify-content:center;padding:1.5rem;background:radial-gradient(ellipse at 50% 0%,rgba(200,155,60,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(10,200,185,.04) 0%,transparent 50%),var(--bg)}.home-screen{max-width:720px;width:100%;padding:2rem 0}.home-header{text-align:center;margin-bottom:2rem}.lol-logo{width:80px;height:auto;margin-bottom:.5rem;filter:drop-shadow(0 0 12px rgba(200,155,60,.4))}.home-header h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;color:var(--gold-light);margin:0 0 .5rem;text-shadow:0 0 40px rgba(200,155,60,.3)}.home-subtitle{color:var(--text-dim);font-size:.95rem;margin:0}.home-stats-bar{display:flex;align-items:center;gap:1.25rem;padding:.875rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;margin-bottom:1.25rem;flex-wrap:wrap}.mini-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.mini-stat-value{font-weight:700;font-size:1rem;color:var(--gold-light)}.mini-stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.mini-xp-bar{width:80px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.mini-xp-fill{height:100%;background:linear-gradient(90deg,var(--blue-dark),var(--blue));border-radius:2px;transition:width .5s ease}.btn-stats-link{margin-left:auto;background:none;border:none;color:var(--blue);cursor:pointer;font-size:.85rem;font-weight:600;padding:.25rem .5rem;border-radius:.375rem;transition:background .15s}.btn-stats-link:hover{background:#0ac8b91a}.daily-challenge-btn{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.25rem;background:linear-gradient(135deg,#c89b3c1f,#c89b3c0a);border:1px solid var(--border-bright);border-radius:.75rem;cursor:pointer;margin-bottom:1.5rem;transition:all .2s;color:var(--text);text-align:left}.daily-challenge-btn:hover:not(:disabled){background:linear-gradient(135deg,#c89b3c33,#c89b3c14);border-color:var(--gold);transform:translateY(-1px)}.daily-challenge-btn.completed{opacity:.6;cursor:default;border-color:var(--border)}.daily-icon{font-size:2rem}.daily-info{display:flex;flex-direction:column;gap:.15rem}.daily-title{font-weight:700;font-size:1rem;color:var(--gold-light)}.daily-desc{font-size:.8rem;color:var(--text-dim)}.modes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.mode-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.25rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;cursor:pointer;transition:all .2s;color:var(--text);text-align:center}.mode-card:hover{background:var(--bg-card-hover);border-color:var(--border-bright);transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.mode-icon{font-size:2rem}.mode-title{font-weight:700;font-size:.85rem;color:var(--gold-light)}.mode-desc{font-size:.7rem;color:var(--text-dim);line-height:1.3}.quiz-screen{max-width:600px;width:100%;padding:1rem 0}.quiz-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.quiz-header h2{margin:0;font-size:1.4rem;color:var(--gold-light);flex:1}.btn-back{background:var(--bg-card);border:1px solid var(--border);border-radius:.5rem;color:var(--text);cursor:pointer;font-size:1.1rem;padding:.35rem .65rem;line-height:1;transition:all .15s}.btn-back:hover{background:var(--bg-card-hover);border-color:var(--border-bright);color:var(--gold-light)}.quiz-meta{display:flex;gap:.5rem;align-items:center}.streak-badge,.score-badge,.daily-badge{font-size:.8rem;font-weight:600;padding:.2rem .6rem;border-radius:1rem;background:#ffffff0f;border:1px solid var(--border)}.streak-badge{color:#ff6b35}.score-badge{color:var(--gold-light)}.daily-badge{color:var(--blue)}.progress-bar-container{position:relative;width:100%;height:6px;background:#ffffff14;border-radius:3px;margin-bottom:1.5rem;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue-dark),var(--blue));border-radius:3px;transition:width .4s ease}.progress-bar-text{position:absolute;right:0;top:-1.4rem;font-size:.7rem;color:var(--text-dim)}.question-card{background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;margin-bottom:1.25rem;text-align:center}.clue-text{font-size:1rem;color:var(--text-bright);margin:.5rem 0 0;line-height:1.6}.lore-text{font-style:italic;color:var(--text)}.ability-name{font-size:1.1rem;font-weight:700;color:var(--gold);margin:0 0 .5rem}.voice-quote{font-size:1.3rem;font-style:italic;color:var(--gold-light);margin:0 0 .5rem;line-height:1.4}.emoji-clue{font-size:3rem;margin:.5rem 0;letter-spacing:.5rem}.sub-text{font-size:.8rem;color:var(--text-dim);margin:.5rem 0 0}.quiz-type-tag{display:inline-block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--blue);background:#0ac8b91a;border:1px solid rgba(10,200,185,.2);padding:.2rem .6rem;border-radius:.25rem;margin-bottom:.75rem}.champion-region-clue{display:flex;flex-direction:column;align-items:center;gap:.5rem}.champ-icon-large{width:72px;height:72px;border-radius:50%;border:2px solid var(--border-bright);object-fit:cover}.champion-region-clue h3{margin:0;font-size:1.2rem;color:var(--gold-light)}.stats-clues{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.stat-row{display:flex;justify-content:space-between;padding:.4rem .75rem;background:#ffffff08;border-radius:.375rem}.stat-label{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.stat-value{font-size:.85rem;color:var(--text-bright);font-weight:600}.skin-clue{display:flex;flex-direction:column;align-items:center;gap:.75rem}.blurred-splash{width:100%;max-width:300px;height:170px;object-fit:cover;border-radius:.5rem;filter:blur(12px) brightness(.7);transition:filter .3s}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}.option-btn{padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.5rem;color:var(--text);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .15s;text-align:center}.option-btn:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-bright);transform:translateY(-1px)}.option-btn.selected{border-color:var(--blue);background:#0ac8b91a;color:var(--blue)}.option-btn.correct{border-color:var(--green);background:#00bba326;color:var(--green);animation:pop .3s ease}.option-btn.wrong{border-color:var(--red);background:#e8405726;color:var(--red);animation:shake .3s ease}.option-btn:disabled{cursor:default;opacity:.85}@keyframes pop{50%{transform:scale(1.03)}}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.score-popup{text-align:center;font-size:1.5rem;font-weight:800;color:var(--gold);animation:floatUp 1s ease forwards;margin-bottom:.5rem}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}.result-section{text-align:center}.result-correct{font-size:1.1rem;font-weight:700;color:var(--green);margin-bottom:1rem}.result-wrong{font-size:1.1rem;font-weight:700;color:var(--red);margin-bottom:1rem}.btn-next{padding:.75rem 2rem;background:linear-gradient(135deg,var(--accent),#a07830);border:none;border-radius:.5rem;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-next:hover{transform:translateY(-1px);box-shadow:0 4px 16px #c89b3c4d}.results-screen{max-width:480px;width:100%;text-align:center;padding:3rem 1rem}.results-screen h2{font-size:1.8rem;color:var(--gold-light);margin-bottom:1rem}.results-grade{font-size:5rem;font-weight:800;line-height:1;margin-bottom:.5rem;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.results-score{font-size:1.3rem;color:var(--text);margin-bottom:1.5rem}.results-grid{font-size:1.5rem;letter-spacing:.15rem;margin-bottom:2rem;line-height:1.8;word-break:break-all}.results-actions{display:flex;flex-direction:column;gap:.6rem;align-items:center}.btn-primary{padding:.75rem 2.5rem;background:linear-gradient(135deg,var(--accent),#a07830);border:none;border-radius:.5rem;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;max-width:280px}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #c89b3c4d}.btn-secondary{padding:.65rem 2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.5rem;color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;width:100%;max-width:280px}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-bright)}.difficulty-screen{max-width:480px;width:100%;text-align:center;padding:2rem 0}.difficulty-screen h2{font-size:1.6rem;color:var(--gold-light);margin-bottom:.5rem}.difficulty-options{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}.difficulty-btn{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;cursor:pointer;transition:all .2s;color:var(--text);text-align:left}.difficulty-btn:hover{background:var(--bg-card-hover);border-color:var(--border-bright);transform:translate(4px)}.difficulty-btn.easy:hover{border-color:#00bba3}.difficulty-btn.medium:hover{border-color:#f0c040}.difficulty-btn.hard:hover{border-color:#ff6b35}.difficulty-btn.expert:hover{border-color:#e84057}.diff-icon{font-size:1.5rem}.diff-name{font-weight:700;font-size:1rem;color:var(--text-bright);min-width:70px}.diff-desc{font-size:.75rem;color:var(--text-dim)}.stats-screen{max-width:600px;width:100%;padding:1.5rem 0}.stats-screen h2{font-size:1.6rem;color:var(--gold-light);margin-bottom:1.5rem;text-align:center}.stats-screen h3{font-size:1.1rem;color:var(--text-bright);margin:1.5rem 0 .75rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;text-align:center}.stat-card-value{font-size:1.6rem;font-weight:800;color:var(--gold-light);margin-bottom:.15rem}.stat-card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.xp-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;margin-top:.5rem;overflow:hidden}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue-dark),var(--blue));border-radius:3px;transition:width .5s ease}.xp-text{font-size:.65rem;color:var(--text-dim);margin-top:.25rem}.category-stats{display:flex;flex-direction:column;gap:.5rem}.category-row{display:flex;align-items:center;gap:.75rem}.category-name{font-size:.8rem;color:var(--text);min-width:100px;text-align:right}.category-bar{flex:1;height:8px;background:#ffffff14;border-radius:4px;overflow:hidden}.category-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold-light));border-radius:4px;transition:width .5s ease}.category-pct{font-size:.75rem;color:var(--text-dim);min-width:35px;text-align:right;font-weight:600}.achievements-section{margin-top:1rem}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}.achievement{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.75rem .5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.6rem;opacity:.4;transition:all .2s}.achievement.unlocked{opacity:1;border-color:var(--border-bright);background:linear-gradient(135deg,#c89b3c14,#c89b3c05)}.achievement-icon{font-size:1.5rem}.achievement-name{font-size:.75rem;font-weight:700;color:var(--text-bright)}.achievement-desc{font-size:.6rem;color:var(--text-dim);text-align:center}.champion-hint-image{margin-top:.75rem}@media(max-width:600px){.app-shell{padding:1rem}.home-header h1{font-size:1.8rem}.modes-grid{grid-template-columns:repeat(2,1fr)}.options-grid{grid-template-columns:1fr}.stats-grid,.achievements-grid{grid-template-columns:repeat(2,1fr)}}