/* BaseRogue — visual polish layer ("juice")
   Loaded AFTER style.css. Purely presentational: overrides and additions only,
   so removing this <link> (and juice.js) restores the previous look.
   Sections: 1) base  2) combat broadcast  3) vintage cards  4) menu / map / end screens
   Hidden modes (Dynasty, Career) are intentionally not styled here. */

/* ═══════════════════════════ 1) BASE ═══════════════════════════ */

:root {
  --jx-ink: #010604;
  --jx-panel-top: rgba(6, 24, 16, 0.95);
  --jx-panel-bot: rgba(1, 8, 5, 0.97);
  --jx-line: #10b981;
  --jx-line-dim: rgba(16, 185, 129, 0.35);
  --jx-gold: #ffcc00;
  --jx-cream: #f3e9d2;
  --jx-stitch: #e63946;
  --jx-text: #d7e2dc;
  --jx-text-dim: #9fb3a9;
  --jx-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --jx-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

::selection {
  background: var(--jx-gold);
  color: #000;
}

/* CRT glass: scanlines + vignette over everything, never intercepts input */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.42) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
}

/* Let more of the pixel-art stadium through */
body {
  background-image:
    linear-gradient(180deg, rgba(3, 10, 6, 0.5) 0%, rgba(3, 10, 6, 0.78) 100%),
    url('assets/TEST.webp');
}

/* ── Header ── */
header {
  background: linear-gradient(180deg, #06170e 0%, #000 100%);
  border-bottom: 2px solid var(--primary-color);
  box-shadow: 0 2px 0 #000, 0 4px 0 var(--jx-line-dim), 0 10px 24px rgba(0, 0, 0, 0.7);
}

.hud-item {
  background: linear-gradient(180deg, rgba(10, 30, 20, 0.9), rgba(0, 0, 0, 0.9));
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Panels: bevel + depth instead of a flat double border ── */
.glass-panel,
.workspace-sidebar {
  border: 2px solid var(--jx-line);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 3px var(--jx-line-dim),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -18px 30px rgba(0, 0, 0, 0.35),
    inset 0 0 46px rgba(0, 255, 102, 0.045),
    0 16px 34px rgba(0, 0, 0, 0.65);
}

.glass-panel {
  background: linear-gradient(180deg, var(--jx-panel-top) 0%, var(--jx-panel-bot) 100%);
}

.workspace-sidebar {
  background: linear-gradient(180deg, rgba(6, 24, 16, 0.93) 0%, rgba(1, 8, 5, 0.96) 100%);
}

.sidebar-header {
  background: linear-gradient(180deg, rgba(0, 255, 102, 0.16), rgba(0, 255, 102, 0.03));
  border: 0;
  border-bottom: 2px solid var(--primary-color);
  box-shadow: 0 2px 0 #000;
  margin: -10px -10px 10px -10px;
  padding: 10px 8px 8px 8px;
  text-shadow: 0 0 8px var(--primary-glow), 2px 2px 0 #000;
  letter-spacing: 1px;
}

h2 {
  text-shadow: 2px 2px 0 #000, 0 0 12px var(--primary-glow);
  letter-spacing: 0.5px;
}

p {
  color: var(--jx-text);
}

/* ── Buttons: arcade cabinet keys ── */
.btn {
  box-shadow: 0 0 0 2px #000, 0 4px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease, background 0.15s ease;
  text-shadow: none;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

.btn:active:not(:disabled) {
  transform: translateY(2px);
  filter: brightness(0.92);
}

.btn:disabled {
  filter: grayscale(0.7) brightness(0.7);
  cursor: not-allowed;
}

.btn:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--jx-gold);
  outline-offset: 2px;
}

/* ── Scrollbars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--jx-line) #000;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: var(--jx-line);
  border: 2px solid #000;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* ── Screen transitions (class toggled by juice.js) ── */
@keyframes jx-screen-in {
  0% { opacity: 0; filter: brightness(2.2) saturate(0.3); }
  45% { opacity: 1; filter: brightness(1.25) saturate(0.8); }
  100% { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .jx-screen-in {
    animation: jx-screen-in 0.34s var(--jx-ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
  }
}

/* ═══════════════════ 2) COMBAT — BROADCAST ═══════════════════ */

/* ── Stadium scoreboard ── */
.scoreboard {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #0b1a12 0%, #020504 100%);
  border: 3px solid #1f3d2e;
  box-shadow:
    0 0 0 2px #000,
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 20px rgba(0, 0, 0, 0.6),
    0 10px 22px rgba(0, 0, 0, 0.6);
  position: relative;
}

#scoreboard-inning-text {
  background: linear-gradient(180deg, #1a1300, #000);
  border: 2px solid #5c4a00;
  color: var(--jx-gold) !important;
  text-shadow: 0 0 8px var(--accent-glow);
  letter-spacing: 3px;
  padding: 6px 8px;
  margin: 0 !important;
}

#score-away-r,
#score-home-r,
#score-away-h,
#score-home-h {
  font-family: 'VT323', monospace;
  font-size: 26px;
  line-height: 0.9;
  letter-spacing: 1px;
  text-shadow: 0 0 10px currentColor, 0 0 2px currentColor;
  display: inline-block;
}

#score-home-h {
  color: #ffb020 !important;
}

.jx-pop {
  animation: jx-digit-pop 0.45s var(--jx-ease-back);
}

@keyframes jx-digit-pop {
  0% { transform: scale(1.9); filter: brightness(2.2); }
  100% { transform: scale(1); filter: none; }
}

@media (min-width: 769px) {
  .scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    column-gap: 10px;
    align-items: center;
    padding: 10px !important;
  }

  /* Outs / inning / K.O. in a single row (runs are hidden: they have no gameplay effect) */
  .scoreboard-text-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .scoreboard-text-panel > [id] {
    grid-column: 1 / -1;
  }

  .scoreboard-text-panel > div:not([id]) {
    display: contents !important;
  }

  .scoreboard-text-panel > div:not([id]) > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #000;
    border: 2px solid #16281f;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 5px 4px 3px 4px;
    color: var(--jx-text-dim);
    font-size: 7px;
    letter-spacing: 1px;
  }

  #bases-display-row {
    border-top: 0 !important;
    background: radial-gradient(ellipse at 50% 60%, rgba(22, 101, 52, 0.6) 0%, rgba(6, 30, 18, 0.5) 55%, transparent 75%);
    padding: 0 !important;
    margin-top: 0 !important;
    height: 100%;
  }

  #bases-display-row svg {
    width: 92px !important;
    height: 92px !important;
    overflow: visible;
  }
}

.scoreboard-text-panel div:has(> #score-away-r) {
  display: none !important;
}

/* Out lamps appended next to the outs digit by juice.js */
.jx-outs {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.jx-outs i {
  width: 9px;
  height: 9px;
  background: #2a0a0a;
  border: 1px solid #000;
  box-shadow: inset 0 0 3px #000;
  transition: background 0.2s, box-shadow 0.2s;
}

.jx-outs i.on {
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b, inset 0 0 2px #fff;
}

#bases-display-row path {
  stroke: rgba(255, 255, 255, 0.4);
}

/* ── The field: card showdown ── */
.rpg-fight-deck {
  background:
    radial-gradient(ellipse at 25% 100%, rgba(0, 255, 102, 0.16), transparent 55%),
    radial-gradient(ellipse at 75% 100%, rgba(255, 60, 60, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(4, 18, 12, 0.75) 0%, rgba(0, 0, 0, 0.8) 100%);
  border: 2px solid rgba(16, 185, 129, 0.3);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7), 0 0 0 2px #000;
  position: relative;
}

.fight-card-slot {
  border: 2px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
}

.vs-circle {
  color: var(--jx-gold);
  text-shadow: 3px 3px 0 #000, 0 0 16px var(--accent-glow), 0 0 30px rgba(255, 60, 60, 0.5);
}

