/* ─── ODDSETPULJE · Championship Manager 01/02 skin ─── */

:root {
  /* POSITIVE (won) */
  --pitch:        #37b24d;
  --pitch-dark:   #1d5c28;
  /* CM DARK NAVY CHROME */
  --forest:       #141d4a;   /* deep navy desktop */
  --forest-deep:  #0d1436;   /* darker navy (headers/inset) */
  --panel:        #232f6e;   /* navy panel */
  --panel-2:      #1a2456;
  --line:         rgba(255,255,255,0.12);
  --line-strong:  rgba(255,255,255,0.26);

  /* TEXT (light on navy) */
  --chalk:        #eef1fb;
  --chalk-mid:    #b7c0e2;
  --chalk-dim:    #838db8;
  --chalk-faint:  rgba(255,255,255,0.28);

  /* CM STRUCTURE */
  --navy:         #29357e;   /* column-header navy */
  --navy-2:       #34428c;
  --red:          #d3202f;   /* CM red banner */
  --red-dark:     #7f0f18;
  --cyan:         #3fd0e8;   /* CM cyan headings */

  /* PLAYER COLOURS (bright for dark bg) */
  --bob:          #f5c518;   /* CM gold */
  --bob-ink:      #2a2200;
  --nyx:          #3fa9f5;   /* blue */
  --nyx-ink:      #04233f;
  --raz:          #ff5a4d;   /* red */
  --raz-ink:      #3a0a06;

  /* ACCENTS */
  --ref:          #ff3aa0;
  --whistle:      #f5c518;
  --ko:           #ff5a4d;

  /* TYPE — CM: Handel Gothic (headers) ≈ Michroma · Eras Demi (names) ≈ Jost */
  --display: "Michroma", "Tahoma", "Verdana", sans-serif;
  --mono: "Jost", "Tahoma", "Verdana", sans-serif;
  --score: "Jost", "Tahoma", "Verdana", sans-serif;

  /* SHADOWS */
  --bevel: 0 1px 2px rgba(0,0,0,0.35);
  --bevel-strong: 0 2px 6px rgba(0,0,0,0.45);
  --inset: inset 0 0 0 1px rgba(255,255,255,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--forest); overflow-x: hidden; }
body {
  font-family: var(--mono);
  font-weight: 400;
  background: var(--forest);
  color: var(--chalk);
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* CM look: crisp anti-aliased type, real borders not pixel bevels */
img, svg { image-rendering: auto; }

/* ─── TYPOGRAPHY HELPERS ─── */
.display { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; line-height: 0.95; }
.score   { font-family: var(--score); font-weight: 400; line-height: 0.9; }
.mono-cap { font-family: var(--mono); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; color: var(--chalk-dim); }
.mono-cap.bright { color: var(--chalk); }

/* ─── NAV ─── */
.scoreboard-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: stretch; justify-content: space-between;
  background: var(--forest-deep);
  border-bottom: 2px solid var(--pitch);
  box-shadow: 0 2px 0 0 rgba(255,210,63,0.06), 0 8px 24px rgba(0,0,0,0.4);
}
.scoreboard-nav .brand {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-right: 2px solid var(--line);
}
.scoreboard-nav .brand .puck {
  width: 28px; height: 28px; background: var(--pitch);
  border: 2px solid var(--chalk); border-radius: 50%;
  position: relative; flex-shrink: 0;
}
.scoreboard-nav .brand .puck::before, .scoreboard-nav .brand .puck::after {
  content: ''; position: absolute; background: var(--chalk);
}
.scoreboard-nav .brand .puck::before { left: 50%; top: 4px; bottom: 4px; width: 1px; transform: translateX(-50%); }
.scoreboard-nav .brand .puck::after { top: 50%; left: 4px; right: 4px; height: 1px; transform: translateY(-50%); }
.scoreboard-nav .brand-text {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.08em;
  color: var(--chalk); line-height: 1;
}
.scoreboard-nav .brand-text small { display: block; font-size: 9px; color: var(--bob); margin-top: 4px; letter-spacing: 0.2em; }

.scoreboard-nav .links { display: flex; }
.scoreboard-nav .links a {
  display: flex; align-items: center; padding: 0 18px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--chalk-mid); text-decoration: none;
  border-left: 2px solid var(--line);
  transition: background 0.1s, color 0.1s;
}
.scoreboard-nav .links a:hover { background: var(--pitch); color: var(--forest); }

/* ─── HERO ─── */
.hero {
  position: relative;
  padding: 56px 24px 48px;
  overflow: hidden;
  background:
    /* horizontal stripes for grass */
    repeating-linear-gradient(180deg,
      rgba(47,138,58,0.0) 0px, rgba(47,138,58,0.0) 80px,
      rgba(47,138,58,0.08) 80px, rgba(47,138,58,0.08) 160px),
    /* dark pitch radial */
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(47,138,58,0.30) 0%, transparent 70%),
    var(--forest);
}
.hero::before {
  /* center spot circle */
  content: ''; position: absolute; left: 50%; bottom: -260px; transform: translateX(-50%);
  width: 520px; height: 520px; border: 2px solid var(--chalk-faint);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  /* center spot */
  content: ''; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 12px; height: 12px; background: var(--chalk-faint); border-radius: 50%;
}
.hero-inner { max-width: 980px; margin: 0 auto; position: relative; z-index: 1; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--forest-deep); border: 2px solid var(--pitch);
  padding: 7px 14px 6px;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.14em; color: var(--bob);
  margin-bottom: 22px;
}
.hero-tag .dot { width: 8px; height: 8px; background: var(--ko); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.25; } }

.hero-title {
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 84px);
  letter-spacing: 0.04em;
  line-height: 0.9;
  color: var(--chalk);
  margin-bottom: 36px;
  text-shadow: 0 4px 0 var(--pitch-dark), 0 8px 0 var(--forest-deep);
}
.hero-title .y { color: var(--bob); }
.hero-title .c { color: var(--nyx); }
.hero-title .r { color: var(--raz); }
.hero-sub {
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 36px;
}
.hero-sub strong { color: var(--chalk); }

/* PODIUM */
.podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px; align-items: end;
  margin-bottom: 32px;
}
.pcard {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 22px 14px 18px;
  text-align: center;
  box-shadow: var(--bevel);
}
.pcard.first {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-color: var(--bob);
  padding-top: 32px;
  box-shadow: var(--bevel-strong), inset 0 0 0 2px rgba(255,210,63,0.10);
}
.pcard .rank-flag {
  position: absolute; top: -2px; left: -2px;
  background: var(--chalk); color: var(--forest);
  font-family: var(--display); font-size: 11px;
  padding: 6px 9px 4px;
  border-right: 2px solid var(--forest);
  border-bottom: 2px solid var(--forest);
}
.pcard.first .rank-flag { background: var(--bob); }
.pcard.bronze .rank-flag { background: var(--raz); color: var(--chalk); }

.pcard .trophy {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 18px; color: var(--bob);
  background: var(--forest-deep); padding: 4px 10px;
  border: 2px solid var(--bob);
}

/* JERSEY */
.jersey {
  width: 86px; height: 88px; margin: 0 auto 14px;
  position: relative; display: block;
}
.jersey .body {
  position: absolute; left: 14px; right: 14px; top: 14px; bottom: 0;
  background: currentColor;
  clip-path: polygon(
    20% 0%, 80% 0%,
    80% 8%, 100% 14%,
    100% 100%, 0% 100%,
    0% 14%, 20% 8%
  );
}
.jersey .collar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 12px; background: var(--forest);
  clip-path: polygon(20% 0%, 80% 0%, 65% 100%, 35% 100%);
}
.jersey .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-top: 18px;
  font-family: var(--display); font-size: 28px;
  color: var(--forest); text-shadow: 0 2px 0 rgba(0,0,0,0.18);
  letter-spacing: 0;
}
.jersey.bob { color: var(--bob); }
.jersey.nyx { color: var(--nyx); }
.jersey.raz { color: var(--raz); }
.jersey.bob .num { color: var(--bob-ink); }
.jersey.nyx .num { color: var(--nyx-ink); }
.jersey.raz .num { color: var(--raz-ink); }

