/* ==========================================================================
   2D Football Wars — upgrades.css
   Everything the upgrade pass added, kept in one file so the original
   stylesheets stay exactly as they were.

   Two halves:
     1. PRESENTATION SYSTEM — elevation tokens, accent themes, micro-
        interactions and screen choreography applied to existing components.
     2. NEW COMPONENTS — career ladder, dailies, locker, rivals, trials,
        combo meter, momentum, commentary, unlock cards, boon picker.

   Every size here is a multiple of the stage unit (`--u`), so a phone in
   landscape renders the identical layout at a smaller scale — the same rule
   the rest of the interface follows.
   ========================================================================== */

.y8-promo { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-3) auto; padding:var(--sp-2) var(--sp-3); max-width:calc(var(--u) * 34); border:1px solid rgba(255,207,77,.4); border-radius:var(--r-md); background:rgba(255,207,77,.08); text-align:center; }
.y8-promo b { color:var(--c-gold); font-family:var(--font-display); letter-spacing:.08em; }
.y8-promo span { color:var(--c-text-dim); font-size:var(--fs-tiny); }
.y8-promo .btn { flex:none; }
.pause-ad { width:100%; max-width:none; margin:var(--sp-2) 0 0; }

/* ==========================================================================
   0 · MENU SCALE
   Every size in the game derives from one stage unit (`--u`). Redefining that
   unit on the menu layer alone shrinks each menu together — type, spacing,
   radii, gaps and card sizes all in step — so panels fit inside a short
   window without a single component being re-laid-out by hand. Custom
   properties resolve per element, so `--fs-base`, `--sp-3` and the rest pick
   the smaller unit up automatically.

   The HUD, loading screen and touch controls sit outside this layer and keep
   their original size, which is what they were tuned for.
   ========================================================================== */

.screen,
#modal-root,
#unlock-card {
  --u: calc(var(--stage-w) / 80 * var(--ui-scale) * var(--menu-scale));
  font-size: var(--u);
}

/* The panels themselves get a little more of the window now that their
   contents are smaller, so long lists stop clipping at the bottom. */
.hub-panel { padding-bottom: calc(var(--u) * 0.5); }
.mode-grid { max-height: 68%; }
.howto-columns { max-height: 66%; }
.achievements-list { max-height: 40%; }
.settings-body { max-height: 58%; }
.setup-panel { max-height: 82%; }
#screen-victory .panel { width: min(calc(var(--u) * 47), 96%); }

/* ==========================================================================
   1 · ELEVATION SYSTEM
   Four consistent depth tiers instead of three ad-hoc shadows used
   interchangeably. Depth read consistently is what the eye calls "expensive",
   and it makes hierarchy legible without moving a single box.
   ========================================================================== */

:root {
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.22);
  --sh-2: 0 3px 8px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
  --sh-3: 0 8px 20px rgba(0, 0, 0, 0.46), 0 18px 44px rgba(0, 0, 0, 0.38);
  --sh-4: 0 16px 40px rgba(0, 0, 0, 0.55), 0 34px 80px rgba(0, 0, 0, 0.48);
  /* A hairline of light along the top edge reads as a lit surface. */
  --edge-lit: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --edge-lit-strong: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mode-card,
.power-card,
.arena-card,
.stat-card,
.achievement { box-shadow: var(--sh-1), var(--edge-lit); }

.mode-card:hover,
.power-card:hover,
.arena-card:hover { box-shadow: var(--sh-3), var(--edge-lit-strong); }

.setup-panel,
.panel,
.modal-box { box-shadow: var(--sh-4), var(--edge-lit-strong); }

.menu-rail { box-shadow: var(--sh-3), 0 0 34px rgba(60, 120, 220, 0.22), var(--edge-lit); }

/* ==========================================================================
   2 · ACCENT THEMES
   The existing high-contrast and colorblind classes become one theme system.
   A colour the player picked is a small piece of ownership, and it costs a
   single attribute on <html>.
   ========================================================================== */

:root[data-theme="ember"] {
  --c-accent: #ff7a3c;
  --c-accent-2: #ffc46e;
  --glow-accent: 0 0 18px rgba(255, 122, 60, 0.5);
  --glow-blue: 0 0 22px rgba(255, 196, 110, 0.4);
  --c-focus: #ffc46e;
}
:root[data-theme="violet"] {
  --c-accent: #a29bfe;
  --c-accent-2: #d6c4ff;
  --glow-accent: 0 0 18px rgba(162, 155, 254, 0.5);
  --glow-blue: 0 0 22px rgba(214, 196, 255, 0.4);
  --c-focus: #d6c4ff;
}
:root[data-theme="ice"] {
  --c-accent: #6ecbff;
  --c-accent-2: #bfe3ff;
  --glow-accent: 0 0 18px rgba(110, 203, 255, 0.5);
  --c-focus: #bfe3ff;
}
:root[data-theme="mono"] {
  --c-accent: #dfe6f5;
  --c-accent-2: #ffffff;
  --glow-accent: 0 0 16px rgba(223, 230, 245, 0.35);
  --glow-blue: 0 0 20px rgba(255, 255, 255, 0.28);
  --c-focus: #ffffff;
}

