/* =====================================================================
   VEXTAL · STUDY ARCADE — box-free skin. No cards, no panels, no borders,
   no glass: floating text + bare SVG strokes over the live starfield.
   ===================================================================== */

#vextal-arcade-root {
  display: flex; flex-direction: column; gap: 1rem; height: 100%;
  font-family: 'Oxanium', sans-serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

/* ── HUD row ── */
.va-hud { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.va-counter { font-size: .8rem; font-weight: 700; letter-spacing: 3px; color: #8fe9ff;
  text-shadow: 0 0 1px #fff, 0 0 10px currentColor; }
.va-chip { font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; color: #8a94a6;
  font-variant-numeric: tabular-nums; transition: color .25s ease, text-shadow .25s ease; }
.va-chip.hot { color: #ffb224; text-shadow: 0 0 1px #fff, 0 0 12px #ffb224; }
.va-chip.pop { animation: vaPop .45s ease; }
@keyframes vaPop { 40% { transform: scale(1.35); } }
.va-xp { width: 110px; height: 3px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.va-xp span, #va-xp-fill { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #0cdcf8, #c06dff); transition: width .4s ease; }
.va-link { font-family: inherit; font-size: .62rem; font-weight: 600; letter-spacing: 1.5px;
  color: #8a94a6; background: none; border: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.va-link:hover, .va-link.on { color: #0cdcf8; text-shadow: 0 0 10px rgba(12,220,248,.6); }

/* ── subject names (floating) ── */
.va-subnav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.va-sub { font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #8a94a6; background: none; border: none; cursor: pointer;
  transition: color .2s ease, text-shadow .2s ease; }
.va-sub:hover { color: #dffaff; }
.va-sub.active { color: #14e8a2; text-shadow: 0 0 1px #fff, 0 0 12px #14e8a2; }
.va-sub.dev::after { content: ' ·'; color: #ffb224; }

/* ── era timeline: floating glyph row, hairline fills, hover tips ── */
.va-timeline { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.va-tl-node { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; cursor: default; opacity: .65; transition: opacity .2s ease, transform .2s ease; }
.va-tl-node.active { opacity: 1; transform: translateY(-2px); }
.va-tl-node.done   { opacity: .9; }
.va-tl-icon { font-size: 1.05rem; filter: drop-shadow(0 0 6px rgba(12,220,248,.45)); }
.va-tl-node.aced .va-tl-icon { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #14e8a2); }
.va-tl-track { width: 30px; height: 2px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.va-tl-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#0cdcf8,#c06dff); transition: width .35s ease; }
.va-tl-tip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 2px; white-space: nowrap; z-index: 5;
  font-size: .6rem; letter-spacing: 1px; color: #dffaff; text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 10px rgba(12,220,248,.4); }
.va-tl-tip i  { color: #8a94a6; font-style: normal; }
.va-tl-tip em { color: #14e8a2; font-style: normal; }
.va-tl-node:hover .va-tl-tip, .va-tl-node:focus .va-tl-tip { display: flex; }

/* ── arena: bare ring | stage | bare ring ── */
.va-arena { display: flex; align-items: center; gap: 2rem; flex: 1; min-height: 0; }
.va-ring { position: relative; flex: 0 0 150px; width: 150px; }
.va-ring svg { width: 100%; height: auto; display: block; }
.va-ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 7; }
.va-ring-arc { fill: none; stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .65s cubic-bezier(.25,1,.5,1);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px currentColor); }
.va-ring-arc.acc  { stroke: #14e8a2; color: #14e8a2; }
.va-ring-arc.comp { stroke: #0cdcf8; color: #0cdcf8; }
.va-ring-read { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.va-ring-read b { font-size: 1.9rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 1px #fff, 0 0 14px rgba(12,220,248,.55); }
.va-ring-read span { font-size: .52rem; letter-spacing: 3px; color: #8a94a6; font-family: 'Courier New', monospace; }
.va-ring.pulse svg { animation: vaRingPulse .5s ease; }
@keyframes vaRingPulse { 40% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) {
  .va-ring-arc { transition: none; }
  .va-ring.pulse svg, .va-chip.pop, .va-q.shake { animation: none !important; }
}

/* ── stage / intro ── */
.va-stage { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: .4rem .2rem; }
.va-stage::-webkit-scrollbar { display: none; }
.va-kicker { font-size: .62rem; font-weight: 700; letter-spacing: 4px; color: #8a94a6; }
.va-kicker.gold { color: #ffb224; text-shadow: 0 0 1px #fff, 0 0 12px #ffb224; }
.va-title { font-size: 2.1rem; font-weight: 800; letter-spacing: 4px; margin: .4rem 0; color: #fff;
  text-shadow: 0 0 1px #fff, 0 0 18px rgba(12,220,248,.65), 0 0 40px rgba(192,109,255,.35); }
.va-title-sm { font-size: 1.4rem; font-weight: 800; letter-spacing: 2px; margin: .3rem 0; color: #fff;
  text-shadow: 0 0 1px #fff, 0 0 16px rgba(12,220,248,.55); }
.va-lead { font-size: .95rem; color: #c9d6e8; letter-spacing: .5px; }
.va-sub  { font-size: .8rem;  color: #8a94a6; line-height: 1.6; max-width: 52ch; }
.va-best { font-size: .72rem; font-weight: 700; letter-spacing: 2px; color: #ffb224;
  text-shadow: 0 0 1px #fff, 0 0 10px #ffb224; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.va-gate { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.4rem; align-items: flex-start; }
.va-chip-connected { font-size: .72rem; letter-spacing: 1.5px; color: #14e8a2;
  text-shadow: 0 0 1px #fff, 0 0 10px rgba(20,232,162,.6); }
.va-chip-connected b { color: #fff; }
.va-chip-connected .va-link { margin-left: .8rem; }
.va-cta { font-family: inherit; font-size: .92rem; font-weight: 800; letter-spacing: 3px;
  color: #dffaff; background: none; border: none; cursor: pointer; padding: .2rem 0;
  text-shadow: 0 0 1px #fff, 0 0 14px rgba(12,220,248,.7);
  transition: transform .25s ease, text-shadow .25s ease; }
.va-cta:hover { transform: translateX(4px); text-shadow: 0 0 2px #fff, 0 0 22px rgba(12,220,248,.95); }
.va-cta.alt { color: #ffd9a8; text-shadow: 0 0 1px #fff, 0 0 14px rgba(255,178,36,.7); }
.va-cta small { font-size: .55rem; letter-spacing: 1px; color: #8a94a6; text-shadow: none; }
.va-keys { font-size: .62rem; letter-spacing: 1.5px; color: #8a94a6; font-family: 'Courier New', monospace; }

/* ── question (floating display text) ── */
.va-q { display: flex; flex-direction: column; gap: 1.1rem; max-width: 760px; }
.va-qmeta { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .66rem; letter-spacing: 2px; }
.va-era { color: #8fe9ff; text-shadow: 0 0 10px rgba(12,220,248,.5); }
.va-qtag { color: #8a94a6; font-variant-numeric: tabular-nums; }
.va-qtag.red { color: #ffb224; text-shadow: 0 0 10px rgba(255,178,36,.55); }
.va-qtext { font-size: 1.45rem; font-weight: 700; line-height: 1.45; color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,.95), 0 0 24px rgba(12,220,248,.25); margin: 0; }
.va-opts { display: flex; flex-direction: column; gap: .65rem; }
.va-opt { display: flex; align-items: baseline; gap: .9rem; text-align: left;
  font-family: inherit; font-size: 1.02rem; line-height: 1.5; color: #c9d6e8;
  background: none; border: none; cursor: pointer; padding: .25rem 0;
  transition: color .2s ease, transform .25s ease, text-shadow .25s ease; }
.va-num { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: #8a94a6;
  font-family: 'Courier New', monospace; transition: color .2s ease, text-shadow .2s ease; }
.va-opt:hover:not(:disabled) { color: #ffffff; transform: translateX(6px);
  text-shadow: 0 0 1px #fff, 0 0 14px rgba(12,220,248,.55); }
.va-opt:hover .va-num { color: #0cdcf8; text-shadow: 0 0 10px rgba(12,220,248,.7); }
.va-opts.resolved .va-opt { cursor: default; pointer-events: none; }
.va-opt.correct, .va-opt.correct .va-num { color: #14e8a2 !important;
  text-shadow: 0 0 1px #fff, 0 0 16px rgba(20,232,162,.8) !important; }
.va-opt.wrong, .va-opt.wrong .va-num { color: #ff5cb1 !important;
  text-shadow: 0 0 1px #fff, 0 0 16px rgba(255,92,177,.8) !important; }
.va-q.shake { animation: vaShake .38s ease; }
@keyframes vaShake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); } 90% { transform: translateX(2px); } }

/* ── debrief: floating staggered text over a darkened backdrop ── */
#va-debrief { position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 5, 14, .88); backdrop-filter: blur(5px);
  font-family: 'Oxanium', sans-serif; }
#va-debrief.open { display: flex; }
.va-d-seq { display: flex; flex-direction: column; gap: 1rem; width: min(680px, 88vw);
  max-height: 86vh; overflow-y: auto; scrollbar-width: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.95); }
.va-d-seq::-webkit-scrollbar { display: none; }
.va-d-row { display: flex; flex-direction: column; gap: .25rem; }
.va-d-k { font-size: .58rem; font-weight: 700; letter-spacing: 3px; color: #8a94a6; }
.va-d-v { font-size: .98rem; line-height: 1.6; color: #dfe9f8; }
.va-d-v.wrong { color: #ff5cb1; text-shadow: 0 0 1px #fff, 0 0 14px rgba(255,92,177,.6); }
.va-d-v.right { color: #14e8a2; text-shadow: 0 0 1px #fff, 0 0 14px rgba(20,232,162,.6); }
.va-d-v.glow  { color: #8fe9ff; text-shadow: 0 0 1px #fff, 0 0 14px rgba(12,220,248,.6); }
.va-d-era { font-size: .64rem; letter-spacing: 2px; color: #8a94a6; }

/* ── toast + fx + sr ── */
#va-toast { position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%) translateY(14px);
  z-index: 100001; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  font-family: 'Oxanium', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: 1px;
  color: #dffaff; max-width: 80vw; text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 1px #fff, 0 0 16px rgba(20,232,162,.6); }
#va-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#va-fx { position: fixed; inset: 0; z-index: 100001; pointer-events: none; }
body.eco #va-fx { display: none !important; }
.va-srlive { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── end screen ── */
.va-end { display: flex; flex-direction: column; gap: .9rem; max-width: 760px; }
.va-end-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.va-grade { font-size: 3.6rem; font-weight: 800; line-height: 1; font-family: 'Oxanium', sans-serif; }
.va-grade-S { color: #ffd700; text-shadow: 0 0 2px #fff, 0 0 24px #ffd700; }
.va-grade-A { color: #14e8a2; text-shadow: 0 0 2px #fff, 0 0 20px #14e8a2; }
.va-grade-B { color: #0cdcf8; text-shadow: 0 0 2px #fff, 0 0 20px #0cdcf8; }
.va-grade-C { color: #ffb224; text-shadow: 0 0 2px #fff, 0 0 18px #ffb224; }
.va-grade-D { color: #ff5cb1; text-shadow: 0 0 2px #fff, 0 0 18px #ff5cb1; }
.va-pb { font-size: .72rem; letter-spacing: 1.5px; color: #8a94a6; }
.va-pb.new { color: #ffd700; text-shadow: 0 0 1px #fff, 0 0 12px #ffd700; }
.va-end-stats { display: flex; gap: 1.8rem; flex-wrap: wrap; font-size: .74rem; color: #8a94a6; letter-spacing: 1px; }
.va-end-stats b { color: #fff; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 1px #fff, 0 0 12px rgba(12,220,248,.5); margin-right: .35rem; }
.va-ebars { display: flex; flex-direction: column; gap: .4rem; }
.va-eb { display: grid; grid-template-columns: 14rem 1fr 3.2rem; gap: 1rem; align-items: center; font-size: .72rem; }
.va-eb-label { color: #c9d6e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-eb-track { height: 2px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.va-eb-fill { display: block; height: 100%; background: linear-gradient(90deg,#14e8a2,#0cdcf8); }
.va-eb-num { color: #8a94a6; text-align: right; font-variant-numeric: tabular-nums; }
.va-actions { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: .4rem; }
.va-intro { display: flex; flex-direction: column; }

/* ── phones ── */
@media (max-width: 760px) {
  .va-arena { flex-direction: column; align-items: stretch; gap: 1rem; }
  .va-ring { flex: 0 0 auto; width: 104px; margin: 0 auto; }
  .va-ring-read b { font-size: 1.3rem; }
  .va-qtext { font-size: 1.12rem; }
  .va-eb { grid-template-columns: 8.5rem 1fr 3rem; }
  .va-title { font-size: 1.4rem; }
  .va-arena { order: 3; }
}