/* Connect Four: Board & Card Games hub palette so it reads as a sibling. */
:root {
  --bg: #0f1117;
  --bg-soft: #161923;
  --card: #1a1e2b;
  --card-hover: #212636;
  --line: #2a3042;
  --text: #e8eaf0;
  --muted: #969db4;
  --accent: #6ea8fe;
  --warm: #f0b354;
  --good: #6ee7a8;
  --bad: #f08c8c;
  --red: #e5484d;
  --yellow: #f5c84c;
  --radius: 12px;
  --tabh: 58px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow: hidden; overflow-x: clip; touch-action: manipulation;
}
button { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ shell */
.app { height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; position: relative; }
.tab { position: absolute; inset: 0; display: none; flex-direction: column; padding: 8px 10px 6px; overflow: hidden; gap: 6px; }
.tab.active { display: flex; }
.tab.scroll { overflow-y: auto; }
nav.tabs {
  height: calc(var(--tabh) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--bg-soft); border-top: 1px solid var(--line); flex: none;
}
nav.tabs button {
  flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
nav.tabs button svg { width: 22px; height: 22px; }
nav.tabs button.on { color: var(--accent); }
nav.tabs .brand { display: none; }

@media (min-width: 900px) {
  .app { flex-direction: row-reverse; }
  nav.tabs { flex-direction: column; width: 190px; height: 100dvh; border-top: 0; border-right: 1px solid var(--line); padding: 18px 10px; justify-content: flex-start; gap: 4px; }
  nav.tabs button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; border-radius: 10px; font-size: 15px; }
  nav.tabs button.on { background: rgba(110,168,254,.12); }
  nav.tabs .brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 18px; font-weight: 800; font-size: 19px; letter-spacing: .01em; }
  nav.tabs .brand img { width: 30px; height: 30px; border-radius: 7px; }
  .tab { padding: 14px 18px; }
}

/* ---------------------------------------------------------------- basics */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 9px 14px; min-height: 44px; cursor: pointer; font-weight: 650;
  transition: background .12s, border-color .12s, transform .08s, opacity .2s; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--card-hover); border-color: #3a4258; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .38; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0d1424; }
