* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #2b2118 0%, #3d2f22 100%);
  color: #f5ecdf; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; overflow: hidden;
}
/* 560 capped tablets to ~2/3 of the screen. Phones are all narrower than 560,
   so this is a no-op there and a real gain on iPad. */
#app { height: 100%; display: flex; flex-direction: column; max-width: min(100%, 820px); margin: 0 auto; }

#hdr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
#hdr .pill { background: #4a3826; border: 2px solid #6b5137; border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 15px; min-width: 44px; min-height: 44px; display: flex; align-items: center; cursor: pointer; justify-content: center; color: inherit; font-family: inherit; }
#hdrHome { border: none; background: #c9a227; color: #2b2118; font-size: 18px; }
/* one line always — status must never reflow the board */
#status { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e8d5b5; }

.scr { flex: 1; display: none; flex-direction: column; overflow-y: auto; padding: 6px 12px 18px; }
.scr.on { display: flex; }

#scr-menu { align-items: center; text-align: center; gap: 12px; justify-content: center; }
#scr-menu h1 { font-size: clamp(32px, 9vw, 44px); }
#scr-menu .sub { color: #c3ab8c; font-weight: 600; }
#tierRow { display: flex; gap: 8px; width: 100%; }
.tierCard { flex: 1; background: #4a3826; border: 3px solid #6b5137; border-radius: 16px; padding: 10px 4px; font-weight: 800; font-size: 14px; line-height: 1.3; cursor: pointer; color: #f5ecdf; }
.tierCard small { display: block; color: #c3ab8c; font-weight: 700; }
.tierCard .te { font-size: 24px; display: block; }
.tierCard.sel { border-color: #c9a227; background: #6b5137; }
.seg { display: flex; width: 100%; background: #4a3826; border: 3px solid #6b5137; border-radius: 999px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: transparent; color: #f5ecdf; font-weight: 800; font-size: 15px; padding: 12px 4px; cursor: pointer; font-family: inherit; }
.seg button.sel { background: #c9a227; color: #2b2118; }
button.big { width: 100%; border: none; border-radius: 16px; min-height: 54px; font-size: 19px; font-weight: 800; background: #4a3826; color: #f5ecdf; border: 3px solid #6b5137; cursor: pointer; font-family: inherit; }
button.big.primary { background: #c9a227; border-color: #a8851d; color: #2b2118; }
button.big:active { transform: translateY(2px); }
#statsLine { color: #c3ab8c; font-weight: 700; }

/* captured-piece strips: fill the dead space around a square board with
   something useful — the running material balance */
.capRow { min-height: 34px; display: flex; align-items: center; gap: 1px; padding: 2px 6px; font-size: 22px; line-height: 1; flex-wrap: wrap; }
.capRow .adv { margin-left: 6px; font-size: 13px; font-weight: 800; color: #c9a227; }
.capRow .g { opacity: 0.9; }

/* board */
#boardWrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 0; }
#board {
  /* Every dimension (width, height, rows, columns, glyph size) is set in px
     by sizeBoard() in app.js. Nothing here relies on aspect-ratio (Safari
     15+), container units (16+) or min() — those silently fail on the older
     iPads this game has to run on, which is what made the pieces tiny and
     the ranks collapse. The values below are only a pre-JS placeholder. */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 90vw; height: 90vw;
  border: 4px solid #6b5137; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.sq { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sq.light { background: #efdfc0; }
.sq.dark { background: #b58863; }
/* Unicode glyphs; --pc is set in px by sizeBoard() so the size comes from the
   measured square, never from viewport or container units. */
.sq .pc { font-size: var(--pc, 30px); line-height: 1; color: #1a1208; text-shadow: 0 1px 0 rgba(255,255,255,0.25); pointer-events: none; }
.sq.white .pc { color: #fffdf8; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }

.sq.sel { box-shadow: inset 0 0 0 4px #c9a227; }
.sq.lastf, .sq.lastt { background-image: linear-gradient(rgba(201,162,39,0.35), rgba(201,162,39,0.35)); }
.sq.chk { background-image: radial-gradient(circle, rgba(220,38,38,0.85) 10%, transparent 72%); }
.sq .dot { position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgba(20,14,6,0.35); display: none; pointer-events: none; }
.sq.mv .dot { display: block; }
.sq.cap { box-shadow: inset 0 0 0 4px rgba(220,38,38,0.75); }

.ovl { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(20,14,8,0.9); padding: 16px; }
.ovl.on { display: flex; }
.ovlCard { text-align: center; width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
#overTitle, #overTitle2 { font-size: 25px; font-weight: 800; }
#overSub { color: #c3ab8c; font-weight: 700; min-height: 22px; }
#promo { display: flex; gap: 8px; justify-content: center; }
.promoBtn { flex: 1; font-size: 34px; min-height: 62px; background: #efdfc0; color: #1a1208; border: 3px solid #6b5137; border-radius: 14px; cursor: pointer; }

#scr-how .card { background: #4a3826; border: 3px solid #6b5137; border-radius: 16px; padding: 14px; margin-bottom: 10px; font-size: 15px; line-height: 1.55; font-weight: 600; }
#scr-how h2 { margin-bottom: 8px; }

/* docs/offline-pwa.md R-C15 — the PAGE must never scroll.
   The product is a fixed frame: header, a named scroll region, footer. If the
   document scrolls too, the header scrolls away, the version chip drifts, and
   a drag that reaches the end of the inner region chains out to the page and
   drags the whole board under the player's thumb. That is the "double scroll".
   `overflow: hidden` stops the second scrollbar; `overscroll-behavior: none`
   stops the chaining, which is the half that is invisible on a desktop mouse
   and obvious on a phone. */
html, body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ---------------------------------------------------------------------------
   Landscape: the board takes the full HEIGHT and everything else moves beside
   it (docs/offline-pwa.md, "A container sized by the thing it is supposed to
   be sizing" — the sibling of that bug).

   A square board is bounded by the smaller of the two dimensions. On a wide
   short window that is the height, and a COLUMN spends the scarce axis on
   furniture: the two rows of captured pieces. Measured with tests/browser/board-fill.js at 844x390, this
   game's board reached only 67% of the space it could have had, while the two
   games that already had a row layout scored 98-99%.

   `min-aspect-ratio: 1/1` rather than `orientation: landscape`, because the
   question is "is this box wider than it is tall", which is also true of a
   short desktop window that no phone would call landscape.

   Grid rather than flex: the board has to span every row of the side column,
   and `#scr-play.on` (1,1,0) is specific enough to beat `.scr { display: none }`
   without also un-hiding the screen when `.on` is absent.
   --------------------------------------------------------------------------- */
/* `and (max-height: 620px)` — the row layout is for a window whose HEIGHT is
   scarce, not for any window that happens to be wide.
   `min-aspect-ratio: 1/1` alone caught two different situations and only one
   of them wanted this. On a 1440x900 desktop the board came out bounded by the
   side COLUMN at 568px with 200px of height unused; the ordinary column layout
   gives it ~690px there. Measured at 1024x600 (row wins) and 1280x800 /
   1440x900 (column wins), the crossover sits just above a short laptop, so
   620px keeps every phone landscape on the row layout and hands every real
   desktop window back to the column. */
@media (min-aspect-ratio: 1/1) and (max-height: 620px) {
  /* Two grid gotchas, both of which this hit:
     `align-items: center` becomes `align-self: center` on every item, so the
     board cell stops STRETCHING and shrink-wraps its content — the container
     sized by the thing it is meant to size, one more time. And a bare `1fr`
     track has an automatic minimum of `min-content`, so a board that measures
     its wrapper and grows can push the very track that was supposed to bound
     it: go's board reached 750px inside a 286px screen. `minmax(0, 1fr)` plus
     an explicit `align-self: stretch` and `min-height: 0` closes both. */
  #scr-play.on {
    display: grid;
    /* minmax(0, 1fr), NOT 1fr — the SAME trap as the rows below, and I fixed
       the rows and left the columns. A `1fr` track has an automatic minimum of
       min-content, so it cannot shrink under its contents; the board measures
       its wrapper, grows, and the track grows with it. On a phone in landscape
       the height budget is small so the board never reaches the limit and the
       bug is invisible. On a DESKTOP window the height is plentiful, so the
       board is sized off the height, exceeds the column, and the play screen
       overflows sideways inside a centred 820px app — measured on production
       at 1680x1050: scrollWidth 1076 in a clientWidth of 820. The board did
       not overflow the WINDOW, which is why every "is it on screen" check
       passed; you just had to drag to reach the far files. */
    grid-template-columns: minmax(0, 1fr) minmax(120px, 26%);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px; min-height: 0;
  }
  #boardWrap { grid-column: 1; grid-row: 1 / -1; align-self: stretch; min-height: 0; min-width: 0; }
  /* Captures keep their meaning: white's haul above, black's below, so they
     stay on the side of the board they were on. */
  #capTop { grid-column: 2; grid-row: 1; align-self: end;   flex-wrap: wrap; }
  #capBot { grid-column: 2; grid-row: 2; align-self: start; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   PAD THE AXIS YOU HAVE TO SPARE, NOT THE ONE THAT BINDS.

   A square board is limited by exactly ONE of the two axes, and every pixel of
   padding on that axis comes straight off the board. Padding on the other axis
   costs nothing — there is spare there by definition. Symmetrical padding
   therefore charges the board full price for a gutter it only needs on one
   side of the problem.

   Measured on this game before the fix: in landscape the play screen's 24px of
   vertical padding was the ENTIRE difference between a board at 90% of the
   available height and one at ~98%, while ~560px of width sat unused beside
   it. In portrait it is the mirror image — the board is width-bound and the
   horizontal padding is what costs.

   4px rather than 0 on the binding axis: a board flush to the edge reads as
   clipped, and on a rounded-corner phone it can actually be.
   --------------------------------------------------------------------------- */
/* `and (max-height: 620px)` — the row layout is for a window whose HEIGHT is
   scarce, not for any window that happens to be wide.
   `min-aspect-ratio: 1/1` alone caught two different situations and only one
   of them wanted this. On a 1440x900 desktop the board ended up bounded by the
   side COLUMN at 568px while 220px of height sat unused; the ordinary column
   layout gives it ~708px there. Measured across 1024x600 (row wins, 496 vs
   416), 1280x800 (column wins, 616 vs 587) and 1440x900 (column wins, 708 vs
   568), the crossover sits just above a short laptop, so 620px keeps every
   phone landscape on the row layout and hands every real desktop window back
   to the column. */
@media (min-aspect-ratio: 1/1) {
  #scr-play.on { padding-top: 4px; padding-bottom: 4px; }
}
@media (max-aspect-ratio: 1/1) {
  #scr-play.on { padding-left: 4px; padding-right: 4px; }
}