/* Primary buttons follow the accent so a theme is felt, not just seen. */
:root[data-theme="ember"] .btn.primary { background: linear-gradient(180deg, #ff9a5c, #d2551d); color: #2a0f03; }
:root[data-theme="violet"] .btn.primary { background: linear-gradient(180deg, #b8b2ff, #6c5ce7); color: #100a2e; }
:root[data-theme="ice"] .btn.primary { background: linear-gradient(180deg, #8fd8ff, #2f8fd0); color: #04202f; }
:root[data-theme="mono"] .btn.primary { background: linear-gradient(180deg, #f2f5ff, #b9c2d4); color: #10141f; }

/* ==========================================================================
   3 · MICRO-INTERACTIONS
   Tactile response is the difference between polished and merely functional.
   Nothing here changes a box; it changes how a box answers back.
   ========================================================================== */

/* Spring press on every control that already had a hover lift. */
.btn:active,
.mode-card:active,
.arena-card:active,
.rail-btn:active,
.trial-card:active,
.locker-item:active,
.boon-card:active { transform: translateY(1px) scale(0.985); }

/* Magnetic drift on the rail: the active pill grows a soft underglow. */
.rail-btn { transition: color var(--t-fast), background var(--t-fast), transform var(--t-med) var(--ease-bounce), box-shadow var(--t-fast); }
.rail-btn.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -0.45em;
  height: 0.18em;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  filter: blur(3px);
  opacity: 0.85;
}

/* Keyboard and gamepad users get a visible focus ring; mouse users don't. */
.btn:focus-visible,
.rail-btn:focus-visible,
.tabs button:focus-visible,
.segmented button:focus-visible,
.bind-key:focus-visible,
.trial-card:focus-visible,
.locker-item:focus-visible,
.boon-card:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(110, 203, 255, 0.22);
}

/* Toggles get their spring back on the knob. */
.toggle::after { transition: transform var(--t-med) var(--ease-bounce), background var(--t-fast); }

/* ==========================================================================
   4 · GRADIENT BORDERS ON PREMIUM SURFACES
   A slow sheen travelling the border of the panels that matter. Layered over
   the existing backdrop blur, so the panel itself is untouched.
   ========================================================================== */

/* Only surfaces that actually carry the sheen — and never one that is
   already absolutely positioned, or it would lose its corner. */
.setup-panel,
#screen-victory .panel,
.player-card { position: relative; }

.setup-panel::before,
#screen-victory .panel::before,
.player-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sheen, 0deg),
    transparent 0deg, var(--c-accent) 40deg, transparent 110deg,
    transparent 250deg, var(--c-accent-2) 300deg, transparent 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  animation: sheen-spin 9s linear infinite;
}
@property --sheen {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes sheen-spin { to { --sheen: 360deg; } }
/* Engines without @property still get a static gradient edge, which is the
   point of the effect anyway — the rotation is the bonus. */

/* ==========================================================================
   5 · SCREEN CHOREOGRAPHY
   Hub panels enter from the direction of travel along the rail, so the menu
   reads as one continuous place instead of a stack of pages.
   ========================================================================== */

.hub-panel.active.from-right { animation: hub-in-right 0.38s var(--ease-out); }
.hub-panel.active.from-left { animation: hub-in-left 0.38s var(--ease-out); }
@keyframes hub-in-right {
  from { opacity: 0; transform: translateX(4%) scale(0.99); }
  to { opacity: 1; transform: none; }
}
@keyframes hub-in-left {
  from { opacity: 0; transform: translateX(-4%) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* Staggered children, extending the pattern the mode cards already use. */
.hub-panel.active .challenge,
.hub-panel.active .trial-card,
.hub-panel.active .rival-card,
.hub-panel.active .locker-item { animation: rise-in var(--t-med) var(--ease-out) backwards; }
.hub-panel.active .challenge:nth-child(2),
.hub-panel.active .trial-card:nth-child(2) { animation-delay: 50ms; }
.hub-panel.active .challenge:nth-child(3),
.hub-panel.active .trial-card:nth-child(3) { animation-delay: 100ms; }
.hub-panel.active .trial-card:nth-child(4) { animation-delay: 150ms; }
.hub-panel.active .trial-card:nth-child(5) { animation-delay: 200ms; }
.hub-panel.active .trial-card:nth-child(6) { animation-delay: 250ms; }

/* ==========================================================================
   6 · STADIUM-THEMED MENU SKIN
   The backdrop orbs take the selected stadium's own accent, so the menu
   previews the arena you are about to walk into.
   ========================================================================== */

#screen-menu { --arena-accent: var(--c-accent); }
.mb-orb-3 { background: radial-gradient(circle, color-mix(in srgb, var(--arena-accent) 68%, transparent), transparent 68%); }
.mb-sq { border-color: color-mix(in srgb, var(--arena-accent) 55%, transparent); }

/* ==========================================================================
   7 · HUD DRAMA
   The HUD is on screen for one hundred percent of playtime, so small drama
   here is felt more than anywhere else in the game.
   ========================================================================== */

.score-value {
  font-variant-numeric: tabular-nums;
  transition: text-shadow var(--t-med);
}
#match-timer { font-variant-numeric: tabular-nums; }
#match-timer.low {
  color: var(--c-danger);
  animation: timer-urgent 1s steps(2, end) infinite;
}
@keyframes timer-urgent {
  0%, 100% { opacity: 1; text-shadow: 0 0 12px var(--c-danger); }
  50% { opacity: 0.55; text-shadow: none; }
}
#match-timer.overtime { color: var(--c-gold); text-shadow: var(--glow-gold); }

/* A locked power slot (two-player balancing) reads as unavailable, not broken. */
.power-slot.locked { opacity: 0.32; filter: grayscale(1); }
.power-slot.locked::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
}

/* ==========================================================================
   8 · CAREER LADDER STRIP
   ========================================================================== */

.level-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) auto 0;
  padding: 0.3em 0.55em 0.3em 0.35em;
  width: min(calc(var(--u) * 34), 96%);
  border-radius: var(--r-pill);
  background: rgba(8, 13, 28, 0.72);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2), var(--edge-lit);
}
.lv-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #000));
  color: #04160c;
  flex: none;
  box-shadow: var(--sh-1);
}
.lv-badge b { font-family: var(--font-display); font-size: var(--fs-base); line-height: 1; }
.lv-badge small { font-size: 0.5em; letter-spacing: 0.12em; opacity: 0.8; }
.lv-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lv-bar {
  height: calc(var(--u) * 0.45);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.lv-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent));
  box-shadow: var(--glow-accent);
  transition: width var(--t-slow) var(--ease-out);
}
.lv-text { font-size: var(--fs-tiny); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.lv-next {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-tiny);
  color: var(--c-text-dim);
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-next-ico { font-size: 1.2em; }

/* ---- Grudge callout ---- */
.grudge-card {
  position: absolute;
  top: calc(3% + var(--safe-t));
  left: calc(3% + var(--safe-l));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.9em 0.4em 0.5em;
  border-radius: var(--r-pill);
  background: rgba(38, 8, 14, 0.86);
  border: 1px solid rgba(255, 93, 110, 0.55);
  box-shadow: var(--sh-2), 0 0 22px rgba(255, 93, 110, 0.3);
  text-align: left;
  animation: grudge-pulse 2.4s ease-in-out infinite;
}
.grudge-card[hidden] { display: none; }
@keyframes grudge-pulse {
  0%, 100% { box-shadow: var(--sh-2), 0 0 18px rgba(255, 93, 110, 0.26); }
  50% { box-shadow: var(--sh-2), 0 0 34px rgba(255, 93, 110, 0.55); }
}
.gr-ico { font-size: 1.5em; }
.gr-body { display: flex; flex-direction: column; line-height: 1.15; }
.gr-body b { font-size: var(--fs-small); }
.gr-body span { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.gr-cta { font-size: var(--fs-tiny); color: var(--c-danger); letter-spacing: 0.1em; text-transform: uppercase; }

.btn.takeover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--c-line-strong);
  font-size: var(--fs-small);
}
.btn.takeover[hidden] { display: none; }

/* Unread dot on the Daily rail. */
.rail-dot {
  position: absolute;
  top: 0.15em;
  right: 0.3em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
  animation: pulse-soft 1.4s ease-in-out infinite;
}
.rail-dot[hidden] { display: none; }

/* ==========================================================================
   9 · DAILY CHALLENGES & STREAK
   ========================================================================== */

.daily-wrap { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }

.streak-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(255, 122, 60, 0.16), rgba(255, 207, 77, 0.06));
  border: 1px solid rgba(255, 160, 60, 0.35);
  box-shadow: var(--sh-2), var(--edge-lit);
}
.streak-flame {
  position: relative;
  font-size: calc(var(--u) * 2.1);
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(255, 140, 40, 0.6));
}
.streak-flame b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.42em;
  color: #2b0d00;
  padding-top: 0.35em;
}
.streak-copy { display: flex; flex-direction: column; }
.streak-copy b { font-family: var(--font-display); font-size: var(--fs-big); text-transform: uppercase; letter-spacing: 0.06em; }
.streak-copy span { font-size: var(--fs-tiny); color: var(--c-text-dim); }

.streak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 0.3); }
.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: calc(var(--u) * 0.3) 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-panel-soft);
  font-size: var(--fs-tiny);
  color: var(--c-text-dim);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.streak-day .sd-ico { font-size: 1.5em; line-height: 1; }
.streak-day .sd-xp { color: var(--c-text-faint); }
.streak-day.today {
  border-color: var(--c-gold);
  background: rgba(255, 207, 77, 0.12);
  color: var(--c-text);
  animation: pulse-soft 1.8s ease-in-out infinite;
  cursor: pointer;
}
.streak-day.today:hover { transform: translateY(-3px); }
.streak-day.claimed { border-color: rgba(56, 224, 140, 0.5); opacity: 0.85; }
.streak-day.missed { opacity: 0.32; }
.streak-day.future { opacity: 0.55; }

.challenge-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.challenge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-panel-soft);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1), var(--edge-lit);
}
.challenge.done { border-color: rgba(56, 224, 140, 0.5); }
.challenge.claimed { opacity: 0.55; }
.ch-ico { font-size: 1.7em; line-height: 1; flex: none; }
.ch-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ch-body b { font-size: var(--fs-small); }
.ch-body small { font-size: var(--fs-tiny); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.ch-bar { height: calc(var(--u) * 0.34); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent)); transition: width var(--t-slow) var(--ease-out); }
.ch-xp, .ch-done { font-size: var(--fs-tiny); color: var(--c-text-faint); white-space: nowrap; }
.ch-done { color: var(--c-accent); }

/* ==========================================================================
   10 · TRICK TRIALS
   ========================================================================== */

.trials-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.trials-head b { font-family: var(--font-display); font-size: var(--fs-big); letter-spacing: 0.08em; }
.trials-head span { font-size: var(--fs-tiny); color: var(--c-text-dim); }

.trial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 12), 1fr));
  gap: var(--sp-2);
  width: 100%;
}
.trial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-panel-soft);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1), var(--edge-lit);
  text-align: center;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
}
.trial-card:hover { transform: translateY(-3px); border-color: var(--c-accent); box-shadow: var(--sh-3), var(--glow-accent); }
.trial-card.perfect { border-color: var(--c-gold); }
.tc-ico { font-size: 1.9em; line-height: 1; }
.trial-card b { font-family: var(--font-display); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
.tc-goal { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.tc-stars { color: var(--c-gold); letter-spacing: 0.1em; font-size: var(--fs-small); }
.tc-targets { font-size: var(--fs-tiny); color: var(--c-text-faint); }

/* ==========================================================================
   11 · CAREER: PLAYER CARD, LOCKER, RIVALS
   ========================================================================== */

.career-tabs { margin-bottom: var(--sp-2); }
.career-body { display: none; width: 100%; flex-direction: column; gap: var(--sp-3); }
.career-body.active { display: flex; }

.player-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(30, 48, 92, 0.6), rgba(10, 15, 30, 0.85));
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-3), var(--edge-lit-strong);
}
.pc-head { display: flex; align-items: center; gap: var(--sp-3); }
.pc-avatar {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  flex: none;
  box-shadow: var(--glow-accent);
}
.pc-avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  background: rgba(255, 255, 255, 0.06);
}
.pc-id { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pc-id b { font-family: var(--font-display); font-size: var(--fs-big); letter-spacing: 0.05em; }
.pc-style { font-size: var(--fs-small); color: var(--c-accent); }
.pc-id small { font-size: var(--fs-tiny); color: var(--c-text-faint); }
.pc-level { display: flex; flex-direction: column; align-items: center; flex: none; }
.pc-level b { font-family: var(--font-display); font-size: var(--fs-title); line-height: 1; color: var(--c-accent-2); }
.pc-level small { font-size: var(--fs-tiny); letter-spacing: 0.14em; color: var(--c-text-faint); }
.pc-bar { height: calc(var(--u) * 0.4); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent)); }
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.pc-grid span { display: flex; flex-direction: column; align-items: center; }
.pc-grid b { font-family: var(--font-display); font-size: var(--fs-big); color: var(--c-text); }
.pc-grid small { font-size: var(--fs-tiny); color: var(--c-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.pc-kit { font-size: var(--fs-tiny); color: var(--c-text-dim); text-align: center; }

.locker { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.locker-head { display: flex; align-items: baseline; justify-content: space-between; }
.locker-head b { font-family: var(--font-display); font-size: var(--fs-big); }
.locker-head span { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.locker-slot { display: flex; flex-direction: column; gap: var(--sp-2); }
.locker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 8), 1fr));
  gap: var(--sp-2);
}
.locker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-panel-soft);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1), var(--edge-lit);
  text-align: center;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.locker-item:hover { transform: translateY(-3px); border-color: var(--c-accent-2); }
.locker-item.locked { opacity: 0.42; filter: grayscale(0.85); }
.locker-item.equipped { border-color: var(--c-accent); box-shadow: var(--sh-2), var(--glow-accent); }
.li-ico { font-size: 1.8em; line-height: 1; }
.locker-item b { font-size: var(--fs-small); }
.locker-item small { font-size: var(--fs-tiny); color: var(--c-text-faint); }

.rival-list { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.rival-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-panel-soft);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1), var(--edge-lit);
}
.rival-card.unmet { opacity: 0.5; }
.rival-card.grudge { border-color: rgba(255, 93, 110, 0.55); background: rgba(60, 12, 20, 0.5); }
.rv-ico { font-size: 1.9em; line-height: 1; }
.rv-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rv-body b { font-size: var(--fs-small); }
.rv-body b small { color: var(--c-text-faint); font-weight: 500; letter-spacing: 0.08em; }
.rv-body span { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.rv-record { display: flex; align-items: center; gap: 0.25em; font-family: var(--font-display); font-size: var(--fs-small); }
.rv-record .w { color: var(--c-accent); }
.rv-record .l { color: var(--c-danger); }
.rv-record em { font-size: 0.7em; color: var(--c-danger); font-style: normal; margin-left: 0.4em; }

/* ==========================================================================
   12 · IN-MATCH: COMBO, MOMENTUM, MUTATORS, TRIAL, COMMENTARY, COACH
   ========================================================================== */

.combo-meter {
  position: absolute;
  top: calc(2.2% + var(--safe-t) + 6.2em);
  left: calc(1.6% + var(--safe-l));
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35em 0.8em 0.35em 0.45em;
  border-radius: var(--r-pill);
  background: rgba(8, 13, 28, 0.8);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-2);
}
.combo-meter.live { display: flex; }
.combo-meter.pop { animation: combo-pop 0.28s var(--ease-bounce); }
@keyframes combo-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.combo-x {
  font-family: var(--font-display);
  font-size: var(--fs-big);
  font-weight: 900;
  line-height: 1;
  color: var(--c-accent-2);
}
.combo-x small { font-size: 0.55em; }
.combo-body { display: flex; flex-direction: column; gap: 3px; min-width: calc(var(--u) * 5); }
.combo-label { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-dim); }
.combo-bar { height: calc(var(--u) * 0.24); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.combo-bar i { display: block; height: 100%; background: var(--c-accent); transition: width 100ms linear; }
.combo-score { font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--c-gold); }
.combo-meter.hot { border-color: var(--c-gold); box-shadow: var(--sh-2), var(--glow-gold); }
.combo-meter.hot .combo-x { color: var(--c-gold); }
.combo-meter.blazing {
  border-color: #ff7a3c;
  box-shadow: var(--sh-2), 0 0 26px rgba(255, 122, 60, 0.65);
}
.combo-meter.blazing .combo-x { color: #ff9a5c; text-shadow: 0 0 14px rgba(255, 122, 60, 0.8); }

.momentum-bar {
  position: absolute;
  bottom: calc(6% + var(--safe-b));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.28em 0.7em;
  border-radius: var(--r-pill);
  background: rgba(6, 10, 22, 0.72);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
}
.momentum-bar.live { display: flex; }
.mo-side {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 0.32);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: block;
}
.mo-side.p1 { display: flex; justify-content: flex-end; }
.mo-side i { display: block; height: 100%; width: 0; transition: width 200ms linear; }
.mo-side.p1 i { background: linear-gradient(90deg, transparent, var(--c-p1)); }
.mo-side.p2 i { background: linear-gradient(90deg, var(--c-p2), transparent); }
.mo-cap {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  letter-spacing: 0.16em;
  color: var(--c-text-faint);
}
.momentum-bar.surging { border-color: var(--c-accent); box-shadow: var(--sh-2), var(--glow-accent); }
.momentum-bar.surging .mo-cap { color: var(--c-accent); animation: pulse-soft 0.6s ease-in-out infinite; }

.mutator-chips {
  position: absolute;
  top: calc(2.2% + var(--safe-t) + 6.2em);
  right: calc(1.6% + var(--safe-r));
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.mutator-chips.live { display: flex; }
.mut-chip {
  font-size: var(--fs-tiny);
  padding: 0.22em 0.7em;
  border-radius: var(--r-pill);
  background: rgba(8, 13, 28, 0.82);
  border: 1px solid rgba(162, 155, 254, 0.5);
  color: #d6c4ff;
  white-space: nowrap;
  box-shadow: var(--sh-1);
}

.trial-hud {
  position: absolute;
  top: calc(2.2% + var(--safe-t) + 4.4em);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35em 0.9em;
  border-radius: var(--r-pill);
  background: rgba(8, 13, 28, 0.85);
  border: 1px solid var(--c-gold);
  box-shadow: var(--sh-2), var(--glow-gold);
}
.trial-hud[hidden] { display: none; }
.th-ico { font-size: 1.4em; }
.th-body { display: flex; flex-direction: column; gap: 2px; }
.th-body b { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; }
.th-track { display: flex; gap: 0.5em; }
.th-track i { font-style: normal; font-size: var(--fs-tiny); color: var(--c-text-faint); }
.th-track i.on { color: var(--c-gold); }
.th-track i em { font-style: normal; opacity: 0.6; font-size: 0.85em; margin-left: 0.15em; }
.th-count { font-family: var(--font-display); font-size: var(--fs-big); color: var(--c-gold); }

/* Broadcast lower-third. Sits above the ad hoardings, clear of both
   touch clusters and the pause control. */
.commentary {
  position: absolute;
  /* Bottom-left, where a broadcast lower-third actually lives — and the one
     part of the bottom edge that the centred toast stack, momentum bar and
     pause button all leave alone. */
  left: calc(2.5% + var(--safe-l));
  bottom: calc(3.5% + var(--safe-b));
  transform: translateY(8px);
  display: flex;
  align-items: center;
  gap: 0.6em;
  max-width: 46%;
  padding: 0.4em 1.1em;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(6, 10, 22, 0.92), rgba(10, 18, 40, 0.82));
  border-left: 3px solid var(--c-accent);
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.commentary.live { opacity: 1; transform: translateY(0); }
/* On touch devices the bottom-left corner belongs to the movement pad, so
   the lower-third moves up under the objective ticker instead. */
html.touch-mode .commentary {
  left: 50%;
  bottom: auto;
  top: calc(2.2% + var(--safe-t) + 7.6em);
  transform: translate(-50%, -8px);
  max-width: 62%;
}
html.touch-mode .commentary.live { transform: translate(-50%, 0); }
.commentary .cm-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c-danger);
  flex: none;
  animation: pulse-soft 1s ease-in-out infinite;
}
.commentary .cm-text { font-size: var(--fs-small); color: var(--c-text); }
.commentary.k-goal { border-left-color: var(--c-gold); }
.commentary.k-goal .cm-text { color: var(--c-gold); font-weight: 700; }
.commentary.k-big { border-left-color: var(--c-accent-2); }

.coach-tip {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -8px);
  z-index: var(--z-announcer);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1.1em;
  border-radius: var(--r-pill);
  background: rgba(8, 14, 30, 0.92);
  border: 1px solid var(--c-accent-2);
  box-shadow: var(--sh-3), var(--glow-blue);
  font-size: var(--fs-small);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
  max-width: 80%;
  text-align: center;
}
.coach-tip.live { opacity: 1; transform: translate(-50%, 0); }
.ct-ico { font-size: 1.3em; }

/* ==========================================================================
   13 · RESULTS: XP, NEXT REWARD, BOON PICKER
   ========================================================================== */

.victory-xp {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(56, 224, 140, 0.08);
  border: 1px solid rgba(56, 224, 140, 0.3);
}
.victory-xp[hidden] { display: none; }
.vx-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.vx-gain { font-family: var(--font-display); font-size: var(--fs-big); color: var(--c-accent); }
.vx-gain b { font-variant-numeric: tabular-nums; }
.vx-style, .vx-ghost { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.vx-bar { height: calc(var(--u) * 0.34); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.vx-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent)); transition: width 900ms var(--ease-out); }
.vx-foot { font-size: var(--fs-tiny); color: var(--c-text-faint); }
.vx-foot b { color: var(--c-gold); }

.next-reward {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-panel-soft);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-1), var(--edge-lit);
}
.next-reward[hidden] { display: none; }
.nr-ring {
  position: relative;
  width: calc(var(--u) * 2.9);
  height: calc(var(--u) * 2.9);
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--c-accent) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.1) 0);
}
.nr-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0b1020;
}
.nr-ico { position: relative; z-index: 1; font-size: 1.3em; }
.nr-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nr-body small { font-size: var(--fs-tiny); letter-spacing: 0.16em; color: var(--c-text-faint); }
.nr-body b { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.05em; }
.nr-body span { font-size: var(--fs-tiny); color: var(--c-accent); }
.nr-pct { font-family: var(--font-display); font-size: var(--fs-big); color: var(--c-accent); font-variant-numeric: tabular-nums; }

.boon-picker { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.boon-picker[hidden] { display: none; }
.boon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.boon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(56, 224, 140, 0.12), rgba(10, 20, 36, 0.7));
  border: 1px solid rgba(56, 224, 140, 0.45);
  box-shadow: var(--sh-2), var(--edge-lit);
  text-align: center;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.boon-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3), var(--glow-accent); }
.bn-ico { font-size: 1.9em; line-height: 1; }
.boon-card b { font-family: var(--font-display); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
.boon-card span { font-size: var(--fs-tiny); color: var(--c-text-dim); }

/* ==========================================================================
   14 · UNLOCK CELEBRATION CARD
   ========================================================================== */

.unlock-card {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-modal) + 2);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.unlock-card.live { display: flex; animation: fade-in var(--t-med) var(--ease-out); }
.uc-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(48, 74, 140, 0.7), rgba(8, 12, 26, 0.92));
  border: 1px solid var(--c-gold);
  box-shadow: var(--sh-4), var(--glow-gold);
  animation: pop-in 0.5s var(--ease-bounce);
  overflow: hidden;
}
.uc-kicker { font-size: var(--fs-tiny); letter-spacing: var(--ls-huge); color: var(--c-gold); }
.uc-ico { font-size: calc(var(--u) * 4.2); line-height: 1; filter: drop-shadow(0 8px 22px rgba(255, 207, 77, 0.55)); }
.uc-name { font-family: var(--font-display); font-size: var(--fs-title); text-transform: uppercase; letter-spacing: 0.08em; }
.uc-sub { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.uc-rays {
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 12deg, rgba(255, 207, 77, 0.16) 12deg 24deg);
  animation: uc-spin 12s linear infinite;
}
@keyframes uc-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   15 · TIERED NOTIFICATIONS
   When every message looks identical the important ones get ignored.
   ========================================================================== */

.toast.tier-reward {
  border-color: rgba(255, 207, 77, 0.6);
  box-shadow: var(--sh-2), var(--glow-gold);
  background: linear-gradient(180deg, rgba(60, 46, 10, 0.92), var(--c-panel));
}
.toast.tier-achievement {
  border-color: rgba(162, 155, 254, 0.7);
  box-shadow: var(--sh-2), 0 0 24px rgba(162, 155, 254, 0.5);
  background: linear-gradient(180deg, rgba(40, 34, 82, 0.94), var(--c-panel));
}
.toast.tier-achievement .t-icon { animation: icon-burst 0.6s var(--ease-bounce); }
@keyframes icon-burst {
  0% { transform: scale(0.4) rotate(-25deg); }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
/* Older toasts recede so the newest one is unmistakably the current one. */
#toast-container .toast:not(:last-child) { opacity: 0.62; transform: scale(0.96); }

/* ==========================================================================
   16 · SMALL-VIEWPORT EXCEPTIONS
   Same rule as the rest of the game: nothing is hidden on a phone, the whole
   interface simply scales. These few rules only stop the *new* panels from
   running out of vertical room.
   ========================================================================== */

@media (max-width: 560px), (max-height: 380px) {
  .career-body,
  .daily-wrap { max-height: 100%; }
  .boon-grid { grid-template-columns: 1fr; }
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Play panel density ----
   Six quick-launch modes plus the take-over button is one row more than the
   panel used to carry, so the jumbo button gives a little height back and the
   grid buttons hold a single line each. */
#hub-play .btn.jumbo { padding: 0.85em 1.2em; }
#hub-play .quickplay { gap: var(--sp-2); }
#hub-play .quick-grid .btn {
  padding: 0.6em 0.7em;
  white-space: nowrap;
}

/* ==========================================================================
   17 · FULL-SIZE RECTANGULAR MENU PANELS
   Every hub is now the same framed rectangle filling the menu stage, instead
   of eight differently-shaped floating clusters. One shape, one border, one
   scroll region — the menu reads as a single piece of furniture and each
   category simply changes what is inside it.
   ========================================================================== */

.menu-stage {
  width: min(calc(var(--u) * 76), 100%);
}

.hub-panel {
  /* The frame. Applied to the panel itself so it is exactly the stage box. */
  background:
    linear-gradient(180deg, rgba(24, 38, 70, 0.62), rgba(8, 13, 28, 0.86));
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4), var(--edge-lit-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-3);
  align-items: stretch;
}
.hub-panel.active { display: flex; }

/* A title strip along the top of the frame, so every panel is labelled. */
.hub-panel::before {
  content: attr(data-title);
  display: block;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: var(--ls-huge);
  text-transform: uppercase;
  color: var(--c-accent-2);
  padding-bottom: calc(var(--u) * 0.4);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: calc(var(--u) * 0.2);
}

/* The scrolling region lives inside the frame, not on it, so the border and
   title never scroll away. */
.hub-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-right: calc(var(--u) * 0.35);
}
.hub-panel { overflow: hidden; }

/* Play stays centred inside its frame; the rest fill the width. */
#hub-play .hub-body { justify-content: center; }

/* ==========================================================================
   18 · SCROLLBARS
   The default bar is a grey system artefact sitting on a dark glass panel.
   These match the interface: a thin accent-tinted thumb on a recessed track,
   with a wider hit area on touch.
   ========================================================================== */

.hub-body,
.settings-body,
.mode-grid,
.howto-columns,
.achievements-list,
.setup-panel,
.panel,
.victory-stats-scroll,
.career-body,
.locker {
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(255, 255, 255, 0.06);
}

.hub-body::-webkit-scrollbar,
.settings-body::-webkit-scrollbar,
.mode-grid::-webkit-scrollbar,
.howto-columns::-webkit-scrollbar,
.achievements-list::-webkit-scrollbar,
.setup-panel::-webkit-scrollbar,
.panel::-webkit-scrollbar,
.victory-stats-scroll::-webkit-scrollbar,
.career-body::-webkit-scrollbar,
.locker::-webkit-scrollbar {
  width: calc(var(--u) * 0.55);
  height: calc(var(--u) * 0.55);
}
.hub-body::-webkit-scrollbar-track,
.settings-body::-webkit-scrollbar-track,
.mode-grid::-webkit-scrollbar-track,
.howto-columns::-webkit-scrollbar-track,
.achievements-list::-webkit-scrollbar-track,
.setup-panel::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track,
.victory-stats-scroll::-webkit-scrollbar-track,
.career-body::-webkit-scrollbar-track,
.locker::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.32);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.hub-body::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb,
.mode-grid::-webkit-scrollbar-thumb,
.howto-columns::-webkit-scrollbar-thumb,
.achievements-list::-webkit-scrollbar-thumb,
.setup-panel::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb,
.victory-stats-scroll::-webkit-scrollbar-thumb,
.career-body::-webkit-scrollbar-thumb,
.locker::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent));
  border-radius: var(--r-pill);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 8px rgba(56, 224, 140, 0.4);
}
.hub-body::-webkit-scrollbar-thumb:hover,
.settings-body::-webkit-scrollbar-thumb:hover,
.career-body::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.25);
}
/* Fatter and easier to grab where there is no mouse. */
@media (pointer: coarse) {
  .hub-body::-webkit-scrollbar,
  .settings-body::-webkit-scrollbar,
  .career-body::-webkit-scrollbar { width: calc(var(--u) * 0.8); }
}

/* ==========================================================================
   19 · BACK ARROW
   Mirrors what Escape does, for mouse and touch: one step back from a
   sub-panel or a screen.
   ========================================================================== */

.back-arrow {
  position: absolute;
  top: calc(3% + var(--safe-t));
  left: calc(3% + var(--safe-l));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.34em 0.9em 0.34em 0.55em;
  border-radius: var(--r-pill);
  background: rgba(10, 16, 32, 0.82);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-2), var(--edge-lit);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast);
}
.back-arrow[hidden] { display: none; }
.back-arrow:hover {
  color: #fff;
  border-color: var(--c-accent-2);
  box-shadow: var(--sh-2), var(--glow-blue);
  transform: translateX(-3px);
}
.back-arrow .ba-glyph {
  font-size: 1.5em;
  line-height: 0.7;
  transition: transform var(--t-fast) var(--ease-out);
}
.back-arrow:hover .ba-glyph { transform: translateX(-2px); }

/* The grudge callout shares this corner, so it steps aside for the arrow. */
#screen-menu:has(.back-arrow:not([hidden])) .grudge-card {
  left: calc(3% + var(--safe-l) + 7.2em);
}

/* ==========================================================================
   20 · HEALTH & COMBAT HUD
   ========================================================================== */

.vitals { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.vitals.no-health .health-wrap { display: none; }

.health-wrap {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 0.62);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.health-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #46e08c, #9dffbe);
  box-shadow: 0 0 10px rgba(70, 224, 140, 0.5);
  transition: width 160ms linear, background var(--t-med);
}
.health-wrap.hurt .health-fill { background: linear-gradient(90deg, #ffb03c, #ffd98a); }
.health-wrap.critical .health-fill {
  background: linear-gradient(90deg, #ff3b4d, #ff8a95);
  animation: pulse-soft 0.7s ease-in-out infinite;
}
.health-wrap.ko .health-fill { width: 0 !important; }
.health-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 0.44);
  font-weight: 800;
  color: #04160c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.health-wrap.critical .health-num { color: #fff; text-shadow: 0 1px 3px #000; }
#power-panel-p2 .health-num { color: #04160c; }

/* The KO announcement gets its own colour so it never reads as a goal.
   `background-image` rather than the `background` shorthand: the shorthand
   also resets `background-clip`, which would paint the gradient as a solid
   block over the pitch instead of through the letterforms. */
.announce-text.announce-ko {
  background-image: linear-gradient(180deg, #ffffff 8%, #ff5d6e 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(255, 93, 110, 0.75));
}
.announce-text.announce-ko .sub {
  -webkit-text-fill-color: #ffd7db;
  color: #ffd7db;
}

/* One scroll region per panel: the inner grids no longer cap their own
   height or scroll independently, which used to produce nested scrollbars. */
.hub-body .mode-grid,
.hub-body .howto-columns,
.hub-body .achievements-list,
.hub-body .settings-body,
.hub-body .career-body,
.hub-body .locker,
.hub-body .daily-wrap {
  max-height: none;
  overflow: visible;
}
.hub-body .mode-grid,
.hub-body .arena-grid,
.hub-body .power-browser,
.hub-body .trial-grid,
.hub-body .stats-cards,
.hub-body .achievements-list,
.hub-body .howto-columns { width: 100%; }

/* ---- Menu header density ----
   The hero, tagline, level strip and rail were eating nearly half the screen
   before the panel even started. Trimming them gives the framed panel the
   room it needs so its content is scrolled rather than truncated. */
#screen-menu {
  padding-top: max(4.2%, calc(var(--u) * 2.4));
  gap: calc(var(--u) * 0.15);
}
.menu-hero { font-size: calc(var(--u) * 3.05); }
.menu-tagline { font-size: calc(var(--u) * 0.62); margin-top: 0; }
.level-strip { margin-top: calc(var(--u) * 0.35); }
.menu-rail { margin-top: calc(var(--u) * 0.55); }
.menu-stage { margin-top: calc(var(--u) * 0.55); }

/* Make the scroll thumb unmistakable — a panel that scrolls should say so. */
.hub-body::-webkit-scrollbar { width: calc(var(--u) * 0.7); }
.hub-body::-webkit-scrollbar-thumb { min-height: calc(var(--u) * 2.5); }

/* Melee buttons on touch, drawn a shade smaller than the primary actions so
   the kick button stays the obvious one. */
.tbtn.fight {
  --tsize: max(var(--tap-min), calc(var(--u) * 3.7));
  border-color: rgba(255, 122, 60, 0.55);
}
.tbtn.fight.pressed { background: rgba(255, 122, 60, 0.45); border-color: #ff9a5c; }

/* ==========================================================================
   21 · ONBOARDING
   Four screens, once in a player's life. Same framed-panel language as the
   menu hubs so the game does not introduce itself in a visual dialect it
   never uses again — one slide visible at a time, sliding horizontally, with
   dots that double as a jump control.
   ========================================================================== */

#screen-onboard {
  justify-content: center;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(58, 96, 190, 0.32), transparent 62%),
    rgba(4, 7, 16, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.onboard-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--u) * 46));
  height: min(100%, calc(var(--u) * 38));
  background: linear-gradient(180deg, rgba(24, 38, 70, 0.72), rgba(8, 13, 28, 0.92));
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4), var(--edge-lit-strong);
  overflow: hidden;
}

/* The track holds all four slides side by side and slides between them. */
.onboard-track {
  --slide: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  transform: translateX(calc(var(--slide) * -100%));
  transition: transform 0.42s var(--ease-out);
}

.onboard-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--u) * 0.28);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6) calc(var(--u) * 0.6);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(255, 255, 255, 0.06);
  /* Non-active slides must not be reachable by tab or by touch scroll. */
  visibility: hidden;
}
.onboard-slide.active { visibility: visible; }

.onboard-slide::-webkit-scrollbar { width: calc(var(--u) * 0.55); }
.onboard-slide::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}
.onboard-slide::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2));
  border-radius: 999px;
  min-height: calc(var(--u) * 2.2);
}

.onboard-icon {
  font-size: calc(var(--u) * 2.6);
  line-height: 1;
  filter: drop-shadow(0 calc(var(--u) * 0.14) calc(var(--u) * 0.35) rgba(0, 0, 0, 0.55));
}
.onboard-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: var(--ls-huge);
  text-transform: uppercase;
  color: var(--c-accent-2);
}
.onboard-title {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.35);
  line-height: 1.12;
  margin: 0;
  color: #fff;
}
.onboard-lead {
  max-width: calc(var(--u) * 30);
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-text-dim);
}

.onboard-list {
  list-style: none;
  margin: calc(var(--u) * 0.35) 0 0;
  padding: 0;
  width: 100%;
  max-width: calc(var(--u) * 32);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.22);
  text-align: left;
}
.onboard-list li {
  display: grid;
  grid-template-columns: minmax(calc(var(--u) * 7), auto) 1fr;
  gap: calc(var(--u) * 0.6);
  align-items: baseline;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.55);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--c-line);
  font-size: var(--fs-small);
}
.onboard-list li > span:first-child {
  color: var(--c-accent-2);
  font-weight: 700;
  white-space: nowrap;
}
.onboard-list li > span:last-child { color: var(--c-text-dim); }
.onboard-list b { color: var(--c-text); }

/* Only the visible slide animates its rows in. */
.onboard-slide.active .onboard-list li {
  animation: rise-in var(--t-med) var(--ease-out) backwards;
}
.onboard-slide.active .onboard-list li:nth-child(2) { animation-delay: 40ms; }
.onboard-slide.active .onboard-list li:nth-child(3) { animation-delay: 80ms; }
.onboard-slide.active .onboard-list li:nth-child(4) { animation-delay: 120ms; }
.onboard-slide.active .onboard-list li:nth-child(5) { animation-delay: 160ms; }
.onboard-slide.active .onboard-list li:nth-child(6) { animation-delay: 200ms; }

.onboard-foot {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9);
  border-top: 1px solid var(--c-line);
  background: rgba(4, 8, 18, 0.55);
}
.onboard-skip { justify-self: start; }
.onboard-nav { justify-self: end; display: flex; gap: var(--sp-2); }
/* Footer buttons are navigation, not menu entries: one line, sized to fit. */
.onboard-nav .btn,
.onboard-skip {
  min-width: 0;
  white-space: nowrap;
  font-size: var(--fs-small);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 0.95);
}

.onboard-dots { display: flex; gap: calc(var(--u) * 0.3); justify-self: center; }
.onboard-dot {
  width: calc(var(--u) * 0.55);
  height: calc(var(--u) * 0.55);
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.onboard-dot.seen { background: var(--c-accent-2); opacity: 0.6; }
.onboard-dot.active {
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2));
  transform: scale(1.25);
  box-shadow: 0 0 calc(var(--u) * 0.5) var(--c-accent);
}
.onboard-dot:hover { transform: scale(1.2); }

@media (prefers-reduced-motion: reduce) {
  .onboard-track { transition: none; }
  .onboard-slide.active .onboard-list li { animation: none; }
}

/* Short windows: drop the decoration before the content. */
@media (max-height: 560px) {
  .onboard-panel { height: 100%; }
  .onboard-icon { font-size: calc(var(--u) * 1.8); }
  .onboard-slide { padding-top: calc(var(--u) * 0.6); }
}