.faceoff-panel {
  background: linear-gradient(180deg, #06140d 0%, #000 100%);
  border: 2px solid var(--jx-line);
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rotation-badge.active {
  animation: jx-glow-breathe 1.6s ease-in-out infinite;
}

@keyframes jx-glow-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* ── Bars: chunky, with a trailing "ghost" of the damage just taken ── */
.jx-bar {
  position: relative;
  height: 12px !important;
  background: #000 !important;
  border: 2px solid #1c2a23 !important;
  box-shadow: inset 0 0 6px #000;
  overflow: hidden;
}

.jx-bar > :not(.jx-ghost) {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.jx-ghost {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff7c2;
  opacity: 0.9;
  transition: width 0.7s ease-in 0.35s;
  z-index: 0;
}

/* ── Floating damage / heal numbers ── */
.jx-float {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  color: #ff5252;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 0 0 14px currentColor;
  transform: translate(-50%, -50%);
  animation: jx-float-up 1.15s var(--jx-ease-out) forwards;
  white-space: nowrap;
}

.jx-float.heal { color: #4ade80; }
.jx-float.shield { color: #60a5fa; font-size: 15px; }
.jx-float.big { font-size: 30px; color: var(--jx-gold); }

@keyframes jx-float-up {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.4); }
  18% { opacity: 1; transform: translate(-50%, -70%) scale(1.25); }
  32% { transform: translate(-50%, -85%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.95); }
}

/* ── d100 luck strip (built by juice.js from the Luck Zones list) ── */
#jx-zone-strip {
  width: 100%;
  position: relative;
  padding: 12px 0 2px 0;
}

.jx-zone-track {
  display: flex;
  height: 14px;
  border: 2px solid #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  background: #000;
}

.jx-zone-seg {
  height: 100%;
  min-width: 1px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

.jx-zone-seg.hit {
  animation: jx-seg-hit 0.9s ease-out;
}

@keyframes jx-seg-hit {
  0%, 40% { filter: brightness(2.4) saturate(1.4); }
  20% { filter: brightness(1); }
  100% { filter: none; }
}

.jx-zone-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #fff;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 2px 0 #000);
  transform: translateX(-6px);
  transition: left 0.55s var(--jx-ease-back), opacity 0.2s;
  opacity: 0;
}

.jx-zone-marker.on {
  opacity: 1;
}

.jx-zone-seg.miss {
  filter: brightness(0.38) saturate(0.6);
}

.jx-zone-caption {
  min-height: 16px;
  margin-top: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
  text-shadow: 2px 2px 0 #000, 0 0 8px currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#jx-zone-strip.rolled .jx-zone-caption {
  animation: jx-digit-pop 0.35s var(--jx-ease-back);
}

@keyframes jx-strip-swap {
  0% { opacity: 0.25; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}

.jx-strip-swap {
  animation: jx-strip-swap 0.3s var(--jx-ease-out);
}

.outcome-row {
  transition: background 0.2s, transform 0.2s;
}

.outcome-row.jx-row-hit {
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(3px);
}

/* ── Roll button: the one thing you press all game ── */
#btn-roll-dice {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px #000, 0 5px 0 #2a1a6e, 0 0 22px rgba(124, 92, 255, 0.45) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

#btn-roll-dice:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

#btn-roll-dice:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 2px #000, 0 1px 0 #2a1a6e !important;
}

#btn-roll-dice::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: jx-shine-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

#btn-roll-dice:disabled::after {
  display: none;
}

@keyframes jx-shine-sweep {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}

#dice-result-display {
  text-shadow: 3px 3px 0 #000, 0 0 14px currentColor;
}

/* ── Play-by-play ticker ── */
.match-log {
  border: 2px solid var(--jx-line);
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.match-log-header {
  background: linear-gradient(180deg, rgba(0, 255, 102, 0.16), rgba(0, 0, 0, 0.9));
  border-bottom: 2px solid var(--primary-color);
  letter-spacing: 1px;
}

.match-log-content {
  padding: 10px !important;
  background: linear-gradient(180deg, #010a06, #000) !important;
}

.log-line {
  border-bottom: 0;
  border-left: 3px solid rgba(0, 255, 102, 0.45);
  background: rgba(0, 255, 102, 0.05);
  padding: 5px 8px;
  margin-bottom: 6px;
  line-height: 1.15;
}

.log-line.run-scored {
  border-left-color: #ffe600;
  background: rgba(255, 230, 0, 0.07);
}

.log-line.header-line {
  border-left-color: var(--jx-gold);
  background: rgba(255, 204, 0, 0.1);
}

/* ── Outcome banner: TV lower-third instead of a rounded popup ── */
.outcome-popup-overlay {
  --oc: #ffffff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--oc) 22%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #0c1220 0%, #020409 100%) !important;
  border: 0 !important;
  border-left: 10px solid var(--oc) !important;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px color-mix(in srgb, var(--oc) 70%, transparent),
    0 0 40px color-mix(in srgb, var(--oc) 55%, transparent),
    0 18px 30px rgba(0, 0, 0, 0.8) !important;
  overflow: hidden;
}

.outcome-popup-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255, 255, 255, 0.035) 14px 28px);
  pointer-events: none;
}

.outcome-popup-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  animation: jx-banner-sweep 0.75s ease-out 0.12s forwards;
  pointer-events: none;
}

@keyframes jx-banner-sweep {
  to { left: 140%; }
}

.outcome-popup-overlay > * {
  position: relative;
  z-index: 1;
}

