/* Screen-specific layout. */

/* ------------------------------------------------------------------ hero -- */

.hero {
  display: grid;
  gap: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Matches the 16:9 native ratio of everything art.js draws, so nothing is
   cropped out of a hero illustration. */
.hero__art {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero__art > .art { width: 100%; height: 100%; }

.hero__body {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
}

.hero__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.hero__subtitle {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-1);
}

/* ---------------------------------------------------------------- splash -- */

.splash {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-6);
  overflow: hidden;
}

.splash__glow {
  position: absolute;
  inset: -20% -20% 40%;
  background: radial-gradient(50% 50% at 50% 40%, rgba(245, 182, 60, 0.20), transparent 70%);
  animation: splash-pulse 3.2s var(--ease) infinite alternate;
}

.splash__crest {
  width: 132px;
  position: relative;
  filter: drop-shadow(0 12px 30px rgba(245, 182, 60, 0.22));
}

.splash__title {
  position: relative;
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.splash__tagline {
  position: relative;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.splash__bar {
  position: relative;
  width: 160px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--ink-600);
  overflow: hidden;
}

.splash__bar span {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  animation: boot-slide 1.5s var(--ease) infinite;
}

.splash__skip {
  position: absolute;
  bottom: calc(var(--safe-bottom) + var(--s-6));
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
}

@keyframes splash-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------ onboarding -- */

.onboard {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--s-4);
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding:
    calc(var(--safe-top) + var(--s-4))
    calc(var(--safe-right) + var(--s-4))
    calc(var(--safe-bottom) + var(--s-4))
    calc(var(--safe-left) + var(--s-4));
}

.onboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onboard__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.onboard__art {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
}

.onboard__art > .art { width: 100%; height: 100%; }

.onboard__body-wrap { display: grid; gap: var(--s-3); align-content: start; }

.onboard__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.onboard__body {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--bone-300);
}

.onboard__points { display: grid; gap: var(--s-2); }

.onboard__point {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.onboard__point-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--gold-400);
}

.onboard__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.onboard__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-400);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.onboard__dot.is-on {
  width: 22px;
  border-radius: var(--r-pill);
  background: var(--gold-500);
}

.onboard__actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
}

/* ------------------------------------------------------------------ home -- */

.player-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.player-strip__crest { width: 52px; }
.player-strip__body { display: grid; gap: 4px; min-width: 0; }
.player-strip__name { font-size: var(--fs-md); font-weight: 750; }
.player-strip__tier { font-size: var(--fs-xs); color: var(--gold-600); }
.player-strip__wallet { align-self: start; }

.form-card,
.chart-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.form-card .spark,
.chart-card .spark {
  width: 100%;
  height: 74px;
}

.form-card__meta,
.chart-card__axis {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.more-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: center;
}

.more-head__crest { width: 62px; }
.more-head__name { font-size: var(--fs-xl); font-weight: 800; }
.more-head__meta { font-size: var(--fs-sm); color: var(--gold-600); }

.more-head__stars {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-top: 4px;
}

.more-head__progress {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: right;
}

/* ---------------------------------------------------------------- career -- */

.chapter-head {
  display: grid;
  gap: var(--s-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.chapter-head__art { aspect-ratio: 16 / 9; }
.chapter-head__art > .art { width: 100%; height: 100%; }

.chapter-head__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
}

.chapter-head__brief {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--bone-300);
}

.chapter-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.row__stars { display: inline-flex; }

.star-lines { display: grid; gap: var(--s-2); }

.star-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.star-line__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.star-line__state { color: var(--turf-500); display: grid; place-items: center; width: 20px; }

.tier-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--ink-700);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
}

.tier-chip__dot { width: 9px; height: 9px; border-radius: 50%; }
.tier-chip__count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- preview -- */

.preview__stage {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink-900);
}

.preview__canvas { width: 100%; display: block; }

