/* Koa Backgammon. One look, on purpose: a lanai table at dusk.
   The board is the bold element (koa frame, lauhala-weave field, lehua-red and ocean-teal points,
   bone and basalt checkers); everything around it stays quiet and dark.
   Layout: title = words + menu beside the board picture; game = board with a side panel
   (stacks under the board on narrow screens). */
:root {
  color-scheme: dark;
  --bg: #17120f; --panel: #221b16; --raise: #2c231d; --ink: #f3eadb; --muted: #b0a08c; --line: #3d3129;
  --lehua: #c2412d; --lehua-ink: #fff4ea; --gold: #e0ad55; --warn: #ec8a66;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* board */
  --koa-1: #7a3519; --koa-2: #9b4c25; --koa-3: #5c2410;
  --weave-a: #cfae7c; --weave-b: #c5a170; --weave-line: #9f7d4e;
  --pt-lehua: #a3352a; --pt-kai: #1d4f4c; --bar: #4b200f; --tray: #2b160b;
  --bone: #f1e6cf; --bone-ring: #c9b893; --bone-edge: #a8946c;
  --basalt: #2b2826; --basalt-ring: #514a44; --basalt-edge: #0f0e0d;
  /* the kit's lobby and chat */
  --kit-bg: var(--panel); --kit-ink: var(--ink); --kit-muted: var(--muted); --kit-line: var(--line);
  --kit-accent: var(--lehua); --kit-on-accent: var(--lehua-ink); --kit-warn: var(--warn);
  --kit-font: var(--text); --kit-display: var(--display);
  --kit-p0: var(--bone); --kit-p1: #6d655e;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--ink); font: 16px/1.5 var(--text);
  background: radial-gradient(120% 70% at 50% 0%, #2a1e16 0%, var(--bg) 60%) fixed, var(--bg);
}
#app { max-width: 1240px; margin: 0 auto; padding-block: 24px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-height: 44px; }
select option { background: var(--panel); }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.primary { background: var(--lehua); color: var(--lehua-ink); border-color: var(--lehua); font-weight: 600; }
.primary:hover:not(:disabled) { border-color: var(--gold); background: #cf4a35; }
.quiet { background: none; border-color: transparent; color: var(--muted); padding-inline: 0; }
.error { color: var(--warn); min-height: 1.5em; margin: 0; }

/* ---------- title ---------- */
#title { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; padding-top: 3vh; }
.eyebrow { color: var(--gold); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; margin: 0 0 14px; text-wrap: balance; letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 0 0 28px; max-width: 34em; }
.menu { display: grid; gap: 10px; max-width: 400px; }
.play-computer { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.match-opts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--muted); padding: 2px 0; }
.match-opts label { display: flex; gap: 8px; align-items: center; }
.match-opts select { min-height: 38px; padding: 6px 10px; }
.check input { min-height: 0; width: 18px; height: 18px; accent-color: var(--lehua); }
.online { display: grid; gap: 10px; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--line); }
.group { margin: 0; color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
#joinForm { display: flex; gap: 8px; }
#joinForm input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .15em; }
label.name { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); margin-top: 6px; }
label.name input { flex: 1; min-width: 0; max-width: 220px; }
.hero { margin: 0; transform: perspective(1400px) rotateX(14deg) rotateZ(-2deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }

/* ---------- how to play ---------- */
.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.rules-link { margin: -16px 0 24px; }
.side-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.rules { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.rules-inner { max-width: 1040px; margin: 0 auto; padding-block: 24px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.rules-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: 0; background: var(--bg); padding-block: 8px; z-index: 1; }
.rules h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.rules-fig { margin: 12px 0 28px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: center; }
.rules-fig figcaption { color: var(--muted); }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
.rules-grid section { border-top: 1px solid var(--line); padding-top: 12px; }
.rules h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin: 0 0 6px; color: var(--ink); }
.rules p, .rules li { color: #d9ccb9; max-width: 62ch; }
.rules p { margin: 0 0 10px; }
.rules ul { margin: 0 0 10px; padding-left: 20px; }
.rules li { margin: 4px 0; }
.rules strong { color: var(--ink); }
.rules-end { margin-top: 20px; }
@media (max-width: 760px) { .rules-fig, .rules-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- after-game review ---------- */
.review-summary { display: grid; gap: 6px; margin: 8px 0 18px; }
.review-summary p { margin: 0; }
.review-summary .who { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin-top: 8px; }
.review-summary .counts { color: var(--ink); }
.review-summary .rating strong { color: var(--gold); font-weight: 600; }
.review-summary .small { font-size: .85rem; color: var(--muted); }
.review-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; max-width: 420px; }
.review-progress span { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.review-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; margin-bottom: 18px; }
.review-fig { margin: 0; }
.review-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.review-detail p { margin: 0; }
.review-detail .where { color: var(--muted); font-size: .9rem; }
.review-detail .grade { font-size: 1.3rem; }
.review-detail .plays { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.review-detail .plays dt { color: var(--muted); }
.review-detail .plays dd { margin: 0; font-variant-numeric: tabular-nums; }
.review-detail .plays .better { color: var(--gold); font-weight: 600; }
.review-detail ul { margin: 0; padding-left: 18px; }
.review-detail .note { color: var(--muted); font-size: .92rem; }
.review-detail .nav { display: flex; gap: 8px; }
.review-detail .nav button { flex: 1 1 auto; min-height: 40px; }
.review-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.review-list button { width: 100%; text-align: left; display: grid; grid-template-columns: 5.5em 6.5em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 12px; min-height: 0; }
.review-list button[aria-current="true"] { border-color: var(--gold); }
.review-list .turn { color: var(--muted); font-size: .9rem; }
.review-list .plays { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.review-list .plays em { font-style: normal; color: var(--gold); }
.review .grade { font-family: var(--display); }
.review .grade.inaccuracy { color: var(--gold); }
.review .grade.mistake, .review .grade.blunder { color: var(--warn); }
.review .grade.best, .review .grade.good { color: #9fd08a; }
.review h3 { margin-top: 14px; }
@media (max-width: 760px) {
  .review-main { grid-template-columns: minmax(0, 1fr); }
  .review-list button { grid-template-columns: minmax(0, 1fr) auto; }
  .review-list .plays { grid-column: 1 / -1; }
}

/* ---------- game ---------- */
#play { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.table { min-width: 0; }
.board-wrap { position: relative; width: 100%; aspect-ratio: 960 / 640; max-width: 100%; }
.board-wrap .layer { position: absolute; inset: 0; }
.board-wrap svg { display: block; width: 100%; height: 100%; }
#play .board-wrap { filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.side { display: grid; gap: 12px; min-width: 0; }
#status .main { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; margin: 0; text-wrap: balance; }
#status .sub { color: var(--muted); margin: 4px 0 0; min-height: 1.5em; font-size: .95rem; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.controls button { flex: 1 1 auto; }
.controls .ready { box-shadow: 0 0 0 3px rgba(224,173,85,.35); }
.score { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; }
.who { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; }
.who + .who { border-top: 1px solid var(--line); }
.who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who.on .nm { font-weight: 700; }
.who.on .nm::after { content: " ●"; color: var(--gold); font-size: .7em; vertical-align: middle; }
.who .pips { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.who .pts { font-family: var(--display); font-size: 1.5rem; min-width: 1.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.chip { width: 16px; height: 16px; border-radius: 50%; }
.chip.bone { background: var(--bone); box-shadow: inset 0 0 0 2px var(--bone-ring); }
.chip.basalt { background: var(--basalt); box-shadow: inset 0 0 0 2px var(--basalt-ring), 0 0 0 1px #6b625b; }
.matchinfo { color: var(--muted); font-size: .85rem; margin: 2px 0 6px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#clock { font-variant-numeric: tabular-nums; }
#clock.low { color: var(--warn); }
#log { color: var(--muted); font-size: .88rem; padding-left: 0; list-style: none; margin: 0; max-height: 220px; overflow: auto; }
#log li { margin: 3px 0; }
#lobby { display: grid; justify-items: center; padding-top: 4vh; }
#handoff { text-align: center; padding-top: 80px; }

/* ---------- training (coach) ---------- */
.coach { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.coach .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.coach .label { color: var(--gold); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.coach .tally { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.coach .engine { margin-left: 6px; color: var(--muted); letter-spacing: .04em; text-transform: none; font-size: .78rem; }
.coach .engine::before { content: "· "; }
.coach .note.small { font-size: .82rem; }
.coach p { margin: 0; }
.coach .note { color: var(--muted); font-size: .92rem; }
.coach .note.bad { color: var(--ink); }
.coach .grade { font-family: var(--display); font-size: 1.3rem; }
.coach .grade.best, .coach .grade.good { color: #9fd08a; }
.coach .grade.inaccuracy { color: var(--gold); }
.coach .grade.mistake, .coach .grade.blunder { color: var(--warn); }
.coach .plays { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: .95rem; }
.coach .plays dt { color: var(--muted); }
.coach .plays dd { margin: 0; font-variant-numeric: tabular-nums; }
.coach .plays .better { color: var(--gold); font-weight: 600; }
.coach ul { margin: 0; padding-left: 18px; }
.coach li { margin: 2px 0; }
.coach .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coach .actions button { flex: 1 1 auto; min-height: 40px; padding: 8px 12px; }
.training-btn { display: grid; grid-template-columns: 1fr; }
.training-btn small { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }

/* ---------- board pieces (SVG) ---------- */
.koa-1 { stop-color: var(--koa-1); } .koa-2 { stop-color: var(--koa-2); } .koa-3 { stop-color: var(--koa-3); }
.weave-a { fill: var(--weave-a); } .weave-b { fill: var(--weave-b); } .weave-line { fill: var(--weave-line); opacity: .35; }
.field-shade { fill: rgba(40, 20, 8, .18); }
.pt.lehua { fill: var(--pt-lehua); } .pt.kai { fill: var(--pt-kai); }
.bar { fill: var(--bar); stroke: rgba(0,0,0,.35); stroke-width: 2; }
.tray { fill: var(--tray); stroke: rgba(0,0,0,.4); stroke-width: 2; }
.hinge { stroke: rgba(0,0,0,.35); stroke-width: 2; }
.num { fill: #f5dcc0; opacity: .75; font: 600 13px var(--text); text-anchor: middle; }
.ck .shadow { fill: rgba(0,0,0,.35); }
.ck.bone .face { fill: var(--bone); stroke: var(--bone-edge); stroke-width: 1.5; }
.ck.bone .ring { fill: none; stroke: var(--bone-ring); stroke-width: 2; }
.ck.bone .eye { fill: #e6d8bb; }
.ck.basalt .face { fill: var(--basalt); stroke: var(--basalt-edge); stroke-width: 1.5; }
.ck.basalt .ring { fill: none; stroke: var(--basalt-ring); stroke-width: 2; }
.ck.basalt .eye { fill: #36322f; }
.ck.movable .face { stroke: var(--gold); stroke-width: 3; }
.ck.selected .face { stroke: var(--gold); stroke-width: 5; }
.ck.selected { filter: drop-shadow(0 0 8px rgba(224,173,85,.8)); }
.count { font: 700 20px var(--text); text-anchor: middle; pointer-events: none; }
.ck.bone + .count, .count { fill: #5a4a35; }
.slab.bone { fill: var(--bone); stroke: var(--bone-edge); }
.slab.basalt { fill: var(--basalt); stroke: #5c544d; }
.ghost { stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; }
.ghost.bone { fill: rgba(241,230,207,.35); stroke: var(--gold); }
.ghost.basalt { fill: rgba(43,40,38,.45); stroke: var(--gold); }
.target-pt { fill: rgba(224,173,85,.38); }
.target-tray { fill: rgba(224,173,85,.25); stroke: var(--gold); stroke-width: 3; }
.die rect { stroke-width: 1.5; }
.die.bone rect { fill: #f7efdc; stroke: #b8a37c; } .die.bone circle { fill: #2a1d14; }
.die.basalt rect { fill: #2e2a27; stroke: #0d0c0b; } .die.basalt circle { fill: #f1e6cf; }
.die.used { opacity: .35; }
.die.faded { opacity: .5; }
.die.rolling { animation: tumble .5s cubic-bezier(.2,.8,.3,1); transform-box: fill-box; transform-origin: center; }
@keyframes tumble { 0% { transform: rotate(-200deg) scale(.6); opacity: 0; } 70% { transform: rotate(12deg) scale(1.05); opacity: 1; } 100% { transform: none; } }
.cube rect { fill: #f4ecda; stroke: #8f7a55; stroke-width: 2; }
.cube text { font: 700 22px var(--display); text-anchor: middle; fill: #3a2716; }
.cube.offered rect { stroke: var(--gold); stroke-width: 4; }
.hit { fill: transparent; cursor: pointer; }
.arrow { fill: none; stroke-width: 7; stroke-linecap: round; pointer-events: none; }
.arrow.best { stroke: var(--gold); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.arrow.mine { stroke: rgba(255,255,255,.55); stroke-dasharray: 2 12; stroke-width: 6; }
.arrow-head.best { fill: var(--gold); } .arrow-head.mine { fill: rgba(255,255,255,.7); }
.arrow-dot.best { fill: var(--gold); } .arrow-dot.mine { fill: rgba(255,255,255,.6); }
.arrow-dot { pointer-events: none; }
#heroLive .hit { cursor: default; }
@media (prefers-reduced-motion: reduce) { .die.rolling { animation: none; } }

/* ---------- narrow screens ---------- */
@media (max-width: 980px) {
  #play { grid-template-columns: minmax(0, 1fr); }
  .side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  #title { grid-template-columns: minmax(0, 1fr); }
  .hero { order: -1; max-width: 520px; }
  .menu { max-width: none; }
  #app { padding-top: 12px; }
  #status .main { font-size: 1.25rem; }
}