:root {
  --page: #dde5e1;
  --panel: #f3f6f3;
  --ink: #16302b;
  --muted: #5d716b;
  --line: #bfccc6;
  --accent: #cf2531;
  --food: #d6a03c;
  --sq-light: #ecdfbd;
  --sq-dark: #6e8c83;
  --frame: #21322e;
  --scope: #15120e;
  --radius-lg: 14px;
  --radius-sm: 7px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #111916;
    --panel: #18221f;
    --ink: #e2ebe7;
    --muted: #93a7a0;
    --line: #2d3d38;
    --accent: #ef4a55;
    --food: #e2b152;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
}
a { color: inherit; text-underline-offset: 3px; }
button, select, .button {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 12px; cursor: pointer; line-height: 1.2;
}
button:hover, .button:hover { border-color: var(--muted); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--ink); color: var(--panel); border-color: var(--ink); font-weight: 700; }
:focus-visible { outline: 3px solid var(--food); outline-offset: 2px; }
select { padding-right: 28px; width: 100%; }
h2 { font: 700 19px/1.2 "Bricolage Grotesque", sans-serif; margin: 0 0 10px; letter-spacing: -.01em; }

.top {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 18px 24px 14px;
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark svg { width: 38px; height: 44px; }
.wordmark span { font: 800 34px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.035em; }
.tagline { margin: 0; flex: 1 1 320px; color: var(--muted); max-width: 52ch; }
.gh { font-size: 14px; color: var(--muted); }

.layout {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, 1fr); gap: 30px;
  max-width: 1280px; margin: 0 auto; padding: 0 24px 32px; align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

/* ---------- board ---------- */
.stage { position: sticky; top: 12px; }
@media (max-width: 900px) { .stage { position: static; } }
.board-wrap { position: relative; }
#board { display: block; width: 100%; aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.frame { fill: var(--frame); }
.sq.light { fill: var(--sq-light); }
.sq.dark { fill: var(--sq-dark); }
.coords text { fill: rgba(236, 223, 189, .72); font: 600 24px "IBM Plex Mono", monospace; }
.hi-last { fill: rgba(214, 160, 60, .42); }
.hi-sel { fill: rgba(214, 160, 60, .7); }
.hi-dot { fill: rgba(22, 48, 43, .38); }
.hi-cap { fill: none; stroke: rgba(22, 48, 43, .38); stroke-width: 8; }
.hi-check { fill: rgba(207, 37, 49, .55); }
.arrow { stroke: var(--food); stroke-linecap: round; }
.arrow.best { stroke: var(--accent); }
.piece { transition: opacity .25s; }
.piece.lifted, .piece.dragging { filter: url(#lift); }
.piece.dragging { pointer-events: none; }
.piece.captured { opacity: 0; }
.promo-box { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.promo-pick { cursor: pointer; }
.sixseven {
  font: 800 150px "Bricolage Grotesque", sans-serif; fill: var(--food); stroke: var(--frame); stroke-width: 6;
  paint-order: stroke; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; transform-origin: 400px 200px; } to { transform: scale(1); opacity: 1; transform-origin: 400px 200px; } }

/* the fly */
.fly { pointer-events: none; }
.fly .wing { transform-box: fill-box; transition: transform .25s; }
.fly .wing-r { transform-origin: 12% 3%; }
.fly .wing-l { transform-origin: 88% 3%; }
.fly.flying .wing-r { animation: buzz-r 38ms linear infinite alternate; }
.fly.flying .wing-l { animation: buzz-l 38ms linear infinite alternate; }
.fly.flying .shadow { transform: translate(14px, 22px) scale(.8); opacity: .6; }
.fly .shadow { transition: transform .3s, opacity .3s; }
@keyframes buzz-r { from { transform: rotate(-18deg); } to { transform: rotate(-78deg); } }
@keyframes buzz-l { from { transform: rotate(18deg); } to { transform: rotate(78deg); } }
.fly .leg { transform-box: fill-box; }
.fly .leg-fl { transform-origin: 100% 100%; }
.fly .leg-fr { transform-origin: 0% 100%; }
.fly.six .leg-fl { animation: pump 0.46s ease-in-out infinite alternate; }
.fly.six .leg-fr { animation: pump-r 0.46s ease-in-out infinite alternate-reverse; }
.fly.six .fly-body { animation: bob .46s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes pump { from { transform: rotate(25deg); } to { transform: rotate(-35deg); } }
@keyframes pump-r { from { transform: rotate(-25deg); } to { transform: rotate(35deg); } }
@keyframes bob { from { transform: scale(1); } to { transform: scale(1.06); } }
.fly .antennae path { transform-box: fill-box; transform-origin: 50% 100%; }
.fly.sulk .fly-body { animation: sulk .35s ease-in-out 4 alternate; transform-box: fill-box; transform-origin: 50% 70%; }
.fly.sulk { opacity: .75; }
@keyframes sulk { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) {
  .fly.flying .wing-r, .fly.flying .wing-l, .fly.six .leg-fl, .fly.six .leg-fr, .fly.six .fly-body, .fly.sulk .fly-body, .sixseven { animation: none; }
}

.banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 22px; text-align: center; max-width: 80%;
  box-shadow: 0 12px 40px rgba(10, 20, 18, .28);
}
.banner b { display: block; font: 800 24px/1.15 "Bricolage Grotesque", sans-serif; margin-bottom: 4px; }
.banner span { color: var(--muted); font-size: 14px; }

.seat { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 2px; }
.seat svg { width: 26px; height: 30px; flex: none; }
.seat .who { font-weight: 700; }
.seat .meta { color: var(--muted); font-size: 14px; }
.seat.to-move .who::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--food); margin-left: 8px; vertical-align: 2px; }
.status { margin: 6px 2px 8px; min-height: 1.5em; font-weight: 700; }
.moves {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px;
  font: 14px/1.6 "IBM Plex Mono", monospace; color: var(--muted); max-height: 118px; overflow: auto;
  counter-reset: mv;
}
.moves li { counter-increment: mv; white-space: nowrap; }
.moves li::before { content: counter(mv) "."; margin-right: 6px; opacity: .6; }
.moves li:last-child { color: var(--ink); }

/* ---------- side ---------- */
.side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.modes { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.modes button {
  border: 0; background: none; border-radius: 0; padding: 10px 12px 11px; font-weight: 700; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.modes button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.panel { display: flex; flex-direction: column; gap: 14px; }
.panel[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.field > span { font-weight: 700; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 0; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.seg button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); position: relative; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.check input { accent-color: var(--ink); width: 16px; height: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions.small button, .actions.small .button { font-size: 13px; padding: 6px 10px; }
.note { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; }
.score { margin: 0; font: 600 15px "IBM Plex Mono", monospace; }

.tag {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--food);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px;
}
.tag dt { color: var(--muted); }
.tag dd { margin: 0; font-weight: 700; }
.tag .big { font: 800 22px/1.1 "Bricolage Grotesque", sans-serif; }

.life { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; padding-top: 4px; }
.life::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 3px; background: var(--line); }
.life .bar { position: absolute; left: 12.5%; top: 14px; height: 3px; background: var(--food); }
.life div.step { text-align: center; position: relative; font-size: 13px; color: var(--muted); }
.life div.step i { display: block; width: 23px; height: 23px; margin: 0 auto 4px; border-radius: 50%; background: var(--panel); border: 3px solid var(--line); }
.life div.step.done i { border-color: var(--food); background: var(--food); }
.life div.step.now { color: var(--ink); font-weight: 700; }
.life div.step.now i { border-color: var(--accent); }
.life small { display: block; font-size: 11px; }

.scope { background: var(--scope); color: #ece0c8; border-radius: var(--radius-lg); padding: 14px 14px 12px; }
.scope-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.scope-head p { margin: 0; font-size: 13px; color: rgba(236, 224, 200, .6); }
.scope h2 { color: #f2e8d5; }
#brain { width: 100%; display: block; border-radius: 6px; }
.scope-cap { margin: 10px 0 0; font-size: 13px; color: rgba(236, 224, 200, .6); }

.learned { display: flex; flex-direction: column; gap: 10px; }
.prices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.prices div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 4px 6px; text-align: center; }
.prices svg { width: 34px; height: 34px; display: block; margin: 0 auto; }
.prices b { display: block; font: 800 22px/1.1 "Bricolage Grotesque", sans-serif; }
.prices s { text-decoration: none; color: var(--muted); font-size: 13px; }
.prices .none { margin: 0; grid-column: 1 / -1; color: var(--muted); font-size: 14px; text-align: left; padding: 10px 12px; }
.curve { width: 100%; height: 190px; display: block; }

.foot { max-width: 1280px; margin: 0 auto; padding: 0 24px 30px; color: var(--muted); font-size: 14px; }
.foot p { max-width: 90ch; margin: 0; }
@media (max-width: 520px) {
  .modes button { font-size: 14px; padding: 9px 7px 10px; }
  .wordmark span { font-size: 28px; }
}
.banner { cursor: pointer; }
/* while raising a fly, its progress matters more than the live brain */
.modes { order: 0; }
.panel { order: 1; }
.scope { order: 2; }
.learned { order: 3; }
body[data-mode="train"] .learned { order: 2; }
body[data-mode="train"] .scope { order: 3; }

/* 2D / 3D */
.top .view button { font-size: 13px; padding: 6px 12px; font-weight: 700; }
.board-wrap.is3d #board { visibility: hidden; position: absolute; inset: 0; }
.board3d { display: none; width: 100%; aspect-ratio: 1; border-radius: 18px; touch-action: none; background: #1a2522; }
.promo3d {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px;
  box-shadow: 0 12px 40px rgba(10, 20, 18, .35);
}
.promo3d button { width: 64px; height: 64px; padding: 4px; }
.promo3d svg { width: 100%; height: 100%; }
.sixseven3d {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); pointer-events: none;
  font: 800 clamp(48px, 12vw, 120px) "Bricolage Grotesque", sans-serif; color: var(--food);
  -webkit-text-stroke: 3px #21322e; animation: pop3d .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes pop3d { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.brain3d { display: none; width: 100%; border-radius: 6px; cursor: grab; touch-action: none; }
.scope-readout { margin: 8px 0 0; font: 13px/1.45 "IBM Plex Mono", monospace; color: #ece0c8; }