.pcard-name {
  font-family: var(--display); font-size: 18px; letter-spacing: 0.04em;
  color: var(--chalk); margin-bottom: 12px;
}
.pcard.first .pcard-name { color: var(--bob); }
.pcard-score {
  font-family: var(--score); font-size: 44px; color: var(--chalk);
  line-height: 0.9;
}
.pcard.first .pcard-score { color: var(--bob); font-size: 56px; }
.pcard-score small { font-family: var(--mono); font-size: 13px; color: var(--chalk-dim); font-weight: 700; margin-left: 4px; }
.pcard-diff {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--chalk-dim); margin-top: 10px;
}
.pcard-diff strong { color: var(--chalk); }
.pcard.first .pcard-diff { color: var(--bob); opacity: 0.7; }

/* STAT STRIP */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--pitch);
  background: var(--forest-deep);
  box-shadow: var(--bevel);
}
.stat-strip.four { grid-template-columns: repeat(4, 1fr); }
.stat-strip.four .value { font-size: 28px; }
.stat-strip .item {
  padding: 18px 16px;
  border-right: 2px solid var(--line);
  text-align: left;
}
.stat-strip .item:last-child { border-right: none; }
.stat-strip .label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 6px;
}
.stat-strip .value {
  font-family: var(--score); font-size: 34px; color: var(--chalk); line-height: 0.9;
}
.stat-strip .value small {
  font-family: var(--mono); font-size: 12px; color: var(--bob);
  font-weight: 700; margin-left: 6px;
}
.stat-strip .value .idx-badge {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px 2px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1.5px solid;
}
.stat-strip .value .idx-badge.up { color: var(--bob); border-color: var(--bob); background: rgba(255,210,63,0.06); }
.stat-strip .value .idx-badge.down { color: var(--raz); border-color: var(--raz); background: rgba(255,91,78,0.06); }

/* ─── SECTION ─── */
section.block { max-width: 980px; margin: 0 auto; padding: 64px 24px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--line-strong);
}
.section-head h2 {
  font-family: var(--display); font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: 0.04em; color: var(--chalk);
}
.section-head h2 em { font-style: normal; color: var(--bob); }
.section-head .meta {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--chalk-dim);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.section-head .live { width: 8px; height: 8px; background: var(--ko); animation: blink 1.2s steps(2) infinite; }

/* ─── FORM CHART ─── */
.form-chart-wrap {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 24px;
  box-shadow: var(--bevel);
}
.form-chart-legend {
  display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.form-chart-legend .item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.form-chart-legend .swatch {
  width: 14px; height: 14px; border: 2px solid var(--forest-deep);
}
.form-chart-legend .swatch.bob { background: var(--bob); }
.form-chart-legend .swatch.nyx { background: var(--nyx); }
.form-chart-legend .swatch.raz { background: var(--raz); }
.form-chart-legend .item span { color: var(--chalk); }
.form-chart-legend .item .total {
  font-family: var(--score); font-size: 22px; color: var(--chalk); margin-left: 4px;
}
.form-chart { position: relative; }
.form-chart svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.form-chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.form-chart .axis-line { stroke: var(--line-strong); stroke-width: 1.5; }
.form-chart .axis-label { fill: var(--chalk-dim); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.form-chart .axis-num { fill: var(--chalk-dim); font-family: var(--score); font-size: 13px; }
.form-chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: miter; stroke-linecap: butt; }
.form-chart .line.bob { stroke: var(--bob); }
.form-chart .line.nyx { stroke: var(--nyx); }
.form-chart .line.raz { stroke: var(--raz); }
.form-chart .dot { stroke: var(--forest); stroke-width: 1.5; }
.form-chart .dot.bob { fill: var(--bob); }
.form-chart .dot.nyx { fill: var(--nyx); }
.form-chart .dot.raz { fill: var(--raz); }

/* Interactive guide */
.form-chart .form-guide {
  stroke: var(--chalk); stroke-width: 1;
  stroke-dasharray: 4 3; opacity: 0.6;
  pointer-events: none;
}
.form-chart .form-hl {
  stroke: var(--forest); stroke-width: 2.5;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.form-chart .form-hl.bob { fill: var(--bob); }
.form-chart .form-hl.nyx { fill: var(--nyx); }
.form-chart .form-hl.raz { fill: var(--raz); }
.form-chart .form-guide-label {
  fill: var(--chalk); font-family: var(--display); font-size: 11px;
  letter-spacing: 0.06em; pointer-events: none;
}
.form-chart .form-hit { cursor: pointer; }

/* Tooltip */
.form-tooltip {
  position: absolute; pointer-events: none;
  background: var(--forest-deep);
  border: 2px solid var(--pitch);
  padding: 10px 12px;
  box-shadow: var(--bevel);
  min-width: 200px;
  max-width: calc(100% - 16px);
  z-index: 10;
}
.form-tooltip .ft-head {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.06em;
  color: var(--bob); margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.form-tooltip .ft-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: baseline; gap: 10px;
  padding: 4px 0;
}
.form-tooltip .ft-name {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.04em;
}
.form-tooltip .ft-row.bob .ft-name { color: var(--bob); }
.form-tooltip .ft-row.nyx .ft-name { color: var(--nyx); }
.form-tooltip .ft-row.raz .ft-name { color: var(--raz); }
.form-tooltip .ft-cum {
  font-family: var(--score); font-size: 20px; color: var(--chalk);
  text-align: right;
}
.form-tooltip .ft-cum small {
  font-family: var(--mono); font-size: 10px; color: var(--chalk-dim);
  font-weight: 700; margin-left: 3px;
}
.form-tooltip .ft-delta {
  font-family: var(--score); font-size: 14px;
  min-width: 50px; text-align: right;
}
.form-tooltip .ft-delta.plus { color: var(--pitch); }
.form-tooltip .ft-delta.zero { color: var(--chalk-dim); opacity: 0.5; }
.form-tooltip .ft-foot {
  font-family: var(--mono); font-size: 9px; color: var(--chalk-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--line);
}

/* ─── STREAKS ─── */
.streak-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.streak-card {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 18px 18px 20px;
  box-shadow: var(--bevel);
  position: relative;
}
.streak-card.bob { border-top: 6px solid var(--bob); }
.streak-card.nyx { border-top: 6px solid var(--nyx); }
.streak-card.raz { border-top: 6px solid var(--raz); }
.streak-card .player-tag {
  display: inline-block; font-family: var(--display); font-size: 12px;
  padding: 5px 9px 3px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.streak-card.bob .player-tag { background: var(--bob); color: var(--bob-ink); }
.streak-card.nyx .player-tag { background: var(--nyx); color: var(--nyx-ink); }
.streak-card.raz .player-tag { background: var(--raz); color: var(--raz-ink); }
.streak-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.streak-row:last-child { border-bottom: none; }
.streak-row .label {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--chalk-dim);
}
.streak-row .val {
  font-family: var(--score); font-size: 28px; color: var(--chalk); line-height: 1;
}
.streak-row .val small { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); font-weight: 700; margin-left: 4px; }

/* ─── ALL-TIME LEADERBOARD ─── */
.alltime-table {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  box-shadow: var(--bevel);
}
.alltime-row {
  display: grid;
  grid-template-columns: 40px 1fr 90px 100px 80px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--line);
}
.alltime-row:last-child { border-bottom: none; }
.alltime-row.header {
  background: var(--forest-deep);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim);
  padding: 10px 18px;
  border-bottom: 2px solid var(--pitch);
}
.alltime-row.header > div { text-align: left; }
.alltime-row.header > .num-r { text-align: right; }
.alltime-row .rank {
  font-family: var(--display); font-size: 18px; color: var(--chalk-dim);
}
.alltime-row .rank.gold { color: var(--bob); }
.alltime-row .rank.silver { color: var(--chalk); }
.alltime-row .rank.bronze { color: var(--raz); }
.alltime-row .player-cell {
  display: flex; align-items: center; gap: 14px;
}
.alltime-row .player-cell .mini-jersey {
  width: 28px; height: 30px; flex-shrink: 0; position: relative;
}
.alltime-row .player-cell .mini-jersey .body {
  position: absolute; left: 4px; right: 4px; top: 6px; bottom: 0;
  background: currentColor;
  clip-path: polygon(20% 0%, 80% 0%, 80% 14%, 100% 22%, 100% 100%, 0% 100%, 0% 22%, 20% 14%);
}
.alltime-row .player-cell .mini-jersey.bob { color: var(--bob); }
.alltime-row .player-cell .mini-jersey.nyx { color: var(--nyx); }
.alltime-row .player-cell .mini-jersey.raz { color: var(--raz); }
.alltime-row .player-name {
  font-family: var(--display); font-size: 16px; color: var(--chalk);
}
.alltime-row .trophies {
  font-family: var(--mono); font-size: 12px; color: var(--bob); font-weight: 700;
  letter-spacing: 0.04em;
}
.alltime-row .trophies .empty { color: var(--chalk-dim); }
.alltime-row .num-r { text-align: right; }
.alltime-row .total-num {
  font-family: var(--score); font-size: 24px; color: var(--chalk);
}
.alltime-row .avg-num {
  font-family: var(--score); font-size: 20px; color: var(--chalk-dim);
}

