/* Season 2.0 for the 162-0: masthead with the calendar date, broadcast preview of tonight's game,
   the 162-game schedule, the pennant-race chart, The Book (nerd numbers) and The BaseRogue Gazette.
   Markup comes from challenge162.js (_s2* methods); the month sets the ambience (data-month). */

#challenge162-season-container.s2 {
  --s2-gold: #ffd36a; --s2-ink: #e8eef5; --s2-dim: #8ea3b6; --s2-panel: rgba(6, 14, 20, .82);
  --s2-line: rgba(120, 220, 170, .22); --s2-w: #34d399; --s2-l: #f05d6c; --s2-mood: #34d399;
  position: relative;
}
#challenge162-season-container.s2[data-month="apr"] { --s2-mood: #7ee3a5; }
#challenge162-season-container.s2[data-month="may"] { --s2-mood: #5ad1c4; }
#challenge162-season-container.s2[data-month="jun"] { --s2-mood: #f2c14e; }
#challenge162-season-container.s2[data-month="jul"] { --s2-mood: #ff9f43; }
#challenge162-season-container.s2[data-month="aug"] { --s2-mood: #ff7a45; }
#challenge162-season-container.s2[data-month="sep"] { --s2-mood: #ff4d5e; }
#challenge162-season-container.s2[data-month="oct"] { --s2-mood: #ffd36a; }
/* month light over the whole panel */
#challenge162-season-container.s2::before {
  content: ''; position: absolute; inset: -14px -14px auto; height: 260px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--s2-mood) 22%, transparent), transparent 70%);
}
#challenge162-season-container.s2 > * { position: relative; z-index: 1; }
#challenge162-season-container.s2 .c162-season-progress { display: none; }
#challenge162-season-container.s2 .c162-record-card > div:first-child { display: none; }   /* the mode badge now sits in the masthead */

.s2 .s2-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-align: left; margin-bottom: 8px;
  font: 600 13px/1.2 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-gold); }
.s2 .s2-h > span { font: 400 11px 'Oswald', sans-serif; letter-spacing: .5px; color: var(--s2-dim); text-transform: none; }

/* ── masthead ── */
#challenge162-season-container.s2 > .s2-mast { display: grid !important; }  /* style_juice.css hides the old first title line */
.s2 .s2-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; max-width: 1060px; margin: 0 auto 14px;
  padding: 10px 16px; border-top: 2px solid var(--s2-gold); border-bottom: 1px solid var(--s2-line); }