.outcome-popup-overlay[data-outcome="BB"] { --oc: #3b82f6; }
.outcome-popup-overlay[data-outcome="SO"] { --oc: #ef4444; }
.outcome-popup-overlay[data-outcome="OUT"] { --oc: #9ca3af; }
.outcome-popup-overlay[data-outcome="1B"] { --oc: #34d399; }
.outcome-popup-overlay[data-outcome="2B"] { --oc: #10b981; }
.outcome-popup-overlay[data-outcome="3B"] { --oc: #06b6d4; }
.outcome-popup-overlay[data-outcome="HR"] { --oc: #facc15; }
.outcome-popup-overlay[data-outcome="STEAL"] { --oc: #38bdf8; }
.outcome-popup-overlay[data-outcome="E"] { --oc: #f59e0b; }
.outcome-popup-overlay[data-outcome="DEF_WIN"] { --oc: #ffd700; }
.outcome-popup-overlay[data-outcome="DEF_LOSE"] { --oc: #ef4444; }

/* ── Impact FX spawned by juice.js ── */
.jx-particle {
  position: fixed;
  z-index: 9400;
  width: 8px;
  height: 8px;
  pointer-events: none;
  animation: jx-particle 0.95s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes jx-particle {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.2); opacity: 0; }
}

.jx-flash {
  position: fixed;
  inset: 0;
  z-index: 9300;
  pointer-events: none;
  animation: jx-flash 0.5s ease-out forwards;
}

@keyframes jx-flash {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes jx-shake-s {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(2px, 1px); }
}

@keyframes jx-shake-l {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-9px, 4px) rotate(-0.6deg); }
  25% { transform: translate(8px, -5px) rotate(0.6deg); }
  40% { transform: translate(-7px, -3px) rotate(-0.4deg); }
  55% { transform: translate(6px, 4px) rotate(0.3deg); }
  70% { transform: translate(-4px, 2px); }
  85% { transform: translate(2px, -1px); }
}

.jx-shake-s { animation: jx-shake-s 0.3s linear; }
.jx-shake-l { animation: jx-shake-l 0.55s linear; }

@keyframes jx-card-recoil {
  0% { transform: translateX(0); filter: none; }
  20% { transform: translateX(var(--recoil, 10px)) rotate(2deg); filter: brightness(2.2) saturate(0.2); }
  100% { transform: translateX(0); filter: none; }
}

.jx-recoil { animation: jx-card-recoil 0.42s var(--jx-ease-out); }

@keyframes jx-card-lunge {
  0% { transform: translateX(0) scale(1); }
  35% { transform: translateX(var(--lunge, 16px)) scale(1.06); }
  100% { transform: translateX(0) scale(1); }
}

.jx-lunge { animation: jx-card-lunge 0.4s var(--jx-ease-out); }

@media (prefers-reduced-motion: reduce) {
  .jx-particle, .jx-flash { display: none; }
  .jx-shake-s, .jx-shake-l, .jx-recoil, .jx-lunge, .jx-pop { animation: none; }
  #btn-roll-dice::after, .outcome-popup-overlay::after { display: none; }
}

/* ═══════════════════ 3) CARDS — VINTAGE STOCK ═══════════════════ */
/* The per-era palettes already live in style.css. This layer adds what makes
   them read as physical cards: printed-stock grain, edge wear, and real foil. */

.player-card {
  --mx: 50%;
  --my: 50%;
}

/* Cardboard grain + worn edges + a faint diagonal gloss, on every card */
.player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at var(--mx) var(--my), rgba(255, 255, 255, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 58%, rgba(40, 24, 8, 0.38) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 10px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  /* Holographic foil: Legendary is full rainbow, Epic a cooler violet sheet.
     It drifts on its own and follows the cursor (--mx/--my set by juice.js). */
  .player-card.rarity-Legendary::before,
  .player-card.rarity-Epic::before {
    opacity: 0.55;
    mix-blend-mode: color-dodge;
    background-size: 260% 260%;
    background-position: 0% 0%;
    transition: opacity 0.2s ease-out;
    animation: jx-foil-drift 7s ease-in-out infinite alternate;
  }

  .player-card.rarity-Legendary::before {
    background-image: linear-gradient(
      115deg,
      transparent 18%,
      rgba(255, 60, 140, 0.5) 30%,
      rgba(255, 214, 0, 0.55) 40%,
      rgba(60, 255, 170, 0.5) 50%,
      rgba(60, 170, 255, 0.55) 60%,
      rgba(200, 90, 255, 0.5) 70%,
      transparent 82%
    );
  }

  .player-card.rarity-Epic::before {
    background-image: linear-gradient(
      115deg,
      transparent 25%,
      rgba(204, 0, 255, 0.45) 40%,
      rgba(120, 220, 255, 0.5) 50%,
      rgba(204, 0, 255, 0.45) 60%,
      transparent 75%
    );
    opacity: 0.4;
  }

  .player-card.rarity-Legendary.card-tilt-active::before,
  .player-card.rarity-Epic.card-tilt-active::before {
    animation: none;
    opacity: 0.9;
    background-position: var(--mx) var(--my);
    transition: opacity 0.2s ease-out, background-position 0.08s linear;
  }

  /* Rare: a single silver glint across the card when you pick it up */
  .player-card.rarity-Rare::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background: linear-gradient(115deg, transparent 40%, rgba(200, 240, 255, 0.6) 50%, transparent 60%);
    background-size: 250% 250%;
    background-position: 130% 130%;
    opacity: 0;
    mix-blend-mode: screen;
    transition: background-position 0.6s ease-out, opacity 0.15s;
  }

  .player-card.rarity-Rare.card-tilt-active::before {
    background-position: -30% -30%;
    opacity: 1;
  }

  .player-card.card-tilt-active {
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.6));
  }
}

@keyframes jx-foil-drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ── Draft: the picks sit on a card table ── */
@media (min-width: 769px) {
  .draft-cards-carousel {
    background:
      repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 5px),
      radial-gradient(ellipse at center, #17633a 0%, #0a3a21 60%, #052414 100%);
    border: 4px solid #4a2f17;
    outline: 2px solid #000;
    box-shadow:
      inset 0 0 0 2px #7a5230,
      inset 0 0 34px rgba(0, 0, 0, 0.75),
      0 14px 26px rgba(0, 0, 0, 0.6);
    padding: 16px 18px;
  }

  .draft-card-wrapper {
    transition: transform 0.18s var(--jx-ease-back), filter 0.18s ease, box-shadow 0.18s ease !important;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), 0 10px 18px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.55) !important;
  }

  .draft-card-wrapper:hover {
    transform: translateY(-12px) scale(1.05);
    box-shadow: 0 18px 0 rgba(0, 0, 0, 0.25), 0 24px 30px rgba(0, 0, 0, 0.6);
    z-index: 4;
  }

  .draft-cards-carousel:hover .draft-card-wrapper:not(:hover) {
    filter: brightness(0.62) saturate(0.75);
  }
}

.draft-col {
  background: linear-gradient(180deg, rgba(6, 24, 16, 0.85), rgba(0, 0, 0, 0.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 2px #000;
}

#draft-col-cards {
  background: none !important;
  box-shadow: none;
}

/* ═══════════════ 4) MENU / MAP / END SCREENS ═══════════════ */

/* ── Main menu ── */
@media (prefers-reduced-motion: no-preference) {
  .menu-main-logo {
    animation: jx-logo-float 4.5s ease-in-out infinite;
  }

  .mode-grid > .mode-card {
    animation: jx-rise-in 0.55s var(--jx-ease-out) both;
  }

  .mode-grid > .mode-card:nth-child(1) { animation-delay: 0.08s; }
  .mode-grid > .mode-card:nth-child(2) { animation-delay: 0.18s; }
  .mode-grid > .mode-card:nth-child(n+3) { animation-delay: 0.28s; }

  .mode-card:not(.is-locked) .mode-icon {
    animation: jx-icon-bob 2.6s ease-in-out infinite;
  }

  .quick-card .mode-icon { animation-delay: 0.4s; }
}

@keyframes jx-logo-float {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 4px 18px rgba(0, 255, 102, 0.55)); }
  50% { transform: translateY(-7px); filter: drop-shadow(0 12px 30px rgba(0, 255, 102, 0.9)); }
}

@keyframes jx-rise-in {
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes jx-icon-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-4deg); }
}

#screen-mode-select {
  border: 2px solid var(--jx-line);
}

.mode-card {
  background: linear-gradient(180deg, rgba(10, 22, 18, 0.9) 0%, rgba(0, 0, 0, 0.92) 100%);
  border-width: 2px;
  border-top-width: 5px;
  box-shadow: 0 0 0 2px #000, 0 8px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s var(--jx-ease-back), box-shadow 0.2s ease, border-color 0.2s ease;
}

.mode-card:not(.is-locked):hover {
  transform: translateY(-10px);
}

.story-card { border-color: #10b981; }
.quick-card { border-color: #3b82f6; }

.story-card:hover { box-shadow: 0 0 0 2px #000, 0 16px 0 rgba(0, 0, 0, 0.35), 0 0 34px rgba(16, 185, 129, 0.55); }
.quick-card:hover { box-shadow: 0 0 0 2px #000, 0 16px 0 rgba(0, 0, 0, 0.35), 0 0 34px rgba(59, 130, 246, 0.6); }
.challenge162-card:not(.is-locked):hover { box-shadow: 0 0 0 2px #000, 0 16px 0 rgba(0, 0, 0, 0.35), 0 0 34px rgba(245, 158, 11, 0.6); }

.mode-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0s;
}

.mode-card:not(.is-locked):hover::after {
  left: 140%;
  transition: left 0.6s ease-out;
}

.mode-icon {
  font-size: 42px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.6));
}

.mode-title {
  font-size: 14px;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 1px;
}

.mode-desc {
  color: var(--jx-text);
}

.btn-mode {
  padding: 13px 16px;
  box-shadow: 0 0 0 2px #000, 0 4px 0 rgba(0, 0, 0, 0.6);
}

/* Ambient motes drifting through the stadium lights (menu only; spawned by juice.js) */
#jx-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
  overflow: hidden;
}

body.on-main-menu #jx-ambient {
  display: block;
}

#jx-ambient i {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  background: #d9ffe8;
  box-shadow: 0 0 8px #7dffb0;
  opacity: 0;
  animation: jx-mote linear infinite;
}

@keyframes jx-mote {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.85; }
  80% { opacity: 0.5; }
  100% { transform: translate(var(--drift), -105vh); opacity: 0; }
}

body.on-main-menu .main-container {
  position: relative;
  z-index: 1;
}

/* ── Championship map ── */
#screen-map {
  border: 2px solid var(--jx-line);
}

.map-node-group.node-is-active {
  filter: drop-shadow(0 0 10px rgba(0, 255, 102, 0.75));
  transition: filter 0.2s ease;
}

.map-node-group.node-is-active:hover {
  filter: drop-shadow(0 0 18px rgba(0, 255, 102, 1)) brightness(1.25);
}

.map-node-group.node-is-visited {
  filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.55));
}

.map-node-group.node-is-future {
  transition: opacity 0.2s ease;
}

/* ── Scouting / pre-fight ── */
#btn-pre-fight-start {
  position: relative;
  overflow: hidden;
}

#btn-pre-fight-start::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: jx-shine-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* ── Synergy rail: readable at a glance ── */
.syn-active-desc,
.syn-t-text {
  color: var(--jx-text) !important;
  line-height: 1.4 !important;
}

.pokelike-syn-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.pokelike-syn-card:hover {
  transform: translateX(-3px);
  filter: brightness(1.2);
}

.pokelike-syn-card.syn-active {
  box-shadow: inset 3px 0 0 var(--primary-color), 0 0 12px rgba(0, 255, 102, 0.12);
}

.syn-progress-fill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.5s var(--jx-ease-out);
}

/* ── Game over / victory ── */
#gameover-title {
  color: var(--danger-color);
  text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255, 51, 51, 0.7);
  letter-spacing: 2px;
}

#victory-title {
  letter-spacing: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  #screen-gameover:not(.hidden) #gameover-title {
    animation: jx-title-slam 0.6s var(--jx-ease-back) both, jx-glitch 3.2s steps(1) 0.8s infinite;
  }

  #screen-victory:not(.hidden) #victory-title {
    animation: jx-title-slam 0.7s var(--jx-ease-back) both, jx-gold-shimmer 2.2s ease-in-out 0.7s infinite;
  }
}

@keyframes jx-title-slam {
  0% { opacity: 0; transform: scale(2.6); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes jx-glitch {
  0%, 100% { transform: translate(0, 0); text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255, 51, 51, 0.7); }
  4% { transform: translate(-3px, 1px); text-shadow: 3px 0 0 #00e5ff, -3px 0 0 #ff2e63; }
  8% { transform: translate(2px, -1px); text-shadow: -3px 0 0 #00e5ff, 3px 0 0 #ff2e63; }
  12% { transform: translate(0, 0); text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255, 51, 51, 0.7); }
}

@keyframes jx-gold-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)); }
}

@media (prefers-reduced-motion: reduce) {
  #jx-ambient { display: none !important; }
}

/* ═══════════════ 5) 162-0 CHALLENGE ═══════════════ */
/* Gold is this mode's identity colour (--challenge162-accent); panels reuse the
   base bevel, and the season screen gets the same broadcast scoreboard language
   as combat. */

/* ── Hub ── */
.c162-records-banner {
  background: linear-gradient(180deg, #14100a 0%, #000 100%);
  border: 2px solid #5c4a00;
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.c162-record-val {
  font-family: 'VT323', monospace;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 0 10px currentColor;
}

.c162-mode-card {
  border-top-width: 5px;
  box-shadow: 0 0 0 2px #000, 0 8px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s var(--jx-ease-back), box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden;
}

.c162-mode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2px #000, 0 16px 0 rgba(0, 0, 0, 0.35), 0 0 30px var(--challenge162-accent-glow);
  filter: brightness(1.1);
}

.c162-mode-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.c162-mode-card:hover::after {
  left: 140%;
  transition: left 0.6s ease-out;
}

.c162-mode-desc {
  color: var(--jx-text);
}

@media (prefers-reduced-motion: no-preference) {
  .c162-modes-grid > .c162-mode-card {
    animation: jx-rise-in 0.5s var(--jx-ease-out) both;
  }

  .c162-modes-grid > .c162-mode-card:nth-child(2) { animation-delay: 0.07s; }
  .c162-modes-grid > .c162-mode-card:nth-child(3) { animation-delay: 0.14s; }
  .c162-modes-grid > .c162-mode-card:nth-child(4) { animation-delay: 0.21s; }
}

/* ── Roster builder / pack deck ── */
.c162-roster-section {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 2px #000;
}

.c162-slot-header-pill {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.c162-slot-item {
  transition: transform 0.16s var(--jx-ease-back);
}

.c162-slot-item:hover {
  transform: translateY(-5px);
  z-index: 3;
}

/* ── Season: record scoreboard ── */
.c162-record-card {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #14100a 0%, #020202 100%) !important;
  border: 3px solid #5c4a00 !important;
  box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -10px 20px rgba(0, 0, 0, 0.6), 0 10px 22px rgba(0, 0, 0, 0.6) !important;
}

.c162-rec-w,
.c162-rec-l {
  font-family: 'VT323', monospace !important;
  font-size: 64px !important;
  line-height: 0.85;
  min-width: 92px;
  text-align: center;
  background: #000;
  border: 2px solid #2a2208;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 6px 10px 2px 10px;
  text-shadow: 0 0 14px currentColor, 0 0 2px currentColor !important;
}

.c162-streak-badge {
  animation: jx-glow-breathe 1.4s ease-in-out infinite;
}

.c162-season-top-row > div:nth-child(2) {
  background: linear-gradient(180deg, rgba(12, 14, 8, 0.92), rgba(0, 0, 0, 0.94)) !important;
  border: 2px solid rgba(255, 215, 0, 0.35) !important;
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 162-game track */
.c162-season-progress {
  height: 16px !important;
  background: #000 !important;
  border: 2px solid #2a2208;
  box-shadow: 0 0 0 2px #000, inset 0 0 6px #000;
  position: relative;
}

.c162-season-progress > div {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 0 12px var(--challenge162-accent-glow);
  transition: width 0.5s var(--jx-ease-out) !important;
}

/* month-ish notches every sixth of the season */
.c162-season-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 2px), rgba(0, 0, 0, 0.75) calc(16.666% - 2px) 16.666%);
  pointer-events: none;
}

/* ── Season: sim controls ── */
#challenge162-play-1 {
  position: relative;
  overflow: hidden;
}

#challenge162-play-1::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: jx-shine-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Season: tables + feed ── */
.c162-table-wrap {
  border: 2px solid rgba(255, 215, 0, 0.22);
  box-shadow: 0 0 0 2px #000;
}

.c162-th {
  background: linear-gradient(180deg, #1a1608, #0a0903);
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
}

.c162-tr {
  transition: background 0.12s ease;
}

.c162-tr:hover {
  background: rgba(255, 215, 0, 0.12);
  box-shadow: inset 3px 0 0 var(--challenge162-accent);
}

.c162-sidebar-panel {
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.c162-game-badge {
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.12s ease, background 0.12s ease;
}

.c162-game-badge:has(.c162-outcome-w) { border-left-color: #34d399; }
.c162-game-badge:has(.c162-outcome-l) { border-left-color: #f87171; background: rgba(248, 113, 113, 0.08); }

.c162-game-badge:hover {
  transform: translateX(3px);
}

.c162-outcome-pill {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 8px currentColor;
}

.jx-feed-new {
  animation: jx-feed-in 0.4s var(--jx-ease-out) both;
}

@keyframes jx-feed-in {
  0% { opacity: 0; transform: translateX(26px); filter: brightness(2.5); }
  100% { opacity: 1; transform: translateX(0); filter: none; }
}

.jx-float.win { color: #34d399; }

@media (prefers-reduced-motion: reduce) {
  .jx-feed-new, .c162-streak-badge { animation: none; }
  #challenge162-play-1::after { display: none; }
}

/* ── Postseason: matchup + live broadcast ── */
.c162-step-card {
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.2s var(--jx-ease-back), filter 0.2s ease;
}

.c162-team-box {
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 20px rgba(0, 0, 0, 0.5);
}

.c162-linescore-wrap {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #14100a 0%, #020202 100%);
  border: 3px solid #5c4a00;
  box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.6);
}

.c162-stadium-field-card,
.c162-ticker-box {
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.c162-broadcast-tab-btn {
  transition: transform 0.1s ease, filter 0.15s ease;
}

.c162-broadcast-tab-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.25);
}

#challenge162-play-playoff-match {
  position: relative;
  overflow: hidden;
}

#challenge162-play-playoff-match::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: jx-shine-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .c162-step-card.c162-step-active {
    animation: jx-glow-breathe 1.6s ease-in-out infinite;
  }

  .c162-tale-container .c162-team-box.player-side {
    animation: jx-slide-from-left 0.5s var(--jx-ease-out) both;
  }

  .c162-tale-container .c162-team-box:not(.player-side) {
    animation: jx-slide-from-right 0.5s var(--jx-ease-out) both;
  }

  .c162-vs-badge {
    animation: jx-title-slam 0.5s var(--jx-ease-back) 0.3s both;
  }

  /* The live stage re-renders on every plate appearance, so this replays per play */
  .c162-ticker-box {
    animation: jx-feed-in 0.35s var(--jx-ease-out) both;
  }
}

@keyframes jx-slide-from-left {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes jx-slide-from-right {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  #challenge162-play-playoff-match::after { display: none; }
}

/* ── Season results: the roster is dealt out one card at a time ── */
@media (prefers-reduced-motion: no-preference) {
  .c162-champions-row > .c162-result-card-wrap {
    animation: jx-card-drop 0.5s var(--jx-ease-back) both;
  }

  .c162-champions-row > .c162-result-card-wrap:nth-child(1) { animation-delay: 0.05s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(2) { animation-delay: 0.11s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(3) { animation-delay: 0.17s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(4) { animation-delay: 0.23s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(5) { animation-delay: 0.29s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(6) { animation-delay: 0.35s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(7) { animation-delay: 0.41s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(8) { animation-delay: 0.47s; }
  .c162-champions-row > .c162-result-card-wrap:nth-child(n+9) { animation-delay: 0.53s; }
  .c162-champions-row + .c162-champions-row > .c162-result-card-wrap { animation-duration: 0.6s; }
}

@keyframes jx-card-drop {
  0% { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.c162-result-card-wrap {
  transition: transform 0.16s var(--jx-ease-back);
}

.c162-result-card-wrap:hover {
  transform: translateY(-8px) scale(1.06);
  z-index: 4;
}

/* ── Layout nudges ── */
@media (min-width: 769px) {
  /* The shorter scoreboard left the left combat column floating mid-height; pin it to the top */
  .match-arena > div:first-child {
    justify-content: flex-start !important;
    /* matches #dice-battle-panel's 10px top margin (+2px for the scoreboard's outer ring) */
    padding-top: 12px;
  }

  #screen-mode-select {
    margin-top: clamp(64px, 10vh, 130px) !important;
  }
}

/* The season screen header already says "162-0 CHALLENGE"; drop the repeated title inside */
#challenge162-season-container > div:first-child {
  display: none;
}

/* ═══════════════ 6) DEX — TEST BATTER (BATTING CAGE) ═══════════════ */
/* A clone of the combat screen opened from the Baseball-Dex. It inherits the
   combat styles above; this section gives it a cage identity and styles the
   opposition-level controls and the pitcher picker. */

.dex-test-arena-overlay {
  /* chain-link netting over the stadium */
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px),
    radial-gradient(ellipse at 50% 0%, rgba(0, 255, 102, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(2, 10, 6, 0.9), rgba(0, 0, 0, 0.96)),
    url('assets/TEST.webp') center bottom / cover no-repeat;
  backdrop-filter: none;
  align-items: flex-start;
}

.dex-test-arena-overlay > .glass-panel {
  margin-top: clamp(14px, 4vh, 48px) !important;
  animation: jx-screen-in 0.34s var(--jx-ease-out);
}

.dex-test-arena-overlay #zones-lines .outcome-row {
  padding: 3px 6px !important;
  font-size: 8px !important;
}

/* ── Opposition level + reroll ── */
.tb-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 10px 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(8, 20, 14, 0.9), rgba(0, 0, 0, 0.9));
  border: 2px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.tb-controls-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--jx-gold);
  letter-spacing: 1px;
  text-shadow: 0 0 8px var(--accent-glow);
  flex-basis: 100%;
}

.tb-diff-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.tb-diff-chip {
  --tb-diff: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 7px 10px;
  background: #000;
  border: 2px solid color-mix(in srgb, var(--tb-diff) 45%, transparent);
  border-bottom-width: 4px;
  color: var(--tb-diff);
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.tb-diff-chip:hover {
  transform: translateY(-2px);
  filter: brightness(1.25);
}

.tb-diff-chip.active {
  background: color-mix(in srgb, var(--tb-diff) 22%, #000);
  border-color: var(--tb-diff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tb-diff) 55%, transparent);
}

.tb-diff-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

.tb-diff-desc {
  font-family: 'VT323', monospace;
  font-size: 14px;
  line-height: 1;
  color: var(--jx-text-dim);
}

.tb-reroll-btn {
  font-size: 8px;
  padding: 10px 12px;
}

.tb-swap-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 6px 8px;
  background: #0b1220;
  color: #7dd3fc;
  border: 2px solid rgba(56, 189, 248, 0.5);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}

.tb-swap-btn:hover {
  background: #38bdf8;
  color: #000;
  transform: translateY(-1px);
}

/* ── Pitcher picker ── */
.tb-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tb-picker {
  width: min(640px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  margin: 0 !important;
  animation: jx-rise-in 0.25s var(--jx-ease-out) both;
}

.tb-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.tb-picker-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--primary-color);
  text-shadow: 2px 2px 0 #000, 0 0 10px var(--primary-glow);
  margin-bottom: 6px;
}

.tb-picker-sub {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--jx-text-dim);
}

.tb-picker-close {
  background: #000;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  font-size: 18px;
  width: 30px;
  height: 30px;
  line-height: 1;
  cursor: pointer;
}

.tb-picker-search {
  width: 100%;
  padding: 10px 12px;
  background: #000;
  border: 2px solid var(--jx-line);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 18px;
  outline: none;
}

.tb-picker-search:focus {
  border-color: var(--jx-gold);
}

.tb-picker-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
}

.tb-picker-row {
  --tb-rarity: #8e9e98;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 86px 34px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  border-left: 4px solid var(--tb-rarity);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, transform 0.1s ease;
}

.tb-picker-row:hover {
  background: color-mix(in srgb, var(--tb-rarity) 22%, transparent);
  transform: translateX(3px);
}

.tb-picker-role,
.tb-picker-ovr,
.tb-picker-rarity {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

.tb-picker-role { color: #f87171; }
.tb-picker-rarity { color: var(--tb-rarity); text-align: right; }
.tb-picker-ovr { color: var(--jx-gold); text-align: right; }

.tb-picker-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-picker-meta {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--jx-text-dim);
  white-space: nowrap;
}

.tb-picker-empty {
  font-family: 'VT323', monospace;
  font-size: 17px;
  line-height: 1.3;
  color: var(--jx-text-dim);
  text-align: center;
  padding: 22px 10px;
}

@media (max-width: 768px) {
  .tb-picker-row {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }

  .tb-picker-meta,
  .tb-picker-rarity,
  .tb-diff-desc {
    display: none;
  }
}

/* ═══════════════ 7) 162-0 — REAL LEAGUE (standings, power rankings, bracket) ═══════════════ */

.c162-liga-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.c162-liga-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--challenge162-accent);
  text-shadow: 2px 2px 0 #000, 0 0 10px var(--challenge162-accent-glow);
}

.c162-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.c162-subtabs {
  margin-bottom: 10px;
}

.c162-tab {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 9px 12px;
  background: #000;
  color: var(--jx-text-dim);
  border: 2px solid rgba(255, 215, 0, 0.25);
  border-bottom-width: 4px;
  cursor: pointer;
  transition: transform 0.1s ease, color 0.15s ease, border-color 0.15s ease;
}

.c162-tab:hover {
  color: #fff;
  transform: translateY(-2px);
}

.c162-tab.active {
  color: #000;
  background: var(--challenge162-accent);
  border-color: var(--challenge162-accent);
  box-shadow: 0 0 14px var(--challenge162-accent-glow);
}

/* Standings table */
.c162-standings th:nth-child(2),
.c162-standings td:nth-child(2) {
  text-align: left !important;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 12px;
}

.c162-standings .c162-td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.c162-row-user {
  background: rgba(52, 211, 153, 0.14) !important;
  box-shadow: inset 4px 0 0 #34d399;
}

.c162-row-cutline .c162-td {
  border-bottom: 2px dashed var(--challenge162-accent) !important;
}

.c162-pos { color: #34d399 !important; }
.c162-neg { color: #f87171 !important; }

/* Season sidebar: mini standings + headlines */
.c162-mini-standings,
.c162-headlines {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 215, 0, 0.18);
  padding: 8px;
  margin-bottom: 12px;
}

.c162-mini-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--challenge162-accent);
  margin-bottom: 6px;
}

.c162-link-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #7dd3fc;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.c162-link-btn:hover { color: #fff; }

.c162-mini-head,
.c162-mini-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 54px 30px;
  gap: 6px;
  align-items: center;
  padding: 3px 4px;
}

.c162-mini-head {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: #64748b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.c162-mini-row {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--jx-text);
}

.c162-mini-row.is-user {
  background: rgba(52, 211, 153, 0.16);
  box-shadow: inset 3px 0 0 #34d399;
  color: #fff;
  font-weight: bold;
}

.c162-mini-row.cutline {
  border-bottom: 2px dashed rgba(255, 215, 0, 0.6);
}

.c162-mini-row.hunt {
  opacity: 0.7;
}

.c162-mini-rank,
.c162-mini-rec,
.c162-mini-gb {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
}

.c162-mini-rank { color: #94a3b8; }
.c162-mini-rec { text-align: right; color: var(--challenge162-accent); }
.c162-mini-gb { text-align: right; color: #94a3b8; }

.c162-mini-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c162-mini-note {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #64748b;
  margin-top: 5px;
}

.c162-headline {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--jx-text);
  padding: 5px 6px;
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.02);
}

.c162-headline.kind-user { border-left-color: #34d399; color: #d1fae5; }
.c162-headline.kind-streak { border-left-color: #fb923c; }
.c162-headline.kind-slump { border-left-color: #60a5fa; }
.c162-headline.kind-race { border-left-color: var(--challenge162-accent); }

.c162-headline-day {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: #64748b;
  margin-right: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .c162-headlines .c162-headline:first-of-type {
    animation: jx-feed-in 0.4s var(--jx-ease-out) both;
  }
}

/* Power rankings */
.c162-pr-note {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--jx-text-dim);
  margin: 8px 0 10px 0;
}

.c162-pr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 6px;
}

.c162-pr-row {
  display: grid;
  grid-template-columns: 30px 38px 30px minmax(0, 1fr) 64px 64px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.06);
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--jx-text);
}

.c162-pr-row.no-move {
  grid-template-columns: 30px 30px minmax(0, 1fr) 64px 64px;
}

.c162-pr-row.is-user {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  color: #fff;
  font-weight: bold;
}

.c162-pr-rank {
  font-family: 'VT323', monospace;
  font-size: 24px;
  line-height: 1;
  color: var(--challenge162-accent);
  text-shadow: 0 0 8px var(--challenge162-accent-glow);
}