/* ─── ALL-TIME RECORDS ─── */
.alltime-records { margin-top: 24px; }
.rec-section-head {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.06em;
  color: var(--chalk); margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--line-strong);
}
.rec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.rec-card {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 22px 18px 18px;
  box-shadow: var(--bevel);
  position: relative;
}
.rec-card.bob { border-top: 6px solid var(--bob); }
.rec-card.nyx { border-top: 6px solid var(--nyx); }
.rec-card.raz { border-top: 6px solid var(--raz); }
.rec-card.empty {
  text-align: center; padding: 30px;
  font-family: var(--mono); font-size: 12px; color: var(--chalk-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.rec-trophy {
  position: absolute; top: 14px; right: 14px;
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}
.rec-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 12px; padding-right: 32px;
}
.rec-label small {
  font-family: var(--mono); font-size: 10px;
  text-transform: none; letter-spacing: 0.04em;
  color: var(--chalk-dim); opacity: 0.7;
  font-weight: 400;
  margin-left: 4px;
}
.rec-big {
  font-family: var(--score); font-size: 42px; line-height: 0.95;
  color: var(--chalk); margin-bottom: 14px;
}
.rec-card.bob .rec-big { color: var(--bob); }
.rec-card.nyx .rec-big { color: var(--nyx); }
.rec-card.raz .rec-big { color: var(--raz); }
.rec-big small {
  font-family: var(--mono); font-size: 13px; color: var(--chalk-dim);
  font-weight: 700; margin-left: 4px;
}
.rec-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--chalk-mid);
  font-weight: 700; letter-spacing: 0.04em;
}
.rec-player {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.04em;
  padding: 4px 8px 2px;
}
.rec-player.bob { background: var(--bob); color: var(--bob-ink); }
.rec-player.nyx { background: var(--nyx); color: var(--nyx-ink); }
.rec-player.raz { background: var(--raz); color: var(--raz-ink); }
.rec-sep { color: var(--chalk-dim); opacity: 0.4; }
.rec-season {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--chalk-mid); letter-spacing: 0.06em;
}

@media (max-width: 760px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-big { font-size: 32px; }
}
.round-wrap {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  box-shadow: var(--bevel);
}
.round-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--forest-deep);
  border-bottom: 2px solid var(--pitch);
}
.round-header-bar span {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--chalk-dim);
}
.round-list { padding: 0; }
.round-row {
  display: grid;
  grid-template-columns: 70px repeat(3, 1fr) 110px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.round-row.head {
  background: var(--panel-2);
  padding: 10px 18px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--chalk-dim);
}
.round-row .r-num {
  font-family: var(--display); font-size: 14px; color: var(--chalk-mid);
}
.round-row .r-cell {
  font-family: var(--score); font-size: 22px;
}
.round-row .r-cell.bob.has { color: var(--bob); }
.round-row .r-cell.nyx.has { color: var(--nyx); }
.round-row .r-cell.raz.has { color: var(--raz); }
.round-row .r-cell.zero { color: var(--chalk-dim); opacity: 0.4; }
.round-row .r-comm {
  font-family: var(--mono); font-size: 12px; color: var(--chalk-mid);
  font-style: italic;
}
.round-row.head .r-cell, .round-row.head .r-comm, .round-row.head .r-winner {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--chalk-dim); font-style: normal;
}
.round-row .r-winner-chip {
  display: inline-block; padding: 5px 9px 3px;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.04em;
  text-align: center;
}
.round-row .r-winner-chip.bob { background: var(--bob); color: var(--bob-ink); }
.round-row .r-winner-chip.nyx { background: var(--nyx); color: var(--nyx-ink); }
.round-row .r-winner-chip.raz { background: var(--raz); color: var(--raz-ink); }
.round-row .r-winner-chip.tie { background: var(--chalk-dim); color: var(--forest); }
.round-row .r-winner-chip.none { background: transparent; color: var(--chalk-dim); border: 2px dashed var(--line); padding: 3px 7px 1px; }
.round-row.zero-row { opacity: 0.45; }
.round-row.outright-row {
  background: linear-gradient(90deg, rgba(63,208,232,0.10) 0%, transparent 80%);
  border-left: 3px solid var(--nyx);
}
.r-bet-tag {
  display: inline-block; font-family: var(--display); font-size: 10px;
  background: var(--nyx); color: var(--nyx-ink); padding: 3px 6px 1px;
  letter-spacing: 0.04em;
}
.form-chart .grid-line.bet-line { stroke: var(--nyx); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
.form-chart .axis-num.bet-num { fill: var(--nyx); font-family: var(--display); font-size: 9px; }

.show-more-btn {
  width: 100%; padding: 14px;
  background: var(--forest-deep); border: none;
  border-top: 2px solid var(--pitch);
  color: var(--chalk); font-family: var(--mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.show-more-btn:hover { background: var(--pitch); color: var(--forest); }

/* ─── SEASON HISTORY ─── */
.season-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.scard {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 22px;
  box-shadow: var(--bevel);
  transition: transform 0.1s;
}
.scard:hover { transform: translate(0, -2px); }
.scard.active { border-color: var(--bob); }
.scard.tour { border-left: 6px solid var(--nyx); }
.scard.tour.active { border-color: var(--bob); border-left-color: var(--nyx); }
.type-badge {
  display: inline-block;
  font-family: var(--display); font-size: 9px; letter-spacing: 0.1em;
  padding: 3px 6px 1px;
  background: var(--nyx); color: var(--nyx-ink);
  margin-left: 6px;
  vertical-align: middle;
}
.winner-badge.empty {
  background: transparent; color: var(--chalk-dim);
  border: 2px dashed var(--line-strong);
  padding: 5px 9px 3px;
}
.empty-bar {
  padding: 18px 14px;
  background: var(--forest-deep); border: 1px dashed var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--chalk-dim);
  text-align: center; letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.scard-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  text-align: right;
}
.active-pill {
  display: inline-block; font-family: var(--display); font-size: 10px;
  letter-spacing: 0.06em; padding: 5px 9px 3px;
  background: var(--bob); color: var(--bob-ink);
}
.activate-btn {
  background: transparent; border: 2px solid var(--line-strong);
  padding: 5px 11px 3px;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.06em;
  color: var(--chalk); cursor: pointer;
  transition: all 0.1s;
}
.activate-btn:hover { border-color: var(--bob); color: var(--bob); background: rgba(255,210,63,0.06); }

.type-radio {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 18px;
}
.type-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--forest-deep);
  border: 2px solid var(--line-strong);
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.type-opt:hover { border-color: var(--chalk-dim); }
.type-opt input { accent-color: var(--bob); width: 16px; height: 16px; flex-shrink: 0; }
.type-opt input:checked + .type-label { color: var(--bob); }
.type-opt:has(input:checked) { border-color: var(--bob); background: rgba(255,210,63,0.05); }
.type-label {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.04em;
  color: var(--chalk); line-height: 1.2;
}
.type-label small {
  display: block; font-family: var(--mono); font-size: 10px;
  color: var(--chalk-dim); margin-top: 4px; letter-spacing: 0.04em;
  font-weight: 700;
}
.scard-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.scard-season {
  font-family: var(--display); font-size: 22px; color: var(--chalk); letter-spacing: 0.04em;
}
.scard-season small { display: block; font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px; }
.winner-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 4px;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.04em;
}
.winner-badge.bob { background: var(--bob); color: var(--bob-ink); }
.winner-badge.nyx { background: var(--nyx); color: var(--nyx-ink); }
.winner-badge.raz { background: var(--raz); color: var(--raz-ink); }

.bar-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-row .b-name {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.04em;
}
.bar-row.bob .b-name { color: var(--bob); }
.bar-row.nyx .b-name { color: var(--nyx); }
.bar-row.raz .b-name { color: var(--raz); }
.bar-track {
  height: 12px; background: var(--forest-deep);
  border: 1px solid var(--line);
  position: relative;
}
.bar-fill {
  height: 100%; transition: width 0.6s steps(20);
  position: relative;
}
.bar-fill.bob { background: var(--bob); }
.bar-fill.nyx { background: var(--nyx); }
.bar-fill.raz { background: var(--raz); }
.bar-val {
  font-family: var(--score); font-size: 18px; color: var(--chalk);
  min-width: 72px; text-align: right;
}

/* ─── ADMIN ─── */
.login-card {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 32px;
  max-width: 420px; margin: 0 auto;
  box-shadow: var(--bevel-strong);
}
.login-icon {
  width: 48px; height: 48px; background: var(--bob); color: var(--bob-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-family: var(--display); font-size: 22px;
  border: 2px solid var(--forest);
  box-shadow: var(--bevel);
}
.login-title {
  font-family: var(--display); font-size: 22px; color: var(--chalk); margin-bottom: 4px;
}
.login-sub {
  font-family: var(--mono); font-size: 12px; color: var(--chalk-dim);
  margin-bottom: 24px;
}
.field-label {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 6px; margin-top: 16px;
}
input[type="password"], input[type="number"], input[type="text"], select {
  width: 100%;
  background: var(--forest-deep);
  border: 2px solid var(--line-strong);
  padding: 11px 14px 9px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--chalk);
  outline: none;
  transition: border-color 0.1s, background 0.1s;
}
input:focus, select:focus {
  border-color: var(--bob);
  background: var(--forest);
}
input::placeholder { color: var(--chalk-dim); opacity: 0.5; }

.btn-primary {
  background: var(--bob); color: var(--bob-ink);
  border: 2px solid var(--forest);
  padding: 12px 22px 10px;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.04em;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
  box-shadow: var(--bevel);
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn-primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 0 rgba(0,0,0,0.45); }
.btn-primary:active { transform: translateY(4px); box-shadow: none; }

.btn-outline {
  background: transparent; border: 2px solid var(--line-strong);
  padding: 8px 14px 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--chalk); cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.btn-outline:hover { border-color: var(--bob); background: rgba(255,210,63,0.05); }

.error-msg { color: var(--raz); font-family: var(--mono); font-size: 11px; font-weight: 700; margin-top: 10px; letter-spacing: 0.08em; text-transform: uppercase; display: none; }
.success-msg { color: var(--bob); font-family: var(--mono); font-size: 11px; font-weight: 700; margin-top: 10px; letter-spacing: 0.08em; text-transform: uppercase; display: none; }

.pw-hint {
  margin-top: 22px; padding: 14px;
  background: var(--forest-deep); border: 1px dashed var(--line-strong);
}
.pw-hint strong {
  display: block; font-family: var(--mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chalk); margin-bottom: 6px;
}
.pw-hint p { font-family: var(--mono); font-size: 12px; color: var(--chalk-dim); }
code {
  background: var(--bob); color: var(--bob-ink);
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  padding: 1px 6px;
}

.admin-tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn {
  padding: 9px 16px 7px;
  background: var(--panel); border: 2px solid var(--line-strong);
  font-family: var(--display); font-size: 11px; letter-spacing: 0.04em;
  color: var(--chalk-mid); cursor: pointer;
  transition: all 0.1s;
}
.tab-btn:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.tab-btn.active { background: var(--bob); color: var(--bob-ink); border-color: var(--forest); box-shadow: var(--bevel); }
.tab-page { display: none; }
.tab-page.active { display: block; }
.form-card {
  background: var(--panel); border: 2px solid var(--line-strong);
  padding: 22px; margin-bottom: 18px;
  box-shadow: var(--bevel);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.admin-table {
  background: var(--panel); border: 2px solid var(--line-strong);
  box-shadow: var(--bevel);
}
.admin-table-row {
  display: grid; grid-template-columns: 70px 70px repeat(3, 1fr) 40px;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
}
.admin-table-row:last-child { border-bottom: none; }
.admin-table-row.head {
  background: var(--forest-deep);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chalk-dim); font-size: 10px;
  border-bottom: 2px solid var(--pitch);
}
.admin-table-row .a-cell { font-family: var(--score); font-size: 18px; }
.admin-table-row .a-cell.bob.has { color: var(--bob); }
.admin-table-row .a-cell.nyx.has { color: var(--nyx); }
.admin-table-row .a-cell.raz.has { color: var(--raz); }
.admin-table-row .a-cell.zero { color: var(--chalk-dim); opacity: 0.4; }
.admin-table-row.edit-row {
  grid-template-columns: 56px repeat(3, minmax(0, 1fr)) 90px;
}
.edit-inp {
  width: 100%; background: var(--forest-deep);
  border: 1.5px solid var(--line-strong);
  padding: 7px 8px 6px; font-family: var(--score); font-size: 17px;
  color: var(--chalk); text-align: right; outline: none;
  border-radius: 0;
}
.edit-inp:focus { border-color: var(--pitch); }
.edit-inp.bob:focus { border-color: var(--bob); }
.edit-inp.nyx:focus { border-color: var(--nyx); }
.edit-inp.raz:focus { border-color: var(--raz); }
.save-row-btn {
  background: var(--pitch); border: 1px solid var(--pitch);
  color: #fff; padding: 4px 9px 3px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  white-space: nowrap; transition: background 0.1s;
}
.save-row-btn:hover { background: var(--pitch-2, #2f7d3a); filter: brightness(1.1); }
.save-row-btn.saved { background: var(--pitch); font-size: 10px; letter-spacing: 0.06em; }
.delete-btn {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--chalk-dim); padding: 4px 8px 2px;
  font-family: var(--display); font-size: 12px;
  cursor: pointer;
  transition: all 0.1s;
}
.delete-btn:hover { color: var(--raz); border-color: var(--raz); background: rgba(255,91,78,0.08); }

.s-chip {
  padding: 7px 14px 5px;
  background: var(--panel); border: 2px solid var(--line-strong);
  font-family: var(--display); font-size: 11px; letter-spacing: 0.04em;
  color: var(--chalk-mid); cursor: pointer;
  transition: all 0.1s;
}
.s-chip:hover { color: var(--chalk); }
.s-chip.active { background: var(--chalk); color: var(--forest); border-color: var(--forest); }

/* SCAN */
#drop-zone {
  border: 2px dashed var(--line-strong);
  padding: 32px 16px;
  text-align: center; cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
  min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  background: var(--forest-deep);
}
#drop-zone:hover, #drop-zone.dz-over {
  border-color: var(--bob); background: rgba(255,210,63,0.04);
}
#drop-zone.has-image { padding: 8px; border-style: solid; border-color: var(--bob); }
.dz-icon {
  width: 48px; height: 48px; background: var(--panel); border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-family: var(--display); font-size: 18px; color: var(--chalk-mid);
}
.scan-spinner {
  width: 56px; height: 56px;
  background: var(--bob);
  margin: 0 auto;
  animation: bounce 0.6s steps(2) infinite alternate;
}
@keyframes bounce {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(8deg); }
}