.preview__verdict {
  font-size: var(--fs-sm);
  font-weight: 650;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.preview__verdict[data-tone="good"] { color: var(--turf-500); border-color: rgba(79, 191, 123, 0.35); }
.preview__verdict[data-tone="bar"] { color: var(--gold-400); border-color: rgba(245, 182, 60, 0.35); }
.preview__verdict[data-tone="miss"] { color: var(--alert-500); border-color: rgba(224, 72, 60, 0.32); }

.preview__zone {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.preview__targets { display: grid; gap: var(--s-2); }

.preview__target {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.preview__target-dot { width: 10px; height: 10px; border-radius: 50%; }
.preview__target-pos { font-family: var(--font-numeric); font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------- results -- */

.score-hero {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(245, 182, 60, 0.16), transparent 70%),
    var(--bg-raised);
  border: 1px solid rgba(245, 182, 60, 0.28);
}

.score-hero__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.score-hero__value {
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.score-hero__hint { font-size: var(--fs-xs); color: var(--text-muted); }

.earn-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.earn-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-md);
}

.earn-card__row strong { color: var(--gold-400); font-variant-numeric: tabular-nums; }

.earn-card__lines {
  display: grid;
  gap: 5px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.earn-card__lines li {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}

.pb {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid rgba(245, 182, 60, 0.35);
  overflow: hidden;
}

.pb__burst {
  position: absolute;
  inset: -40% -10% auto;
  height: 320px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(245, 182, 60, 0.22), transparent 70%);
}

.pb__art { position: relative; width: 150px; }
.pb__title { position: relative; font-size: var(--fs-xl); font-weight: 850; }
.pb__subtitle { position: relative; font-size: var(--fs-sm); color: var(--text-muted); }

.pb__numbers {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-3);
}

.pb__number { display: grid; justify-items: center; gap: 2px; }
.pb__number span { font-size: var(--fs-xs); color: var(--text-muted); }
.pb__number strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.pb__number--new strong { color: var(--gold-400); }
.pb__arrow { color: var(--gold-600); transform: rotate(180deg); }

.chapter-reward {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid rgba(245, 182, 60, 0.35);
}

.chapter-reward__art { width: 150px; }
.chapter-reward__title { font-size: var(--fs-xl); font-weight: 850; }
.chapter-reward__body { font-size: var(--fs-sm); color: var(--text-muted); max-width: 42ch; line-height: 1.6; }

.chapter-reward__grants {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
}

.chapter-reward__grant {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: var(--s-3) var(--s-4);
  min-width: 118px;
  border-radius: var(--r-md);
  background: var(--ink-700);
  border: 1px solid var(--border);
  color: var(--gold-400);
}

.chapter-reward__grant strong { font-size: var(--fs-lg); color: var(--bone-100); }
.chapter-reward__grant span { font-size: var(--fs-xs); color: var(--text-muted); text-transform: capitalize; }

/* ----------------------------------------------------------------- daily -- */

.day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
}

.day-strip__day {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: var(--s-2) 4px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.day-strip__day.is-played { border-color: rgba(245, 182, 60, 0.35); }
.day-strip__label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; }

.day-strip__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-600);
  color: var(--gold-400);
}

.day-strip__day.is-played .day-strip__dot { background: var(--accent-soft); }

.day-strip__score {
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- missions -- */

.missions { display: grid; gap: var(--s-3); }

.mission {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.mission.is-complete { border-color: rgba(79, 191, 123, 0.35); }
.mission.is-claimed { opacity: 0.62; }

.mission__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.mission__title { font-size: var(--fs-md); font-weight: 650; }
.mission__trailing { flex: none; }

.mission__progress {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- achievements -- */

.achievements { display: grid; gap: var(--s-2); }

.achievement {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  opacity: 0.72;
}

.achievement.is-unlocked {
  opacity: 1;
  border-color: rgba(245, 182, 60, 0.3);
}

.achievement__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--ink-600);
  color: var(--slate-400);
}

.achievement.is-unlocked .achievement__icon {
  background: var(--accent-soft);
  color: var(--gold-400);
}

.achievement__body { display: grid; gap: 4px; min-width: 0; }
.achievement__name { font-size: var(--fs-md); font-weight: 650; }
.achievement__blurb { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.achievement__reward { flex: none; }

/* ---------------------------------------------------------------- locker -- */

.loadout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3);
}

