/* GloryXI V2 — manager's blueprint × 1970s vinyl sleeve.
   Palette law: ink #101010, bone #EDE8DF, vermilion #FF2D00, grey captions #6E6A63.
   Green and blue are banned. No rounded corners. Hairline-ruled zones, not cards. */

:root {
  --ink:  #101010;
  --bg:   #211B14;          /* warm charcoal — softer than pure ink */
  --bone: #EDE8DF;
  --hot:  #2BD4C0;          /* electric teal — the accent (was harsh red) */
  --warn: #FF9F6E;          /* soft coral — negatives only */
  --gold: #F5C518;
  --grass1: #2F8F4A;
  --grass2: #287D40;
  --grey: #8A8378;
  --hair: rgba(237, 232, 223, 0.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--bone);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
  background-image:
    radial-gradient(rgba(237,232,223,0.035) 1px, transparent 1px),
    radial-gradient(rgba(237,232,223,0.02) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

.t-cap {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--grey);
  text-transform: uppercase;
}

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* pressed liquid warp — the signature touch feedback */
button:active, .player-row:active, .slot-option:active {
  transform: skewX(-2.5deg) scale(0.975);
  transition: transform 60ms ease-out;
}

/* ── screens ─────────────────────────────────────────────── */
.screen { display: none; position: fixed; inset: 0; flex-direction: column; }
.screen.active { display: flex; }

/* ── loading ─────────────────────────────────────────────── */
#loading { align-items: flex-start; justify-content: flex-end; padding: 32px 24px; }
.load-mark {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 96px; color: var(--hot); line-height: 0.9;
}
.load-cap { margin-top: 14px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ── registration marks + vinyl rings ────────────────────── */
.reg-marks { position: absolute; inset: 10px; pointer-events: none; }
.reg-marks::before, .reg-marks::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  background:
    linear-gradient(var(--hair), var(--hair)) center/14px 1px no-repeat,
    linear-gradient(var(--hair), var(--hair)) center/1px 14px no-repeat;
}
.reg-marks::before { top: 0; left: 0; }
.reg-marks::after  { bottom: 0; right: 0; }

.vinyl-rings {
  position: absolute; top: -90px; right: -90px; width: 280px; height: 280px;
  border-radius: 50%; pointer-events: none; opacity: 0.16;
  background: repeating-radial-gradient(circle at center,
    transparent 0 5px, rgba(237,232,223,0.5) 5px 6px);
}

/* ── S1 sleeve ───────────────────────────────────────────── */
#s1 { padding: 0 0 18px; }
.s1-spine {
  position: absolute; left: 10px; top: 0; bottom: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--hair); padding-left: 7px;
}
.s1-stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 26px 44px; }
.trophy-hero {
  width: 128px; align-self: flex-start;
  transform: rotate(-5deg); margin-bottom: 4px;
  animation: trophy-bob 3.2s ease-in-out infinite;
}
@keyframes trophy-bob { 50% { transform: rotate(-5deg) translateY(-7px); } }
.s1-q {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(26px, 8vw, 36px); line-height: 1.05;
  color: var(--gold); margin: 10px 0 6px;
}
.s1-logo {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(58px, 19vw, 104px);
  line-height: 0.92; letter-spacing: 0.01em; color: var(--bone);
  white-space: nowrap;
}
.s1-logo-xi { color: var(--hot); }
.s1-rule { width: 38%; height: 5px; background: var(--hot); margin: 18px 0 14px; }
.s1-tag { font-size: 11px; color: var(--bone); line-height: 1.8; }

.slab {
  display: block; width: calc(100% - 48px); margin: 0 24px;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 24px; letter-spacing: 0.06em; text-align: center;
  padding: 16px 0 14px; user-select: none;
}
.slab-hot  { background: var(--hot); color: var(--ink); }
.slab-line { background: none; color: var(--bone); border: 1px solid var(--hair); }

