/* ============================================================
   PassGrid 10×10 — Editorial redesign
   Newsprint palette · Source Serif 4 · JetBrains Mono
   Matches Pundit5 visual language throughout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;0,8..60,900;1,8..60,400;1,8..60,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---- Tokens ---- */
:root {
  --paper:     #F4F0E6;
  --paper-warm:#EDE7D5;
  --ink:       #1A1814;
  --ink-soft:  #2B2723;
  --rule:      #1A1814;
  --muted:     #5C5448;
  --faint:     #8C8270;
  --stamp:     #C0241F;
  --stamp-deep:#8F1710;
  --pulp:      #D4C9A8;

  /* Grid cell states — newsprint palette */
  --open-bg:   #E8E0C8;   /* warm cream = playable — more saturated */
  --open-bd:   #A89868;   /* heavier crossword line */
  --held-bg:   #0E0C0A;   /* deep ink — another player holding */
  --held-bd:   #000000;
  --taken-bg:  #4A3820;   /* tobacco — taken cells recede */
  --taken-bd:  #6B5030;
  --yours-bg:  #C0241F;   /* vivid stamp red — your squares are the hero */
  --yours-bd:  #8F1710;
  --live-bg:   #0891B2;   /* electric cyan — live box is always distinct from YOURS */
  --live-bd:   #0E7490;

  --win:       #1E6B35;
  --loss:      #C0241F;

  --r: 0.1875rem;
  --rule-w: 1px;
  --rule-w-heavy: 3px;

  --serif: "Source Serif 4", Georgia, serif;
  --mono:  "JetBrains Mono", "Roboto Mono", monospace;
  --sans:  "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

/* Newsprint grain overlay */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background-image:
    radial-gradient(rgba(26,24,20,0.03) 1px, transparent 1px),
    radial-gradient(rgba(26,24,20,0.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
}

a { color: var(--stamp); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App shell ---- */
.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 80px;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   TOPBAR — ink band matching Pundit5
   ============================================================ */
.topbar {
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  padding: 6px 20px;
  border-bottom: var(--rule-w-heavy) solid var(--ink);
}

/* Brand */
.brand { display: flex; align-items: center; gap: 8px; grid-column: 1; grid-row: 1; }
.logo-tile { display: none; } /* hidden — brand wordmark is enough */
.brand-wordmark {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.brand-wordmark .wm-accent { color: var(--stamp); font-style: italic; }

/* Back link */
.back-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,240,230,0.5);
  text-decoration: none;
  grid-column: 2; grid-row: 1;
  justify-self: center;
}
.back-link:hover { color: var(--paper); text-decoration: none; }

/* Avatar */
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--stamp);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  letter-spacing: 0.03em;
  grid-column: 3; grid-row: 1;
}

/* Fixture strip — full-width below brand row */
.fixture-strip {
  grid-column: 1 / -1; grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0 0;
  margin-top: 5px;
  border-top: 1px solid rgba(244,240,230,0.15);
  gap: 8px;
}
.fixture-team {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fixture-team-b { flex-direction: row-reverse; }
.jersey { display: none; } /* removed — team codes carry identity */
.team-code {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
}
.fixture-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.fixture-datetime {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: rgba(244,240,230,0.65);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.fixture-sport {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stamp);
}

/* Stat bar — second full-width row */
.stat-bar {
  grid-column: 1 / -1; grid-row: 3;
  display: flex;
  align-items: stretch;
  padding: 4px 0 0;
  margin-top: 4px;
  border-top: 1px solid rgba(244,240,230,0.12);
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}
.stat-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,240,230,0.4);
}
.stat-value {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--paper);
  text-align: center;
  line-height: 1.2;
}
#closesValue { color: var(--paper); }
#closesValue.live { color: var(--stamp); }
.stat-divider {
  width: 1px;
  background: rgba(244,240,230,0.12);
  align-self: stretch;
  margin: 2px 0;
}
[data-rail="secondary"] { display: none; } /* keep it lean */

/* ============================================================
   MASTHEAD DATELINE — editorial strip below topbar
   ============================================================ */