.c162-move {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #64748b;
}

.c162-move.up { color: #34d399; }
.c162-move.down { color: #f87171; }

.c162-pr-lg {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 3px 4px;
  text-align: center;
  border: 1px solid currentColor;
}

.c162-pr-lg.lg-AL { color: #f87171; }
.c162-pr-lg.lg-NL { color: #60a5fa; }

.c162-pr-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c162-pr-rec,
.c162-pr-str {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  text-align: right;
}

.c162-pr-str { color: #94a3b8; }

/* Playoff picture + bracket */
.c162-picture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.c162-bracket {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.c162-bk-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c162-bk-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  color: var(--challenge162-accent);
  text-align: center;
}

.c162-bk-match {
  border: 2px solid rgba(255, 215, 0, 0.3);
  background: rgba(0, 0, 0, 0.5);
}

.c162-bk-team {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 8px;
  color: var(--jx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c162-bk-team + .c162-bk-team {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.c162-bk-team.won { color: #fff; font-weight: bold; background: rgba(255, 215, 0, 0.12); }
.c162-bk-team.lost { color: #64748b; text-decoration: line-through; }
.c162-bk-team.is-user { box-shadow: inset 3px 0 0 #34d399; }

.c162-bk-empty {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #475569;
  text-align: center;
  padding: 14px 0;
  border: 2px dashed rgba(255, 255, 255, 0.08);
}

.c162-bk-champ {
  margin-top: 16px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--challenge162-accent);
  text-shadow: 0 0 12px var(--challenge162-accent-glow);
}

@media (max-width: 900px) {
  .c162-bracket,
  .c162-picture {
    grid-template-columns: 1fr;
  }

  .c162-pr-list {
    grid-template-columns: 1fr;
  }

  .c162-pr-row {
    grid-template-columns: 26px 34px 28px minmax(0, 1fr) 54px;
  }

  .c162-pr-str { display: none; }
}

/* ═══════════════ 8) 162-0 — PACKS FAST MODE, MEET THE TEAM, LEAGUE PREVIEW ═══════════════ */

.c162-cta {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 11px !important;
  padding: 15px 26px !important;
  background: linear-gradient(135deg, #ffd700, #f59e0b) !important;
  color: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 2px #000, 0 5px 0 #7a5200, 0 0 26px rgba(255, 215, 0, 0.55) !important;
  position: relative;
  overflow: hidden;
}

.c162-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: jx-shine-sweep 2.6s ease-in-out infinite;
  pointer-events: none;
}

.c162-pack-fast-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8.5px !important;
  padding: 8px 12px !important;
}

.c162-pack-auto-btn {
  background: linear-gradient(135deg, #a855f7, #6d28d9) !important;
  color: #fff !important;
  border: 2px solid #d8b4fe !important;
  box-shadow: 0 0 0 2px #000, 0 4px 0 #3b0764, 0 0 16px rgba(168, 85, 247, 0.5) !important;
}

/* ── Montage ── */
.c162-montage {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}

.c162-montage-title,
.c162-preview-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--challenge162-accent);
  text-shadow: 3px 3px 0 #000, 0 0 18px var(--challenge162-accent-glow);
  margin: 6px 0 10px 0;
}

.c162-montage-sub {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--jx-text);
  margin-bottom: 18px;
}

.c162-montage-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.c162-montage-card {
  animation: jx-card-drop 0.45s var(--jx-ease-back) both;
  animation-delay: calc(var(--i) * 60ms);
}

.c162-montage-actions,
.c162-meet-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0 6px 0;
}

/* ── Meet the Team ── */
.c162-meet,
.c162-preview {
  max-width: 1360px;
  margin: 0 auto;
}

.c162-meet-hero {
  text-align: center;
  padding: 22px 16px 18px 16px;
  margin-bottom: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.18), transparent 65%),
    linear-gradient(180deg, #14100a 0%, #020202 100%);
  border: 3px solid #5c4a00;
  box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.6);
}

.c162-meet-kicker {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: #94a3b8;
  margin-bottom: 10px;
}

.c162-team-name-input {
  width: min(640px, 100%);
  background: transparent;
  border: 0;
  border-bottom: 3px dashed rgba(255, 215, 0, 0.35);
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: var(--challenge162-accent);
  text-shadow: 3px 3px 0 #000, 0 0 18px var(--challenge162-accent-glow);
  padding: 6px 4px 10px 4px;
  outline: none;
}

.c162-team-name-input:focus {
  border-bottom-color: var(--challenge162-accent);
}

.c162-meet-ovr-big {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 12px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #94a3b8;
}

.c162-meet-ovr-big b {
  font-family: 'VT323', monospace;
  font-size: 54px;
  line-height: 0.8;
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}

.c162-meet-grades {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.c162-grade-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 82px;
  padding: 7px 8px 5px 8px;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9);
}

.c162-grade-chip span {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: #94a3b8;
}

.c162-grade-chip b {
  font-family: 'VT323', monospace;
  font-size: 30px;
  line-height: 0.9;
  text-shadow: 0 0 10px currentColor;
}

.c162-meet-spotlight {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.c162-meet-spotlight > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 14px;
  border: 2px solid rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.06);
}

.c162-meet-spotlight span {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--challenge162-accent);
}

.c162-meet-spotlight b {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #fff;
}

.c162-meet-section {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--challenge162-accent);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px 0;
}

.c162-meet-section::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.5), transparent);
}

.c162-meet-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.c162-meet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.c162-meet-order {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #000;
  background: var(--challenge162-accent);
  padding: 4px 8px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.c162-meet-card.no-anim,
.c162-meet-card.no-anim .player-card {
  animation: none !important;
}

.c162-meet-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  text-shadow: 0 0 8px currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .c162-meet-hero:not(.no-anim) {
    animation: jx-title-slam 0.6s var(--jx-ease-back) both;
  }

  .c162-meet-card:not(.no-anim) {
    animation: jx-card-drop 0.55s var(--jx-ease-back) both;
    animation-delay: calc(0.35s + var(--i) * 160ms);
  }
}

.c162-meet-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.c162-meet-panel {
  background: linear-gradient(180deg, rgba(8, 14, 10, 0.92), rgba(0, 0, 0, 0.92));
  border: 2px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
}

.c162-meet-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 8.5px;
  color: var(--challenge162-accent);
  margin-bottom: 8px;
}

.c162-meet-hint {
  font-size: 7px;
  color: #64748b;
}

.c162-meet-row {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr) 30px 24px 24px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.c162-meet-row.r5 { grid-template-columns: 40px minmax(0, 1fr) 30px 24px 24px; }
.c162-meet-row.r3 { grid-template-columns: 50px minmax(0, 1fr) 30px; }

.c162-meet-num,
.c162-meet-pos,
.c162-meet-ovr {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
}

.c162-meet-num { color: #94a3b8; }
.c162-meet-pos { color: #38bdf8; }
.c162-meet-ovr { color: var(--challenge162-accent); text-align: right; }

.c162-meet-name {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c162-mv {
  width: 24px;
  height: 22px;
  background: #0b1220;
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.45);
  font-size: 9px;
  cursor: pointer;
}

.c162-mv:hover:not(:disabled) {
  background: #38bdf8;
  color: #000;
}

.c162-mv:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ── League Preview ── */
.c162-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(255, 215, 0, 0.14), transparent 60%),
    linear-gradient(180deg, #14100a 0%, #020202 100%);
  border: 3px solid #5c4a00;
  box-shadow: 0 0 0 2px #000, 0 12px 26px rgba(0, 0, 0, 0.6);
}

.c162-preview-head .c162-preview-title {
  margin: 0;
  text-align: left;
}

.c162-preview-proj {
  display: flex;
  gap: 10px;
}

.c162-preview-proj > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  padding: 8px 10px 6px 10px;
  background: #000;
  border: 2px solid #2a2208;
}

.c162-preview-proj span {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: #94a3b8;
}

.c162-preview-proj b {
  font-family: 'VT323', monospace;
  font-size: 34px;
  line-height: 0.9;
  color: var(--challenge162-accent);
  text-shadow: 0 0 12px var(--challenge162-accent-glow);
}

.c162-lg-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.c162-lg-pick {
  --lg: #f87171;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(20, 20, 24, 0.95), rgba(0, 0, 0, 0.95));
  border: 2px solid color-mix(in srgb, var(--lg) 35%, transparent);
  border-left-width: 8px;
  color: var(--jx-text);
  cursor: pointer;
  transition: transform 0.15s var(--jx-ease-back), box-shadow 0.15s ease, border-color 0.15s ease;
}

