:root {
  --bg: #08090a;
  --panel: #0f1011;
  --surface: #191a1b;
  --surface2: #222329;
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);
  --text: #f7f8f8;
  --muted: #8a8f98;
  --dim: #62666d;
  --accent: #7170ff;
  --accent2: #5e6ad2;
  --good: #10b981;
  --hard: #facc15;
  --again: #fb7185;
  --easy: #38bdf8;
  --shadow: 0 24px 80px rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% -10%, rgba(113,112,255,.24), transparent 35%),
    radial-gradient(circle at 95% 20%, rgba(56,189,248,.14), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-feature-settings: "cv01", "ss03";
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  touch-action: manipulation;
}

.app-shell { max-width: 980px; margin: 0 auto; padding: 18px 16px 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font: 590 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 8px; }
h1 { font-size: 24px; margin: 0; letter-spacing: -.6px; font-weight: 590; }
h2 { font-size: 34px; line-height: 1.03; letter-spacing: -1px; margin: 0 0 12px; font-weight: 510; }
h3 { margin: 0; font-size: 18px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.storage-warning {
  border: 1px solid rgba(250, 204, 21, .38);
  background: rgba(250, 204, 21, .10);
  color: #fde68a;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.view { display: none; }
.view.active { display: block; }

.hero-card, .panel, .flashcard {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-glow { position: absolute; inset: -80px -40px auto auto; width: 220px; height: 220px; background: radial-gradient(circle, rgba(113,112,255,.38), transparent 62%); pointer-events: none; }
.hero-card > *:not(.hero-glow) { position: relative; }
.centered { text-align: center; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.stat-grid div { background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: 16px; padding: 12px 8px; text-align: center; }
.stat-grid span { display: block; font-size: 24px; font-weight: 590; }
.stat-grid label { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.primary, .ghost, .danger, .icon-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 590;
  font-size: 15px;
  background: rgba(255,255,255,.04);
  touch-action: manipulation;
}
.primary { background: linear-gradient(180deg, var(--accent), var(--accent2)); border-color: rgba(255,255,255,.18); }
.ghost { background: rgba(255,255,255,.035); }
.danger { background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.35); color: #fecdd3; }
.wide { width: 100%; margin-top: 10px; }
.small { min-height: 44px; padding: 0 12px; font-size: 13px; }
.icon-btn { width: 46px; height: 46px; }

.panel { margin-top: 16px; box-shadow: none; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--muted); }
.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chip, .pill { border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--text); border-radius: 999px; padding: 9px 12px; font-size: 13px; min-height: 38px; }
.chip { min-height: 44px; }
.chip.active { background: rgba(113,112,255,.2); border-color: rgba(113,112,255,.55); }
.chip small { color: var(--muted); margin-left: 6px; }

.study-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.progress-wrap { height: 10px; flex: 1; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--easy)); transition: width .25s ease; }
.flashcard { min-height: 500px; display: flex; flex-direction: column; gap: 14px; }
.flashcard:active, .primary:active, .ghost:active, .choice-btn:active, .chip:active { transform: scale(.992); }
.card-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; color: #d0d6e0; }
.subtle { color: var(--muted); }
.combo-label { align-self: flex-start; color: var(--easy); border: 1px solid rgba(56,189,248,.28); background: rgba(56,189,248,.08); border-radius: 999px; padding: 6px 10px; font: 590 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.choices-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.choice-btn {
  min-height: 74px;
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255,255,255,.04);
  font-size: 14px;
  line-height: 1.35;
}
.choice-letter { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(113,112,255,.15); color: #dcdcff; font: 590 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.choice-btn.correct { border-color: rgba(16,185,129,.75); background: rgba(16,185,129,.15); }
.choice-btn.correct .choice-letter { background: rgba(16,185,129,.28); color: #d1fae5; }
.choice-btn.incorrect { border-color: rgba(251,113,133,.75); background: rgba(251,113,133,.14); }
.choice-btn.incorrect .choice-letter { background: rgba(251,113,133,.28); color: #fecdd3; }
.choice-btn:disabled { opacity: 1; }

.answer-panel { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 6px; color: #d0d6e0; }
.answer-panel.hidden { display: none; }
.answer-panel p { font-size: 16px; line-height: 1.5; }
.answer-panel li { margin: 8px 0; color: var(--muted); }
.feedback-text { font-weight: 590; border-radius: 16px; padding: 12px; margin-top: 0; }
.feedback-text.correct { color: #d1fae5; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.32); }
.feedback-text.incorrect { color: #fecdd3; background: rgba(251,113,133,.11); border: 1px solid rgba(251,113,133,.32); }
.source-label { font-size: 12px; color: var(--dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.settings-dialog { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); max-width: 420px; width: calc(100% - 32px); box-shadow: var(--shadow); }
.settings-dialog::backdrop { background: rgba(0,0,0,.74); }
button:focus-visible, .flashcard:focus-visible, .choice-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(113,112,255,.18); }

@media (max-width: 640px) {
  .app-shell { padding: 14px 12px 22px; }
  h2 { font-size: 27px; }
  .hero-card, .panel, .flashcard { border-radius: 20px; padding: 18px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .flashcard { min-height: calc(100dvh - 145px); }
  .choices-panel { grid-template-columns: 1fr; }
  .choice-btn { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* VAST Drill v3 game layer */
:root {
  --motion-fast: 140ms;
  --motion-med: 260ms;
  --motion-slow: 900ms;
  --ease-pop: cubic-bezier(.2, 1.2, .2, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}
.view.active { animation: viewIn .28s var(--ease-standard); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.flashcard.enter { animation: cardDeal .32s var(--ease-pop); }
@keyframes cardDeal { from { opacity: 0; transform: translateY(18px) rotateX(7deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }

.cluster-map {
  position: relative;
  border: 1px solid rgba(113,112,255,.22);
  border-radius: 22px;
  min-height: 190px;
  margin: 16px 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(56,189,248,.12), transparent 55%), rgba(255,255,255,.025);
}
.cluster-svg { width: 100%; height: 190px; display: block; }
.cluster-svg rect, .cluster-svg circle { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.20); stroke-width: 1.4; }
.cluster-svg text { fill: rgba(247,248,248,.76); font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-path { fill: none; stroke: url(#pathGlow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 18; animation: packetFlow 2.4s linear infinite; opacity: .85; }
.data-path.delay, .node-core.delay { animation-delay: -1.1s; }
.node-core { fill: rgba(113,112,255,.13); animation: nodePulse 2.8s ease-in-out infinite; }
.storage-cell { fill: rgba(16,185,129,.11); }
.cluster-overlay { position: absolute; right: 14px; top: 14px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgba(8,9,10,.68); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.cluster-overlay span, .cluster-overlay small { color: var(--muted); font-size: 12px; }
.cluster-overlay strong { font-size: 30px; letter-spacing: -1px; }
@keyframes packetFlow { from { stroke-dashoffset: 72; } to { stroke-dashoffset: 0; } }
@keyframes nodePulse { 0%,100% { filter: drop-shadow(0 0 2px rgba(113,112,255,.35)); } 50% { filter: drop-shadow(0 0 12px rgba(56,189,248,.7)); } }

.rank-card { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 14px; border-radius: 18px; border: 1px solid rgba(250,204,21,.22); background: linear-gradient(135deg, rgba(250,204,21,.10), rgba(113,112,255,.08)); }
.rank-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(250,204,21,.16); color: #fde68a; font-size: 22px; }
.rank-card strong { display: block; }
.rank-card small { display: block; color: var(--muted); margin-top: 2px; }
.badge-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.badge { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; }
.badge.unlocked { color: #d1fae5; border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.10); }
.badge.locked { color: rgba(138,143,152,.65); background: rgba(255,255,255,.025); }

.mission-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 280px); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scroll-snap-type: x proximity; }
.mission-card { position: relative; min-height: 86px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--text); overflow: hidden; scroll-snap-align: start; }
.mission-card.active { border-color: rgba(113,112,255,.55); background: rgba(113,112,255,.13); }
.mission-card.active::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(56,189,248,.22), transparent); transform: translateX(-100%); animation: scan 2.2s ease-in-out infinite; }
.mission-card.has-alerts:not(.active) { border-color: rgba(250,204,21,.18); }
.mission-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; background: rgba(113,112,255,.14); font-size: 20px; z-index: 1; }
.mission-body { position: relative; z-index: 1; display: grid; gap: 5px; }
.mission-name { font-weight: 650; }
.mission-meta { color: var(--muted); font-size: 12px; }
.mission-bar { display: block; height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.mission-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--easy)); border-radius: inherit; }
@keyframes scan { to { transform: translateX(100%); } }

.choice-btn.correct::after { content: "✓"; justify-self: end; color: #d1fae5; font-weight: 800; }
.choice-btn.incorrect::after { content: "×"; justify-self: end; color: #fecdd3; font-weight: 800; }
.choice-btn.correct { animation: correctLift .28s ease-out; }
.choice-btn.incorrect { animation: wrongShake .32s ease-in-out; }
@keyframes correctLift { 0% { transform: scale(.99); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes wrongShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.concept-card { margin-top: 10px; padding: 13px; border-radius: 16px; border: 1px solid rgba(56,189,248,.20); background: rgba(56,189,248,.07); }
.concept-card span { color: var(--easy); text-transform: uppercase; letter-spacing: .12em; font: 650 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.detail-stack { margin-top: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.025); }
.detail-stack summary { cursor: pointer; font-weight: 650; color: #dbeafe; }
.source-label { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .cluster-svg { height: 170px; }
  .cluster-overlay { left: 12px; right: 12px; top: auto; bottom: 12px; grid-template-columns: auto auto; align-items: baseline; }
  .cluster-overlay small { grid-column: 1 / -1; }
  .mission-rail { grid-auto-columns: minmax(230px, 82vw); }
}

@media (prefers-reduced-motion: reduce) {
  .view.active, .flashcard.enter, .data-path, .node-core, .mission-card.active::before, .choice-btn.correct, .choice-btn.incorrect { animation: none !important; }
}