.pg-dateline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 4px;
  border-bottom: var(--rule-w-heavy) solid var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-dateline-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(16px, 3.5vw, 24px);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 0.95;
  padding: 5px 20px 5px;
  border-bottom: var(--rule-w) solid var(--rule);
}
.pg-dateline-title .accent { color: var(--stamp); font-style: italic; }

/* ============================================================
   GRID SECTION
   ============================================================ */
.grid-section {
  padding: 4px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: var(--rule-w) solid var(--rule);
}

/* Rules trigger */
.pg-rules-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--stamp);
  border: 2px solid var(--stamp-deep);
  box-shadow: 3px 3px 0 var(--stamp-deep);
  border-radius: var(--r);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 90ms ease, box-shadow 90ms ease, transform 90ms ease;
  align-self: flex-start;
}
.pg-rules-trigger:hover {
  background: var(--stamp-deep);
  box-shadow: 1px 1px 0 var(--stamp-deep);
  transform: translate(2px, 2px);
}
.pg-rules-trigger-arrow { font-style: normal; }

/* Grid labels */
.grid-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.grid-label-team {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid-label-range {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--faint);
}

/* Match info row — clock + pass counts */
.match-info-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.team-total-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r);
  padding: 3px 10px;
  flex: 1;
  background: var(--paper-warm);
  transition: border-color 90ms ease;
}
.team-total-pill:hover { border-color: var(--stamp); }
.pill-b { flex-direction: row-reverse; }
.tpill-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tpill-val {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  transition: transform 0.15s ease, color 0.15s ease;
}
.tpill-val.bumped {
  animation: pillBump 0.4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes pillBump {
  0%   { transform: scale(1);    color: var(--ink); }
  35%  { transform: scale(1.25); color: var(--stamp); }
  70%  { transform: scale(.95);  color: var(--ink); }
  100% { transform: scale(1);    color: var(--ink); }
}
.clock-pill {
  background: var(--ink);
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--r);
  padding: 3px 10px;
  text-align: center;
  display: flex;
  align-items: center;
}
.clock-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
}

/* Progress bar */
.progress {
  position: relative;
  height: 4px;
  background: var(--pulp);
  border-radius: 0;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--stamp);
  transition: width 0.25s ease;
}
.progress-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--stamp);
  transform: translate(-50%, -50%);
  transition: left 0.25s ease;
}
.progress .cp {
  position: absolute;
  top: 50%;
  width: 1px; height: 8px;
  background: var(--muted);
  transform: translate(-50%, -50%);
  opacity: 0.5;
  z-index: 1;
}
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* ---- Grid board ---- */
.grid-wrap {
  width: 100%;
  overflow-x: hidden; /* no scroll — board fits viewport */
}
.board {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  /* no min-width — fully fluid */
}

/* ---- Swipe hint ---- */
.pg-swipe-hint {
  display: none; /* shown by JS on mobile only */
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 0 6px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.axis-x {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  margin-left: 16px;
}
.axis-x span {
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
}
.grid-with-yaxis {
  display: flex;
  gap: 3px;
  align-items: stretch;
  width: 100%;
}
.axis-y {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  gap: 2px;
  width: 12px;
}
.axis-y span {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
}

/* Grid cells */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 3px;
  aspect-ratio: 1 / 1;
  background: var(--ink); /* crossword grid lines = ink gaps */
  border: 3px solid var(--ink);
  border-radius: 2px;
}
.tile {
  border: none; /* grid gap + ink background acts as the line */
  border-radius: 0;
  background: var(--open-bg);
  color: var(--muted);
  font-family: var(--mono);
  font-size: clamp(5px, 1.6vw, 10px);
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  position: relative;
  min-width: 0; min-height: 0;
  padding: 0;
}
.tile:hover { opacity: 0.85; }

/* OPEN */
.tile.open {
  background: var(--open-bg);
  color: transparent;
}
.tile.open:hover {
  background: var(--paper-warm);
  opacity: 1;
}

/* HELD — prussian blue, another player is holding */
.tile.held {
  background: var(--held-bg);
  border-color: var(--held-bd);
  color: transparent;
  cursor: not-allowed;
}
.tile.held::after {
  content: '·';
  position: absolute;
  font-size: 12px;
  line-height: 1;
  color: rgba(244,240,230,0.3);
}