.loadout__slot {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.loadout__art {
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--ink-900);
}

.loadout__art > .art { width: 100%; height: 100%; }
.loadout__label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.loadout__name { font-size: var(--fs-sm); font-weight: 650; }

.item-sheet { display: grid; gap: var(--s-3); }

.item-sheet__art {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink-900);
}

.item-sheet__art > .art { width: 100%; height: 100%; }
.item-sheet__blurb { font-size: var(--fs-sm); line-height: 1.6; color: var(--bone-300); }

.item-sheet__balance {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ------------------------------------------------------------ skill tree -- */

.branch {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.branch__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
}

.branch__dot { width: 14px; height: 14px; border-radius: 50%; }
.branch__name { font-size: var(--fs-lg); font-weight: 750; }
.branch__blurb { font-size: var(--fs-xs); color: var(--text-muted); }

.branch__nodes { display: grid; gap: var(--s-2); }

.skill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--ink-800);
  border: 1px solid var(--border);
}

.skill.is-owned { border-color: rgba(245, 182, 60, 0.35); }
.skill.is-locked { opacity: 0.6; }

.skill__tier {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gold-600);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.skill__body { display: grid; gap: 3px; min-width: 0; }
.skill__name { font-size: var(--fs-sm); font-weight: 700; }
.skill__blurb { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.skill__requires { font-size: var(--fs-xs); color: var(--gold-600); }
.skill__action { display: grid; place-items: center; color: var(--turf-500); }

/* -------------------------------------------------------------------- lab -- */

.lab__stage {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink-900);
  cursor: pointer;
  touch-action: manipulation;
}

.lab__canvas { width: 100%; display: block; }

.lab__prompt {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--gold-400);
}

.lab__gauges { display: grid; gap: var(--s-2); }
.lab__tally { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.lab__readout { display: grid; gap: var(--s-2); }

/* --------------------------------------------------------------- drills --- */

.drill {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.drill__target { font-size: var(--fs-md); font-weight: 650; text-align: center; }

.drill__track {
  position: relative;
  display: block;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--ink-900);
  border: 1px solid var(--border);
  overflow: hidden;
}

.drill__band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(245, 182, 60, 0.2);
}

.drill__core {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(245, 182, 60, 0.45);
}

.drill__marker {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 4px;
  margin-left: -2px;
  border-radius: var(--r-pill);
  background: var(--bone-100);
  box-shadow: 0 0 12px rgba(247, 244, 236, 0.6);
}

.drill__surface {
  min-height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--on-accent);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.drill__feedback {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 650;
  min-height: 1.4em;
}

.drill__feedback[data-tone="good"] { color: var(--turf-500); }
.drill__feedback[data-tone="miss"] { color: var(--alert-500); }

.drill__counter { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }

.drill__log { display: grid; gap: 5px; }

.drill__log-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.drill__log-row.is-ok { border-color: rgba(79, 191, 123, 0.32); color: var(--turf-500); }

.drill__summary {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid rgba(245, 182, 60, 0.35);
}

.drill__summary h2 { font-size: var(--fs-lg); font-weight: 800; }

/* ------------------------------------------------------------- settings --- */

.data-card { display: grid; gap: var(--s-3); }

.sfx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2);
}

.audio-status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.help-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--gold-400);
  font-weight: 800;
}

.scoring { display: grid; gap: var(--s-3); }

/* -------------------------------------------------------------- offline --- */

.offline__status {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--bone-300);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------------- pause --- */

.pause { display: grid; gap: var(--s-3); }
.pause__reason { font-size: var(--fs-sm); color: var(--gold-400); }
.pause__hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }