:root {
  --bg: #2b2d30; --wood: #dcb36a; --panel: #212326; --line: #393c40; --accent: #5e8f4e;
  --text: #e8e6e1; --dim: #a09d97; --size: min(calc(100vh - 54px), calc(100vw - 440px));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif; }
#app { display: flex; justify-content: center; align-items: flex-start; gap: 12px; padding: 27px; height: 100vh; }

#tabs { position: fixed; top: 2px; left: 27px; display: flex; gap: 4px; z-index: 20; }
#tabs button { padding: 0 10px; font-size: 12px; height: 22px; }
#tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#tabs select { height: 22px; padding: 0 4px; font-size: 12px; }

#boardwrap { flex: none; width: var(--size); height: var(--size); direction: ltr; }
#board { display: block; width: 100%; height: 100%; background: var(--wood); border-radius: 3px; user-select: none; touch-action: manipulation; box-shadow: 0 2px 10px #0007; }
#board .grid { stroke: #2b1d0c; stroke-width: .035; }
#board .hoshi { fill: #2b1d0c; }
#board .label { fill: #4a3518; font-size: .42px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#board .num { font-size: .46px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#board .cand { font-size: .3px; font-weight: 600; text-anchor: middle; dominant-baseline: central; fill: #111; pointer-events: none; }

#evalbar { position: relative; flex: none; width: 22px; height: var(--size); background: #eeeeea; overflow: hidden; }
#evalfill { position: absolute; left: 0; right: 0; top: 0; height: 50%; background: #17181a; transition: height .35s; }
#evaltext { position: absolute; left: 0; right: 0; top: 3px; text-align: center; font-size: 10px; font-weight: 600; color: #eee; }

#panel { flex: none; width: 340px; height: var(--size); display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#controls { background: var(--panel); border-radius: 4px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
#controls label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--dim); min-width: 0; }
#controls select { width: 100%; min-width: 0; }
select, button { font: inherit; background: var(--line); color: var(--text); border: 1px solid #4b4e52; border-radius: 3px; padding: 4px 6px; }
button { cursor: pointer; }
button:hover:not(:disabled) { background: #4b4e52; }
button:disabled { opacity: .45; cursor: default; }
button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#new { align-self: end; }
.buttons { grid-column: 1 / -1; display: flex; gap: 6px; }
.buttons button { flex: 1; min-width: 0; }
#status { flex: none; background: var(--panel); border-radius: 4px; padding: 8px 10px; min-height: 37px; }
#action { flex: none; background: var(--accent); border-color: var(--accent); color: #fff; padding: 6px; }

#graph { flex: none; width: 100%; height: 70px; background: var(--panel); border-radius: 4px; cursor: pointer; }
#moves { flex: 1 1 35%; min-height: 60px; overflow-y: auto; background: var(--panel); border-radius: 4px; padding: 4px; direction: ltr; }
.mrow { display: grid; grid-template-columns: 34px 1fr 1fr; }
.mno { color: var(--dim); padding: 2px 4px; }
.mv { padding: 2px 6px; cursor: pointer; border-radius: 3px; display: flex; justify-content: space-between; gap: 4px; }
.mv:hover { background: var(--line); }
.mv.cur { background: #4a4d51; }
.mv small { font-size: 12px; font-weight: 600; }

#detail { flex: 1 1 65%; min-height: 80px; overflow-y: auto; background: var(--panel); border-radius: 4px; padding: 8px 10px; }
#detail h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.cand-row { display: grid; grid-template-columns: 46px 56px 76px 1fr; gap: 6px; padding: 2px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: default; }
.cand-row:hover { background: #ffffff0f; }
.cand-row.head { color: var(--dim); font-size: 12px; border-top: 0; }
.cand-row.head:hover { background: none; }
.cand-row .pv { color: var(--dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: ltr; }
.note { color: var(--dim); font-size: 12px; margin: 6px 0; }
.c-best { color: #9fd356; } .c-good { color: #c5d99a; } .c-ok { color: #d8d8d8; }
.c-inacc { color: #f0c15c; } .c-mistake { color: #f0924a; } .c-blunder { color: #f0584a; } .c-huge { color: #e23ad0; }
.worst { display: flex; justify-content: space-between; padding: 2px 4px; cursor: pointer; border-radius: 3px; }
.worst:hover { background: var(--line); }
.side { margin: 8px 0; }
.side b { font-weight: 600; }
.counts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }

#games { max-width: 1000px; margin: 0 auto; padding: 32px 27px 40px; height: 100vh; overflow-y: auto; }
#gamesbar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.grow { display: grid; grid-template-columns: 150px 70px 90px 80px 1fr 60px 90px 150px; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); align-items: center; }
.grow.head { color: var(--dim); font-size: 12px; }
.grow .acts { display: flex; gap: 4px; }
.grow .acts button { padding: 1px 8px; font-size: 12px; }

@media (max-width: 800px) {
  :root { --size: calc(100vw - 42px); }
  html, body { height: auto; }
  #app { flex-wrap: wrap; height: auto; padding: 27px 6px 6px; gap: 6px; }
  #evalbar { width: 16px; }
  #panel { width: 100%; height: auto; }
  #moves { max-height: 150px; }
  #detail { max-height: 300px; }
  .grow { grid-template-columns: 1fr 1fr 1fr; }
}

#legal { flex: none; margin: 0; font-size: 12px; text-align: center; }
#legal a { color: var(--dim); }