/* Storm on a desktop — its own layout, loaded only on a wide screen with a mouse or trackpad (the <link> media query
   in index.html), so the phone never reads a line of it. Same pieces, rearranged around a full-height board:
   GAME card (commands, rules, keys) · eval gauge + board · MOVES card (players, best line, score table, undo/redo). */
:root {
  --top-h: 60px;
  --pad: clamp(20px, 3.4vh, 44px);
  --left-w: clamp(220px, 15vw, 272px);
  --right-w: clamp(304px, 22vw, 392px);
  --col-gap: clamp(22px, 2.3vw, 40px);
  --gauge-w: 16px;
  --gap: 6px;
  --bar-h: 56px;
  --label-h: 40px;
  --cmd-h: 46px;
  --board: min(
    calc(100dvh - var(--top-h) - 2 * var(--pad)),
    calc(100vw - var(--left-w) - var(--right-w) - 2 * var(--col-gap) - var(--gauge-w) - var(--gap) - 64px),
    1040px);
  --total: calc(var(--left-w) + 2 * var(--col-gap) + var(--gauge-w) + var(--gap) + var(--board) + var(--right-w));
  --x0: calc((100vw - var(--total)) / 2);
  --y0: calc(var(--top-h) + (100dvh - var(--top-h) - var(--board)) / 2);
}

/* ---------- header: a full-width rule, the lockup on the layout's left edge ---------- */
.top { border-bottom: 1px solid var(--rule); }
.top-in { width: var(--total); height: var(--top-h); border-bottom: 0; }
.rules-tag { display: none; }

/* ---------- the grid ---------- */
.app {
  display: grid;
  grid-template-columns: var(--left-w) var(--col-gap) var(--gauge-w) var(--gap) var(--board) var(--col-gap) var(--right-w);
  grid-template-rows: var(--bar-h) calc(var(--board) - 2 * var(--bar-h)) var(--bar-h);
  align-content: center; justify-content: center; align-items: stretch;
  gap: 0; padding: 0;
}
.table, .side { display: contents; }
.field { grid-column: 3 / 6; grid-row: 1 / 4; }
.board { cursor: pointer; }

/* ---------- the MOVES card (right): opponent, best line, score table, undo/redo, you ---------- */
.app::before {
  content: ""; grid-column: 7; grid-row: 1 / 4;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
}
.bar { grid-column: 7; height: var(--bar-h); padding: 0 12px 0 16px; gap: 10px; min-width: 0; }
#bar-top { grid-row: 1; border-bottom: 1px solid var(--rule); }
#bar-bottom { grid-row: 3; border-top: 1px solid var(--rule); }
.bar .tile { width: 28px; height: 28px; }
.bar .name { font-size: 13.5px; }
.bar .status { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.engine {
  display: flex; align-items: center; gap: 7px;
  width: auto; height: 32px; padding: 0 11px 0 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.engine::after { content: "Best line"; white-space: nowrap; }
.engine:not([aria-pressed="true"]):hover { background: var(--press); }

.well {
  grid-column: 7; grid-row: 2;
  display: flex; flex-direction: column; min-height: 0;
  width: auto; padding: 0; border-top: 0;
  overflow: clip;
}
.readout { order: 1; flex: none; padding: 14px 16px 14px; margin: 0; }
.readout:not(:empty) { border-bottom: 1px solid var(--rule); margin: 0; }
.verdict { font-size: 12px; }
.verdict .tile { width: 20px; height: 20px; }
.pv { margin-top: 7px; font-size: 14px; line-height: 1.7; }
.pv .more:hover { background: var(--press); color: var(--ink); }
.pv .n::after { content: "\2060"; } /* a move number never ends a line ("11…" / "g1=Q") */

/* the score sheet becomes a score table: number | White | Black */
.sheet {
  order: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 52px 1fr 1fr; grid-auto-rows: 32px; align-content: start;
  padding: 6px 0; font-size: 14.5px; line-height: 32px;
}
.sheet .n {
  grid-column: 1; margin: 0; padding-left: 16px;
  font-size: 12px; color: var(--ink3);
}
.sheet .mv { justify-self: start; text-align: left; padding: 0 8px; margin: 0 0 0 4px; border-radius: 3px; line-height: 26px; height: 26px; align-self: center; }
.sheet .mv:hover { background: var(--press); }
.sheet .mv.cur:hover { background: var(--ink); }
.sheet .score { grid-column: 1 / -1; margin: 0; padding-left: 16px; }
/* the caret: at the end it sits in the cell where the next move goes; with moves to redo it marks the next one instead */
.sheet .caret:last-child { justify-self: start; align-self: center; margin: 0 0 0 12px; width: 8px; height: 16px; }
.sheet .caret:not(:last-child) { display: none; }
.sheet .caret + .mv.fut, .sheet .caret + .n + .mv.fut { box-shadow: inset 2px 0 0 var(--ink3); border-radius: 0 3px 3px 0; }

.nav {
  order: 3; flex: none; position: static;
  margin: 0; padding: 0 12px 0 16px; height: 52px; gap: 6px;
  border-top: 1px solid var(--rule); background: none;
}
.nav button { width: 52px; height: 34px; }
.nav button svg { width: 19px; height: 19px; }
.nav button:not(:disabled):hover { background: var(--press); }

/* ---------- the GAME card (left): commands, rules, keys ---------- */
.strip {
  grid-column: 1; grid-row: 1 / 4; order: 0;
  display: flex; flex-direction: column;
  width: auto; max-width: none; height: auto; margin: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.strip::before, .menu::before {
  content: "Game"; display: flex; align-items: center; flex: none;
  height: var(--label-h); padding: 0 16px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2);
}
#rules-btn { display: none; }
.strip button {
  flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
  height: var(--cmd-h); padding: 0 12px 0 16px;
  font-size: 12px; letter-spacing: 0.06em; text-align: left;
}
.strip button + button { border-left: 0; border-top: 1px solid var(--rule); }
.strip button:hover { background: var(--press); }
.strip svg { width: 19px; height: 19px; flex: none; }
.strip button[aria-pressed] span::before { display: none; }
#btn-new span::after { content: " game"; }
#btn-flip span::after { content: " sides"; }
#btn-eval span::after { content: " bar"; }
#btn-computer::after, #btn-eval::after {
  content: "Off"; margin-left: auto;
  min-width: 38px; height: 22px; padding: 0 7px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink2);
}
#btn-computer[aria-pressed="true"]::after, #btn-eval[aria-pressed="true"]::after {
  content: "On"; border-color: var(--ink); color: var(--ink);
}
/* keys, at the foot of the card (monospace, so the columns line up) */
.strip::after {
  content: "←  →          undo · redo\A F             switch sides\A E             eval bar\A right-drag    draw an arrow";
  margin-top: auto; padding: 14px 16px 16px;
  border-top: 1px solid var(--rule);
  white-space: pre; font-size: 11px; line-height: 1.9; color: var(--ink2);
}

/* the rules: always open on a desktop, laid into the GAME card under the commands */
#rules-menu[hidden] { display: block !important; }
.menu {
  top: calc(var(--y0) + 1px + var(--label-h) + 4 * var(--cmd-h));
  left: calc(var(--x0) + 1px); right: auto; bottom: auto;
  width: calc(var(--left-w) - 2px);
  background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  box-shadow: none; animation: none; z-index: 20;
}
.menu::before { content: "Rules"; }
.menu button { padding: 9px 14px 11px 40px; }
.menu button + button { border-top: 0; }
.menu button:hover { background: var(--press); }
.menu button::before {
  content: ""; position: absolute; left: 16px; top: 13px; width: 10px; height: 10px;
  border: 1.2px solid var(--ink2); border-radius: 2px;
}
.menu button[aria-checked="true"]::before { left: 16px; top: 13px; width: 10px; height: 10px; background: var(--ink); border-color: var(--ink); }
.menu b { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.menu small { font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
.menu button:not([aria-checked="true"]) b { color: var(--ink2); }

/* big screens: the type grows with the board */
@media (min-width: 1800px) and (min-height: 900px) {
  :root { --bar-h: 62px; --label-h: 44px; --cmd-h: 52px; }
  .bar .name { font-size: 15px; }
  .bar .status { font-size: 13.5px; }
  .bar .tile { width: 32px; height: 32px; }
  .verdict { font-size: 13px; }
  .pv { font-size: 15.5px; }
  .sheet { font-size: 16px; grid-auto-rows: 36px; grid-template-columns: 58px 1fr 1fr; }
  .sheet .n { font-size: 13px; }
  .sheet .mv { line-height: 30px; height: 30px; }
  .strip button { font-size: 13px; }
  .strip svg { width: 21px; height: 21px; }
  .strip::before, .menu::before { font-size: 11.5px; }
  .menu b { font-size: 13px; }
  .menu small, .strip::after { font-size: 12.5px; }
  .nav { height: 58px; }
  .move-no { font-size: 12px; }
  .engine { font-size: 11.5px; height: 36px; }
}

/* short windows: the keys give way first */
@media (max-height: 760px) {
  .strip::after { display: none; }
}

/* ---------- messages sit over the board, not over a strip that is no longer at the bottom ---------- */
.toast {
  left: calc(var(--x0) + var(--left-w) + var(--col-gap) + var(--gauge-w) + var(--gap) + var(--board) / 2);
  bottom: calc((100dvh - var(--top-h) - var(--board)) / 2 + 28px);
}