:root {
  --bg: #070b18;
  --bg-2: #0d1328;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-2: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.12);
  --ink: #eef1f8;
  --muted: #9aa5c0;
  --gold: #f5c76b;
  --gold-2: #e6a93c;
  --ok: #34d399;
  --ok-bg: rgba(52, 211, 153, 0.12);
  --bad: #f87171;
  --bad-bg: rgba(248, 113, 113, 0.12);
  --blue: #7aa2ff;
  --warn: #fbbf24;
  --hl: rgba(245, 199, 107, 0.45);
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 700px at 10% -10%, #1a2550 0%, transparent 60%), radial-gradient(900px 600px at 110% 10%, #2a1a45 0%, transparent 55%), var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-orbs i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; animation: drift 22s ease-in-out infinite alternate; }
.bg-orbs i:nth-child(1) { width: 420px; height: 420px; background: #3b5bdb; left: -120px; top: 30%; }
.bg-orbs i:nth-child(2) { width: 360px; height: 360px; background: #9c36b5; right: -100px; top: -80px; animation-delay: -8s; }
.bg-orbs i:nth-child(3) { width: 300px; height: 300px; background: #f59f00; right: 20%; bottom: -160px; opacity: .18; animation-delay: -14s; }
@keyframes drift { to { transform: translate(60px, -40px) scale(1.1); } }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; }
.gap { gap: 12px; }
.wrap { flex-wrap: wrap; }
.end { justify-content: flex-end; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font-size: 12px; background: var(--glass-2); }

.glass {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.card { padding: 22px; margin-bottom: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card h2, .card-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 4px 0 8px; letter-spacing: -.02em; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--gold); font-weight: 700; margin: 0; }

/* ---------- Botones e inputs ---------- */
.btn { border: 1px solid transparent; border-radius: 12px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .12s, box-shadow .2s, background .2s; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1d1405; box-shadow: 0 8px 24px rgba(245, 199, 107, .3); }
.btn-gold:hover { box-shadow: 0 10px 32px rgba(245, 199, 107, .45); }
.btn-ghost { background: var(--glass-2); border-color: var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-danger { background: linear-gradient(135deg, #f87171, #dc2626); color: #fff; }
.btn:disabled { opacity: .35; cursor: default; }

label { font-size: 14px; color: var(--muted); display: block; }
input:not([type=radio]):not([type=checkbox]), select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); color: var(--ink); outline: none;
}
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,199,107,.18); }
select option { background: var(--bg-2); }
input[type=checkbox], input[type=radio] { accent-color: var(--gold); width: 17px; height: 17px; }
.checks { display: grid; gap: 8px; margin: 6px 0 20px; }
.checks label { color: var(--ink); font-size: 15px; display: flex; gap: 10px; align-items: center; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 420px; padding: 30px 28px; text-align: left; }
.login-card h1 { font-size: 26px; }
.login-card label { margin-bottom: 14px; }
.login-card .mascot-slot { display: flex; justify-content: center; margin: -10px 0 4px; }
.alert { background: var(--bad-bg); border: 1px solid rgba(248,113,113,.4); color: #fecaca; padding: 10px 12px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
.logo-row { display: flex; align-items: center; gap: 10px; }
.logo { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1d1405; font-weight: 800; padding: 6px 10px; border-radius: 10px; letter-spacing: .04em; }
.logo-text { font-weight: 800; font-size: 20px; letter-spacing: -.01em; }

/* ---------- Navegación ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 12px clamp(16px, 4vw, 40px); background: rgba(7, 11, 24, .7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); gap: 12px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-user { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #7aa2ff, #9c36b5); font-weight: 800; }
.xp-pill { background: linear-gradient(135deg, #ffb300, #ff6f00); color: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 18px rgba(255, 140, 0, .3); white-space: nowrap; }

/* ---------- Pantallas ---------- */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.page { max-width: 1120px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 32px) 60px; }
.page.narrow { max-width: 760px; }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; margin-bottom: 20px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 220px at 85% 50%, rgba(245,199,107,.18), transparent 70%); pointer-events: none; border-radius: inherit; }
.hero-text { flex: 1; min-width: 0; }
.countdown { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cd-box { background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; min-width: 84px; text-align: center; }
.cd-box b { display: block; font-size: 26px; color: var(--gold); line-height: 1.1; }
.cd-box span { font-size: 12px; color: var(--muted); }

.banner { display: flex; gap: 10px; align-items: center; padding: 14px 18px; margin-bottom: 20px; flex-wrap: wrap; border-color: rgba(245,199,107,.4); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { padding: 16px 18px; }
.kpi .k-label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .k-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.kpi .k-sub { font-size: 12px; color: var(--muted); }
.k-ok .k-val { color: var(--ok); }
.k-bad .k-val { color: var(--bad); }
.k-gold .k-val { color: var(--gold); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2.tight { gap: 14px; margin-bottom: 14px; }

.chart svg { width: 100%; height: auto; display: block; }
.chart .empty { color: var(--muted); padding: 30px 0; text-align: center; }

.dbar { margin-bottom: 16px; }
.dbar-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.dbar-head b { font-weight: 700; }
.bar { height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7aa2ff, #a78bfa); transition: width .6s ease; }
.bar.ok > i { background: linear-gradient(90deg, #10b981, #34d399); }
.bar.mid > i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar.low > i { background: linear-gradient(90deg, #ef4444, #f87171); }

.presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.preset { border: 1px solid var(--line); background: rgba(0,0,0,.18); border-radius: 14px; padding: 14px; display: flex; gap: 12px; cursor: pointer; align-items: center; color: var(--ink); transition: border-color .2s, background .2s; }
.preset input { display: none; }
.preset:has(input:checked) { border-color: var(--gold); background: rgba(245,199,107,.1); box-shadow: inset 0 0 0 1px var(--gold); }
.preset span:last-child { display: flex; flex-direction: column; }
.preset small { color: var(--muted); }
.p-ico { font-size: 26px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-2); flex: none; }

.hist-table, .stat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist-table th, .hist-table td, .stat-table th, .stat-table td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.hist-table th, .stat-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hist-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; }
.score-chip { font-weight: 800; padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.sc-ok { background: var(--ok-bg); color: var(--ok); }
.sc-mid { background: rgba(251,191,36,.12); color: var(--warn); }
.sc-low { background: var(--bad-bg); color: var(--bad); }

.intro-list { padding-left: 20px; }
.intro-list li { margin-bottom: 10px; }

/* ---------- Avance personal ---------- */
.privacy { margin: -6px 0 18px; text-align: center; }
.trend-table td.delta { font-weight: 800; white-space: nowrap; }
.up { color: var(--ok); }
.down { color: var(--bad); }
.flat { color: var(--muted); }
.failed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.failed-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.18); }
.failed-list .f-count { min-width: 44px; text-align: center; font-weight: 800; color: var(--bad); font-size: 18px; }
.failed-list .f-topic { flex: 1; }
.failed-list .f-topic small { display: block; color: var(--muted); }

/* ---------- Examen ---------- */
.exam-top { position: sticky; top: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 40px); background: rgba(7, 11, 24, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.et-left { display: flex; flex-direction: column; }
.et-title { font-weight: 700; font-size: 15px; }
.et-sec { font-size: 12px; color: var(--muted); }
.et-right { display: flex; gap: 10px; align-items: center; }
.timer-pill, .count-pill { background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; white-space: nowrap; }
.timer-pill { cursor: pointer; user-select: none; font-variant-numeric: tabular-nums; }
.timer-pill b { font-size: 16px; }
.timer-pill.low { border-color: var(--bad); color: #fecaca; animation: pulse 1s ease-in-out infinite; }
.timer-pill.masked b { filter: blur(6px); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(248,113,113,.15); } }

.progress-wrap { max-width: 1240px; margin: 18px auto 0; padding: 0 clamp(16px, 4vw, 40px); position: relative; z-index: 1; }
.progress { height: 12px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
#progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #ff8a3d); border-radius: inherit; transition: width .4s ease; box-shadow: 0 0 16px rgba(245,199,107,.6); }
.progress-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 6px; gap: 10px; flex-wrap: wrap; }
.live-score b.ok { color: var(--ok); }
.live-score b.bad { color: var(--bad); }

.exam-grid { max-width: 1240px; margin: 14px auto 40px; padding: 0 clamp(16px, 4vw, 40px); display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; position: relative; z-index: 1; }
.q-card { padding: 0 0 18px; }
.toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tool { background: var(--glass-2); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 6px 11px; font-size: 13px; cursor: pointer; font-family: inherit; }
.tool:hover { background: rgba(255,255,255,.14); }
.tool.on { background: rgba(245,199,107,.18); border-color: var(--gold); }
.tool.on .flag-ico { color: var(--gold); }
.q-stem { font-size: 18px; line-height: 1.6; padding: 22px 24px 8px; }
.q-stem mark { background: var(--hl); color: inherit; border-radius: 3px; }
.q-options { list-style: none; padding: 8px 24px; margin: 0; display: grid; gap: 10px; }
.q-options li { border: 1px solid var(--line); background: rgba(0,0,0,.2); border-radius: 14px; padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, transform .1s; }
.q-options li:hover:not(.locked) { border-color: rgba(245,199,107,.6); background: rgba(245,199,107,.06); }
.q-options li.sel { border-color: var(--gold); background: rgba(245,199,107,.12); }
.q-options li.struck .opt-text { text-decoration: line-through; color: #69728a; }
.q-options li.correct { border-color: var(--ok); background: var(--ok-bg); }
.q-options li.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shakeX .35s; }
.q-options li.locked { cursor: default; }
.radio { width: 22px; height: 22px; border: 2px solid #6b7592; border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; }
.sel .radio { border-color: var(--gold); }
.sel .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.correct .radio { border-color: var(--ok); }
.correct .radio::after { content: "✓"; width: auto; height: auto; background: none; color: var(--ok); font-weight: 800; font-size: 13px; }
.wrong .radio { border-color: var(--bad); }
.opt-letter { font-weight: 800; min-width: 18px; color: var(--muted); }
.opt-text { flex: 1; }
.strike-btn { background: none; border: 0; color: #6b7592; cursor: pointer; font-size: 13px; padding: 0 4px; }
.strike-btn:hover { color: var(--bad); }
@keyframes shakeX { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.feedback { margin: 16px 24px 0; border-radius: 14px; padding: 16px 18px; font-size: 15px; animation: fade .3s ease; }
.feedback.ok { background: var(--ok-bg); border: 1px solid rgba(52,211,153,.45); }
.feedback.bad { background: var(--bad-bg); border: 1px solid rgba(248,113,113,.45); }
.fb-head { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.fb-head .fb-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.ok .fb-ico { background: var(--ok); color: #052e1f; }
.bad .fb-ico { background: var(--bad); color: #3b0909; }
.fb-brief { margin: 8px 0 0; }
.fb-more { margin-top: 8px; }
.fb-more summary { cursor: pointer; color: var(--gold); font-weight: 600; font-size: 14px; }
.fb-more p { margin: 6px 0; font-size: 14px; color: #d4d9e6; }

.q-nav { display: flex; gap: 10px; align-items: center; padding: 18px 24px 0; flex-wrap: wrap; }

.mascot-card { position: sticky; top: 90px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.ms { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; }
.ms b { display: block; font-size: 20px; }
.ms span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ms.ok b { color: var(--ok); }
.ms.bad b { color: var(--bad); }

/* ---------- Paneles flotantes ---------- */
.float-panel { position: fixed; right: 24px; top: 130px; z-index: 40; width: 260px; background: #141b33; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
#notes { width: 340px; right: 300px; }
.fp-head { padding: 8px 12px; display: flex; justify-content: space-between; cursor: move; user-select: none; font-weight: 700; border-bottom: 1px solid var(--line); }
.fp-x { background: none; border: 0; color: var(--ink); cursor: pointer; }
.calc-display { width: calc(100% - 20px) !important; margin: 10px !important; text-align: right; font-size: 22px !important; font-variant-numeric: tabular-nums; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 10px 10px; }
.calc-keys button { padding: 11px 0; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass-2); color: var(--ink); cursor: pointer; font-family: inherit; }
.calc-keys .k-alt { background: rgba(122,162,255,.14); }
.calc-keys .k-eq { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1d1405; font-weight: 800; }
#notes-text { width: calc(100% - 20px); height: 220px; margin: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-family: inherit; font-size: 14px; resize: vertical; background: rgba(0,0,0,.25); color: var(--ink); }

/* ---------- Revisión ---------- */
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 16px; font-size: 14px; }
.sq { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; font-style: normal; font-size: 10px; }
.sq-done { background: var(--gold); }
.sq-empty { border: 2px solid var(--bad); }
.sq-flag { background: rgba(245,199,107,.2); border: 1px solid var(--gold); color: var(--gold); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rv-cell { position: relative; border: 2px solid rgba(248,113,113,.7); background: rgba(0,0,0,.2); color: var(--ink); border-radius: 12px; padding: 10px 0; text-align: center; cursor: pointer; font-weight: 700; font-family: inherit; font-size: 15px; }
.rv-cell.done { border-color: var(--gold); background: rgba(245,199,107,.16); }
.rv-cell .f { position: absolute; top: -8px; right: -6px; background: var(--gold); color: #1d1405; border-radius: 6px; font-size: 10px; padding: 0 4px; }
.big-timer { font-size: 72px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 18px 0; color: var(--gold); }

/* ---------- Resultados ---------- */
.result-hero .score { font-size: 72px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 6px 0; background: linear-gradient(135deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-hero .verdict { font-size: 19px; font-weight: 700; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.badge { background: rgba(245,199,107,.12); border: 1px solid rgba(245,199,107,.4); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.rating { font-weight: 700; white-space: nowrap; }
.r-above { color: var(--ok); }
.r-target { color: var(--blue); }
.r-below { color: var(--warn); }
.r-ni { color: var(--bad); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--ink); padding: 7px 14px; cursor: pointer; font-family: inherit; font-weight: 600; }
.seg button.on { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1d1405; }

.ar-item { border-top: 1px solid var(--line); padding: 18px 0; }
.ar-item:first-child { border-top: 0; }
.ar-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.tag { border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-bad { background: var(--bad-bg); color: var(--bad); }
.tag-skip { background: var(--glass-2); color: var(--muted); }
.ar-opts { margin: 10px 0; padding-left: 0; list-style: none; font-size: 15px; display: grid; gap: 4px; }
.ar-opts li { padding: 6px 10px; border-radius: 8px; }
.ar-opts li.c { background: var(--ok-bg); }
.ar-opts li.w { background: var(--bad-bg); }
.ar-expl { background: rgba(0,0,0,.22); border-left: 3px solid var(--gold); padding: 10px 14px; font-size: 14px; border-radius: 0 10px 10px 0; }
.ar-expl p { margin: 4px 0; }

/* ---------- Modales ---------- */
.modal { position: fixed; inset: 0; background: rgba(3, 6, 15, .7); display: grid; place-items: center; z-index: 60; padding: 16px; backdrop-filter: blur(4px); }
.modal-box { padding: 24px; max-width: 460px; width: 100%; background: #121a33; }
.welcome-box { max-width: 520px; text-align: center; animation: fade .4s ease; }
.welcome-box h2 { font-size: 26px; margin: 4px 0 10px; }
.welcome-box .mascot-slot { display: flex; justify-content: center; }
#welcome-text p { margin: 8px 0; color: #d4d9e6; }
#welcome-text .w-days { font-size: 40px; font-weight: 800; color: var(--gold); line-height: 1; margin: 14px 0 4px; }

/* ---------- Rocky ---------- */
.rocky { --size: 160px; position: relative; width: var(--size); display: flex; flex-direction: column; align-items: center; }
.rocky-stage { position: relative; width: 100%; }
.rocky-svg { width: 100%; height: auto; display: block; overflow: visible; transition: filter .3s; }
.rocky-name { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
.rocky .shadow { fill: rgba(0,0,0,.45); }
.rocky .leg-line { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.rocky .joint { fill: #5d4e40; stroke: #2e261f; stroke-width: 2; }
.rocky .claws line { stroke: #3f342b; stroke-width: 4; stroke-linecap: round; }
.rocky .crack { fill: none; stroke: rgba(30, 22, 16, .55); stroke-width: 2.2; stroke-linecap: round; }
.rocky .spot { fill: rgba(40, 30, 22, .45); }
.rocky .spot.light { fill: rgba(240, 225, 200, .35); }
.rocky .vent { fill: #1f1914; }
.rocky .vent-lip { fill: none; stroke: #2e261f; stroke-width: 2; }
.rocky .steam { fill: none; stroke: #f87171; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.rocky .body-wrap { transform-origin: 110px 190px; transform-box: view-box; }
.rocky .shell { transform-origin: 110px 90px; transform-box: view-box; }
.rocky .leg { transform-box: view-box; }

.rocky.idle .body-wrap { animation: bob 2.6s ease-in-out infinite; }
.rocky.idle .l1, .rocky.idle .l5 { animation: tap 2.6s ease-in-out infinite; }
.rocky.idle .l3 { animation: tap 2.6s ease-in-out infinite .6s; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes tap { 50% { transform: rotate(4deg); } }

.rocky.happy .rocky-svg, .rocky.cheer .rocky-svg { filter: drop-shadow(0 0 18px rgba(52, 211, 153, .65)) brightness(1.12); }
.rocky.happy .body-wrap, .rocky.cheer .body-wrap { animation: jump .55s ease-in-out 3; }
.rocky.happy .l1, .rocky.happy .l5, .rocky.cheer .l1, .rocky.cheer .l5 { animation: wave .28s ease-in-out infinite alternate; }
.rocky.happy .l2, .rocky.happy .l4, .rocky.cheer .l2, .rocky.cheer .l4 { animation: wave .28s ease-in-out infinite alternate-reverse; }
.rocky.cheer .shell { animation: spin 1s ease-in-out 2; }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(2px) scale(1.06, .92); } 50% { transform: translateY(-26px) scale(.96, 1.05); } }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes spin { 50% { transform: rotate(-12deg) scale(1.05); } }

.rocky.angry .rocky-svg { filter: drop-shadow(0 0 16px rgba(248, 113, 113, .75)) sepia(.4) saturate(2.2) hue-rotate(-20deg); }
.rocky.angry .body-wrap { animation: shake .09s linear 14; }
.rocky.angry .l1, .rocky.angry .l5 { animation: stomp .2s ease-in-out 6 alternate; }
.rocky.angry .steam { animation: steam .5s ease-out 4; }
@keyframes shake { 25% { transform: translate(-4px, 1px) rotate(-2deg); } 75% { transform: translate(4px, -1px) rotate(2deg); } }
@keyframes stomp { to { transform: rotate(-20deg); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

.rocky .notes { position: absolute; inset: 0; pointer-events: none; }
.rocky .notes span { position: absolute; bottom: 55%; font-size: calc(var(--size) * .13); color: var(--gold); opacity: 0; animation: note 1.5s ease-out forwards; text-shadow: 0 0 10px rgba(245,199,107,.7); }
.rocky.angry .notes span { color: var(--bad); text-shadow: 0 0 10px rgba(248,113,113,.7); }
@keyframes note { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--size) * -.55)) translateX(10px) rotate(20deg) scale(1.2); } }

.rocky-bubble { position: relative; background: #fff; color: #141824; font-weight: 700; font-size: 14px; line-height: 1.35; padding: 9px 13px; border-radius: 14px; margin-bottom: 8px; max-width: 240px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.rocky-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; }
.rocky-bubble.pop { animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.rocky.angry .rocky-bubble { background: #fee2e2; color: #7f1d1d; }
.rocky.angry .rocky-bubble::after { border-top-color: #fee2e2; }
.rocky.happy .rocky-bubble, .rocky.cheer .rocky-bubble { background: #d1fae5; color: #064e3b; }
.rocky.happy .rocky-bubble::after, .rocky.cheer .rocky-bubble::after { border-top-color: #d1fae5; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .exam-grid { grid-template-columns: 1fr; }
  .mascot-card { position: fixed; right: 10px; bottom: 10px; top: auto; z-index: 30; padding: 8px; width: 132px; }
  .mascot-card .mini-stats, .mascot-card .rocky-name { display: none; }
  .mascot-card .rocky-bubble { position: absolute; bottom: 100%; right: 0; width: 200px; max-width: none; }
  .q-card { margin-bottom: 150px; }
}
@media (max-width: 680px) {
  .presets, .grid-2 { grid-template-columns: 1fr; }
  .hero { flex-direction: column-reverse; text-align: center; padding: 22px 18px; }
  .countdown { justify-content: center; }
  .nav-user { display: none; }
  .q-stem { font-size: 16.5px; padding: 18px 16px 6px; }
  .q-options { padding: 6px 16px; }
  .feedback { margin: 14px 16px 0; }
  .q-nav { padding: 16px 16px 0; }
  .q-nav .btn { flex: 1; }
  .float-panel, #notes { right: 8px; left: 8px; width: auto; }
  .result-hero .score { font-size: 56px; }
  .et-title { font-size: 13px; }
}