.c162-lg-pick.lg-NL { --lg: #60a5fa; }

.c162-lg-pick:hover {
  transform: translateY(-3px);
}

.c162-lg-pick.active {
  border-color: var(--lg);
  box-shadow: 0 0 0 2px #000, 0 0 24px color-mix(in srgb, var(--lg) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lg) 16%, #000), #000);
}

.c162-lg-pick-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--lg);
}

.c162-lg-pick-badge {
  font-size: 7px;
  color: #000;
  background: var(--lg);
  padding: 3px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.c162-lg-pick-sub {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--jx-text-dim);
}

.c162-lg-pick-top {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12px;
  color: var(--jx-text);
}

.c162-threats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.c162-threat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.07);
  border: 2px solid rgba(239, 68, 68, 0.35);
}

.c162-threat b {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #fff;
}

.c162-threat span {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fca5a5;
}

@media (max-width: 900px) {
  .c162-meet-columns,
  .c162-lg-picks,
  .c162-threats {
    grid-template-columns: 1fr;
  }

  .c162-team-name-input {
    font-size: 15px;
  }
}

/* ═══════════════ 9) 162-0 — PACK SCREEN + RESULTS POLISH ═══════════════ */

/* The sealed pack floats, breathes and tilts toward you */
@media (prefers-reduced-motion: no-preference) {
  #screen-challenge-pack .dex-foil-pack-wrapper {
    animation: jx-pack-float 3.2s ease-in-out infinite;
  }

  #screen-challenge-pack .dex-foil-pack {
    animation: jx-pack-glow 2.4s ease-in-out infinite;
  }
}

@keyframes jx-pack-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes jx-pack-glow {
  0%, 100% { box-shadow: 0 0 0 2px #000, 0 0 24px rgba(168, 85, 247, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.15); }
  50% { box-shadow: 0 0 0 2px #000, 0 0 46px rgba(168, 85, 247, 0.7), inset 0 0 26px rgba(255, 255, 255, 0.25); }
}

#screen-challenge-pack .dex-foil-pack-wrapper:hover {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.05) rotate(0deg);
}

/* Deck sections */
.c162-roster-section {
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.92), rgba(0, 0, 0, 0.92)) !important;
  border: 2px solid rgba(255, 215, 0, 0.18) !important;
}

.c162-section-header {
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}

.c162-slot-header-pill {
  background: linear-gradient(180deg, #2a2208, #000) !important;
  border: 2px solid rgba(255, 215, 0, 0.55) !important;
  color: var(--challenge162-accent) !important;
}

/* Empty slots read as card outlines waiting to be filled */
.c162-empty-card-frame {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px),
    rgba(0, 0, 0, 0.35) !important;
  border: 2px dashed rgba(255, 215, 0, 0.22) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.c162-slot-item:hover .c162-empty-card-frame {
  border-color: rgba(255, 215, 0, 0.6) !important;
}

.c162-empty-icon {
  color: rgba(255, 215, 0, 0.35) !important;
}

/* Results: league story + bracket */
.c162-results-league {
  max-width: 1100px;
  margin: 0 auto 12px auto;
}

.c162-results-story {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--jx-text);
  margin-bottom: 10px;
}

.c162-results-bracket {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 215, 0, 0.25);
  padding: 8px 12px 12px 12px;
}

.c162-results-bracket > summary {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--challenge162-accent);
  cursor: pointer;
  padding: 4px 0 8px 0;
}

