/* ============================================================================
   VEGA BELL - screens.css
   Layout + components for the non-gameplay screens:
   home · results · boards · vault · profile.

   Loads AFTER tokens.css, animations.css and app.css.
   app.css owns the shared chrome (.btn, .panel, .chip, .flag, .orbit-label,
   .toast, .modal, .icon, .topnav, .screen, .row, :focus-visible) - this file
   deliberately does NOT redefine any of it. Everything here is either a new
   class or a modifier layered on top, so no other screen changes shape.

   RULES BAKED IN
   - Mobile-first. Breakpoints: base < 640px, md >= 640px, lg >= 1024px.
   - Tap targets >= 44px; the focus ring comes from app.css and is never removed.
   - Meaning is never carried by colour alone: every coloured state also has an
     icon, a label, or a shape.
   ========================================================================= */

/* ------------------------------------------------------------- layout -- */

/* Row gap, scoped to these screens only. :where() keeps specificity at 0 so
   the modifiers below still win. */
:where([data-screen='home'], [data-screen='results'], [data-screen='boards'],
       [data-screen='vault'], [data-screen='profile']) .row { gap: var(--sp-3); }

.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }
.row--tight   { gap: var(--sp-2); }
.row--nowrap  { flex-wrap: nowrap; }

.stack        { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--tight { gap: var(--sp-2); }
.stack--loose { gap: var(--sp-6); }
.grow { flex: 1 1 auto; min-width: 0; }

.grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
/* A grid item's automatic minimum size is its content, so one long nickname
   in a board row would push the whole page sideways. */
.grid-2 > *, .grid-3 > * { min-width: 0; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------- typography -- */

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.h-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 4.25rem);
  line-height: 1.02;
  margin: 0;
}
.h-section {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0;
}
/* .h-section is a flex row, so `text-align: center` cannot reach it. */
.h-section.center, .center > .h-section { justify-content: center; }
.lede   { font-size: 1.06rem; line-height: 1.55; margin: 0; }
.muted  { color: var(--text-dim); }
.small  { font-size: .82rem; line-height: 1.45; }
.tiny   { font-size: .72rem; line-height: 1.4; }
.mono   { font-family: var(--font-mono); }
.center { text-align: center; }

.grad-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The headline must never be invisible if background-clip is unsupported. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { color: var(--primary-lite); background: none; }
}
.gold-text { color: var(--gold); }

/* --------------------------------------------- button additions only -- */

.btn--lg { min-height: 60px; font-size: 1.2rem; padding: 18px 26px; letter-spacing: .02em; }
.btn--outline-gold { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover:not(:disabled) { background: rgba(251, 113, 133, .14); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row > .btn { flex: 1 1 160px; }

.linkish {
  background: none; border: 0; padding: 0;
  color: var(--accent-cyan); text-decoration: underline; cursor: pointer; font: inherit;
}

/* ---------------------------------------------- panel / chip additions -- */

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.panel__head h1, .panel__head h2, .panel__head h3 { margin: 0; }
.panel--raise { background: var(--surface-2); }
.panel--gold  { border-color: var(--gold); }

.chip--cyan    { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(34, 211, 238, .10); }
.chip--mag     { border-color: var(--accent-mag); color: #F9A8D4; background: rgba(236, 72, 153, .16); }
.chip--success { border-color: var(--success); color: var(--success); background: rgba(52, 211, 153, .12); }
.chip--danger  { border-color: var(--danger); color: var(--danger); background: rgba(251, 113, 133, .12); }
.chip .icon { width: 14px; height: 14px; }
/* auth.css tints .chip .icon; on these screens the icon should take the
   chip's own colour so the gold/cyan/magenta variants stay coherent. */
:where([data-screen='home'], [data-screen='results'], [data-screen='boards'],
       [data-screen='vault'], [data-screen='profile']) .chip .icon { color: inherit; }

/* app.css stacks .orbit-label vertically. On these screens it sits inside
   chips, rows and dense list lines, where one line reads better - the order
   (name, CEFR, then the small "≈ US grades") is unchanged. */
:where([data-screen='home'], [data-screen='results'], [data-screen='boards'],
       [data-screen='vault'], [data-screen='profile']) .orbit-label {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.chip .orbit-label__name,
.board-row__sub .orbit-label__name { font-size: .95em; }

/* -------------------------------------------------- loading / empty -- */

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 300% 100%;
  border-radius: var(--r-md);
  animation: vb-skeleton 1.4s linear infinite;
}
@keyframes vb-skeleton { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.skeleton-row { height: 52px; }
.skeleton-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--text-dim);
}
.state__art { width: 108px; height: 108px; opacity: .92; }
.state__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); margin: 0; }
.state__msg { margin: 0; max-width: 46ch; }
.state--error .state__title { color: var(--danger); }