.footer-note { text-align: center; padding: 12px 36px 0; font-size: 7.5px; line-height: 1.7; letter-spacing: 0.08em; }

/* ── S2 the draw ─────────────────────────────────────────── */
#s2 { padding: 18px 18px 26px 46px; justify-content: center; gap: 18px; }
.s2-spine {
  position: absolute; left: 10px; top: 0; bottom: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center;
  border-left: 1px solid var(--hair); padding-left: 7px;
  color: var(--bone); font-size: 11px;
}
.s2-round { position: absolute; top: 16px; right: 18px; }

.spin-zone { display: flex; flex-direction: column; gap: 14px; }
.spin-flag-frame {
  width: 82%; aspect-ratio: 3 / 2; border: 1px solid var(--bone);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: rgba(237,232,223,0.04);
  position: relative;
}
.spin-flag-frame::after {
  content: ''; position: absolute; right: -9px; top: 0; height: 100%;
  border-right: 1px solid var(--hair); width: 8px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
#spin-flag { width: 70%; display: block; }
#spin-flag.spin-blur { filter: blur(2px); }

.spin-year-frame {
  align-self: flex-end; width: 58%;
  border: 1px solid var(--bone); border-left: 4px solid var(--hot);
  text-align: right; padding: 4px 14px 2px;
}
#spin-year {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 64px; line-height: 1.05; color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.draw-stamp {
  min-height: 56px;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(28px, 9vw, 40px); line-height: 1.05;
  color: var(--hot); text-transform: uppercase;
  opacity: 0; transform: scale(1.25) rotate(-2deg);
}
.draw-stamp.stamped {
  opacity: 1; transform: scale(1) rotate(-2deg);
  transition: transform 140ms cubic-bezier(.2,2,.4,1), opacity 80ms;
}

.skip-row { display: flex; gap: 10px; min-height: 34px; }
.skip-box {
  border: 1px solid var(--hair); color: var(--bone);
  padding: 9px 13px 8px; font-size: 10px; letter-spacing: 0.14em;
  visibility: hidden;
}
.skip-box.avail { visibility: visible; }
.skip-box:disabled { opacity: 0.25; }

/* ── S3 squad sheet ──────────────────────────────────────── */
#s3 { padding-left: 30px; }
.status-strip {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 14px 0 6px;
  border-bottom: 1px solid var(--hair); flex-shrink: 0;
}
#progress-pips { display: flex; gap: 4px; }
.pip { width: 9px; height: 14px; border: 1px solid var(--hair); }
.pip.full { background: var(--hot); border-color: var(--hot); animation: pip-pop 320ms cubic-bezier(.2,2,.4,1); }
@keyframes pip-pop { 40% { transform: scale(1.6) rotate(6deg); } }
#round-label { color: var(--bone); }

.squad-spine {
  position: absolute; left: 8px; top: 34px; bottom: 44px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center;
  border-left: 1px solid var(--hair); padding-left: 6px;
  color: var(--bone); font-size: 11px; letter-spacing: 0.2em;
  white-space: nowrap; overflow: hidden;
}

.squad-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 9px 6px; border-bottom: 1px solid var(--bone);
  flex-shrink: 0; flex-wrap: wrap;
}
.squad-flag { width: 34px; height: 23px; object-fit: cover; border: 1px solid var(--hair); }
.squad-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 25px; letter-spacing: 0.03em; color: var(--bone);
}
.squad-title .yr { color: var(--hot); }
.skip-row-s3 { margin-left: auto; min-height: 0; }
.skip-row-s3 .skip-box { padding: 6px 9px 5px; font-size: 9px; }

#player-list { flex: 1; overflow-y: auto; padding-bottom: 8px; }

.pos-rule {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px 4px 6px;
}
.pos-rule::after { content: ''; flex: 1; border-top: 1px solid var(--hair); transform: translateY(-3px); }
.pos-rule .pr-label { font-size: 12px; letter-spacing: 0.14em; color: var(--bone); text-transform: uppercase; }
.pos-rule .pos-n { font-size: 11px; color: var(--grey); }

