:root {
  color-scheme: light;
  --bg: #fff; --page: #f6f2ea; --surface: #fbf8f2;
  --text: #33261a; --muted: #75624f; --line: #e2d6c2;
  --accent: #e0a020; --accent-text: #8a5410; --tint: #fcf0d4;
  --cell: #fff; --cell-line: #9c8a74; --determined-black: #555;
  --determined-white: #eae7e2; --stone: #111; --on-stone: #fff;
  --outline: #b5651d; --win: #b85400; --loss: #3d5f8f;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #211810; --page: #17110a; --surface: #2a1f14;
  --text: #f3e8d6; --muted: #bfa98b; --line: #463523;
  --accent: #f0b53a; --accent-text: #f0b53a; --tint: #3a2b14;
  --cell: #f6f3ee; --cell-line: #8a7860; --determined-black: #555;
  --determined-white: #b9b4ad; --stone: #0a0a0a; --on-stone: #fff;
  --outline: #f0a25a; --win: #f0a030; --loss: #8fb0e0;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--text); font: 15px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; color: var(--text); }
button, input[type=text], input[type=number], select { min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); max-width: 100%; }
button { cursor: pointer; touch-action: manipulation; }
button:hover:not(:disabled) { background: var(--tint); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, tr:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-text); flex-shrink: 0; }
.page { max-width: 1360px; padding: 0 16px 32px; margin: auto; }
header { padding: 12px 0 16px; }
h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -.035em; margin: 10px 0 0; }
h2 { font-size: 1rem; margin: 0 0 10px; }
p { margin: 6px 0; }
.preferences, .row, .position-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.preferences { justify-content: space-between; }
.small-toggle { display: flex; gap: 2px; }
.small-toggle button { border-color: transparent; background: transparent; font-size: .8rem; }
.small-toggle button[aria-pressed=true] { color: var(--accent-text); font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.workspace { display: grid; grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr); align-items: start; gap: 16px; }
.board-column, .panel-column { min-width: 0; display: grid; gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: var(--bg); min-width: 0; }
.position-heading { justify-content: space-between; }
.position-heading h2 { margin: 0; }
#status { font-weight: 650; }
.counter { color: var(--accent-text); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: .8rem; }
#notice:empty, #selection:empty { display: none; }
#error { border: 1px solid var(--outline); padding: 8px; overflow-wrap: anywhere; }
#board { display: block; width: 100%; max-width: 720px; margin: 8px auto; touch-action: manipulation; }
#board .cell, .thumbnail polygon { stroke: var(--cell-line); stroke-width: .32; stroke-linejoin: round; }
#board .free, .thumbnail .free { fill: var(--cell); }
#board .fb { fill: var(--determined-black); }
#board .fw { fill: var(--determined-white); }
#board .stone, .thumbnail .stone { fill: var(--stone); }
#board .last { stroke: var(--accent); stroke-width: 1.1; }
#board .mwin { fill: var(--tint); stroke: var(--accent-text); stroke-width: .65; }
#board .fb.mwin { fill: var(--determined-black); stroke-width: 1; }
#board .mlose { stroke-dasharray: .65 .65; }
#board .selected { stroke: var(--outline); stroke-width: 1.1; }
#board .playable { cursor: pointer; }
#board .playable:hover .cell, #board .playable:focus-visible .cell { stroke: var(--accent); stroke-width: 1; }
#board g:focus { outline: none; }
#board text { text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: #33261a; font-size: 2.5px; font-weight: 650; paint-order: stroke; stroke: #fff; stroke-width: .5px; stroke-linejoin: round; }
#board .num { stroke: none; }
#board .move-value { font-size: 4.8px; font-weight: 800; stroke-width: .65px; }
/* board cells stay light in both themes, so their labels use the light-theme colors */
#board .win { fill: #b85400; }
#board .loss { fill: #3d5f8f; }
td.win { color: var(--win); font-weight: 700; }
td.loss { color: var(--loss); }
#board .num { fill: var(--on-stone); }
#board .source { font-size: 1.9px; font-weight: 700; stroke-width: .45px; }
#board .after { font-size: 1.8px; font-weight: 500; }
#board .determined-dot { fill: var(--accent); pointer-events: none; }
#board .solution-outline { fill: none; stroke: var(--outline); stroke-width: .65; stroke-dasharray: 1.1 .6; pointer-events: none; }
.navigation { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 16px; }
.navigation button { min-width: 40px; }
#history-position { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; font-size: .85rem; }
.overlays { display: flex; gap: 6px 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.overlays label { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: .85rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: .75rem; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 5px; }
.sw { display: inline-block; width: 12px; height: 14px; border: 1px solid var(--cell-line); background: var(--cell); border-radius: 3px; }
.sw.stone { background: var(--stone); }
.sw.fb { background: radial-gradient(circle, var(--accent) 0 1.5px, var(--determined-black) 2px); }
.sw.fw { background: radial-gradient(circle, var(--accent) 0 1.5px, var(--determined-white) 2px); }
.sw.mwin { background: var(--tint); border-color: var(--accent); }
.sw.mlose { border-style: dashed; }
.legend-note { margin-bottom: 0; }
fieldset { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
legend, label[for], .time { font-size: .85rem; font-weight: 600; }
legend { margin-bottom: 6px; color: var(--muted); }
.toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle button { flex: 1 1 auto; font-size: .83rem; }
.toggle button[aria-pressed=true] { background: var(--accent-text); color: var(--bg); border-color: var(--accent-text); font-weight: 650; }
.time { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
input[type=number] { width: 6em; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; font-size: .86rem; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
#position-value { font-weight: 700; color: var(--accent-text); margin-top: 12px; }
#value-source { min-height: 1.6em; }
.kifu { max-height: 260px; overflow-y: auto; padding-left: 2.2em; margin-bottom: 0; font-size: .85rem; }
.kifu li { padding-left: 2px; }
.kifu li button { display: block; width: 100%; border-color: transparent; text-align: left; padding: 4px 8px; min-height: 34px; font-size: .85rem; }
.kifu button[aria-current=step], #initial[aria-current=step] { background: var(--tint); color: var(--accent-text); font-weight: 700; }
.kifu .future { opacity: .55; }
.kifu .move-count { float: right; margin-left: 8px; color: var(--muted); }
.table-scroll { max-height: 360px; overflow-y: auto; margin: 8px 0; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; table-layout: fixed; }
thead { position: sticky; top: 0; background: var(--bg); z-index: 1; }
th, td { padding: 6px 3px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; width: 30%; }
th button { font-size: .78rem; width: 100%; min-height: 36px; border: 0; padding: 3px; background: transparent; text-align: inherit; }
th[aria-sort=ascending] button::after { content: ' ↑'; }
th[aria-sort=descending] button::after { content: ' ↓'; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr[aria-selected=true] { background: var(--tint); }
.value-source { display: block; color: var(--muted); font-size: .65rem; }
#move-rows td:first-child small { display: block; font-size: .65rem; color: var(--muted); }
#play-selected { width: 100%; }
.row { margin: 8px 0 12px; align-items: stretch; }
#import-moves { flex: 1 1 100px; width: 0; min-width: 0; }
select { display: block; width: 100%; margin-top: 6px; font-size: .85rem; }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; }
.solutions-grid button { padding: 3px; font-size: .75rem; }
.thumbnail { display: block; width: 100%; }
.solutions-grid button[aria-pressed=true] { border-color: var(--outline); background: var(--tint); }
.help summary { font-weight: 650; cursor: pointer; }
.help ul { padding-left: 20px; font-size: .85rem; }
.help li + li { margin-top: 8px; }
@media (max-width: 820px) { .workspace { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .card { padding: 12px; } .preferences { gap: 0; } button, input, select { font-size: 16px; } .navigation { gap: 4px; } }

/* app layout: the page fits the viewport; the board takes the free height */
body.app { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.app .page { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding: 0 16px 12px; }
body.app header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
body.app h1 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.app .preferences { flex-shrink: 0; flex-wrap: nowrap; gap: 4px; }
body.app .small-toggle button { min-height: 34px; padding: 4px 7px; }
body.app .workspace { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
body.app .board-column { display: flex; flex-direction: column; min-height: 0; }
body.app .board-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.app .board-card > p { flex-shrink: 0; }
body.app #board { flex: 1 1 0; min-height: 100px; height: auto; max-width: none; margin: 4px 0; }
body.app .navigation { margin: 4px 0 0; flex-shrink: 0; }
body.app .board-card { position: relative; }
body.app .position-heading { position: absolute; top: 12px; right: 14px; z-index: 1; }
body.app .position-heading h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.app .position-heading button { min-height: 32px; padding: 2px 10px; font-size: .8rem; }
body.app #status { font-size: .85rem; margin: 0; padding-right: 7.5em; }
body.app .counter { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0; }
body.app #notice { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
body.app #selection { margin: 0; }
/* side panel: tabs on top, the chosen group scrolls inside */
body.app .panel-column { display: flex; flex-direction: column; gap: 0; min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow: hidden; }
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel-body > .card { border: 0; border-radius: 0; }
.panel-body > [data-tab]:not([hidden]) ~ [data-tab]:not([hidden]) { border-top: 1px solid var(--line); }
.panel-tabs { display: flex; flex-shrink: 0; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); scrollbar-width: none; }
.panel-tabs button { flex: 1 0 auto; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: .82rem; padding: 6px 10px; }
.panel-tabs button[aria-selected=true] { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); background: var(--bg); }
body.app .table-scroll, body.app .kifu { max-height: none; overflow: visible; }
.sheet-close { display: none; }
/* tab names already label these groups */
.panel-body > :is([data-tab=moves], [data-tab=details], [data-tab=kifu], [data-tab=solutions], [data-tab=display]) > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* narrow screens: the board gets the whole area; a tab opens its group as a sheet over the board and closes it again */
@media (max-width: 820px) {
  body.app .page { padding: 0 8px 4px; }
  body.app .workspace { display: flex; flex-direction: column; gap: 4px; }
  body.app .board-column { flex: 1 1 auto; }
  body.app .board-card { border: 0; background: transparent; padding: 0; }
  body.app .position-heading { top: 0; right: 0; }
  body.app #board { margin: 2px 0; }
  body.app .navigation button { min-height: 34px; }
  body.app .panel-column { flex: 0 0 auto; position: relative; overflow: visible; }
  body.app .panel-tabs { border-bottom: 0; border-radius: 6px; }
  .panel-tabs button { border-bottom: 0; border-top: 2px solid transparent; padding: 6px 8px; font-size: .78rem; }
  .panel-tabs button[aria-selected=true] { border-top-color: var(--accent); }
  .panel-body { display: none; position: absolute; left: -1px; right: -1px; bottom: calc(100% + 4px); max-height: min(45dvh, 440px); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -8px 28px #3b2a1a33; z-index: 5; }
  body.sheet-open .panel-body { display: block; }
  .sheet-close { display: flex; justify-content: center; align-items: center; position: sticky; top: 0; z-index: 2; width: 100%; min-height: 26px; padding: 0; border: 0; border-radius: 12px 12px 0 0; background: var(--bg); }
  .sheet-close span { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
  .panel-body > .card { padding: 4px 12px 12px; }
  body.app [data-tab=moves] > p.muted { display: none; }
  body.app thead { top: 26px; }
}
/* phones: no room for the source marks on the board (the moves table still shows them) */
@media (max-width: 640px) {
  #board .source { display: none; }
  #board .move-value { font-size: 5.6px; stroke-width: .75px; transform: translateY(1.6px); }
}