/* ── 162-0 on phones: keep wide content inside its own scroller instead of widening the page ── */
@media (max-width: 768px) {
  .c162-meet-hero,
  .c162-preview-head {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .c162-team-name-input {
    max-width: 100%;
    box-sizing: border-box;
  }

  .c162-meet-ovr-big {
    flex-wrap: wrap;
    justify-content: center;
  }

  .c162-season-grid,
  .c162-main-panel {
    min-width: 0;
    max-width: 100%;
  }

  .c162-table-wrap,
  .c162-roster-section {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Pack column + deck stack vertically instead of a fixed 460px side column */
  .c162-pack-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .c162-pack-layout > * {
    min-width: 0;
  }
}

/* Momentum badge on the season record card */
.c162-momentum {
  margin-top: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.c162-momentum span {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #64748b;
}

.c162-momentum.up { color: #fb923c; text-shadow: 0 0 10px rgba(251, 146, 60, 0.6); }
.c162-momentum.down { color: #60a5fa; text-shadow: 0 0 10px rgba(96, 165, 250, 0.6); }

/* ═══════════════ 10) 162-0 — LEADERS & AWARD RACES ═══════════════ */

.c162-ldr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.c162-ldr-grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.c162-ldr-box {
  background: linear-gradient(180deg, rgba(8, 14, 10, 0.92), rgba(0, 0, 0, 0.92));
  border: 2px solid rgba(255, 215, 0, 0.22);
  box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
}

.c162-award-box {
  border-color: rgba(255, 215, 0, 0.45);
}

.c162-ldr-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8.5px;
  color: var(--challenge162-accent);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
}

.c162-ldr-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 86px;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--jx-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.c162-ldr-row:first-of-type .c162-ldr-name {
  color: #fff;
}

.c162-ldr-row.is-user {
  background: rgba(52, 211, 153, 0.14);
  box-shadow: inset 3px 0 0 #34d399;
}

.c162-ldr-rank {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  color: #94a3b8;
}

.c162-ldr-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c162-ldr-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  color: var(--challenge162-accent);
  text-align: right;
  white-space: nowrap;
}

.c162-team-chip {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  padding: 3px 4px;
  border: 1px solid currentColor;
  color: #94a3b8;
}

.c162-team-chip.lg-AL { color: #f87171; }
.c162-team-chip.lg-NL { color: #60a5fa; }
.c162-team-chip.is-user { color: #34d399; }

/* Results: season awards */
.c162-res-awards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.c162-res-award {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 215, 0, 0.18);
}

.c162-res-award span {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: var(--challenge162-accent);
}

.c162-res-award b {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12.5px;
  color: #f3f4f6;
}

.c162-res-award b small {
  font-weight: 500;
  color: #94a3b8;
}

.c162-res-award.is-user {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}

@media (max-width: 768px) {
  .c162-ldr-grid,
  .c162-ldr-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════ 11) 162-0 — BATTER WEAR + IRON MAN ═══════════════ */

.c162-wear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.c162-wear-bar {
  position: relative;
  width: 34px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px #000;
  overflow: hidden;
}

.c162-wear-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #34d399, #facc15);
  transition: width 0.3s ease;
}

.c162-wear b {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  min-width: 14px;
  color: #f87171;
}

.c162-wear.pen-1 .c162-wear-bar i,
.c162-wear.pen-2 .c162-wear-bar i {
  background: linear-gradient(90deg, #fb923c, #f87171);
}

.c162-wear.pen-3 .c162-wear-bar i {
  background: #ef4444;
}

.c162-iron {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  padding: 3px 4px;
  background: #000;
  color: #475569;
  border: 1px solid #334155;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.c162-iron:hover {
  color: #e2e8f0;
  border-color: #94a3b8;
}

.c162-iron.on {
  color: #000;
  background: var(--challenge162-accent);
  border-color: var(--challenge162-accent);
  box-shadow: 0 0 8px var(--challenge162-accent-glow);
}

.c162-bench-hint {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin: -4px 0 10px 0;
}

.c162-meet-cover {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #64748b;
  margin-left: 4px;
}

.c162-meet-warn,
.c162-meet-ok {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #fb923c;
  background: rgba(251, 146, 60, 0.08);
  color: #fed7aa;
}

.c162-meet-ok {
  border-left-color: #34d399;
  background: rgba(52, 211, 153, 0.08);
  color: #d1fae5;
}

/* Iron Man picker (League Preview) */
.c162-iron-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.c162-iron-pick {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  text-align: left;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.08);
  color: var(--jx-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.c162-iron-pick:hover:not(:disabled) {
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
}

.c162-iron-pick:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.c162-iron-pick .c162-iron-pos {
  grid-row: 1 / 3;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #94a3b8;
}

.c162-iron-pick b {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c162-iron-pick small {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #64748b;
}

.c162-iron-pick.on {
  border-color: var(--challenge162-accent);
  background: rgba(255, 215, 0, 0.12);
  box-shadow: 0 0 12px var(--challenge162-accent-glow);
}

.c162-iron-pick.on .c162-iron-pos {
  color: var(--challenge162-accent);
}

span.c162-iron {
  cursor: default;
}

/* Iron Man picker: visible state on every tile */
.c162-iron-pick .c162-iron-state {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: .5px;
  color: #7dd3fc;
}
.c162-iron-pick.on .c162-iron-state { color: #fbbf24; }
.c162-iron-pick:disabled .c162-iron-state { color: #64748b; }
.c162-iron-pick.on { box-shadow: 0 0 0 2px rgba(251, 191, 36, .55), 0 0 14px rgba(251, 191, 36, .25); }
.c162-iron-pick { grid-template-rows: auto auto auto; }
.c162-iron-pick .c162-iron-pos { grid-row: 1 / 4; }
.c162-iron-pick .c162-iron-state { grid-column: 2; }

/* ── Pack draft: roster board (replaces the scrolling deck of mini cards) ── */
.c162-rb {
  --rb-legendary: #fbbf24; --rb-epic: #c084fc; --rb-rare: #60a5fa; --rb-uncommon: #34d399; --rb-common: #94a3b8;
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(8, 12, 22, .98));
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 12px;
  padding: 12px 14px 14px;
}
.c162-rb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.c162-rb-head b { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #38bdf8; }
.c162-rb-head small { display: block; margin-top: 4px; font-size: 10px; color: #64748b; }
.c162-rb-ovrbox { text-align: right; }
.c162-rb-ovrbox small { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #94a3b8; margin: 0 0 3px; }
.c162-rb-ovrbox b { font-size: 18px; color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, .45); }
.c162-rb-rarity { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 10px; }
.c162-rb-rarity span { font-size: 10px; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; background: rgba(255, 255, 255, .04); }
.c162-rb-rarity span b { font-weight: 800; }
.c162-rb-rarity span.zero { opacity: .32; }
.c162-rb .r-legendary { color: var(--rb-legendary); }
.c162-rb .r-epic { color: var(--rb-epic); }
.c162-rb .r-rare { color: var(--rb-rare); }
.c162-rb .r-uncommon { color: var(--rb-uncommon); }
.c162-rb .r-common { color: var(--rb-common); }
.c162-rb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: start; }
.c162-rb-title { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-size: 8px; margin: 8px 0 5px; padding-bottom: 4px; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
.c162-rb-title:first-child { margin-top: 0; }
.c162-rb-title.t-lineup { color: #ffd700; } .c162-rb-title.t-bench { color: #34d399; }
.c162-rb-title.t-rot { color: #38bdf8; } .c162-rb-title.t-pen { color: #f472b6; }
.c162-rb .c162-rb-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 30px; align-items: center; gap: 8px;
  height: 25px; margin: 0 0 3px; padding: 0 8px 0 0; width: auto; min-width: 0;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid currentColor;
  border-radius: 4px; cursor: grab; transition: background .12s ease, transform .12s ease;
}
.c162-rb .c162-rb-row:hover { background: rgba(255, 255, 255, .08); transform: translateX(2px); }
.c162-rb .c162-rb-row.empty { color: #334155; border-style: dashed; border-left-style: solid; cursor: default; background: transparent; }
.c162-rb .c162-rb-row.empty .c162-rb-name { color: #334155; }
.c162-rb .c162-rb-row.active { background: rgba(255, 215, 0, .14); border-color: rgba(255, 215, 0, .6); border-left-color: currentColor; box-shadow: 0 0 12px rgba(255, 215, 0, .28); animation: c162RbIn .45s ease; }
.c162-rb-pos { font-family: 'Press Start 2P', monospace; font-size: 7.5px; color: #cbd5e1; text-align: center; background: rgba(0, 0, 0, .45); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.c162-rb-name { font-family: 'Outfit', 'Segoe UI', sans-serif; font-size: 12.5px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c162-rb-name i { font-style: normal; color: #fbbf24; font-size: 10px; }
.c162-rb-meta { font-size: 10px; color: #64748b; white-space: nowrap; }
.c162-rb-ovr { font-family: 'Press Start 2P', monospace; font-size: 9px; text-align: right; }
@keyframes c162RbIn { from { transform: translateX(-10px); opacity: .2; } to { transform: none; opacity: 1; } }
@media (max-width: 1100px) { .c162-rb-meta { display: none; } }
@media (max-width: 560px) { .c162-rb-cols { grid-template-columns: 1fr; } }

/* Legendary pack: gold foil that pulses before you open it */
.c162-pack-legendary { animation: c162LegPulse 1.1s ease-in-out infinite; }
@keyframes c162LegPulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(251, 191, 36, .6)); transform: scale(1); } 50% { filter: drop-shadow(0 0 28px rgba(251, 191, 36, 1)); transform: scale(1.03); } }

/* ── Season moments: milestone banner + last game recap ── */
.c162-alerts { display: flex; align-items: center; gap: 14px; max-width: 980px; margin: 0 auto 14px; padding: 12px 16px; border: 2px solid #fbbf24; border-radius: 10px;
  background: linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(15, 23, 42, .92)); box-shadow: 0 0 22px rgba(251, 191, 36, .28); animation: c162AlertIn .35s ease; }
.c162-alerts-list { flex: 1; display: grid; gap: 8px; min-width: 0; }
.c162-alert { display: flex; align-items: center; gap: 12px; text-align: left; }
.c162-alert-icon { font-size: 26px; line-height: 1; }
.c162-alert b { font-family: 'Press Start 2P', monospace; font-size: 10.5px; color: #fde68a; letter-spacing: .5px; }
.c162-alert p { margin: 4px 0 0; font-size: 12.5px; color: #e2e8f0; }
.c162-alerts-ok { flex: none; font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 10px 14px; background: #fbbf24; color: #1c1917; border: 0; cursor: pointer; }
@keyframes c162AlertIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.c162-lastgame { max-width: 980px; margin: 0 auto 16px; border: 1px solid rgba(255, 255, 255, .12); border-left: 4px solid #f87171; border-radius: 8px; background: rgba(8, 12, 22, .72); overflow: hidden; text-align: left; }
.c162-lastgame.won { border-left-color: #34d399; }
.c162-lastgame-head { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; background: rgba(255, 255, 255, .04); flex-wrap: wrap; }
.c162-lastgame-head b { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #f87171; }
.c162-lastgame.won .c162-lastgame-head b { color: #34d399; }
.c162-lastgame-head span { font-size: 11.5px; color: #94a3b8; }
.c162-lastgame-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; }
.c162-linescore { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.c162-linescore th, .c162-linescore td { padding: 3px 5px; text-align: center; color: #cbd5e1; }
.c162-linescore thead th { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: #64748b; }
.c162-linescore tbody th { text-align: left; font-weight: 600; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.c162-linescore tr.me th, .c162-linescore tr.me td { color: #fde68a; }
.c162-linescore .rhe { border-left: 1px solid rgba(255, 255, 255, .1); font-weight: 700; }
.c162-linescore td.rhe.r { color: #fff; }
.c162-lastgame-notes { font-size: 11.5px; color: #94a3b8; display: grid; gap: 6px; }
.c162-lastgame-notes .dec { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.c162-lastgame-notes .dec i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 7px; color: #64748b; margin-right: 3px; }
.c162-lastgame-notes .dec .mine { color: #fde68a; }
.c162-lastgame-notes .star b { color: #f1f5f9; }
@media (max-width: 768px) { .c162-lastgame-body { grid-template-columns: 1fr; } .c162-alerts { flex-direction: column; align-items: stretch; } }

/* League Preview: power rankings split by league (AL left, NL right) */
.c162-pr-leagues { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-items: start; }
.c162-pr-col { display: grid; gap: 6px; min-width: 0; }
.c162-pr-col-title { font-family: 'Press Start 2P', monospace; font-size: 8.5px; letter-spacing: 1px; padding: 6px 8px; border-bottom: 2px solid currentColor; }
.c162-pr-col-title.lg-AL { color: #f87171; }
.c162-pr-col-title.lg-NL { color: #60a5fa; }
.c162-pr-leagues .c162-pr-row.cutline { margin-bottom: 8px; box-shadow: 0 9px 0 -7px rgba(251, 191, 36, .7); }
.c162-pr-leagues .c162-pr-str { font-family: 'Press Start 2P', monospace; font-size: 6px; color: #fbbf24; text-align: right; }
@media (max-width: 900px) { .c162-pr-leagues { grid-template-columns: 1fr; } }

/* Results screen roster: same board, with the season line instead of year and team */
.c162-rb.stats .c162-rb-row { cursor: default; }
.c162-rb.stats .c162-rb-row:hover { transform: none; }
.c162-rb.stats .c162-rb-meta { display: block; color: #cbd5e1; font-size: 11px; }
@media (max-width: 560px) { .c162-rb.stats .c162-rb-row { grid-template-columns: 34px minmax(0, 1fr) 30px; height: auto; padding: 4px 8px 4px 0; } .c162-rb.stats .c162-rb-meta { grid-column: 2; grid-row: 2; white-space: normal; } }

.c162-rb .c162-rb-row[draggable="true"] { cursor: pointer; }