/* TAKEN — forest green, confirmed and settled */
.tile.taken {
  background: var(--taken-bg);
  border-color: var(--taken-bd);
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}
.tile.taken .init {
  color: rgba(244,240,230,0.65);
  font-size: clamp(4px, 1.2vw, 8px);
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  opacity: 1;
  transition: opacity 0.25s ease;
}
body.pg-inits-off .tile.taken .init {
  opacity: 0;
  pointer-events: none;
}

/* YOURS — stamp red, the single hero colour */
.tile.claimed {
  background: var(--yours-bg);
  border-color: var(--yours-bd);
  color: var(--paper);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--stamp-deep);
  outline: 2px solid rgba(255,200,190,0.35);
  outline-offset: -3px;
}
.tile.claimed .init {
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--paper);
}

/* LIVE — stamp pulse with hard shadow */
.tile.live {
  background: var(--stamp) !important;
  border-color: var(--stamp-deep) !important;
  color: var(--paper) !important;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--paper), 2px 2px 0 var(--stamp-deep) !important;
  animation: livePulse 1.4s ease-in-out infinite !important;
}
.tile.live .init { color: var(--paper) !important; }
.tile.live::after { display: none !important; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--paper), 2px 2px 0 var(--stamp-deep); }
  50%       { box-shadow: 0 0 0 4px var(--pulp), 4px 4px 0 var(--stamp-deep); }
}

/* Checkpoint payout flash */
.tile.payflash { animation: payflash 1.2s ease; }
@keyframes payflash {
  0%   { box-shadow: 0 0 0 0 var(--stamp); }
  30%  { box-shadow: 0 0 0 5px rgba(161,44,44,0.4), 3px 3px 0 var(--stamp-deep); transform: scale(1.08); }
  100% { box-shadow: none; transform: scale(1); }
}

/* ---- Legend ---- */
.legend-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.legend-chips {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.lg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.lg-swatch {
  width: 12px; height: 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  display: block;
}
.lg-open  .lg-swatch { background: var(--open-bg);  border-color: var(--open-bd); }
.lg-held  .lg-swatch { background: var(--held-bg);  border-color: var(--held-bd); }
.lg-taken .lg-swatch { background: var(--taken-bg); border-color: var(--taken-bd); }
.lg-yours .lg-swatch { background: var(--yours-bg); border-color: var(--yours-bd); }
.legend-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---- Notify bar ---- */
.notify-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--paper-warm);
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.notify-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stamp);
  flex-shrink: 0;
}

/* ============================================================
   CONTROLS PANEL
   ============================================================ */
.controls-card {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: var(--rule-w) solid var(--rule);
}
/* Remove old card shadow — flat editorial style */
.controls-card.card,
.card.yourcard,
.card.history-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.btn {
  border: none;
  border-radius: var(--r);
  padding: 11px 16px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 80ms ease, opacity 0.1s ease;
}
.btn:active { transform: translateY(1px); }

/* Primary — ink block with paper text (matches Pundit5 "Play today's five") */
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--stamp);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn-primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--stamp);
}
.btn-primary:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--stamp);
}
.btn-primary.running {
  background: var(--muted);
  box-shadow: 3px 3px 0 var(--faint);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Speed cluster */
.speed-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
}
.speed-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-right: 2px;
  white-space: nowrap;
}
.speed-btn {
  flex: 1;
  background: var(--paper-warm);
  border: var(--rule-w) solid var(--rule);
  color: var(--ink-soft);
  border-radius: var(--r);
  padding: 6px 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.1s;
}
.speed-btn:hover { border-color: var(--stamp); color: var(--stamp); }
.speed-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Action row */
.action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-ghost {
  flex: 1;
  min-width: 60px;
  background: var(--paper-warm);
  color: var(--ink);
  border: var(--rule-w) solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 6px;
  border-radius: var(--r);
  cursor: pointer;
  transition: 0.1s;
}
.btn-ghost:hover { border-color: var(--stamp); color: var(--stamp); }

.btn-end {
  flex: 1;
  min-width: 60px;
  background: var(--stamp);
  color: var(--paper);
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 6px;
  border-radius: var(--r);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--stamp-deep);
  transition: 0.1s;
}
.btn-end:hover { background: var(--stamp-deep); }