/* ---------------------------------------------------- tabs & filters -- */

.tabs {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .94rem;
  white-space: nowrap;
  cursor: pointer;
}
.tab[aria-selected='true'] { background: var(--grad-hero); color: #fff; box-shadow: var(--shadow-1); }

.filters { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: .78rem; font-weight: 600; color: var(--text-dim); letter-spacing: .04em; }
.field__hint  { font-size: .74rem; color: var(--text-dim); }

.input, .select {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  max-width: 100%;
}
.input { padding: var(--sp-3); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  cursor: pointer;
}
.switch input { width: 20px; height: 20px; accent-color: var(--accent-cyan); flex: none; }
.switch__text { font-size: .92rem; }
.range { width: 160px; accent-color: var(--accent-cyan); height: var(--tap); }

/* ================================================================= HOME == */

.hero {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: var(--sp-7) var(--sp-4) var(--sp-6);
  text-align: center;
  border: 1px solid var(--stroke);
}
/* Three layers below the copy: nebula, darkening wash, then the stars on top of
   the wash so they are not dimmed by it. All still behind the text, which is
   unpositioned and therefore paints above every negative z-index. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(11, 10, 31, .35) 0%, rgba(11, 10, 31, .82) 100%);
}

/* Shooting stars. Decorative and inert: no pointer target, no layout, hidden
   from assistive tech at the source in home.js. */
.hero__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* Placement is staggered by hand rather than randomised at runtime: co-prime
   durations and long delays make the group's repeat far longer than anyone
   watches the hero, without shipping a timer. */
.hero__stars .shooting-star:nth-child(1) { top: 8%;  left: -14%; --vb-star-ang: 16deg; --vb-star-run: 78vw; --vb-star-dur: 11s; --vb-star-delay: 0s; }
.hero__stars .shooting-star:nth-child(2) { top: 21%; left: -10%; --vb-star-ang: 24deg; --vb-star-run: 66vw; --vb-star-dur: 17s; --vb-star-delay: 3.5s; --vb-star-len: 96px; }
.hero__stars .shooting-star:nth-child(3) { top: 39%; left: -18%; --vb-star-ang: 11deg; --vb-star-run: 88vw; --vb-star-dur: 23s; --vb-star-delay: 8s; --vb-star-len: 160px; }
.hero__stars .shooting-star:nth-child(4) { top: 58%; left: -12%; --vb-star-ang: 28deg; --vb-star-run: 58vw; --vb-star-dur: 29s; --vb-star-delay: 14s; --vb-star-len: 84px; }
.hero__stars .shooting-star:nth-child(5) { top: 74%; left: -16%; --vb-star-ang: 19deg; --vb-star-run: 72vw; --vb-star-dur: 19s; --vb-star-delay: 21s; }
/* The brand lockup and its sparkle layer share a positioning context, so the
   wrapper carries the sizing and the image simply fills it. */
.hero__brand { position: relative; width: min(460px, 88%); margin: 0 auto var(--sp-4); }
.hero__wordmark { width: 100%; margin: 0; display: block; }

.hero__sparkles { position: absolute; inset: 0; pointer-events: none; }
.hero__sparkle {
  position: absolute;
  display: block;
  /* A four-point star, drawn rather than shipped: at these sizes an asset would
     cost a request and a cache entry to render about forty pixels. */
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  background: var(--gold);
}
/* Staggered so the three read as a shimmer rather than a single blink. The
   delays override .twinkle's own --i stagger; screens.css loads after
   animations.css, so these win at equal specificity. */
.hero__sparkle--a {
  width: clamp(12px, 3.4vw, 20px); aspect-ratio: 1;
  top: -2%; right: 1%;
  animation-delay: 0ms;
}
.hero__sparkle--b {
  width: clamp(8px, 2.4vw, 14px); aspect-ratio: 1;
  bottom: 8%; right: 13%;
  background: var(--accent-cyan);
  animation-delay: 620ms;
}
.hero__sparkle--c {
  width: clamp(9px, 2.8vw, 16px); aspect-ratio: 1;
  top: 38%; left: -3%;
  animation-delay: 1240ms;
}

/* Vega alone in the scene, ringing. */
.hero__scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  width: 100%;
}
.hero__vega {
  width: clamp(158px, 42vw, 252px);
  height: auto;
  display: block;
  flex: none;
  /* A taller bounce than the 10px default, scoped here rather than raised on
     the token, because .float is also on the auth, recover, boot and loading
     mascots and they should stay calm. */
  --vb-float-dist: 17px;
}
.hero__tagline { margin: 0 0 var(--sp-3); }
.hero__pitch { max-width: 40ch; margin: 0 auto var(--sp-5); }
.hero__cta { width: min(360px, 100%); margin: 0 auto; }
.hero__sub { margin-top: var(--sp-3); }