.s2 .s2-mast-l, .s2 .s2-mast-r { display: flex; flex-direction: column; gap: 3px; }
.s2 .s2-mast-l { align-items: flex-start; text-align: left; }
.s2 .s2-mast-r { align-items: flex-end; text-align: right; }
.s2 .s2-mode { font: 600 10px 'Oswald', sans-serif; letter-spacing: 2px; color: #2a1a0e; background: linear-gradient(180deg, #ffe58a, #c9a24a); padding: 2px 8px; border-radius: 2px; }
.s2 .s2-team { font: 400 17px 'Alfa Slab One', serif; color: var(--s2-ink); }
.s2 .s2-date { font: 500 12px 'Oswald', sans-serif; letter-spacing: 3px; color: var(--s2-dim); }
.s2 .s2-chapter { font: 400 30px/1.05 'Alfa Slab One', serif; color: var(--s2-mood); letter-spacing: 1px;
  text-shadow: 0 0 24px color-mix(in srgb, var(--s2-mood) 45%, transparent), 0 2px 0 rgba(0,0,0,.6); }
.s2 .s2-chnote { font: italic 400 12.5px 'Playfair Display', serif; color: #b9c6d2; margin-top: 3px; }
.s2 .s2-gameno { font: 400 26px/1 'VT323', monospace; color: var(--s2-gold); }
.s2 .s2-of { font: 500 11px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-dim); }
.s2[data-month="sep"] .s2-chapter { animation: s2Pulse 2.4s ease-in-out infinite; }
@keyframes s2Pulse { 50% { text-shadow: 0 0 36px rgba(255,77,94,.75), 0 2px 0 rgba(0,0,0,.6); } }

/* ── tonight's game ── */
.s2 .s2-match { flex: 1 1 560px; max-width: 660px; background: var(--s2-panel); border: 1px solid var(--s2-line); border-radius: 12px; overflow: hidden; text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.s2 .s2-mtop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  background: linear-gradient(90deg, rgba(255,211,106,.16), rgba(0,0,0,.2) 45%, rgba(0,0,0,.2) 55%, color-mix(in srgb, var(--oc) 40%, transparent)); }
.s2 .s2-tm { padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.s2 .s2-tm.op { text-align: right; }
.s2 .s2-tm small { font: 600 9.5px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-dim); }
.s2 .s2-tm b { font: 400 15px 'Alfa Slab One', serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2 .s2-tm span { font: 400 15px 'VT323', monospace; color: var(--s2-gold); }
.s2 .s2-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; background: rgba(0,0,0,.35); }
.s2 .s2-vs span { font: 600 9px 'Oswald', sans-serif; letter-spacing: 2.5px; color: var(--s2-mood); }
.s2 .s2-vs b { font: 400 20px 'Alfa Slab One', serif; color: var(--s2-gold); }
.s2 .s2-mbody { display: grid; grid-template-columns: minmax(0, 1fr) 190px; }
.s2 .s2-duel { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.s2 .s2-sp { display: flex; gap: 10px; align-items: center; }
.s2 .s2-sp i { flex: none; width: 58px; height: 44px; background-size: cover; image-rendering: pixelated; border-radius: 4px;
  border: 2px solid var(--s2-gold); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.s2 .s2-sp.op i { border-color: var(--oc); }
.s2 .s2-sp div { display: flex; flex-direction: column; min-width: 0; }
.s2 .s2-sp small { font: 600 9px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-dim); }
.s2 .s2-sp b { font: 600 15px 'Oswald', sans-serif; color: #fff; }
.s2 .s2-sp span { font: 400 12px 'Oswald', sans-serif; color: #b9c6d2; }
.s2 .s2-sp em { font: normal 400 14px 'VT323', monospace; color: var(--s2-gold); }
.s2 .s2-stories { border-top: 1px dashed var(--s2-line); padding-top: 7px; display: flex; flex-direction: column; gap: 3px;
  font: 400 12.5px/1.3 'Oswald', sans-serif; color: #d5dee7; }
.s2 .s2-stories b { color: var(--s2-gold); font-weight: 600; }
.s2 .s2-olineup { border-left: 1px solid var(--s2-line); padding: 8px 10px; background: rgba(0,0,0,.25); }
.s2 .s2-olineup > small { display: block; font: 600 9.5px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-dim); margin-bottom: 3px; }
.s2 .s2-ol { display: grid; grid-template-columns: 12px 24px 1fr auto; gap: 4px; align-items: baseline; font: 400 12px/1.45 'Oswald', sans-serif; color: #d5dee7; }
.s2 .s2-ol span { font: 400 12px 'VT323', monospace; color: var(--s2-dim); }
.s2 .s2-ol em { font-style: normal; color: var(--s2-dim); font-size: 10.5px; }
.s2 .s2-ol b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2 .s2-ol i { font: normal 400 13px 'VT323', monospace; color: var(--s2-gold); }

/* ── actions + recap ── */
.s2 .s2-actions { margin: 4px 0 12px; }
.s2 .s2-recap { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 760px; margin: -2px auto 12px; padding: 7px 14px;
  border: 1px solid var(--s2-gold); border-radius: 6px; background: rgba(255,211,106,.08); font: 400 13px 'Oswald', sans-serif; color: #d5dee7;
  animation: s2RecapIn .5s ease-out both; }
.s2 .s2-recap b { color: var(--s2-gold); letter-spacing: 1.5px; }
@keyframes s2RecapIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ── schedule ── */
.s2 .s2-cal { max-width: 1060px; margin: 0 auto 14px; padding: 12px 14px; background: var(--s2-panel); border: 1px solid var(--s2-line); border-radius: 12px; }
.s2 .s2-legend { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.s2 .s2-legend .s2-c { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; }
.s2 .s2-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.s2 .s2-month { padding: 6px 6px 7px; border-radius: 6px; background: rgba(255,255,255,.025); border: 1px solid transparent; }
.s2 .s2-month.cur { border-color: color-mix(in srgb, var(--s2-mood) 55%, transparent); background: color-mix(in srgb, var(--s2-mood) 7%, transparent); }
.s2 .s2-mh { display: flex; justify-content: space-between; font: 600 11px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-dim); margin-bottom: 5px; }
.s2 .s2-mh b { font: 400 15px 'VT323', monospace; letter-spacing: 0; color: var(--s2-gold); }
.s2 .s2-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.s2 .s2-c { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.06); font-style: normal; }
.s2 .s2-c.w { background: var(--s2-w); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.s2 .s2-c.l { background: var(--s2-l); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.s2 .s2-c.big { outline: 1px solid rgba(255,255,255,.75); outline-offset: -1px; }
.s2 .s2-c.one { opacity: .62; }
.s2 .s2-c.old { background: rgba(255,255,255,.22); }
.s2 .s2-c.next { background: transparent; box-shadow: inset 0 0 0 2px var(--s2-gold); animation: s2Next 1.2s ease-in-out infinite; }
@keyframes s2Next { 50% { box-shadow: inset 0 0 0 2px var(--s2-gold), 0 0 10px var(--s2-gold); } }
.s2 .s2-c.asg { background: none; color: var(--s2-gold); font-size: 9px; line-height: 1; display: grid; place-items: center; }
.s2 .s2-c.new { animation: s2Pop .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d, 0ms); }
@keyframes s2Pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.35); opacity: 1; } }

/* ── race + book ── */
.s2 .s2-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; max-width: 1060px; margin: 0 auto 14px; }
.s2 .s2-race, .s2 .s2-book { padding: 12px 14px; background: var(--s2-panel); border: 1px solid var(--s2-line); border-radius: 12px; text-align: left; }
.s2 .s2-race .k1 { color: var(--s2-gold); } .s2 .s2-race .k2 { color: #7cc7ff; }
.s2 .s2-svg { width: 100%; height: 170px; display: block; }
.s2 .s2-svg .g { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.s2 .s2-svg .g.z { stroke: rgba(255,255,255,.35); stroke-dasharray: 4 3; }
.s2 .s2-svg .g.v { stroke: rgba(255,255,255,.05); }
.s2 .s2-svg .t { fill: var(--s2-dim); font: 400 11px 'VT323', monospace; text-anchor: end; }
.s2 .s2-svg .t.m { text-anchor: start; font-size: 10px; letter-spacing: 1px; }
.s2 .s2-svg .l1 { fill: none; stroke: var(--s2-gold); stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255,211,106,.5)); }
.s2 .s2-svg .a1 { fill: rgba(255,211,106,.10); stroke: none; }
.s2 .s2-svg .l2 { fill: none; stroke: #7cc7ff; stroke-width: 1.6; stroke-dasharray: 5 3; }
.s2 .s2-svg .d1 { fill: var(--s2-gold); } .s2 .s2-svg .d2 { fill: #7cc7ff; }
.s2 .s2-race-foot { display: flex; justify-content: space-between; font: 400 13px 'Oswald', sans-serif; color: #d5dee7; margin-top: 4px; }
.s2 .pos { color: var(--s2-w) !important; } .s2 .neg { color: var(--s2-l) !important; }
.s2 .s2-empty { font: italic 13px 'Playfair Display', serif; color: var(--s2-dim); padding: 50px 0; text-align: center; }
.s2 .s2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.s2 .s2-tile { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 5px 8px; display: flex; flex-direction: column; }
.s2 .s2-tile small { font: 600 9px 'Oswald', sans-serif; letter-spacing: 1.6px; color: var(--s2-dim); }
.s2 .s2-tile b { font: 400 22px/1.05 'VT323', monospace; color: #fff; }
.s2 .s2-tile i { font: normal 400 10.5px 'Oswald', sans-serif; color: var(--s2-dim); }
.s2 .s2-tile.pos b { color: var(--s2-w); } .s2 .s2-tile.neg b { color: var(--s2-l); }
.s2 .s2-tile.s2-magic { align-items: center; justify-content: center; border-color: var(--s2-gold); background: rgba(255,211,106,.08); }
.s2 .s2-tile.s2-magic b { color: var(--s2-gold); font-size: 26px; }
.s2 .s2-tile.s2-magic small { order: 2; }
.s2 .s2-leads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.s2 .s2-lead { border-top: 2px solid var(--s2-gold); padding-top: 4px; display: flex; flex-direction: column; min-width: 0; }
.s2 .s2-lead small { font: 600 9px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-gold); }
.s2 .s2-lead b { font: 600 13px 'Oswald', sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2 .s2-lead span { font: 400 20px/1 'VT323', monospace; color: #fff; }
.s2 .s2-lead i { font: normal 400 10.5px 'Oswald', sans-serif; color: var(--s2-dim); }

/* ── last game + gazette ── */
.s2 .s2-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: 1060px; margin: 0 auto 16px; align-items: stretch; }
.s2 .s2-row2 > * { margin: 0 !important; max-width: none !important; }
.s2 .s2-gazette { text-align: left; padding: 12px 16px 14px; border-radius: 4px; background: #121a15; border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 4px #121a15, inset 0 0 0 5px rgba(255,211,106,.35), 0 10px 24px rgba(0,0,0,.4); }
.s2 .s2-gz-mast { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 3px double rgba(232,238,245,.5); font: 600 9.5px 'Oswald', sans-serif; letter-spacing: 1.5px; color: var(--s2-dim); }
.s2 .s2-gz-mast b { text-align: center; font: 700 22px 'Playfair Display', serif; letter-spacing: .5px; color: var(--s2-ink); }
.s2 .s2-gz-head { font: 900 22px/1.08 'Playfair Display', serif; color: #fff; text-transform: uppercase; letter-spacing: .3px; }
.s2 .s2-gz-deck { font: italic 400 14px/1.35 'Playfair Display', serif; color: #c7d2dc; margin: 5px 0 8px; }
.s2 .s2-gz-cols { columns: 2; column-gap: 16px; column-rule: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); padding-top: 7px; }
.s2 .s2-gz-item { break-inside: avoid; font: 400 12.5px/1.35 'Oswald', sans-serif; color: #d5dee7; margin-bottom: 6px; }
.s2 .s2-gz-item small { display: block; font: 600 9px 'Oswald', sans-serif; letter-spacing: 2px; color: var(--s2-gold); }
.s2 .s2-gz-item.kind-user { color: #fff; }

/* ── phones ── */
@media (max-width: 900px) {
  .s2 .s2-row, .s2 .s2-row2 { grid-template-columns: 1fr; }
  .s2 .s2-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .s2 .s2-mast { grid-template-columns: 1fr; text-align: center; gap: 6px; }
  .s2 .s2-mast-l, .s2 .s2-mast-r { align-items: center; text-align: center; flex-direction: row; justify-content: center; gap: 8px; }
  .s2 .s2-chapter { font-size: 22px; }
  .s2 .s2-mbody { grid-template-columns: 1fr; }
  .s2 .s2-olineup { border-left: 0; border-top: 1px solid var(--s2-line); }
  .s2 .s2-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2 .s2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2 .s2-leads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2 .s2-gz-cols { columns: 1; }
  .s2 .s2-legend { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .s2 .s2-c.new, .s2 .s2-recap, .s2[data-month="sep"] .s2-chapter, .s2 .s2-c.next { animation: none; } }