.match-row {
  background: var(--forest-deep); border: 2px solid var(--line);
  padding: 12px 14px;
  font-family: var(--mono);
}
.match-row .teams { font-weight: 700; color: var(--chalk); margin-bottom: 4px; font-size: 13px; }
.match-row .details { color: var(--chalk-dim); font-size: 11px; }
.match-row .details strong { color: var(--chalk); }
.match-row .outcome-win { color: var(--bob); font-weight: 700; }
.match-row .outcome-loss { color: var(--raz); font-weight: 700; }
.match-row .outcome-open { color: var(--nyx); font-weight: 700; }

.info-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--forest-deep); border: 2px solid var(--line);
  padding: 6px 10px 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--chalk-dim); margin: 0 6px 6px 0;
}
.info-pill strong { color: var(--chalk); }

/* ─── FOOTER ─── */
footer {
  background: var(--forest-deep);
  border-top: 2px solid var(--pitch);
  padding: 36px 24px;
  text-align: center;
  margin-top: 48px;
}
.footer-logo {
  font-family: var(--display); font-size: 22px; color: var(--chalk);
  letter-spacing: 0.06em; margin-bottom: 8px;
}
.footer-logo .y { color: var(--bob); }
.footer-logo .c { color: var(--nyx); }
.footer-logo .r { color: var(--raz); }
.footer-tags {
  display: flex; gap: 16px; justify-content: center; margin: 18px 0;
  flex-wrap: wrap;
}
.footer-tag {
  font-family: var(--score); font-size: 18px; color: var(--chalk);
  display: flex; align-items: center; gap: 8px;
}
.footer-tag .swatch { width: 12px; height: 12px; border: 2px solid var(--forest); }
.footer-tag .swatch.bob { background: var(--bob); }
.footer-tag .swatch.nyx { background: var(--nyx); }
.footer-tag .swatch.raz { background: var(--raz); }
.footer-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--chalk-dim);
}

/* ─── DIVIDER ─── */
.divider {
  height: 2px; background:
    repeating-linear-gradient(90deg,
      var(--pitch) 0px, var(--pitch) 12px,
      transparent 12px, transparent 24px);
  margin: 0 24px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── KUPON-RAPPORT ─── */
.kupon-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 20px;
}
.kupon-stat-row.five { grid-template-columns: repeat(5, 1fr); }
.ks-item {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 16px 18px 18px;
  box-shadow: var(--bevel);
  position: relative;
}
.ks-item.glow { border-color: var(--bob); }
.ks-item.win {
  border-color: var(--pitch);
  background: linear-gradient(180deg, rgba(47,138,58,0.15) 0%, var(--panel) 60%);
}
.ks-item .label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 8px;
}
.ks-item .value {
  font-family: var(--score); font-size: 36px; color: var(--chalk); line-height: 0.9;
}
.ks-item.glow .value { color: var(--bob); }
.ks-item.win .value { color: var(--pitch); }
.ks-item .value small {
  font-family: var(--mono); font-size: 12px; color: var(--chalk-dim);
  font-weight: 700; margin-left: 4px;
}
.ks-item .sub {
  font-family: var(--mono); font-size: 10px; color: var(--chalk-dim);
  margin-top: 6px; letter-spacing: 0.06em;
}

.kupon-highlights {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
.hcard {
  background: var(--panel);
  border: 2px solid var(--line-strong);
  padding: 18px;
  box-shadow: var(--bevel);
  position: relative;
}
.hcard.accent-y { border-top: 6px solid var(--bob); }
.hcard.accent-c { border-top: 6px solid var(--nyx); }
.hcard.accent-r { border-top: 6px solid var(--raz); }
.hcard.win {
  border-top: 6px solid var(--pitch);
  background: linear-gradient(180deg, rgba(47,138,58,0.18) 0%, var(--panel) 50%);
}
.hcard.win .hcard-big { color: var(--pitch); text-shadow: 0 0 8px rgba(47,138,58,0.4); }
.hcard.win .hcard-label { color: var(--pitch); }
.hcard.miss { opacity: 0.85; }
.hcard.miss .hcard-big { color: var(--chalk-mid); }
.hcard-label {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.06em;
  color: var(--chalk-dim); margin-bottom: 10px;
}
.hcard.accent-y .hcard-label { color: var(--bob); }
.hcard.accent-c .hcard-label { color: var(--nyx); }
.hcard.accent-r .hcard-label { color: var(--raz); }
.hcard-big {
  font-family: var(--score); font-size: 38px; color: var(--chalk);
  line-height: 0.95; margin-bottom: 8px;
}
.hcard-big small { font-family: var(--mono); font-size: 12px; color: var(--chalk-dim); font-weight: 700; margin-left: 4px; }
.hcard-sub {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--chalk); margin-bottom: 6px;
}
.hcard-meta {
  font-family: var(--mono); font-size: 10px; color: var(--chalk-dim);
  letter-spacing: 0.04em; line-height: 1.4;
}

.kupon-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px;
}
.kupon-panel {
  background: var(--panel); border: 2px solid var(--line-strong);
  padding: 18px; box-shadow: var(--bevel);
}
.kupon-panel-head {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.04em;
  color: var(--chalk); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}

.kupon-bar-row {
  display: grid; grid-template-columns: 130px 1fr 36px;
  align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.kupon-bar-row:last-child { border-bottom: none; }
.kbr-name {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--chalk); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kbr-track {
  height: 10px; background: var(--forest-deep);
  border: 1px solid var(--line);
}
.kbr-fill {
  height: 100%;
  transition: width 0.6s steps(20);
}
.kbr-fill.y { background: var(--bob); }
.kbr-fill.c { background: var(--nyx); }
.kbr-fill.r { background: var(--raz); }
.kbr-val {
  font-family: var(--score); font-size: 18px; color: var(--chalk);
  text-align: right;
}

.ksidegrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.ksside-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 10px;
}
.time-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--forest-deep); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--chalk);
  margin-bottom: 6px;
}
.time-pill strong { margin-left: auto; font-family: var(--score); font-size: 18px; color: var(--bob); }
.time-pill small { font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); }

.profile-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; color: var(--chalk);
  margin-bottom: 4px;
}
.profile-line strong { font-family: var(--score); font-size: 18px; color: var(--bob); }
.profile-bar {
  height: 8px; background: var(--forest-deep);
  border: 1px solid var(--line);
  margin-bottom: 4px;
}
.profile-fill {
  height: 100%;
  transition: width 0.6s steps(20);
}
.profile-fill.y { background: var(--bob); }
.profile-fill.r { background: var(--raz); }
.profile-fill.c { background: var(--nyx); }
.profile-meta {
  font-family: var(--mono); font-size: 10px; color: var(--chalk-dim);
  letter-spacing: 0.04em;
}

.kupon-list-head {
  display: grid; grid-template-columns: 80px 1fr 64px 70px 90px 80px;
  align-items: center; gap: 12px;
  padding: 8px 0 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--chalk-dim);
  border-bottom: 1px solid var(--line);
}
.kupon-row {
  display: grid; grid-template-columns: 80px 1fr 64px 70px 90px 80px;
  align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
}
.kupon-row.won { background: linear-gradient(90deg, rgba(47,138,58,0.10) 0%, transparent 80%); padding-left: 12px; margin-left: -12px; border-left: 3px solid var(--pitch); }
.kupon-row.lost { opacity: 0.6; }
.kupon-row:last-child { border-bottom: none; }
.kr-date {
  font-family: var(--display); font-size: 11px; color: var(--chalk-mid);
  line-height: 1.3;
}
.kr-date small { display: block; font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); margin-top: 2px; }
.kr-match { min-width: 0; }
.kr-teams {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--chalk); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kr-pick {
  font-family: var(--mono); font-size: 11px; color: var(--chalk-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kr-league { color: var(--chalk-dim); }
.kr-mkt {
  display: inline-block; font-family: var(--display); font-size: 8px;
  letter-spacing: 0.04em; padding: 3px 6px 1px; margin-right: 6px;
  vertical-align: middle;
}
.kr-mkt.winner { background: var(--bob); color: var(--bob-ink); }
.kr-mkt.scorer { background: var(--raz); color: #fff; }
.kr-mkt.combo { background: var(--nyx); color: var(--nyx-ink); }
.kr-mkt.other { background: var(--chalk-dim); color: var(--forest); }
.kr-live {
  display: inline-block; font-family: var(--display); font-size: 9px;
  background: var(--raz); color: var(--chalk); padding: 2px 6px;
  letter-spacing: 0.06em; margin-left: 4px; vertical-align: middle;
}
.kr-combo {
  display: inline-block; font-family: var(--display); font-size: 9px;
  background: var(--bob); color: var(--bob-ink); padding: 2px 6px;
  letter-spacing: 0.06em; margin-left: 4px; vertical-align: middle;
}
.kr-odds { font-family: var(--score); font-size: 22px; color: var(--bob); text-align: right; }
.kr-stake {
  font-family: var(--score); font-size: 18px; color: var(--chalk); text-align: right;
}
.kr-stake small { font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); margin-left: 2px; }
.kr-payout {
  font-family: var(--score); font-size: 20px; color: var(--chalk); text-align: right;
}
.kr-payout small { font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); margin-left: 2px; }

.kr-status {
  display: inline-block; font-family: var(--display); font-size: 10px;
  letter-spacing: 0.04em; padding: 4px 8px 2px;
  text-align: center;
}
.kr-status.won { background: var(--pitch); color: var(--chalk); }
.kr-status.lost { background: transparent; color: var(--chalk-dim); border: 2px dashed var(--line); padding: 2px 6px 0; }
.kr-status.pending { background: var(--bob); color: var(--bob-ink); }
.kr-status.arch { background: transparent; color: var(--chalk-dim); border: 2px solid var(--line); padding: 2px 6px 0; }
.kupon-row.pending { background: linear-gradient(90deg, rgba(255,210,63,0.08) 0%, transparent 80%); border-left: 3px solid var(--bob); padding-left: 12px; margin-left: -12px; }
.kupon-row.arch { opacity: 0.7; }

.booking-preview {
  margin: 18px 0 4px;
  padding: 14px 16px;
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  border: 2px solid var(--line-strong);
  background: var(--forest-deep);
  color: var(--chalk);
}
.booking-preview strong { color: var(--chalk); }
.booking-preview.book { border-color: var(--pitch); background: rgba(47,138,58,0.12); }
.booking-preview.book strong { color: var(--pitch); }
.booking-preview.lost { border-color: var(--raz); }
.booking-preview.wait { border-style: dashed; color: var(--chalk-dim); }
.booking-preview .bp-note { color: var(--chalk-dim); font-size: 11px; display: block; margin-top: 4px; }

.kupon-empty {
  text-align: center; padding: 48px 24px;
  border: 2px dashed var(--line-strong); background: var(--panel);
}
.kupon-empty-icon { font-size: 40px; margin-bottom: 14px; }
.kupon-empty-title { font-family: var(--display); font-size: 16px; color: var(--chalk); margin-bottom: 8px; }
.kupon-empty-sub { font-family: var(--mono); font-size: 12px; color: var(--chalk-dim); }
.kupon-mini-empty {
  font-family: var(--mono); font-size: 11px; color: var(--chalk-dim);
  padding: 16px 4px; text-align: center; letter-spacing: 0.04em;
}

/* ─── SCAN: budget-bar ─── */
.scan-budget {
  margin: 16px 0 4px; padding: 14px 16px;
  background: var(--forest-deep); border: 2px solid var(--line-strong);
}
.scan-budget .sb-head {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim);
  margin-bottom: 12px;
}
.sb-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.sb-row:last-child { margin-bottom: 0; }
.sb-row.active .sb-val { color: var(--chalk); }
.sb-name { font-family: var(--display); font-size: 12px; }
.sb-name.bob { color: var(--bob); } .sb-name.nyx { color: var(--nyx); } .sb-name.raz { color: var(--raz); }
.sb-track { height: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.sb-fill { height: 100%; }
.sb-fill.bob { background: var(--bob); } .sb-fill.nyx { background: var(--nyx); } .sb-fill.raz { background: var(--raz); }
.sb-fill.over { background: var(--raz); }
.sb-val { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); white-space: nowrap; }
.sb-val.over { color: var(--raz); font-weight: 700; }

/* ─── RUNDE-FYLD (300 kr. pr. runde) ─── */
.round-fill { margin-top: 8px; }
.rf-bar { height: 6px; background: var(--forest-deep); border: 1px solid var(--line); }
.rf-fill { height: 100%; background: var(--nyx); transition: width 0.2s; }
.rf-fill.full { background: var(--pitch); }
.rf-txt { font-family: var(--mono); font-size: 10px; color: var(--chalk-dim); margin-top: 4px; letter-spacing: 0.04em; }
.rf-txt strong { color: var(--chalk); }

/* ─── SCANNINGER-LISTE ─── */
.scanlist { background: var(--panel); border: 2px solid var(--line-strong); box-shadow: var(--bevel); }
.scanlist-row {
  display: grid; grid-template-columns: 72px 64px 56px 1fr 64px 64px 92px 36px;
  align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px;
}
.scanlist-row:last-child { border-bottom: none; }
.scanlist-row.head {
  background: var(--forest-deep); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-dim);
  border-bottom: 2px solid var(--pitch);
}
.sl-date { font-family: var(--display); font-size: 11px; color: var(--chalk-mid); line-height: 1.3; }
.sl-date small { display: block; font-family: var(--mono); font-size: 9px; color: var(--chalk-dim); margin-top: 2px; }
.sl-pool { font-size: 11px; color: var(--chalk); }
.sl-player { font-family: var(--display); font-size: 11px; padding: 3px 7px 1px; }
.sl-player.bob { background: var(--bob); color: var(--bob-ink); }
.sl-player.nyx { background: var(--nyx); color: var(--nyx-ink); }
.sl-player.raz { background: var(--raz); color: var(--raz-ink); }
.sl-match { min-width: 0; }
.sl-teams { color: var(--chalk); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-place { color: var(--chalk-dim); font-size: 10px; margin-top: 2px; }
.sl-num { font-family: var(--score); font-size: 16px; color: var(--chalk); text-align: right; }

/* Klikbar status-segment i scanlisten */
.settle-group { display: inline-flex; border: 2px solid var(--line-strong); }
.settle-btn {
  font-family: var(--display); font-size: 11px; line-height: 1;
  padding: 6px 9px 4px; background: transparent; color: var(--chalk-dim);
  border: none; border-right: 2px solid var(--line-strong); cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.settle-btn:last-child { border-right: none; }
.settle-btn:hover { color: var(--chalk); background: rgba(243,239,226,0.06); }
.settle-btn.on.won { background: var(--pitch); color: var(--chalk); }
.settle-btn.on.pend { background: var(--bob); color: var(--bob-ink); }
.settle-btn.on.lost { background: var(--raz); color: var(--chalk); }

/* ─── OUTRIGHT-PANEL ─── */
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ob-card { background: var(--panel); border: 2px solid var(--line-strong); padding: 18px; box-shadow: var(--bevel); }
.ob-card.bob { border-top: 6px solid var(--bob); }
.ob-card.nyx { border-top: 6px solid var(--nyx); }
.ob-card.raz { border-top: 6px solid var(--raz); }
.ob-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.ob-name { font-family: var(--display); font-size: 18px; }
.ob-name.bob { color: var(--bob); } .ob-name.nyx { color: var(--nyx); } .ob-name.raz { color: var(--raz); }
.ob-won { font-family: var(--score); font-size: 22px; color: var(--pitch); }
.ob-budget-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); margin-bottom: 6px; }
.ob-track { height: 12px; background: var(--forest-deep); border: 1px solid var(--line); }
.ob-fill { height: 100%; }
.ob-fill.bob { background: var(--bob); } .ob-fill.nyx { background: var(--nyx); } .ob-fill.raz { background: var(--raz); }
.ob-fill.over { background: var(--raz); }
.ob-budget-val { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); margin-top: 6px; }
.ob-budget-val.over { color: var(--raz); font-weight: 700; }
.ob-bets { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.ob-bet { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ob-bet-main { font-family: var(--mono); font-size: 12px; color: var(--chalk); min-width: 0; }
.ob-bet-pick { color: var(--chalk-dim); font-size: 11px; }
.ob-bet-num { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); white-space: nowrap; }
.ob-st { font-weight: 700; }
.ob-st.won { color: var(--pitch); } .ob-st.lost { color: var(--raz); } .ob-st.pend { color: var(--bob); }
.ob-empty { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); }