.player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 8px 6px;
  border-bottom: 1px solid rgba(237,232,223,0.14);
  cursor: pointer; user-select: none;
  animation: row-rise 280ms cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes row-rise { from { opacity: 0; transform: translateY(10px); } }
.player-row.dim { opacity: 0.32; pointer-events: none; }
.player-row.sel { background: rgba(255,45,0,0.08); }
.p-id { flex: 1; min-width: 0; }
.p-name {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 22px; letter-spacing: 0.02em; line-height: 1.12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-meta { font-size: 12px; letter-spacing: 0.07em; color: var(--grey); margin-top: 2px; text-transform: uppercase; }
.p-rating {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 30px; color: var(--hot); min-width: 50px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* slot strip (expands under a tapped row) */
.slot-strip {
  display: flex; gap: 8px; padding: 10px 14px 12px 6px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(237,232,223,0.14);
  background: rgba(255,45,0,0.07);
  align-items: center;
  animation: strip-slide 200ms ease-out;
}
@keyframes strip-slide { from { opacity: 0; transform: translateY(-6px); } }
.slot-option {
  border: 1px solid var(--bone); color: var(--bone);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 18px; padding: 10px 16px 8px; letter-spacing: 0.06em;
}
/* slot outside the player's real positions — allowed, but costs rating in sim */
.slot-option.off-pos { opacity: 0.45; border-style: dashed; }

.board-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; height: 44px; padding: 0 16px;
  border-top: 1px solid var(--bone); flex-shrink: 0;
  background: rgba(237,232,223,0.05);
}
.board-strip .t-cap { color: var(--bone); letter-spacing: 0.22em; }
.board-count { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 16px; color: var(--hot); }

/* ── S4 the board ────────────────────────────────────────── */
#s4 { padding: 0; }
.board-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); flex-shrink: 0;
}
.board-head .t-cap { color: var(--bone); letter-spacing: 0.22em; }
.board-pitch { flex: 1; position: relative; margin: 10px 12px; }
.board-pitch, .result-pitch {
  /* real grass with TV mowing stripes */
  background: repeating-linear-gradient(180deg,
    var(--grass1) 0 11.1%, var(--grass2) 11.1% 22.2%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
}
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.95; }
.pitch-lines * { stroke: rgba(255,255,255,0.92); }
#board-slots { position: absolute; inset: 0; }

.b-slot {
  position: absolute; transform: translate(-50%, -50%);
  width: 84px; text-align: center;
}
.b-slot .b-pos {
  font-size: 9px; letter-spacing: 0.18em; color: rgba(255,255,255,0.85);
  border: 1px dashed rgba(255,255,255,0.6); padding: 12px 0 11px; display: block;
  background: rgba(16,16,16,0.25);
}
.b-slot.filled .b-pos { display: none; }
.b-fill { display: none; }
.b-slot.filled .b-fill {
  display: block; animation: chalk-in 300ms cubic-bezier(.2,1.6,.4,1);
  background: rgba(16,16,16,0.9); border: 1px solid rgba(255,255,255,0.85);
  padding: 5px 4px 4px; position: relative;
}
@keyframes chalk-in { from { opacity: 0; transform: translateY(10px) scale(0.85); } }
.b-fill img { width: 20px; height: 13px; object-fit: cover; border: 1px solid var(--hair); display: block; margin: 0 auto 3px; }
.b-fill .b-name {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 12px; line-height: 1.1; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b-fill .b-r {
  font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 14px;
  color: var(--ink); background: var(--hot);
  position: absolute; top: -10px; right: -8px; padding: 1px 6px 0;
}
.b-fill .b-meta { font-size: 8px; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); margin-top: 1px; }
.board-strip-close { border-top: 1px solid var(--bone); }

/* ── S6 result pitch (mirror of the share card) ──────────── */
.result-pitch {
  position: relative; margin: 6px 18px 0;
  aspect-ratio: 375 / 520; flex-shrink: 0;
}
#result-slots { position: absolute; inset: 0; }
.result-pitch .b-slot { width: 78px; }
.result-pitch .b-fill .b-name { font-size: 11.5px; }
.result-pitch .b-fill .b-r { font-size: 13px; top: -9px; right: -6px; }
#s6.champion .b-fill .b-r { background: var(--gold); }

/* ── S5 vidiprinter ──────────────────────────────────────── */
#s5 { padding-bottom: 18px; }
.s5-head { padding: 18px 18px 10px; border-bottom: 1px solid var(--bone); flex-shrink: 0; }
.s5-kicker { color: var(--hot); }
.s5-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 38px; line-height: 1; margin-top: 4px;
}
#printer-feed {
  flex: 1; overflow-y: auto; padding: 12px 18px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16.5px; line-height: 1.75; color: var(--bone);
}
.feed-line { white-space: pre-wrap; word-break: break-word; }
.feed-line .hot { color: var(--hot); font-weight: 700; }
.feed-line.faint { color: #9b948a; }
.feed-line.gold { color: var(--gold); font-weight: 700; }
.feed-line.alert { color: var(--warn); font-weight: 700; }
.feed-line.scorer { color: #9b948a; font-size: 14.5px; }
.feed-line.verdict {
  color: var(--hot); font-weight: 700; font-size: 19px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 8px 0; margin-top: 10px;
}

/* FIFA-style strength panel */
.strength-panel {
  border: 1px solid var(--hair); background: rgba(16,16,16,0.65);
  margin: 12px 0; padding: 14px 14px 12px;
  font-family: 'Space Grotesk', sans-serif;
  animation: row-rise 320ms both;
}
.sp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.sp-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 22px; color: var(--bone); letter-spacing: 0.04em;
}
.sp-ovr {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 30px; color: var(--ink); background: var(--gold);
  padding: 1px 10px 0; margin-left: auto;
}
.sp-ovr-cap { font-size: 9px; letter-spacing: 0.16em; color: var(--grey); }
.sp-stats { display: flex; gap: 10px; }
.sp-stat { flex: 1; }
.sp-num {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 42px; line-height: 1;
}
.sp-bar { height: 7px; background: rgba(237,232,223,0.13); margin: 6px 0 5px; }
.sp-bar i { display: block; height: 100%; }
.tier-good .sp-num { color: var(--grass1); }
.tier-good .sp-bar i { background: var(--grass1); }
.tier-mid .sp-num { color: var(--gold); }
.tier-mid .sp-bar i { background: var(--gold); }
.tier-low .sp-num { color: var(--warn); }
.tier-low .sp-bar i { background: var(--warn); }
.sp-label { font-size: 10px; letter-spacing: 0.14em; color: var(--grey); }
.sp-weakest .sp-label { color: var(--warn); font-weight: 700; }
.sp-opps { margin-top: 14px; border-top: 1px solid rgba(237,232,223,0.18); padding-top: 10px; }
.sp-opp { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.sp-opp img { width: 24px; height: 16px; object-fit: cover; border: 1px solid var(--hair); }
.sp-opp-m { font-size: 10px; color: var(--grey); width: 22px; font-family: 'Courier New', monospace; }
.sp-opp-n {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 14px; color: var(--bone); width: 92px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-opp-bar { flex: 1; height: 6px; background: rgba(237,232,223,0.13); }
.sp-opp-bar i { display: block; height: 100%; background: var(--bone); }
.sp-opp-bar i.stronger { background: var(--warn); }
.sp-opp-e { font-family: 'Courier New', monospace; font-size: 12px; color: var(--grey); width: 38px; text-align: right; }

/* stadium scoreboard per match */
.scoreboard {
  border: 1px solid var(--hair); background: rgba(16,16,16,0.65);
  margin: 12px 0; padding: 12px 12px 10px;
  animation: row-rise 280ms both;
}
.sb-stage {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px;
  letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase;
  margin-bottom: 10px;
}
.sb-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sb-team { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sb-team img { width: 42px; height: 28px; object-fit: cover; border: 1px solid var(--hair); }
.sb-you {
  width: 42px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--hot); color: var(--ink);
  font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 17px;
}
.sb-code {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 19px; letter-spacing: 0.06em; color: var(--bone);
}
.sb-score {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 52px; line-height: 1; color: var(--hot);
  display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.sb-dash { color: var(--grey); font-size: 34px; }
.sb-note {
  text-align: center; font-size: 13px; color: var(--grey);
  font-family: 'Space Grotesk', sans-serif; margin-top: 4px;
}
.sb-scorers { margin-top: 8px; }
.sb-goal {
  font-size: 14.5px; color: #9b948a; line-height: 1.6;
  border-top: 1px dotted rgba(237,232,223,0.18); padding: 3px 2px 2px;
}
.sb-goal::before { content: 'GOAL '; color: var(--hot); font-weight: 700; }
.scoreboard.sb-final .sb-score { animation: pip-pop 320ms cubic-bezier(.2,2,.4,1); }
#btn-next-match { margin-top: 10px; }
#btn-next-match:disabled { opacity: 0.3; }

/* ── S6 back cover ───────────────────────────────────────── */
#s6 { padding: 26px 0 18px; overflow-y: auto; }
.verdict-zone { padding: 8px 22px 0; }
.verdict-kicker { color: var(--hot); }
.verdict-stage {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(34px, 11vw, 48px); line-height: 1; color: var(--bone);
  margin: 6px 0 8px; text-transform: uppercase;
}
.verdict-record {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px; color: var(--bone);
}
.verdict-avg { margin-top: 5px; }

.tracklist-label { padding: 22px 22px 6px; color: var(--bone); letter-spacing: 0.24em; }
#tracklist { border-top: 1px solid var(--bone); margin: 0 22px; }
.track {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0 5px; border-bottom: 1px solid rgba(237,232,223,0.14);
}
.track .tno { font-family: 'Courier New', monospace; font-size: 12px; color: var(--grey); width: 22px; }
.track .tname {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42%;
}
.track .tmeta { font-size: 11px; letter-spacing: 0.06em; color: var(--grey); text-transform: uppercase; white-space: nowrap; }
.track .tlead { flex: 1; border-bottom: 1px dotted var(--grey); transform: translateY(-3px); min-width: 12px; }
.track .tr8 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 22px; color: var(--hot); font-variant-numeric: tabular-nums;
}

.action-row { display: flex; gap: 10px; padding: 22px 22px 8px; }
.action-row .slab { width: auto; flex: 1; margin: 0; font-size: 19px; }

/* ── S0 hall of legends ──────────────────────────────────── */
#s0 { padding-left: 0; }
.legend-kicker { color: var(--gold); letter-spacing: 0.2em; }
.legend-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--gold); flex-shrink: 0; }
.legend-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 44px; line-height: 0.95; color: var(--gold);
}
.legend-sub { margin-top: 8px; line-height: 1.7; }
#legend-list { flex: 1; overflow-y: auto; padding: 0 0 8px 10px; }
#legend-list .p-rating { color: var(--gold); }

/* ── joker ───────────────────────────────────────────────── */
.slab-gold { background: var(--gold); color: var(--ink); }
.joker-head { padding: 18px 18px 12px; border-bottom: 1px solid var(--gold); flex-shrink: 0; }
.joker-kicker { color: var(--gold); letter-spacing: 0.22em; }
.joker-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 36px; line-height: 1; color: var(--gold); margin: 6px 0 8px;
}
.joker-sub { line-height: 1.7; color: var(--bone); }
.joker-pitch { flex: 1; position: relative; margin: 10px 14px; }
.joker-pitch.swap-mode .b-slot.filled { cursor: pointer; }
.joker-pitch.swap-mode .b-slot.filled .b-fill {
  border-color: var(--gold); animation: swap-pulse 1.1s ease-in-out infinite;
}
@keyframes swap-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 4px rgba(245,197,24,0.25); } }
#s-joker .action-row { padding: 12px 18px 16px; }

/* ── name your XI ────────────────────────────────────────── */
#s-name { justify-content: center; gap: 26px; }
.name-zone { padding: 0 26px; }
.name-kicker { color: var(--hot); letter-spacing: 0.22em; }
.name-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 52px; line-height: 0.95; color: var(--bone); margin: 8px 0 22px;
}
.name-input {
  width: 100%; background: none; border: none;
  border-bottom: 3px solid var(--hot);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 30px; color: var(--gold); letter-spacing: 0.04em;
  padding: 6px 2px 8px; text-transform: uppercase;
  caret-color: var(--hot); outline: none;
}
.name-input::placeholder { color: rgba(237,232,223,0.22); }
.name-hint { margin-top: 12px; }

/* win flash — celebratory overprint on knockout wins */
.win-flash {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: var(--hot); opacity: 0;
  animation: winflash 650ms ease-out;
}
@keyframes winflash { 12% { opacity: 0.85; } 100% { opacity: 0; } }

/* champion flood */
#s6.champion { background: var(--hot); }
#s6.champion .verdict-record, #s6.champion .t-cap,
#s6.champion .track .tno, #s6.champion .track .tmeta { color: var(--ink); }
#s6.champion .verdict-stage, #s6.champion .track .tname { color: var(--ink); }
#s6.champion .track .tr8 { color: #fff; }
#s6.champion .verdict-kicker { color: #fff; }
#s6.champion #tracklist, #s6.champion .track { border-color: rgba(16,16,16,0.4); }
#s6.champion .slab-hot { background: var(--ink); color: var(--bone); }
#s6.champion .slab-line { border-color: rgba(16,16,16,0.5); color: var(--ink); }

/* ── desktop enhancement ─────────────────────────────────── */
@media (min-width: 700px) {
  .screen {
    max-width: 430px; left: 50%; transform: translateX(-50%);
    border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
  }
}

/* ── i18n + onboarding (V5) ──────────────────────────────── */

/* globe language button — S1 top-right */
#btn-lang {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--hair); color: var(--bone);
  padding: 8px 12px; font-size: 12px;
}
#btn-lang svg { color: var(--hot); }
#btn-lang:active { background: rgba(237,232,223,0.08); }

/* how-to-play link under KICK OFF */
#howto-link {
  margin: 12px auto 0; display: block; color: var(--bone);
  border-bottom: 1px solid var(--hot); padding-bottom: 2px;
}

/* hint line — one quiet sentence telling you what to do here */
.hint-line {
  text-align: center; color: var(--hot); font-size: 10px;
  padding: 8px 16px 6px; flex: none;
}
#s2 .hint-line { position: absolute; bottom: 22px; left: 0; right: 0; }

/* S-HOWTO — 3 steps */
#s-howto { padding: 26px 0 20px; justify-content: flex-end; }
.ht-kicker { padding: 0 24px; }
.ht-zone { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 28px; }
.ht-art svg { width: min(64vw, 250px); display: block; margin: 0 0 18px; }
.ht-step { color: var(--hot); margin-bottom: 6px; }
.ht-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(30px, 9vw, 42px); line-height: 1.04; color: var(--bone);
}
.ht-body { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--bone); max-width: 330px; }
.ht-dashes { display: flex; gap: 6px; padding: 18px 28px 14px; }
.ht-dashes i { width: 26px; height: 4px; background: rgba(237,232,223,0.22); }
.ht-dashes i.on { background: var(--hot); }

/* Hebrew mode — text only, layout untouched */
html[data-lang="he"] .t-cap,
html[data-lang="he"] .footer-note,
html[data-lang="he"] .slab { letter-spacing: 0; }
html[data-lang="he"] #howto-link,
html[data-lang="he"] .s1-q,
html[data-lang="he"] .s1-tag,
html[data-lang="he"] .legend-title,
html[data-lang="he"] .legend-sub,
html[data-lang="he"] .legend-kicker,
html[data-lang="he"] .joker-title,
html[data-lang="he"] .joker-sub,
html[data-lang="he"] .name-title,
html[data-lang="he"] .name-hint,
html[data-lang="he"] .ht-title,
html[data-lang="he"] .ht-body,
html[data-lang="he"] .hint-line,
html[data-lang="he"] .verdict-stage,
html[data-lang="he"] .footer-note { direction: rtl; }
html[data-lang="he"] .s1-q,
html[data-lang="he"] .legend-title,
html[data-lang="he"] .joker-title,
html[data-lang="he"] .name-title,
html[data-lang="he"] .ht-title,
html[data-lang="he"] .verdict-stage { font-family: system-ui, 'Segoe UI', sans-serif; font-weight: 800; }

/* ── daily challenge (V5.1) ──────────────────────────────── */
.daily-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: none; color: var(--gold); border: 1px solid var(--gold);
  font-size: 17px; margin-top: 10px; padding: 12px 0 10px;
}
#s-daily { padding-bottom: 0; }
.daily-head { padding: 18px 24px 10px; }
.daily-big {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(30px, 9vw, 42px); line-height: 1.04; color: var(--bone);
}
html[data-lang="he"] .daily-big { direction: rtl; font-family: system-ui, 'Segoe UI', sans-serif; font-weight: 800; }
html[data-lang="he"] .daily-sub, html[data-lang="he"] .daily-x, html[data-lang="he"] .daily-t { direction: rtl; }
.daily-sub { margin-top: 8px; }
#daily-list { flex: 1; overflow-y: auto; padding: 6px 0 12px; }
.daily-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 24px; border-bottom: 1px solid rgba(237,232,223,0.14);
}
.daily-dn { font-family: 'Courier New', monospace; font-size: 18px; color: var(--grey); flex: none; width: 30px; }
.daily-body { flex: 1; }
.daily-t { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 16px; color: var(--bone); letter-spacing: 0.03em; }
html[data-lang="he"] .daily-t { font-family: system-ui, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: 0; }
.daily-x { font-size: 13.5px; color: var(--bone); opacity: 0.85; line-height: 1.5; margin-top: 5px; max-width: 300px; }
.daily-tag { flex: none; font-size: 9.5px; border: 1px solid var(--hair); padding: 2px 8px; }
.daily-tag.hot { border-color: var(--gold); color: var(--gold); }
.daily-row.locked .daily-t { color: var(--grey); opacity: 0.55; }
.daily-row.past { opacity: 0.6; }
.daily-row.today {
  background: rgba(245,197,24,0.07);
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  padding-top: 16px; padding-bottom: 16px;
}
.daily-row.today .daily-dn, .daily-row.today .daily-t { color: var(--gold); }
.daily-play { width: 100%; margin: 14px 0 0; font-size: 19px; padding: 13px 0 11px; }
.daily-play:disabled { opacity: .45; pointer-events: none; }

/* group invite — dressing-room ticket */
#group-cta {
  display: block; margin: 26px 18px 10px; padding: 16px 18px 15px;
  border: 2px dashed var(--gold); background: rgba(245, 197, 24, 0.06);
  text-decoration: none; transform: rotate(-0.6deg);
}
#group-cta .gc-kick { display: block; color: var(--gold); }
#group-cta .gc-main {
  display: block; font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 21px; line-height: 1.2; color: var(--bone); margin: 7px 0 12px;
}
#group-cta .gc-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 15px; padding: 9px 16px 8px;
  transform: rotate(0.8deg);
}
#s6.champion #group-cta { border-color: var(--bone); }
#daily-group-link {
  display: inline-block; margin-top: 10px; color: var(--gold);
  font-weight: 700; font-size: 14px; text-decoration: none;
  border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}