:root {
  color-scheme: dark;
  --bg: #070b17;
  --panel: rgba(15, 22, 43, 0.82);
  --panel-strong: rgba(21, 30, 58, 0.96);
  --line: rgba(148, 163, 184, 0.18);
  --text: #f8fafc;
  --muted: #a9b4c8;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --green: #34d399;
  --amber: #fbbf24;
  --rose: #fb7185;
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(139, 92, 246, .16), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(34, 211, 238, .12), transparent 28%),
    var(--bg);
  overflow-x: hidden;
}
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(34, 211, 238, .7); outline-offset: 3px; }

.ambient { position: fixed; width: 360px; height: 360px; border-radius: 50%; filter: blur(90px); opacity: .15; pointer-events: none; }
.ambient-a { background: var(--violet); top: -120px; left: -100px; }
.ambient-b { background: var(--cyan); right: -140px; bottom: -100px; }

.app-shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 56px; }
.topbar, .hero, .progress-panel, .game-card, .finish-card { position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-orb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-weight: 800; background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 8px 30px rgba(124, 58, 237, .35); }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); margin-top: 2px; }
.ghost-button { border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); border-radius: 999px; padding: 10px 16px; }
.ghost-button:hover { color: var(--text); border-color: rgba(34,211,238,.45); }

.hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(23,31,58,.9), rgba(12,18,35,.78)); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.hero h1 { margin: 8px 0 10px; font-size: clamp(2rem, 6vw, 4rem); line-height: .98; letter-spacing: -.05em; }
.hero p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.7; }
.eyebrow { display: inline-flex; padding: 7px 11px; border: 1px solid rgba(34,211,238,.25); background: rgba(34,211,238,.08); color: #a5f3fc; border-radius: 999px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.nora-avatar { position: relative; flex: 0 0 110px; width: 110px; height: 110px; display: grid; place-items: center; }
.nora-ring { position: absolute; inset: 0; border: 1px solid rgba(139,92,246,.5); border-radius: 50%; animation: pulse 3s infinite ease-in-out; }
.nora-face { width: 78px; height: 78px; border-radius: 28px; background: linear-gradient(145deg, #7c3aed, #0891b2); display: flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 14px 40px rgba(34,211,238,.18); }
.nora-face span { width: 9px; height: 16px; border-radius: 999px; background: white; box-shadow: 0 0 14px white; }
@keyframes pulse { 50% { transform: scale(1.09); opacity: .45; } }

.progress-panel { margin: 18px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,15,30,.72); }
.progress-copy { display: flex; justify-content: space-between; color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.progress-copy strong { color: #a5f3fc; }
.progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .4s ease; }

.game-card, .finish-card { padding: clamp(22px, 5vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(18px); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.question-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 24px; }
.topic-chip, .difficulty { font-size: .8rem; font-weight: 800; border-radius: 999px; padding: 7px 11px; }
.topic-chip { background: rgba(139,92,246,.14); color: #ddd6fe; border: 1px solid rgba(139,92,246,.3); }
.difficulty { color: var(--muted); border: 1px solid var(--line); }
.nora-message { margin: 0 0 12px; color: #a5f3fc; font-weight: 700; }
.game-card h2 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.55rem); line-height: 1.18; letter-spacing: -.035em; }
.question-context { color: var(--muted); line-height: 1.7; margin: 16px 0 24px; }

.options { display: grid; gap: 12px; }
.option-button { width: 100%; text-align: left; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 15px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.option-button:hover { transform: translateY(-2px); border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.05); }
.option-button.selected { border-color: var(--cyan); background: rgba(34,211,238,.09); }
.option-button.correct { border-color: var(--green); background: rgba(52,211,153,.1); }
.option-button.incorrect { border-color: var(--rose); background: rgba(251,113,133,.08); }
.option-letter { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.06); color: #cbd5e1; font-weight: 900; }
.option-button:disabled { cursor: default; transform: none; }

.action-row, .next-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }
.primary-button, .secondary-button { border-radius: 14px; padding: 13px 18px; font-weight: 850; border: 0; }
.primary-button { color: white; background: linear-gradient(135deg, #7c3aed, #0891b2); box-shadow: 0 10px 30px rgba(124,58,237,.25); }
.primary-button:disabled { opacity: .4; cursor: not-allowed; }
.secondary-button { color: #cbd5e1; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.wide { min-width: 210px; }
.hint-box { margin-top: 18px; padding: 16px 18px; border-radius: 15px; border: 1px solid rgba(251,191,36,.25); background: rgba(251,191,36,.07); color: #fde68a; line-height: 1.6; }

.answer-container { margin-top: 28px; animation: reveal .35s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } }
.answer-card { border-radius: 22px; border: 1px solid rgba(52,211,153,.25); overflow: hidden; background: linear-gradient(160deg, rgba(16,34,43,.94), rgba(18,25,48,.96)); }
.answer-hero { padding: 24px; background: linear-gradient(120deg, rgba(52,211,153,.11), rgba(34,211,238,.08)); border-bottom: 1px solid var(--line); }
.answer-badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(52,211,153,.12); color: #a7f3d0; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.answer-hero h3 { margin: 12px 0 8px; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.answer-hero p { color: #dbeafe; line-height: 1.7; margin: 0; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.info-block { padding: 18px; border-radius: 17px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.info-block.full { grid-column: 1 / -1; }
.info-block h4 { margin: 0 0 8px; font-size: .95rem; }
.info-block p { margin: 0; color: var(--muted); line-height: 1.65; }
.info-block.example h4 { color: #a5f3fc; }
.info-block.history h4 { color: #ddd6fe; }
.info-block.memory h4 { color: #fde68a; }
.learn-link { display: inline-flex; margin-top: 12px; color: #67e8f9; text-decoration: none; font-weight: 800; }
.learn-link:hover { text-decoration: underline; }
.feedback-strip { margin: 18px 18px 0; border-radius: 15px; padding: 14px 16px; font-weight: 750; line-height: 1.5; }
.feedback-strip.good { background: rgba(52,211,153,.1); color: #a7f3d0; }
.feedback-strip.grow { background: rgba(251,191,36,.08); color: #fde68a; }

.finish-card { text-align: center; }
.finish-icon { width: 76px; height: 76px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 25px; background: linear-gradient(135deg, var(--violet), var(--cyan)); font-size: 2rem; }
.finish-card h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 14px auto; max-width: 680px; }
.finish-card p { color: var(--muted); line-height: 1.7; }
.finish-stats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 24px 0; }
.stat-pill { min-width: 150px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); }
.stat-pill strong, .stat-pill span { display: block; }
.stat-pill strong { font-size: 1.5rem; }
.stat-pill span { color: var(--muted); font-size: .85rem; margin-top: 4px; }

[hidden] { display: none !important; }
@media (max-width: 680px) {
  .hero { align-items: flex-start; }
  .nora-avatar { width: 80px; height: 80px; flex-basis: 80px; }
  .nora-face { width: 58px; height: 58px; border-radius: 20px; }
  .answer-grid { grid-template-columns: 1fr; }
  .info-block.full { grid-column: auto; }
  .action-row { flex-direction: column-reverse; }
  .action-row button, .next-row button { width: 100%; }
}

.reward-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.45fr);gap:18px;align-items:stretch;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(11,18,36,.92),rgba(18,26,50,.82));overflow:hidden}.reward-copy{padding:14px;display:flex;flex-direction:column;justify-content:center}.reward-copy h2{margin:12px 0 8px;font-size:clamp(1.45rem,3vw,2.2rem);letter-spacing:-.035em}.reward-copy p{margin:0;color:var(--muted);line-height:1.65}.reward-stats{margin-top:18px;display:inline-flex;flex-direction:column;align-items:flex-start}.reward-stats strong{font-size:1.65rem;color:#a5f3fc}.reward-stats span{color:var(--muted);font-size:.85rem}.tanjiro-stage{position:relative;min-height:310px;border-radius:20px;overflow:hidden;border:1px solid rgba(34,211,238,.25);background:radial-gradient(circle at 75% 45%,rgba(34,211,238,.13),transparent 34%),#07111f;isolation:isolate}.tanjiro-silhouette,.tanjiro-reveal{position:absolute;inset:0;background-image:url('assets/tanjiro-reveal.png');background-size:cover;background-position:center}.tanjiro-silhouette{filter:grayscale(1) brightness(.18) contrast(1.25) blur(1px);opacity:.9}.tanjiro-reveal{clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.2,.8,.2,1),filter .5s ease;filter:saturate(1.08) contrast(1.05)}.tanjiro-grid{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;mix-blend-mode:screen}.tanjiro-flare{position:absolute;inset:-35%;z-index:4;pointer-events:none;opacity:0;background:conic-gradient(from 180deg,transparent,rgba(34,211,238,.45),transparent 25%,rgba(139,92,246,.5),transparent 50%)}.tanjiro-message{position:absolute;left:16px;bottom:16px;z-index:5;padding:9px 13px;border-radius:999px;background:rgba(5,10,22,.78);border:1px solid rgba(255,255,255,.18);color:#e2e8f0;font-weight:850;backdrop-filter:blur(10px)}.tanjiro-stage.new-fragment::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:rewardSweep .8s ease-out}.tanjiro-stage.complete{box-shadow:0 0 0 1px rgba(34,211,238,.35),0 0 55px rgba(34,211,238,.28),inset 0 0 45px rgba(139,92,246,.16)}.tanjiro-stage.complete .tanjiro-flare{animation:finalFlare 2.8s ease-out both}.tanjiro-stage.complete .tanjiro-reveal{filter:saturate(1.18) contrast(1.08) brightness(1.05)}@keyframes rewardSweep{to{transform:translateX(100%)}}@keyframes finalFlare{0%{opacity:0;transform:scale(.5) rotate(0)}35%{opacity:.8}100%{opacity:0;transform:scale(1.35) rotate(70deg)}}@media(max-width:760px){.reward-panel{grid-template-columns:1fr}.tanjiro-stage{min-height:260px}}

.perfect-reward{position:relative;display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:22px;align-items:center;margin:28px auto;padding:18px;max-width:760px;border-radius:24px;border:1px solid rgba(34,211,238,.35);background:linear-gradient(145deg,rgba(8,16,34,.96),rgba(28,18,58,.93));overflow:hidden;text-align:left}.perfect-reward img{position:relative;z-index:2;width:100%;max-height:430px;object-fit:cover;object-position:center;border-radius:18px;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 60px rgba(0,0,0,.45)}.perfect-copy{position:relative;z-index:2}.perfect-copy h3{margin:12px 0 8px;font-size:clamp(1.65rem,4vw,2.7rem)}.perfect-copy p{margin:0}.perfect-burst{position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent,rgba(34,211,238,.28),transparent 18%,rgba(139,92,246,.35),transparent 40%);animation:perfectSpin 14s linear infinite}.perfect-reward.unlocked{animation:perfectEnter .8s cubic-bezier(.2,.9,.2,1) both}@keyframes perfectSpin{to{transform:rotate(360deg)}}@keyframes perfectEnter{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:680px){.perfect-reward{grid-template-columns:1fr;text-align:center}.perfect-reward img{max-height:520px;object-fit:contain}}