@media (max-width: 760px) {
  .ob-grid { grid-template-columns: 1fr; }
  /* Scanninger: stak rækken i 3 linjer så ALLE knapper er tilgængelige */
  .scanlist-row {
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas:
      "dato spiller ind udb slet"
      "kamp kamp kamp kamp kamp"
      "status status status status status";
    gap: 8px 10px; padding: 12px;
  }
  .scanlist-row > :nth-child(1) { grid-area: dato; }
  .scanlist-row > :nth-child(2) { display: none; }               /* pulje */
  .scanlist-row > :nth-child(3) { grid-area: spiller; }
  .scanlist-row > :nth-child(4) { grid-area: kamp; min-width: 0; }
  .scanlist-row > :nth-child(5) { grid-area: ind; text-align: right; }
  .scanlist-row > :nth-child(5)::before {
    content: "Indsats "; font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--chalk-dim); font-weight: 700;
  }
  .scanlist-row > :nth-child(6) { grid-area: udb; text-align: right; color: var(--bob); }
  .scanlist-row > :nth-child(6)::before {
    content: "Udb. "; font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--chalk-dim); font-weight: 700;
  }
  .scanlist-row > :nth-child(7) { grid-area: status; }
  .scanlist-row > :nth-child(8) { grid-area: slet; }
  .scanlist-row.head { display: none; }
  .scanlist-row .settle-group { display: flex; gap: 8px; width: 100%; }
  .scanlist-row .settle-btn { flex: 1; min-height: 40px; font-size: 14px; }
  .scanlist-row .delete-btn { min-width: 40px; min-height: 40px; font-size: 15px; }
}

.kupon-meta-bar {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--forest-deep);
  border: 1px dashed var(--line-strong);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--chalk-dim);
  text-align: center;
}

@media (max-width: 760px) {
  .kupon-stat-row, .kupon-stat-row.five { grid-template-columns: 1fr 1fr; }
  .kupon-highlights { grid-template-columns: 1fr; }
  .kupon-grid-2 { grid-template-columns: 1fr; }
  .ksidegrid { grid-template-columns: 1fr; }
  .kupon-bar-row { grid-template-columns: 100px 1fr 32px; gap: 8px; }
  .kupon-list-head, .kupon-row { grid-template-columns: 60px 1fr 56px 70px; gap: 8px; }
  .kupon-list-head > :nth-child(5), .kupon-row > :nth-child(5),
  .kupon-list-head > :nth-child(4), .kupon-row > :nth-child(4) { display: none; }
  .ks-item .value { font-size: 28px; }
  .hcard-big { font-size: 30px; }
}
@media (max-width: 760px) {
  .scoreboard-nav { flex-direction: column; }
  .scoreboard-nav .brand { border-right: none; border-bottom: 2px solid var(--line); }
  .scoreboard-nav .links { justify-content: space-around; flex-wrap: wrap; }
  .scoreboard-nav .links a {
    padding: 10px 4px;
    flex: 1 1 25%;
    min-width: 0;
    justify-content: center;
    font-size: 9px;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line);
  }
  .hero { padding: 36px 16px; }
  .hero-title { text-shadow: 0 2px 0 var(--pitch-dark), 0 4px 0 var(--forest-deep); }
  .hero-tag { font-size: 9px; padding: 6px 10px 5px; }
  .podium { grid-template-columns: 1fr; gap: 10px; }
  .pcard.first { padding-top: 32px; }
  .pcard.first .pcard-score { font-size: 44px; }
  .pcard { padding: 18px 12px 14px; }
  .pcard-score { font-size: 36px; }
  .stat-strip, .stat-strip.four { grid-template-columns: 1fr 1fr; }
  .stat-strip .item { border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); padding: 14px 12px; }
  .stat-strip .item:nth-child(even) { border-right: none; }
  .stat-strip .item:nth-last-child(-n+2) { border-bottom: none; }
  .stat-strip.four .value { font-size: 20px; }
  .stat-strip.four .label { font-size: 9px; letter-spacing: 0.14em; }
  .stat-strip .value .idx-badge { display: block; margin-left: 0; margin-top: 6px; width: max-content; font-size: 10px; }
  .streak-grid { grid-template-columns: 1fr; }
  .alltime-row { grid-template-columns: 30px 1fr 80px; gap: 8px; padding: 12px; }
  .alltime-row .trophies, .alltime-row .avg-num, .alltime-row.header .trophies-col, .alltime-row.header .avg-col { display: none; }
  .round-row { grid-template-columns: 38px repeat(3, minmax(0, 1fr)) 60px; gap: 4px; padding: 10px 8px; }
  .round-row .r-cell { font-size: 14px; }
  .round-row .r-num { font-size: 11px; }
  .round-row .r-winner-chip { font-size: 9px; padding: 4px 5px 2px; }
  .round-row .r-winner-chip.tie { font-size: 8px; }
  .round-header-bar { padding: 10px 12px; }
  .round-header-bar span { font-size: 9px; letter-spacing: 0.1em; }
  .season-grid { grid-template-columns: 1fr; }
  section.block { padding: 40px 16px; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .admin-table-row { grid-template-columns: 50px 50px repeat(3, minmax(0, 1fr)) 30px; gap: 6px; padding: 10px 8px; font-size: 11px; }
  .admin-table-row.edit-row { grid-template-columns: 40px repeat(3, minmax(0, 1fr)) 74px; gap: 5px; }
  .edit-inp { font-size: 14px; padding: 6px 5px 5px; }
  .admin-tabs .tab-btn { padding: 8px 10px 6px; font-size: 10px; }
  .form-tooltip { min-width: 0; max-width: calc(100vw - 32px); font-size: 11px; }
  .form-tooltip .ft-row { grid-template-columns: 32px 1fr auto; gap: 6px; }
  .form-tooltip .ft-cum { font-size: 16px; }
  .scard-top { flex-wrap: wrap; }
  .scard-season { font-size: 18px; }
  .login-card { padding: 24px 18px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .section-head .meta { font-size: 10px; }
}

@media (max-width: 460px) {
  .scoreboard-nav .links a { flex: 1 1 33%; font-size: 8px; padding: 9px 2px; letter-spacing: 0.04em; }
  .alltime-row { grid-template-columns: 24px 1fr 70px; gap: 6px; padding: 10px; }
  .alltime-row .player-name { font-size: 13px; }
  .stat-strip.four .value { font-size: 18px; }
  .stat-strip.four .label { font-size: 8px; }
  .round-row { grid-template-columns: 30px repeat(3, minmax(0, 1fr)) 48px; gap: 3px; padding: 8px 6px; }
  .round-row .r-cell { font-size: 12px; }
  .round-row .r-num { font-size: 10px; }
  .round-row .r-winner-chip { font-size: 8px; padding: 3px 4px 1px; }
  .admin-table-row { grid-template-columns: 36px 36px repeat(3, minmax(0, 1fr)) 24px; gap: 4px; font-size: 10px; padding: 8px 6px; }
  .admin-table-row.edit-row { grid-template-columns: 32px repeat(3, minmax(0, 1fr)) 64px; gap: 4px; }
  .edit-inp { font-size: 13px; padding: 5px 3px 4px; }
  .admin-table-row .a-cell { font-size: 13px; }
}

/* ─── SYNC TOAST ─── */
#sync-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 80px);
  background: var(--forest-deep); color: var(--chalk);
  border: 2px solid var(--pitch);
  padding: 11px 18px 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: var(--bevel-strong);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.25s steps(6), opacity 0.25s;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
#sync-toast.show { transform: translate(-50%, 0); opacity: 1; }
#sync-toast.err { border-color: var(--raz); color: var(--raz); }

/* ─── KARANTÆNE ─── */
.q-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--raz);
  padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--bevel);
}
.q-lock { font-size: 26px; text-align: center; }
.q-title { font-family: var(--display); font-size: 15px; color: var(--chalk); }
.q-sub { font-family: var(--mono); font-size: 12px; color: var(--chalk-mid); margin-top: 5px; }
.q-name { font-family: var(--display); font-weight: 700; }
.q-name.bob { color: var(--bob); } .q-name.nyx { color: var(--nyx); } .q-name.raz { color: var(--raz); }
.q-standin { text-align: right; }
.q-standin-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-dim); }
.q-standin-name { font-family: var(--display); font-size: 18px; margin-top: 3px; }
.q-standin-name.bob { color: var(--bob); } .q-standin-name.nyx { color: var(--nyx); } .q-standin-name.raz { color: var(--raz); }
.q-rule { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); margin-top: 10px; letter-spacing: 0.03em; }