.picks-counter {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--r);
  padding: 7px 14px;
  text-align: center;
  background: var(--paper-warm);
}
.picks-counter.full { color: var(--stamp); border-color: var(--stamp); }

/* ============================================================
   YOUR CARD
   ============================================================ */
.yourcard {
  padding: 16px 20px;
  border-bottom: var(--rule-w) solid var(--rule);
}
.yourcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: var(--rule-w-heavy) solid var(--ink);
}
.yourcard-head h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.round-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
/* ---- Checkpoint timeline ---- */
.cp-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.cp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 2px solid var(--pulp);
  border-radius: var(--r);
  background: var(--paper-warm);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cp-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--pulp);
}
/* LIVE slot — stamp red pulse */
.cp-slot.cp-live {
  border-color: var(--stamp);
  background: var(--paper);
  animation: cpLivePulse 1.4s ease-in-out infinite;
}
.cp-slot.cp-live .cp-label { color: var(--stamp); }
.cp-slot.cp-live .cp-icon  { color: var(--stamp); }
@keyframes cpLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,36,31,0.0); }
  50%       { box-shadow: 0 0 0 4px rgba(192,36,31,0.2); }
}
/* WON slot — forest green */
.cp-slot.cp-won {
  border-color: var(--taken-bd);
  background: var(--taken-bg);
}
.cp-slot.cp-won .cp-label { color: rgba(180,255,200,0.9); }
.cp-slot.cp-won .cp-icon  { color: #4CDD80; font-size: 16px; }
/* MISSED slot — faded ink */
.cp-slot.cp-missed {
  border-color: var(--rule);
  background: var(--ink);
  opacity: 0.55;
}
.cp-slot.cp-missed .cp-label { color: var(--faint); }
.cp-slot.cp-missed .cp-icon  { color: var(--faint); font-size: 14px; }

/* ---- Running tally ---- */
.cp-tally {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 8px;
  border-top: var(--rule-w) solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-tally-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.cp-tally-sep { color: var(--faint); }

/* ============================================================
   WINNERS BOARD
   ============================================================ */
.history-card {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  border-bottom: var(--rule-w) solid var(--rule);
}
.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: var(--rule-w-heavy) solid var(--ink);
  gap: 6px;
}
.history-head h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* remove the old gradient text */
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--ink);
  background-clip: unset;
}
.link-btn {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.link-btn:hover { color: var(--stamp); text-decoration: underline; }
.history {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 220px;
  overflow-y: auto;
}
.history li {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 0;
  border-bottom: var(--rule-w) solid var(--pulp);
  color: var(--ink-soft);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: slideIn 0.2s ease;
}
.history li:last-child { border-bottom: none; }
@keyframes slideIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.history li .tag {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: none;
  padding-top: 2px;
}
.history li.win-log { color: var(--ink); }
.history li.win-log .tag { color: var(--win); }
.history li.lose-log .tag { color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  border-top: var(--rule-w-heavy) solid var(--ink);
  background: var(--ink);
  color: rgba(244,240,230,0.4);
}
.pg-settings-btn {
  background: none;
  border: 1px solid rgba(244,240,230,0.2);
  border-radius: var(--r);
  color: rgba(244,240,230,0.5);
  width: 28px; height: 26px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-settings-btn:hover { border-color: var(--stamp); }

/* Settings panel */
.pg-settings-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--paper);
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 14px;
  display: none;
  min-width: 180px;
  z-index: 50;
}
.pg-settings-panel.open { display: block; }
.pg-settings-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pg-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pg-settings-label {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.pg-settings-sublabel {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Toggle switch */
.pg-tog {
  position: relative;
  width: 38px; height: 22px;
  background: var(--pulp);
  border: var(--rule-w) solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pg-tog::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: var(--rule-w) solid var(--rule);
  transition: transform 0.15s ease;
}
.pg-tog.on { background: var(--stamp); border-color: var(--stamp-deep); }
.pg-tog.on::after { transform: translateX(16px); }

/* ============================================================
   HOW-TO-PLAY MODAL
   ============================================================ */
.pg-modal-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,24,20,0.72);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pg-modal-mask.show { display: flex; }
.pg-modal {
  background: var(--paper);
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--stamp);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.pg-modal-hero {
  background: var(--ink);
  padding: 24px 24px 18px;
  position: relative;
  text-align: center;
}
.pg-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: 1px solid rgba(244,240,230,0.25);
  border-radius: var(--r);
  color: rgba(244,240,230,0.6);
  width: 26px; height: 26px;
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.pg-modal-close:hover { color: var(--paper); border-color: var(--paper); }
.pg-modal-ball {
  font-size: 32px;
  margin-bottom: 8px;
}
.pg-modal-hero-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.pg-modal-body { padding: 20px 24px 24px; }
.pg-modal-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 14px;
}
.pg-modal-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pg-modal-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pg-modal-step-n {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.pg-modal-step-text {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.pg-modal-step-text b { color: var(--ink); font-weight: 700; }
.pg-modal-cta {
  width: 100%;
}

/* ============================================================
   CHECKPOINT BURST + ALL-WINS OVERLAY
   ============================================================ */
/* Checkpoint burst — compact corner toast */
.pg-cp-burst {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 260px;
  background: var(--ink);
  border: 2px solid rgba(244,240,230,0.2);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  z-index: 500;
  flex-direction: column;
  padding: 10px 12px 8px;
  overflow: hidden;
}
.pg-cp-burst.active {
  display: flex;
  animation: toastSlideIn 0.2s ease;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.pgburst-bg { display: none; }
.pgburst-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,240,230,0.45);
  margin-bottom: 3px;
}
.pgburst-label-win {
  color: #F5B400 !important;
}
.pgburst-emoji { font-size: 18px; display: inline; margin-right: 5px; }
.pgburst-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--paper);
  display: inline;
}
.pgburst-title-win {
  color: #F5B400 !important;
  font-size: 17px !important;
}
.pgburst-sub {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(244,240,230,0.5);
  margin-top: 5px;
  letter-spacing: 0.05em;
}
.pgburst-box {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--stamp);
  margin-top: 3px;
}
.pgburst-dismiss {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,240,230,0.22);
  margin-top: 8px;
}
.pgburst-confetti { display: none; }

/* All-wins mask */
.pg-allwins-mask {
  position: fixed; inset: 0;
  background: rgba(26,24,20,0.82);
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pg-allwins-mask.show { opacity: 1; }
.pg-allwins-card {
  background: var(--paper);
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--stamp);
  width: 100%;
  max-width: 380px;
  overflow: hidden;
}
.pg-allwins-head {
  background: var(--ink);
  padding: 20px 24px 18px;
  text-align: center;
}
.pg-allwins-trophy { font-size: 36px; margin-bottom: 6px; }
.pg-allwins-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 4px;
}
.pg-allwins-sub {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,240,230,0.5);
}
.pg-allwins-body { padding: 16px 20px 20px; }
.pg-allwins-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.pg-aw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: var(--rule-w) solid var(--pulp);
  animation: slideIn 0.2s ease both;
}
.pg-aw-row:last-child { border-bottom: none; }
.pg-aw-cp {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  width: 32px;
  flex-shrink: 0;
}
.pg-aw-coord {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.pg-aw-owner {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  flex: 2;
}
.pg-aw-row.won .pg-aw-owner b { color: var(--stamp); }
.pg-aw-badge { font-size: 16px; }
.pg-allwins-close {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: var(--r);
  padding: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--stamp);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.pg-allwins-close:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--stamp);
}

/* Toast */
.toast-wrap {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

/* Win-state toast — gold border flash */
.pg-cp-burst:has(.pgburst-title-win) {
  border-color: #F5B400 !important;
  box-shadow: 4px 4px 0 rgba(245,180,0,0.35) !important;
}

/* Legend: live box label (ensure it matches new cyan) */
.legend-item[data-state="live"] .legend-swatch {
  background: #0891B2 !important;
  border-color: #0E7490 !important;
}

/* Pre-grid label — sits tight above the column axis */
.grid-label-pregrid {
  margin-top: 4px;
  margin-bottom: 2px;
  padding: 0 2px;
}