@media (min-width: 640px) {
  .hero { padding: var(--sp-8) var(--sp-6); }
}

.steps { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
}
.step__num { font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); letter-spacing: .1em; }
/* Full-colour art, so nothing here inherits text colour any more. */
.step__icon { width: 64px; height: 64px; display: block; }
.step__icon img { width: 100%; height: 100%; display: block; }
.step__label { font-family: var(--font-display); font-weight: 600; font-size: .96rem; }

.proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.proof-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.proof-row__rank { font-family: var(--font-mono); font-weight: 700; color: var(--text-dim); min-width: 2.4ch; }
/* Keep enough of the name to be a name. When the value no longer fits beside
   it the row wraps instead of squeezing "Brazil" down to "Bra...". The floor is
   sized for the longest value label ("Country Rating"), which needs the whole
   line to itself on a 320px phone. */
.proof-row__name {
  font-weight: 600;
  flex: 1 1 10ch;
  min-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proof-row__val { margin-left: auto; font-family: var(--font-mono); color: var(--gold); white-space: nowrap; }

.player-card { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.player-card__badge { width: 64px; height: 64px; flex: none; }
.player-card__id { min-width: 0; flex: 1 1 180px; }
.player-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.player-card__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

.daily-card { border-color: var(--gold); }
.daily-card__title { color: var(--gold); }
.bell-countdown { font-family: var(--font-mono); font-size: 1.1rem; color: var(--gold); letter-spacing: .04em; }

.stat-tiles { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
}
.stat__val {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; font-size: .72rem; color: var(--text-dim); margin-top: 4px; letter-spacing: .04em; }
.stat--gold .stat__val { color: var(--gold); }
.stat--cyan .stat__val { color: var(--accent-cyan); }
.stat--mag  .stat__val { color: #F9A8D4; }

.rank-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: .96rem; }
.rank-line__item { display: inline-flex; align-items: center; gap: 6px; }
.rank-line__num { font-family: var(--font-mono); font-weight: 700; color: var(--accent-cyan); }
/* The separator belongs to the item before it. As its own element it wraps
   onto the next line and starts it with a stray dot. */
.rank-line__item:not(:last-child)::after {
  content: '·';
  color: var(--stroke);
  margin-left: var(--sp-2);
}

.tier-bar__track {
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.tier-bar__fill {
  height: 100%;
  width: 0;
  background: var(--grad-gold);
  border-radius: var(--r-pill);
  transition: width 900ms var(--vb-ease-out, ease);
}
.tier-bar__labels { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-dim); margin-top: 4px; }

.quick-links { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .quick-links { grid-template-columns: repeat(4, 1fr); } }
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 82px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
}
.quick-link:hover { border-color: var(--primary-lite); background: var(--surface-2); }
.quick-link .icon { color: var(--accent-cyan); }

/* ============================================================== RESULTS == */

.results-hero { text-align: center; }
.results-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 17vw, 5.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.results-score__label { letter-spacing: .18em; }

.cn-map { width: min(420px, 100%); margin: 0 auto; display: block; }
.cn-map .cn-line { stroke: var(--stroke); stroke-width: 1.5; fill: none; }
.cn-map .cn-line--lit { stroke: var(--gold); stroke-width: 2; opacity: .85; }
.cn-map .cn-star { fill: var(--bg-deep); stroke: var(--stroke); stroke-width: 2; }
.cn-map .cn-star--lit { fill: var(--gold); stroke: #FDE68A; }
.cn-map .cn-star--salvage { fill: var(--accent-cyan); stroke: #A5F3FC; }
.cn-map .cn-num { fill: var(--text-dim); font-size: 9px; font-family: var(--font-mono); text-anchor: middle; }

.legend { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; font-size: .78rem; color: var(--text-dim); }
.legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid var(--stroke); }
.legend__dot--lit { background: var(--gold); }
.legend__dot--salvage { background: var(--accent-cyan); }
.legend__dot--miss { background: var(--bg-deep); }

.ring-bonus {
  text-align: center;
  border: 2px solid var(--gold);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(251, 191, 36, .16) 0%, rgba(30, 27, 75, 0) 70%),
    var(--surface);
}
.ring-bonus__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 14vw, 4.4rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.ring-bonus__label { letter-spacing: .2em; color: var(--gold); }
.ring-bonus--cracked { border-color: var(--stroke); background: var(--surface); }
.ring-bonus--cracked .ring-bonus__num,
.ring-bonus--cracked .ring-bonus__label { color: var(--text-dim); }

.bonus-lines { display: flex; flex-direction: column; gap: var(--sp-2); }
.bonus-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--gold);
  background: rgba(251, 191, 36, .08);
  color: var(--gold);
}
.bonus-line__name { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; }
.bonus-line__val { margin-left: auto; font-family: var(--font-mono); }
.bonus-line .small { color: var(--text-dim); }

.rr-delta { display: flex; align-items: baseline; gap: var(--sp-2); }
.rr-delta__num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; font-variant-numeric: tabular-nums; }
.rr-delta--up   .rr-delta__num { color: var(--success); }
.rr-delta--down .rr-delta__num { color: var(--danger); }
.rr-delta--flat .rr-delta__num { color: var(--text-dim); }

.country-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--grad-gold);
  color: #1B1200;
  font-family: var(--font-display);
  font-weight: 700;
}

/* the share block: the growth surface, deliberately loud */

.share-block {
  border: 2px solid var(--accent-cyan);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(34, 211, 238, .14) 0%, rgba(30, 27, 75, 0) 70%),
    var(--surface);
}
.emoji-grid {
  display: block;
  width: 100%;
  border: 2px dashed var(--stroke);
  border-radius: var(--r-md);
  background: var(--bg-deep);
  color: var(--text);
  padding: var(--sp-4) var(--sp-3);
  cursor: copy;
  text-align: center;
  font-size: clamp(1.5rem, 7.5vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: .08em;
  word-break: break-all;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-mono);
}
.emoji-grid:hover { border-color: var(--accent-cyan); }
/* Ten words read as two rows of five. Left to wrap on width they land 6 + 4. */
.emoji-grid__cells {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  gap: var(--sp-1);
}
.emoji-grid__hint {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: normal;
  color: var(--text-dim);
}

