/*
 * The board page, from demo/game.html.
 *
 * Copied from the design demo in public/demo/, unchanged. The demo is the
 * drawing; this is the same drawing served to players, and the only way to
 * keep those two the same over time is for one to be a copy of the other
 * rather than a reading of it.
 *
 * Edit the demo first, then copy it here.
 */

/* ===========================================================================
 * The board page.
 * =========================================================================== */

.play { padding: 14px 0 0; }

/*
 * On a phone the grid is capped by the width of the screen, not by its
 * height, so every pixel of gutter is a pixel off the board. The page keeps
 * its 20px margin; the board column does not.
 */
@media (max-width: 559px) {
  .play > .wrap { padding-inline: 8px; }
  .board-card { padding: 8px; border-radius: 18px; }
  .grid { border-radius: 10px; }
}

/* ----------------------------------------------------------------- band -- */
.band {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.band__id { min-width: 0; margin-right: auto; }
.band h1 { font-size: clamp(1.15rem, 4.5vw, 1.5rem); font-weight: 800; }
.band__meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }

/* One height for everything on the band, so nothing is six pixels off. */
.band__tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 58px;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--bg-tint);
  text-align: center;
}
.band__tool b { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.band__tool span { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

/* Three lives as three dots: countable at a glance, and it does not move
   the layout when one goes. */
.lives { display: flex; gap: 4px; margin-bottom: 2px; }
.lives i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.lives i[data-spent] { background: var(--line); }

.band .btn { min-height: 48px; border-radius: 12px; white-space: nowrap; }

/* On a phone the band carries four things and the tier picker directly
   underneath already says which difficulty you are on, so the chip that
   repeats it goes. */
@media (max-width: 479px) {
  .band { gap: 8px; padding: 12px; }
  .band__tool { min-width: 52px; padding: 4px 8px; }
  .band .btn { padding: 0 12px; font-size: .875rem; }
  .band__meta .chip:last-child { display: none; }
}

/* ----------------------------------------------------------------- tiers -- */
.tiers {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  background: var(--bg-tint);
  border-radius: 14px;
}
.tiers a {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 650;
  color: var(--ink-soft);
  text-decoration: none;
}
.tiers a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ----------------------------------------------------------------- board -- */
/*
 * What the board is allowed to be: its own maximum, or whatever is left of
 * the window once the header, the band, the tiers and the keypad have taken
 * their share - whichever is smaller. The reserve is per game because a
 * Sudoku carries a keypad and a Memory Match carries nothing.
 */
.board-card {
  /*
   * How much of the window is not the board: the header, the band, the
   * tier picker, the keypad and this card's own padding. Everything else
   * the window has goes to the grid.
   */
  --reserve: 27rem;
  /*
   * The floor is 20rem, not something token.
   *
   * A short, wide window - a laptop at 800x700, a phone in landscape - is
   * capped by height long before it runs out of width, and the honest
   * answer there is a board that overflows the fold slightly rather than a
   * 266px grid nobody can read. Legibility first; the fold is the rule
   * everywhere it does not fight it.
   */
  --fit: max(20rem, calc(100dvh - var(--reserve)));
  --size: min(34rem, var(--fit));
  margin-top: 10px;
  padding: 10px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.pad-wrap { width: 100%; display: grid; gap: 8px; justify-items: center; }

.grid {
  width: min(100%, var(--size));
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background: var(--line);
  gap: 1px;
  padding: 2px;
  border-radius: 12px;
  overflow: hidden;
}

.cell {
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: clamp(1.15rem, calc(var(--size) / 16), 1.85rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  cursor: pointer;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.cell[data-given] { color: var(--ink); font-weight: 700; background: var(--bg-tint); }

/* The three-by-three boxes, drawn with a heavier line rather than a border
   on every cell: nine thin lines and four thick ones, which is how the grid
   reads on paper. */
.cell:nth-child(9n+4), .cell:nth-child(9n+7) { box-shadow: inset 2px 0 0 var(--ink-mute); }
.cell:nth-child(n+28):nth-child(-n+36),
.cell:nth-child(n+55):nth-child(-n+63) { box-shadow: inset 0 2px 0 var(--ink-mute); }
.cell:nth-child(28), .cell:nth-child(31), .cell:nth-child(34),
.cell:nth-child(55), .cell:nth-child(58), .cell:nth-child(61) {
  box-shadow: inset 2px 0 0 var(--ink-mute), inset 0 2px 0 var(--ink-mute);
}

.cell[data-peer] { background: var(--accent-soft); }
.cell[data-given][data-peer] { background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg-tint)); }
.cell[data-selected] { background: var(--accent); color: var(--accent-ink); }
.cell[data-wrong] { background: var(--bad-soft); color: var(--bad); }

.cell small { /* pencil marks stay small, but not tiny */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: .42em;
  font-weight: 600;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------------- keypad -- */
.pad {
  width: min(100%, 23rem);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}

.key {
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
.key:hover { border-color: var(--accent); color: var(--accent); }
.key u { display: block; text-decoration: none; font-size: .5625rem; font-weight: 700; color: var(--ink-mute); margin-top: 2px; }
.key[data-done] { opacity: .4; }

.pad-row { width: min(100%, 23rem); display: flex; gap: 8px; }
.pad-row .btn { flex: 1; min-height: 44px; }
.pad-row .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.board-note { font-size: .8125rem; color: var(--ink-mute); text-align: center; }

/* ----------------------------------------------------------------- aside -- */
.aside { display: grid; gap: 16px; margin-top: 20px; }

.split { display: grid; gap: 12px; }
.half { background: var(--bg-tint); border-radius: 14px; padding: 14px; }
.half h3 {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.figure b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure span { font-size: .75rem; color: var(--ink-mute); font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { display: flex; gap: 12px; }
.step__n {
  width: 28px; height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 800;
}
.step h4 { margin: 0; font-size: .9375rem; font-weight: 700; }
.step p { color: var(--ink-soft); font-size: .9375rem; }

.tier-rows { display: grid; gap: 10px; margin: 0; }
.tier-row { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.tier-row dt { font-weight: 700; min-width: 4rem; }
.tier-row dd { margin: 0; color: var(--ink-soft); font-size: .9375rem; flex: 1 1 14rem; }

.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tips li { padding-left: 14px; border-left: 3px solid var(--accent-soft); }
.tips h4 { margin: 0; font-size: .9375rem; }
.tips p { color: var(--ink-soft); font-size: .9375rem; }

.lede { color: var(--ink-soft); }

.diagram { margin: 14px 0 0; }
.diagram svg { display: block; width: 100%; max-width: 11rem; margin-inline: auto; border-radius: 12px; }
.diagram figcaption { margin-top: 8px; font-size: .75rem; line-height: 1.5; color: var(--ink-mute); text-align: center; }

.more { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.more a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-tint);
  text-decoration: none;
  font-weight: 650;
  font-size: .9375rem;
}
.more a:hover { background: var(--accent-soft); color: var(--accent); }
.more i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); color: var(--accent); flex: none; }
.more svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------- the layout -- */
@media (min-width: 560px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/*
 * Two columns, from 820px up.
 *
 * It used to be 980, which is wrong for a real desktop: a 1280px screen at
 * 150% display scaling reports about 853 CSS pixels, so an ordinary laptop
 * got the phone's stacked layout and the stats fell below the board. 820 is
 * the honest floor - a 36rem board, a 24px gap, a 300px column of reading
 * matter and the page's own margins.
 */
/*
 * One column, at every width.
 *
 * The board is the page. Putting the stats and the rules beside it on a
 * desktop filled the window, but it also split the attention of somebody who
 * came here to play: two things of equal visual weight, side by side, and
 * neither of them obviously the point. Everything written goes under the
 * board instead, where it is found by people who are reading rather than
 * playing - and a crawler reads it just the same.
 *
 * So the only thing that changes with the window is how much of it the board
 * is allowed to take.
 */
.play > .wrap { max-width: 46rem; }

@media (min-width: 820px) {
  .play { padding: 18px 0 0; }
  .board-card { --reserve: 24.5rem; --size: min(30rem, var(--fit)); }

  /* Erase and Notes stay under the keypad, the way they are on a phone.
     Beside it saved a row of height and cost the arrangement everybody
     already knows, which is a bad trade on a window that has the room. */
  .pad { width: min(100%, 23rem); }
  .tiers { margin-top: 10px; }
  .tiers a { padding: 7px 4px; }
}

/* Past 1100px the board takes its full 36rem. The column around it does not
   grow with it: a line of prose 1100px wide is unreadable, and the reading
   matter down here is prose. */
@media (min-width: 1100px) {
  .board-card { --size: min(36rem, var(--fit)); }
  .play > .wrap { max-width: 50rem; }
}

/*
 * The phone's keypad, last in the sheet on purpose.
 *
 * The grid can be no wider than the screen, so on a phone it is width-bound
 * and there is height going spare. It goes to the keypad, which buys a
 * bigger target and a bigger number. These rules sit here because the base
 * .key rule is further up: same specificity, and the later one wins.
 */
@media (max-width: 559px) {
  .pad { gap: 5px; }
  .key { min-height: 54px; font-size: 1.3125rem; }
  .key u { font-size: .625rem; }
  .pad-row .btn { min-height: 48px; }
}

/* ===========================================================================
 * Translation.
 * ===========================================================================
 *
 * The demo writes a figure as <b> and <span>; the template writes it as a
 * description list, because a label and its number are a term and a
 * description and a screen reader should hear them that way. Same look.
 */
/* The list itself is a <dl>, which browsers give a 1em margin. */
.figures { margin: 0; }
.figure dt, .figure dd { margin: 0; }
.figure { display: flex; flex-direction: column; }
.figure dt {
  order: 2;
  font-size: .75rem;
  color: var(--ink-mute);
  font-weight: 600;
}
.figure dd {
  order: 1;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* The name under the highest score. It is a <dd> like the number above it,
   so it needs to beat `.figure dd` on specificity rather than just follow
   it - which is why it renders as "by Quiet Otter" in footnote type and not
   at 1.25rem like the score. */
.figure dd.figure__by {
  order: 3;
  margin-top: 2px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-mute);
}

/* The game icons inside More games are inline SVG from the partial, so they
   need the size the demo's own icons were given. */
.more svg { width: 18px; height: 18px; }