.btn.warm { background: var(--warm); border-color: var(--warm); color: #231703; }
.btn.on { background: rgba(240,179,84,.16); border-color: var(--warm); color: var(--warm); }
.btn.small { min-height: 36px; padding: 5px 10px; font-size: 13.5px; border-radius: 8px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.q { display: inline-flex; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 700; align-items: center; justify-content: center; cursor: pointer; background: var(--bg-soft); vertical-align: 1px; margin-left: 4px; padding: 0; flex: none; position: relative; }
.q::after { content: ""; position: absolute; inset: -11px; } /* 40px tap area */
.label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 7px 4px; min-height: 42px;
  cursor: pointer; font-size: 14px; font-weight: 650; line-height: 1.2; transition: background .12s, border-color .12s; }
.seg button small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 1px; }
.seg button.on { background: rgba(110,168,254,.14); border-color: var(--accent); color: var(--accent); }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #2b3246; border-radius: 15px; transition: background .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
input[type=text] { background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 16px; width: 100%; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.panel h2 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- the table (Play) */
/* The board stands on a wooden table; your discs are stacked at the near edge, the other
   player's across the table. #pl is display:contents so its two seats sit above and below the board. */
.tabletop { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; border-radius: 14px; padding: 6px 6px 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,230,190,.12); }
.tabletop > * { order: 3; }
.players { display: contents; }
.tabletop .pl.far { order: 0; }
.tabletop .stage, .tabletop #ponline { order: 1; }
.tabletop .pl.near { order: 2; }
.pl { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; height: 48px; }
.pl.far { height: 34px; } .pl.far .plate { height: 32px; }
.pl .pile { flex: none; display: flex; align-items: flex-end; height: 100%; }
.pl .stacks { display: block; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.pl .plate { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 62%; height: 36px; padding: 0 10px; border-radius: 6px;
  background: linear-gradient(#3b2a1a, #24180d); border: 1px solid #7a5a2e; color: #f6efdc;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.22), 0 2px 4px rgba(0,0,0,.4); transition: border-color .2s, box-shadow .2s; }
.pl .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.15; }
.pl .nm small { display: block; font-size: 11px; color: #cdbb98; font-weight: 550; }
.pl.far .nm { font-size: 12px; } .pl.far .nm small { font-size: 10px; } .pl.far .sc { font-size: 15px; } .pl.far .plate { padding: 0 8px; gap: 7px; }
.pl .sc { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; }
.pl.turn .plate { border-color: #f0c35a; box-shadow: 0 0 0 2px rgba(240,195,90,.45), 0 2px 4px rgba(0,0,0,.4); }
/* phone on its side: the board takes the table's full height in the middle; your seat with the
   status and verdict sits on the left, the other player's seat on the right */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .tabletop { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) minmax(120px, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto;
    grid-template-areas: ". board far" "st board far" "vd board far" "near board far"; column-gap: 8px; row-gap: 4px; padding: 6px; }
  .tabletop .pl.far { grid-area: far; align-self: start; flex-direction: column; }
  .tabletop .pl.near { grid-area: near; align-self: end; }
  .tabletop .stage { grid-area: board; min-width: 0; }
  .tabletop #ponline { grid-area: 1 / 1 / -1 / -1; }
  .tabletop .status { grid-area: st; }
  .tabletop .verdict { grid-area: vd; }
  .tabletop .status { height: auto; min-height: 24px; flex-wrap: wrap; }
  /* fixed room for four lines, so the seat under it never moves */
  .tabletop .verdict { height: 76px; }
  .tabletop .pl { flex-direction: column-reverse; height: auto; gap: 4px; }
  .tabletop .pl .plate { max-width: 100%; height: 34px; }
  .tabletop .pl .pile { height: auto; max-width: 100%; }
  /* big boards (5 stacks) shrink to fit the side instead of running off the table */
  .tabletop .pl .stacks { max-width: 100%; height: auto; }
}
/* My stats: your picture in the table's top-left corner, a name plate like the seats' (label on laptop) */
.c4-me { position: absolute; top: 5px; left: 6px; z-index: 2; height: 36px; min-width: 36px; padding: 0 4px; gap: 8px; border-radius: 18px;
  background: linear-gradient(#3b2a1a, #24180d); border: 1px solid #7a5a2e; color: #f6efdc; font: 700 13.5px/1 inherit;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.22), 0 2px 4px rgba(0,0,0,.4); }
.c4-me:active { transform: scale(.95); }
.c4-me .pf-av { width: 26px; height: 26px; }
.c4-me span { display: none; }
@media (min-width: 900px) { .c4-me { top: 10px; left: 12px; height: 40px; padding: 0 5px; border-radius: 20px; } .c4-me .pf-av { width: 28px; height: 28px; } .c4-me span { display: inline; padding-right: 7px; } }
.tabletop .status { text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tabletop .verdict { color: rgba(243,239,228,.72); }
.tabletop .verdict b { color: #fff; }

/* ---------------------------------------------------------------- board */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.board-host { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.board-svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
.board-svg .hit { cursor: pointer; }
.col-hl { fill: rgba(255,255,255,.07); opacity: 0; transition: opacity .12s; pointer-events: none; }
.col-hl.on { opacity: 1; }
.board-svg .disc { transition: opacity .35s; }
.board-svg.over .disc { opacity: .58; }
.board-svg.over .win .disc { opacity: 1; }
.chip rect { fill: var(--bg-soft); stroke: var(--line); stroke-width: 3; }
.chip-t { font: 750 32px system-ui, -apple-system, sans-serif; fill: var(--text); letter-spacing: .01em; }
.chip-s { font: 650 27px system-ui, -apple-system, sans-serif; fill: var(--muted); }
.chip.w1 rect { fill: rgba(110,231,168,.22); stroke: #6ee7a8; } .chip.w1 .chip-t, .chip.w1 .chip-s { fill: #8af0bd; }
.chip.w2 rect { fill: rgba(110,231,168,.12); stroke: #4fae7e; } .chip.w2 .chip-t, .chip.w2 .chip-s { fill: #7fd3a8; }
.chip.d rect { fill: rgba(240,179,84,.12); stroke: #b98a45; } .chip.d .chip-t { fill: #f0c27a; }
.chip.l2 rect { fill: rgba(240,140,140,.10); stroke: #b0605f; } .chip.l2 .chip-t, .chip.l2 .chip-s { fill: #e7a0a0; }
.chip.l1 rect { fill: rgba(240,90,90,.18); stroke: #e26262; } .chip.l1 .chip-t, .chip.l1 .chip-s { fill: #ff9a9a; }
.chip.best rect { stroke-width: 7; }
.chip.wait rect { fill: none; stroke-dasharray: 8 8; }
.chip.wait .chip-t { fill: var(--muted); }
.chip.pick rect { stroke: var(--warm); stroke-width: 7; }
.win-ring { fill: none; stroke: #fff; stroke-width: 7; filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); animation: ring 1.2s ease-in-out infinite alternate; }
@keyframes ring { from { stroke-opacity: 1; } to { stroke-opacity: .75; } }
.lastmark { fill: rgba(255,255,255,.75); }
.popmark { fill: none; stroke: var(--warm); stroke-width: 6; stroke-dasharray: 10 8; }
.threat { stroke: rgba(0,0,0,.4); stroke-width: 3; }
.threat.tr { fill: #ff8a8a; } .threat.ty { fill: #ffe07a; }
.threat.odd { stroke: #fff; stroke-width: 4; }

.status { flex: none; text-align: center; font-weight: 750; font-size: 16.5px; height: 28px; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 7px; }
.status .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.status.win { color: var(--good); } .status.loss { color: var(--bad); }
.status.win, .status.loss, .status.over { font-size: 19px; }
.thinking::after { content: ""; display: inline-block; width: 14px; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.actions { flex: none; display: flex; gap: 6px; }
.actions .btn { flex: 1; padding: 8px 6px; }
/* Pop Out with a full board shows five buttons: on narrow phones they share the row (labels may wrap, icons go) */
@media (max-width: 420px) {
  .actions .btn { min-width: 0; white-space: normal; line-height: 1.1; text-align: center; }
  .actions:has(#bDraw:not([hidden])) .btn svg { display: none; }
}
/* fixed height (two lines, or the Review button) so the board never moves when it changes */
.verdict { flex: none; font-size: 13.5px; line-height: 19px; color: var(--muted); text-align: center; height: 38px; overflow: hidden; }
.verdict b { color: var(--text); }

/* ---------------------------------------------------------------- sheets */
#overlay { position: fixed; inset: 0; background: rgba(5,7,12,.6); display: none; z-index: 20; align-items: flex-end; justify-content: center; }
#overlay.show { display: flex; }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h3 { margin: 0; font-size: 18px; }
.sheet p { margin: 0; color: var(--muted); }
.sheet .row.end { justify-content: flex-end; }
@media (min-width: 700px) { #overlay { align-items: center; } .sheet { border-radius: 16px; } }
#toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 14px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: #262c3d; border: 1px solid var(--line);
  padding: 9px 14px; border-radius: 10px; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 30; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%); }
@media (min-width: 900px) { #toast { bottom: 24px; } }

/* ---------------------------------------------------------------- setup lists */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .label { display: flex; align-items: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.settings-wrap { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
table.strength { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.strength th, table.strength td { padding: 4px 5px; text-align: center; border-bottom: 1px solid var(--line); }
table.strength th:first-child, table.strength td:first-child { text-align: left; }

/* ---------------------------------------------------------------- online */
.code { font-size: 38px; letter-spacing: 8px; font-weight: 800; color: var(--warm); text-align: center; }
.seat { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.seat:last-child { border-bottom: 0; }
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.on-dot.on { background: var(--good); }
.online-wrap { max-width: 460px; width: 100%; margin: 8px auto auto; display: flex; flex-direction: column; gap: 10px; }
/* ---------------------------------------------------------------- study */
.study { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.study .stage { flex: 1 1 auto; }
.stepper { flex: none; display: flex; gap: 6px; align-items: center; }
.stepper .btn { min-width: 44px; padding: 6px; }
.stepper input[type=range] { flex: 1; min-width: 0; width: 0; accent-color: var(--accent); }
.moves { flex: 0 0 auto; max-height: 12dvh; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.mv { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.mv.cur { border-color: var(--accent); background: rgba(110,168,254,.12); }
.mv i { width: 10px; height: 10px; border-radius: 50%; }
.mv .tag { font-size: 11px; font-weight: 750; padding: 0 4px; border-radius: 5px; }
.tag.best { color: #8af0bd; } .tag.good { color: #b9e39b; } .tag.slow { color: #f0c27a; } .tag.mistake { color: #f7a26b; } .tag.blunder { color: #ff8080; } .tag.wait { color: var(--muted); }
.summary { flex: none; font-size: 12.5px; display: flex; gap: 2px 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.summary > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.summary span b { font-variant-numeric: tabular-nums; }
#stPick { gap: 10px; }
#stPick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#stPick span:first-child { flex: none; max-width: 70%; }
/* the move list scrolls; a soft fade shows there is more */
#stMoves, #pzList { -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); padding-bottom: 10px; }
.size-table td:not(:first-child) { font-size: 16px; font-weight: 800; }
.subtabs { flex: none; display: flex; gap: 6px; }
.subtabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 6px 2px; font-weight: 700; cursor: pointer; font-size: 14px; }
.subtabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.mini-board { display: grid; gap: 3px; background: #2456c8; padding: 6px; border-radius: 8px; }
.mini-board div { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #0f1117; }
.size-table td.w { color: var(--good); font-weight: 800; } .size-table td.l { color: var(--bad); font-weight: 800; } .size-table td.d { color: var(--warm); font-weight: 800; }

/* ---------------------------------------------------------------- laptop layouts */
.side { display: none; }
@media (min-width: 900px) {
  .play-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
  .play-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  .side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
  .study-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
  .moves { max-height: none; flex: 1; }
  /* Study sub-tabs sit over the board column; the right column is the side panel */
  #tab-study .subtabs { width: calc(100% - 356px); }
  .study-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
  .study-side .summary { flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 13.5px; gap: 6px; }
  .study-side .summary > span { white-space: normal; display: block; }
  .study-side .summary:not(:empty), .study-side .moves { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
  .study-side .moves { flex: 0 1 auto; overflow-y: auto; }
  .status { font-size: 19px; height: 32px; }
  .status.win, .status.loss, .status.over { font-size: 22px; }
  .status svg { width: 20px; height: 20px; }
  .verdict { font-size: 14.5px; line-height: 19px; }
  .tabletop { padding: 10px 14px 6px; gap: 6px; }
  .pl { height: 62px; } .pl.far { height: 46px; }
  .pl .plate { padding: 0 14px; height: 44px; } .pl.far .plate { height: 40px; }
  .pl .nm, .pl.far .nm { font-size: 15px; }
  .pl .nm small, .pl.far .nm small { font-size: 12px; }
  .pl .sc { font-size: 20px; }
  /* Play: status, verdict and buttons at the top of the side column, so the board gets the table's full height */
  .side .ctrl { flex: none; display: flex; flex-direction: column; gap: 6px; }
  .side .ctrl:empty, .play-grid:has(#pstage[hidden]) .ctrl { display: none; }
  .side .ctrl .verdict { height: 57px; }
  .side .ctrl .actions { flex-wrap: wrap; }
  .side .ctrl .actions .btn { flex: 1 1 28%; }
  .side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
}
@media (max-width: 899px) {
  .play-grid, .study-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .play-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .study-side { display: flex; flex-direction: column; gap: 6px; flex: none; }
}
/* portrait phone: the move list is one row that scrolls sideways, so the board gets the height */
@media (max-width: 899px) and (orientation: portrait) {
  #stMoves, #pzList { flex-wrap: nowrap; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); scrollbar-width: none; }
  #stMoves::-webkit-scrollbar, #pzList::-webkit-scrollbar { display: none; }
  #stMoves .mv, #pzList .mv { flex: none; white-space: nowrap; min-height: 34px; }
}
/* phone on its side, Table and Study: board on the left at full height, its controls in a column on the right */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  #tab-table .play-grid, .study-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); grid-template-rows: auto auto auto auto minmax(0, 1fr);
    column-gap: 10px; row-gap: 6px; align-items: start; }
  #tab-table .play-main, .study-grid > .play-main, .study-grid > .study-side { display: contents; }
  #tab-table .play-main > *, .study-grid > .play-main > *, .study-grid > .study-side > * { grid-column: 2; }
  #tab-table .stage, .study-grid .stage { grid-column: 1; grid-row: 1 / -1; align-self: stretch; }
  #stMoves, #pzList { grid-row: 5; max-height: 100%; align-self: stretch; }
  #tab-table .actions, .study-grid .actions { flex-wrap: wrap; }
  #tab-table .actions .btn, .study-grid .actions .btn { flex: 1 1 40%; }
  .study-grid .verdict { height: auto; min-height: 38px; max-height: 76px; }
  /* Study's board is held by the height here, so its controls can have half the width (game picker, summary) */
  .study-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); }
}

/* ---------------------------------------------------------------- Sound & effects (fx.js rows, in this site's own look) */
.fx-set .fx-row { border-top: 0; border-bottom: 1px solid var(--line); padding: 9px 0; min-height: 0; }
.fx-set .fx-row:last-child { border-bottom: 0; }
.fx-set .switch { width: 50px; height: 30px; }
.fx-set .switch input { opacity: 0; width: 0; height: 0; position: absolute; inset: auto; }
.fx-set .switch span { background: #2b3246; border-radius: 15px; transition: background .2s; cursor: pointer; }
.fx-set .switch span::after { width: 24px; height: 24px; transition: transform .2s; }
.fx-set .switch input:checked + span { background: var(--accent); }
.fx-set .switch input:checked + span::after { transform: translateX(20px); }
.fx-set .seg { gap: 6px; background: none; border: 0; padding: 0; border-radius: 0; }
.fx-set .seg button { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 7px 14px; min-height: 42px; font-size: 14px; font-weight: 650; color: inherit; cursor: pointer; }
.fx-set .seg button[aria-pressed="true"] { background: rgba(110,168,254,.14); border-color: var(--accent); color: var(--accent); }
.fx-set .q { width: 19px; height: 19px; font-size: 12px; background: var(--bg-soft); margin-left: 4px; cursor: pointer; position: relative; }
.fx-set .fx-test { min-height: 36px; padding: 5px 12px; font-size: 13.5px; background: var(--card); cursor: pointer; }