.spoiler-note { display: flex; align-items: center; gap: var(--sp-2); font-size: .82rem; color: var(--text-dim); }
.spoiler-note .icon { color: var(--success); flex: none; }

.card-preview {
  width: 100%;
  aspect-ratio: 1200 / 630;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--bg-deep);
  display: block;
  object-fit: contain;
}
/* auto-fill (not auto-fit) keeps the empty tracks, so the last button in an
   odd row stays the same width as the rest instead of stretching. */
.networks { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* study cards - shared by results and the Vault */

.study-card {
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.study-card__word {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}
.study-card__syllables { font-family: var(--font-mono); color: var(--primary-lite); font-size: .95rem; overflow-wrap: anywhere; }
.study-card__ipa { font-family: var(--font-mono); color: var(--accent-cyan); font-size: .95rem; overflow-wrap: anywhere; }
.study-card__def { margin: 0; line-height: 1.5; }
.study-card__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.study-card__counts { display: flex; gap: var(--sp-4); font-size: .8rem; color: var(--text-dim); flex-wrap: wrap; }
.study-card__counts b { color: var(--text); font-family: var(--font-mono); }
.study-card--nemesis {
  border-color: var(--accent-mag);
  background:
    repeating-linear-gradient(115deg, rgba(236, 72, 153, .10) 0 2px, transparent 2px 9px),
    var(--surface-2);
}
.study-card--redeemed { border-color: var(--success); }

.study-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .study-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .study-grid { grid-template-columns: repeat(3, 1fr); } }

/* the staged reveal */
.reveal { opacity: 0; }
.reveal.is-shown { opacity: 1; animation: vb-fade-in-up var(--vb-dur-4, 480ms) var(--vb-ease-out, ease) both; }

/* =============================================================== BOARDS == */

.podium { display: grid; gap: var(--sp-3); justify-items: center; padding-top: var(--sp-4); }
.podium__art { width: min(320px, 88%); display: block; }
.podium__names { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; width: 100%; }
.podium__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 90px;
  min-width: 0;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  text-align: center;
}
.podium__place { font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); }
.podium__who { font-family: var(--font-display); font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.podium__score { font-family: var(--font-mono); font-size: .82rem; }
.podium__name--1 { border-color: var(--gold); }
.podium__name--1 .podium__score { color: var(--gold); }
.podium__name--2 { border-color: #CBD5E1; }
.podium__name--3 { border-color: #D97706; }

.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.board-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--stroke);
  min-height: var(--tap);
}
.board-row__rank {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-dim);
  min-width: 3.4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.board-row__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-row__val { font-family: var(--font-mono); font-weight: 700; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.board-row__sub { grid-column: 1 / -1; font-size: .74rem; color: var(--text-dim); display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.board-row--1 { border-color: var(--gold); background: linear-gradient(90deg, rgba(251, 191, 36, .12), transparent 60%), var(--surface); }
.board-row--2 { border-color: #CBD5E1; }
.board-row--3 { border-color: #D97706; }
.board-row--me {
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow);
  background: linear-gradient(90deg, rgba(34, 211, 238, .14), transparent 70%), var(--surface);
}
.board-row__you {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
.board-pinned {
  position: sticky;
  bottom: 0;
  padding-top: var(--sp-2);
  background: linear-gradient(180deg, rgba(11, 10, 31, 0), var(--bg-void) 40%);
}
.board-note { font-size: .78rem; color: var(--text-dim); margin: 0; }

.nation-row { grid-template-columns: auto 1fr auto; }
.nation-row__stats { display: flex; gap: var(--sp-4); }
.nation-row--mine { border-color: var(--accent-cyan); }

/* ================================================================ VAULT == */

.vault-summary { margin-bottom: var(--sp-2); }

/* ============================================================== PROFILE == */

.profile-head { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.profile-head__badge { width: 76px; height: 76px; flex: none; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--stroke);
  flex-wrap: wrap;
}
.setting-row:last-of-type { border-bottom: 0; }
.setting-row__text { flex: 1 1 220px; min-width: 0; }
.setting-row__title { font-weight: 600; display: block; }
.setting-row__desc { font-size: .8rem; color: var(--text-dim); }
.setting-row__control {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.setting-row__control > * { max-width: 100%; }
@media (min-width: 640px) {
  /* One control column, so every switch and select starts on the same edge. */
  .setting-row__control { flex: 0 0 260px; justify-content: flex-start; }
  .setting-row__control .select { width: 100%; }
}

.danger-zone { border-color: var(--danger); }
.danger-zone .h-section { color: var(--danger); }

.account-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.account-actions .btn { flex: 1 1 200px; }

.confirm-input { width: 100%; font-family: var(--font-mono); letter-spacing: .04em; }
.form-error { color: var(--danger); font-size: .84rem; display: flex; align-items: center; gap: 6px; margin: 0; }

/* --------------------------------------------------------- motion opt -- */

/* The player's own reduced-motion choice, mirrored onto <html> by profile.js.
   The OS-level preference is handled in animations.css. */
.vb-reduce-motion *,
.vb-reduce-motion *::before,
.vb-reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .reveal.is-shown { animation: vb-rm-fade 200ms ease both; }
  .tier-bar__fill { transition: none; }
}

/* ---------------------------------------------------- account recovery -- */
/* #/forgot, #/reset, #/consent, #/awaiting  (public/js/screens/recover.js) */

.recover {
  max-width: 460px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.recover__vega { margin-bottom: var(--sp-1); }
.recover__title { font-size: clamp(1.5rem, 6vw, 2rem); margin: 0; }
.recover__lead { color: var(--text-dim); line-height: 1.6; margin: 0 0 var(--sp-2); }
.recover__note {
  color: var(--text-dim); font-size: .88rem; line-height: 1.6;
  opacity: .85; margin: var(--sp-2) 0 0;
}
.recover__form { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.recover__error {
  margin: 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(251,113,133,.12); border: 1px solid var(--danger);
  color: var(--danger); font-size: .92rem; text-align: left;
}
.recover__link { color: var(--accent-cyan); font-size: .9rem; text-decoration: none; }
.recover__link:hover { text-decoration: underline; }
.recover__facts {
  text-align: left; margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-md);
  color: var(--text-dim); line-height: 1.7; width: 100%;
}
.recover__facts li { margin-bottom: 6px; }
.recover__facts li:last-child { margin-bottom: 0; }

.recover .field { display: flex; flex-direction: column; gap: 6px; }
.recover .field__label { font-size: .85rem; font-weight: 600; color: var(--text); }
.recover .field__hint { font-size: .8rem; color: var(--text-dim); }
.recover .input {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--stroke);
  background: var(--surface); color: var(--text);
  font-size: 1rem;   /* 16px stops iOS zooming the page on focus */
}
.recover .input:focus-visible { border-color: var(--accent-cyan); }

.pwmeter { display: flex; gap: 5px; }
.pwmeter__seg { flex: 1; height: 5px; border-radius: 3px; background: var(--stroke); transition: background .2s ease; }
.pwmeter__seg.is-on { background: var(--danger); }
.pwmeter[data-score="2"] .pwmeter__seg.is-on { background: var(--gold); }
.pwmeter[data-score="3"] .pwmeter__seg.is-on { background: var(--success); }

.auth__aside-sep { color: var(--text-dim); opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .recover__vega { animation: none; }
}