/* The Grid — unlisted mode at /grid.
   Loads on top of styles.css, so the page furniture (body, .shell, .hero,
   footer) is already the site's. Everything here is board-specific. */

:root {
  /* One colour per header type, so what a square is asking reads before you
     read a word of it. All four are the site's own palette rather than new
     hues — franchise and era are the "who and when" axis, rating and height
     the "how good" axis, and the two pairs stay in their families.
     These are fills with fixed light text: they hold their colour in dark
     mode exactly like the site's gold blocks do. */
  --gr-era: #157f68;     /* green  — when */
  --gr-team: #256d9d;    /* blue   — who */
  --gr-rating: #7b392c;  /* court  — how good */
  --gr-height: #a8532f;  /* court, lifted — how big */
  --gr-on-head: #fff7df;

  /* Rarity bands. A pale board means you took the obvious name every time. */
  --gr-r1: #efe0b4;
  --gr-r2: #e6b843;
  --gr-r3: #d98f3f;
  --gr-r4: #c05f34;
}

.gr-page { max-width: 620px; margin: 0 auto; }

/* Identity line ---------------------------------------------------------
   The board's number and date on the left, the rules on the right. The rules
   are a button rather than prose above the board because they are read once
   and the board is read every day. */
.gr-dayline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.gr-dayline-id { min-width: 0; }
.gr-daynum {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gr-daydate {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.gr-help-btn {
  flex: 0 0 auto;
  border: 3px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 13px;
  font-family: "Space Mono", monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.gr-help-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.gr-help-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

.gr-back {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  margin: 0 0 8px;
}

/* Status strip ---------------------------------------------------------- */
.gr-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.gr-stat {
  border: 3px solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gr-stat-label {
  font-family: "Space Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gr-stat-value {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 1.42rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gr-stat-sub {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Bonus guess -----------------------------------------------------------
   Gold, because it is the one thing on this page that gives something back
   rather than taking a guess away, and gold is already what this site uses
   for a reward. Full width under the counters: it appears late, with two
   guesses left, and something that turns up mid-board has to be unmistakably
   a new thing rather than a fourth stat tile. */
.gr-boost { margin: -4px 0 14px; }
.gr-boost-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: #151413;
  box-shadow: var(--shadow);
  padding: 9px 12px;
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.gr-boost-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.gr-boost-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.gr-boost-btn[disabled] { cursor: default; opacity: 0.72; transform: none; box-shadow: var(--shadow); }
.gr-boost-token {
  flex: 0 0 auto;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gr-boost-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* How many are left, on the boards where that is more than one. Pushed to the
   far end and quieter than the label — it is a detail you check, not the
   thing the button says. Empty on the daily, and an empty span with no
   margins of its own takes up nothing. */
.gr-boost-left {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(21, 20, 19, 0.66);
  white-space: nowrap;
}
@media (max-width: 380px) {
  .gr-boost-btn { font-size: 0.62rem; gap: 8px; }
}

/* Board ----------------------------------------------------------------- */
.gr-board {
  display: grid;
  grid-template-columns: minmax(66px, 0.85fr) repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.gr-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.gr-corner-mark {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  line-height: 1;
}

.gr-head {
  position: relative;
  border: 3px solid var(--ink);
  background: var(--ink-bg);
  color: var(--gr-on-head);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px 5px;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.gr-head-text {
  font-family: "Space Mono", monospace;
  font-size: 0.66rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-wrap: balance;
  hyphens: auto;
  display: block;
}
.gr-head-era { background: var(--gr-era); }
.gr-head-team { background: var(--gr-team); }
.gr-head-rating { background: var(--gr-rating); }
.gr-head-height { background: var(--gr-height); }

.gr-head-col { min-height: 56px; }
.gr-head-row { min-height: 72px; }

/* The row and column feeding the open square. The picker's scrim sits over
   the whole board, so a shift alone disappears under it — the gold ring is
   what actually carries through the dim. */
.gr-head-active {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  z-index: 2;
}

.gr-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 5px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.14s ease;
}
button.gr-cell:hover,
button.gr-cell:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
  outline: none;
  background: var(--chalk);
}
button.gr-cell:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.gr-cell-active { background: var(--chalk); }

.gr-cell-plus {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  transition: transform 0.14s ease;
}
button.gr-cell:hover .gr-cell-plus { transform: scale(1.25) rotate(90deg); }

.gr-cell-filled { cursor: default; background: var(--gr-r2); }
.gr-cell-filled.gr-r1 { background: var(--gr-r1); }
.gr-cell-filled.gr-r2 { background: var(--gr-r2); }
.gr-cell-filled.gr-r3 { background: var(--gr-r3); }
.gr-cell-filled.gr-r4 { background: var(--gr-r4); }

.gr-cell-filled .gr-cell-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.15;
  color: #151413;
  text-wrap: balance;
}
.gr-cell-pts {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #151413;
  background: rgba(21, 20, 19, 0.15);
  border-radius: 2px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}
/* The deepest band is dark enough that ink text stops clearing contrast. */
.gr-cell-filled.gr-r4 .gr-cell-name { color: #fff7df; }
.gr-cell-filled.gr-r4 .gr-cell-pts {
  color: #fff7df;
  background: rgba(255, 247, 223, 0.2);
}

.gr-cell-missed {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  cursor: default;
  gap: 1px;
}
.gr-cell-miss {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gr-cell-misslabel {
  font-family: "Space Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Motion ---------------------------------------------------------------- */
/* Headers spin through other labels of their own type, then drop in one at a
   time. The blur sells the spin without a second element to animate. */
.gr-head.gr-rolling .gr-head-text {
  filter: blur(0.6px);
  opacity: 0.75;
  animation: gr-roll 0.06s linear infinite;
}
@keyframes gr-roll {
  from { transform: translateY(-38%); }
  to { transform: translateY(38%); }
}
.gr-head.gr-locked { animation: gr-lock 0.34s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes gr-lock {
  0% { transform: scale(1.1); }
  60% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
/* Squares hold back while the headers are still landing. */
.gr-board-rolling .gr-cell { opacity: 0.35; pointer-events: none; }
.gr-cell { transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.14s ease, opacity 0.3s ease; }

.gr-pop { animation: gr-pop 0.36s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes gr-pop {
  0% { transform: scale(0.72) rotate(-4deg); }
  55% { transform: scale(1.06) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0); }
}

.gr-shake { animation: gr-shake 0.4s ease; }
@keyframes gr-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

.gr-pulse { animation: gr-pulse 0.5s ease; }
@keyframes gr-pulse {
  0%, 100% { background: var(--surface); }
  25% { background: var(--red); }
}

/* Controls -------------------------------------------------------------- */
.gr-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gr-btn {
  border: 3px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 13px;
  font-family: "Space Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.gr-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.gr-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.gr-btn-primary { background: var(--gold); color: #151413; border-color: #151413; }

.gr-fail {
  font-family: "Space Mono", monospace;
  font-size: 0.8rem;
  padding: 20px;
  border: 3px dashed var(--ink);
  text-align: center;
}

/* Legend ---------------------------------------------------------------- */
.gr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.gr-legend li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Space Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.gr-swatch {
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  flex: 0 0 auto;
}
.gr-swatch-era { background: var(--gr-era); }
.gr-swatch-team { background: var(--gr-team); }
.gr-swatch-rating { background: var(--gr-rating); }
.gr-swatch-height { background: var(--gr-height); }

/* Picker ---------------------------------------------------------------- */
.gr-picker {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(21, 20, 19, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  animation: gr-fade 0.16s ease;
}
@keyframes gr-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 620px) { .gr-picker { align-items: center; } }

.gr-picker-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 16px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: gr-rise 0.2s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes gr-rise {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.gr-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gr-picker-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
}
/* The two conditions read as two things, not one run-on string, and each
   carries its header's colour so the square you tapped stays identifiable
   once the picker covers the board. */
.gr-chip {
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--ink-bg);
  color: var(--gr-on-head);
  border: 2px solid var(--ink);
  padding: 3px 7px;
}
.gr-chip-era { background: var(--gr-era); }
.gr-chip-team { background: var(--gr-team); }
.gr-chip-rating { background: var(--gr-rating); }
.gr-chip-height { background: var(--gr-height); }
.gr-picker-x { font-size: 0.9rem; color: var(--muted); }

.gr-picker-close {
  flex: 0 0 auto;
  border: 3px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  width: 32px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.gr-input {
  width: 100%;
  border: 3px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 11px;
  font-family: "Space Mono", monospace;
  font-size: 0.95rem; /* 16px+ keeps iOS Safari from zooming the page on focus */
  box-sizing: border-box;
}
.gr-input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

.gr-results {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}
.gr-sugg {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
}
.gr-sugg:hover, .gr-sugg:focus-visible { background: var(--gold); color: #151413; outline: none; }
.gr-sugg-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 0.94rem;
}
.gr-sugg-meta {
  font-family: "Space Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  flex: 0 0 auto;
}
.gr-sugg:hover .gr-sugg-meta { color: rgba(21, 20, 19, 0.66); }

.gr-picker-msg {
  font-family: "Space Mono", monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--red);
  min-height: 1.1em;
  margin: 0;
}

/* Dialogs: how to play, and the result ----------------------------------
   Same shell as the picker, so the three surfaces on this page behave
   identically — scrim, card, rise. */
.gr-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(21, 20, 19, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  animation: gr-fade 0.16s ease;
}
@media (min-width: 620px) { .gr-modal { align-items: center; } }
.gr-modal-open { overflow: hidden; }

.gr-modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 16px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: gr-rise 0.22s cubic-bezier(0.2, 1.2, 0.4, 1);
}
/* The result is the payoff, so it takes the gold the old inline panel had.
   The card is gold in both themes, so everything inside it is pinned to fixed
   values rather than the theme tokens — --surface goes near-black in dark
   mode, which left the secondary button dark-on-dark. */
.gr-result-card { background: var(--gold); color: #151413; }
.gr-result-card .gr-btn {
  background: #fff7df;
  border-color: #151413;
  color: #151413;
  box-shadow: 3px 3px 0 #151413;
}
.gr-result-card .gr-btn:hover { box-shadow: 4px 4px 0 #151413; }
.gr-result-card .gr-btn:active { box-shadow: 2px 2px 0 #151413; }
.gr-result-card .gr-btn-primary { background: #151413; color: var(--gold); }
.gr-result-card .gr-picker-close { border-color: #151413; color: #151413; background: #fff7df; }

.gr-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gr-modal-kicker {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(21, 20, 19, 0.7);
  margin: 0 0 4px;
}
.gr-modal-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.1;
  margin: 0;
}
.gr-modal-body {
  overflow-y: auto;
  min-height: 0;
  font-family: "Space Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}
.gr-modal-body > p { margin: 0 0 12px; }
.gr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gr-rules { list-style: none; margin: 0 0 12px; padding: 0; }
.gr-rules li {
  padding: 8px 0;
  /* A neutral grey rather than an ink tint: the help card follows the theme,
     and an ink-alpha rule vanishes on the dark ground. */
  border-top: 1px solid rgba(128, 128, 128, 0.38);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}
.gr-rules li:last-child { border-bottom: 1px solid rgba(128, 128, 128, 0.38); }
.gr-rules b { color: var(--ink); font-weight: 700; }
.gr-rules-note { color: var(--muted); font-size: 0.73rem; margin: 0; }
.gr-rules-note b { color: var(--ink); }

/* The same nine squares the share text carries, so what you are about to
   send is what you just looked at. */
.gr-over-grid {
  margin-top: 12px;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0.12em;
  white-space: pre;
}

.gr-over-score {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 2px;
}
.gr-over-pts, .gr-over-best, .gr-over-note {
  font-family: "Space Mono", monospace;
  font-size: 0.76rem;
  margin: 0 0 4px;
}
.gr-over-note { color: rgba(21, 20, 19, 0.72); }

.gr-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 400px) {
  .gr-board { gap: 4px; grid-template-columns: minmax(56px, 0.8fr) repeat(3, 1fr); }
  .gr-head { padding: 5px 3px; border-width: 2px; }
  .gr-head-text { font-size: 0.58rem; }
  .gr-cell { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .gr-cell-filled .gr-cell-name { font-size: 0.7rem; }
  .gr-stat-value { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gr-cell, .gr-btn, .gr-head, .gr-cell-plus, .gr-help-btn { transition: none; }
  button.gr-cell:hover, button.gr-cell:focus-visible,
  .gr-btn:hover, .gr-btn:active, .gr-head-active { transform: none; }
  button.gr-cell:hover .gr-cell-plus { transform: none; }
  .gr-help-btn:hover, .gr-help-btn:active { transform: none; }
  .gr-pop, .gr-shake, .gr-pulse, .gr-picker, .gr-picker-card,
  .gr-modal, .gr-modal-card,
  .gr-head.gr-locked, .gr-head.gr-rolling .gr-head-text { animation: none; }
  .gr-board-rolling .gr-cell { opacity: 1; pointer-events: auto; }
}