.pcard.quarantined { border-color: var(--raz); }
.pcard .q-chip {
  position: absolute; top: -2px; right: -2px;
  background: var(--raz); color: #fff;
  font-family: var(--display); font-size: 9px; letter-spacing: 0.04em;
  padding: 5px 8px 3px; font-weight: 700;
}
.pcard .q-chip.cover { background: var(--pitch); }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--forest); }
::-webkit-scrollbar-thumb { background: var(--pitch); border: 2px solid var(--forest); }
::-webkit-scrollbar-thumb:hover { background: var(--bob); }

/* Selection */
::selection { background: var(--bob); color: var(--bob-ink); }

/* CRT scanline overlay (hero only) */
.hero .scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════
   CHAMPIONSHIP MANAGER 01/02 THEME (dark navy · red banner · gold)
   ═══════════════════════════════════════════════════════ */

.hero .scanlines { display: none; }
.hero-title { text-shadow: none !important; }
::selection { background: var(--bob); color: var(--bob-ink); }

/* NAV → red CM banner */
.scoreboard-nav { background: var(--red); border-bottom: 2px solid var(--red-dark); box-shadow: 0 2px 5px rgba(0,0,0,0.45); }
.scoreboard-nav .brand { border-right: 1px solid rgba(255,255,255,0.28); }
.scoreboard-nav .brand-text { color: #fff; font-weight: 700; }
.scoreboard-nav .brand .puck { border-color: #fff; background: rgba(255,255,255,0.16); }
.scoreboard-nav .brand .puck::before, .scoreboard-nav .brand .puck::after { background: #fff; }
.scoreboard-nav .links a { color: #ffdcdc; border-left: 1px solid rgba(255,255,255,0.22); }
.scoreboard-nav .links a:hover { background: rgba(0,0,0,0.20); color: #fff; }

/* HERO → dark navy stadium */
.hero {
  background: radial-gradient(ellipse 90% 75% at 50% 0%, #27337e 0%, var(--forest) 72%);
  border-bottom: 2px solid var(--red);
  padding: 40px 24px;
}
.hero::before { border-color: rgba(255,255,255,0.10); }
.hero::after { background: rgba(255,255,255,0.14); }
.hero-title { color: #fff; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(28px, 5.5vw, 54px); }
.hero-title .y { color: var(--bob); }
.hero-title .c { color: var(--nyx); }
.hero-title .r { color: var(--raz); }
.hero-tag { background: var(--red); border: 1px solid var(--red-dark); color: #fff; font-weight: 700; }

/* SECTION HEADERS → red underline, gold accent */
.section-head { border-bottom: 2px solid var(--red); }
.section-head h2 { color: #fff; font-weight: 700; letter-spacing: 0; }
.section-head h2 em { color: var(--bob); }
.rec-section-head { color: #fff; font-weight: 700; border-bottom-color: var(--red); }

/* COLUMN-HEADER BANDS → navy w/ pale caps (CM tables) */
.round-header-bar, .round-row.head, .alltime-row.header,
.admin-table-row.head, .scanlist-row.head {
  background: var(--navy); border-bottom: 1px solid #10173a;
}
.round-header-bar span,
.round-row.head > *, .round-row.head .r-cell, .round-row.head .r-comm, .round-row.head .r-winner,
.alltime-row.header > *, .admin-table-row.head > *, .scanlist-row.head > * {
  color: #c9d1f0 !important;
}
.stat-strip { border-color: var(--red); background: var(--panel); }
.stat-strip .item { border-right-color: var(--line); }

/* Hairline borders instead of chunky pixel frames */
.pcard, .form-chart-wrap, .streak-card, .alltime-table, .rec-card, .round-wrap,
.scard, .form-card, .admin-table, .ks-item, .hcard, .kupon-panel, .scanlist,
.ob-card, .login-card { border-width: 1px; }

/* Subtle dark zebra striping */
.round-row:not(.head):nth-child(even),
.alltime-row:not(.header):nth-child(even),
.scanlist-row:not(.head):nth-child(even),
.kupon-row:nth-child(even) { background: rgba(255,255,255,0.035); }

/* CM gold stat values */
.pcard-score, .stat-strip .value, .streak-row .val, .rec-big, .ob-won,
.alltime-row .total-num, .ks-item .value, .hcard-big, .kr-odds,
.form-chart-legend .total { color: var(--bob); }

/* Bold Tahoma for display/label spots */
.hero-title, .section-head h2, .footer-logo, .pcard-name, .scard-season, .ob-name,
.login-title, .kupon-panel-head, .tab-btn, .btn-primary, .btn-outline, .settle-btn,
.winner-badge, .type-label, .streak-card .player-tag, .round-row .r-winner-chip,
.sl-player, .rec-player, .kr-mkt, .kr-live, .kr-combo, .type-badge, .r-bet-tag,
.active-pill, .hero-tag, .rank-flag, .trophy, .mono-cap, .ksside-label,
.form-chart-legend .item, .round-header-bar span, .alltime-row .player-name,
.alltime-row .rank, .brand-text, .field-label, .kupon-empty-title, .s-chip {
  font-weight: 700;
}
/* Bold Tahoma numbers */
.pcard-score, .stat-strip .value, .streak-row .val, .form-chart-legend .total,
.rec-big, .kr-odds, .kr-stake, .kr-payout, .ob-won, .bar-val, .alltime-row .total-num,
.alltime-row .avg-num, .ks-item .value, .hcard-big, .sl-num, .edit-inp,
.form-tooltip .ft-cum, .form-tooltip .ft-delta, .time-pill strong, .profile-line strong {
  font-weight: 700;
}

/* Divider → red accent */
.divider { height: 2px; background: var(--red); }

/* Chart on dark */
.form-chart .axis-num, .form-chart .axis-label { fill: var(--chalk-dim); }
.form-chart .dot { stroke: var(--panel); }
.form-chart .form-hl { stroke: #fff; filter: none; }
.form-tooltip { background: var(--forest-deep); border: 1px solid var(--red); box-shadow: var(--bevel-strong); }
.form-tooltip .ft-head { color: var(--bob); }

/* Footer */
footer { background: var(--forest-deep); border-top: 2px solid var(--red); }
.footer-logo { color: #fff; }
.footer-sub { color: var(--chalk-dim); }
.footer-tag { color: #fff; }

/* Scrollbar */
::-webkit-scrollbar-thumb { background: var(--navy); border-color: var(--forest); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }