:root {
  --art-cloud: #F6E7B8;
  --art-cream: #F3E6C4;
  --art-gold: #E3B04B;
  --art-ink: #3B2A3F;
  --art-olive: #B9B566;
  --art-peach: #EBA77C;
  --art-peach-dark: #D98B5C;
  --art-sage: #9DB58A;
  --art-sage-dark: #6F8F66;
  --art-shadow: #5B4A63;
  --art-sky: #E9C46A;
  --art-sky-light: #F2DC98;
  --art-slate: #6E8494;
  --art-stone: #C9B79C;
  --art-teal: #79ADA4;
  --art-teal-dark: #4F8580;
  --art-wood: #A9774E;
  --costume-armor: #9AA1AB;
  --costume-armor-edge: #4A505B;
  --costume-black: #2E2C33;
  --costume-bone: #E7DCC0;
  --costume-bone-dark: #A8977A;
  --costume-brown: #7A5A3C;
  --costume-brown-dark: #523B27;
  --costume-glow: #F5D77A;
  --costume-glow-soft: #FBEFC4;
  --costume-hall-floor: #B99A74;
  --costume-harkonnen: #1C1A1E;
  --costume-indigo: #3F4F7A;
  --costume-indigo-light: #6C7FAD;
  --costume-leaf: #7FA85A;
  --costume-leaf-dark: #4E7A3A;
  --costume-plum: #6B4A72;
  --costume-pumpkin: #E08A2E;
  --costume-pumpkin-dark: #B0661C;
  --costume-saffron: #E3A33B;
  --costume-shield: #8CC0E6;
  --costume-sky: #8FB8D0;
  --costume-steel: #8D939C;
  --costume-steel-dark: #5A606B;
  --costume-steel-light: #C3C8CF;
  --costume-stillsuit: #7D7163;
  --costume-straw: #D9BE73;
  --costume-straw-dark: #A88F4E;
  --costume-vision-sand: #9CC7EC;
  --costume-vision-tint: #3F6E9E;
  --costume-white: #EDE6D6;
  --cursed-liquid: #3A2340;
  --cursed-liquid-light: #6A4A70;
  --cursed-strand-a: #1E1A1F;
  --cursed-strand-b: #5E3A8A;
  --fighters-left-body: #3E4A89;
  --fighters-left-ink: #3E4A89;
  --fighters-left-stripe: #3E4A89;
  --fighters-right-body: #B8862B;
  --fighters-right-ink: #B8862B;
  --fighters-right-stripe: #7A5618;
  --focus: #3E4A89;
  --ground: #D9CDB2;
  --ground-line: #A8987A;
  --hilt: #4A3B2A;
  --line: #2B2A28;
  --meter-back: #CFC4AB;
  --muted: #6B6457;
  --paper: #EFE8D8;
  --post: #8A7A5C;
  --scenery-far-hill: #E0D8C1;
  --scenery-far-line: #B8AC93;
  --scenery-far-roof: #D2B79C;
  --scenery-far-smoke: #E6E0D2;
  --scenery-far-tent: #D8CAAE;
  --scenery-far-tree: #C9CDB2;
  --scenery-far-wall: #E6DCC6;
  --scenery-mid-field: #E0D6BE;
  --scenery-mid-line: #B9B097;
  --scenery-mid-tree: #C6CCB1;
  --scenery-mid-tree-dark: #B7BFA2;
  --scenery-mid-trunk: #C9B8A0;
  --scenery-near-grass: #CFCBA9;
  --scenery-near-line: #ACA286;
  --scenery-near-stump: #C8B79C;
  --scenery-road: #E5DAC2;
  --sword: #6E6F78;
}
/* Colors are variables. package-web.sh writes their values from
   data/palette.json, the only place a color is written (D17). */
* { box-sizing: border-box; }
/* `hidden` hides, whatever display a rule below gives the element: the
   canvas rule once kept an empty stage on every menu screen. */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--line); }
body { font: 16px/1.5 Georgia, "Iowan Old Style", serif; }
#app { max-width: 1240px; margin: 0 auto; padding: 16px; }
h1 { font-weight: normal; letter-spacing: 0.04em; margin: 0 0 4px; }
#masthead p { margin: 0 0 4px; max-width: 70ch; }
#status { color: var(--muted); }
#foot { margin-top: 24px; display: flex; gap: 16px; justify-content: space-between;
        color: var(--muted); font-size: 0.85em; }
#foot a { color: var(--muted); }
canvas { display: block; width: min(100%, calc(72vh * 1200 / 640)); height: auto; margin: 0 auto 12px;
         background: var(--paper);
         border-top: 1px solid var(--ground-line); border-bottom: 1px solid var(--ground-line); }
button { font: inherit; color: var(--line); background: var(--paper);
         border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; margin: 4px 8px 4px 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; }
.desc { color: var(--muted); margin: 0 0 12px; max-width: 70ch; }
#screen p { max-width: 75ch; }
.item { margin-bottom: 8px; }
.actions { margin-top: 8px; }
#hud { display: flex; justify-content: space-between; max-width: calc(72vh * 1200 / 640); margin: 0 auto 4px; }
.result { font-size: 1.1em; }
kbd { font: inherit; font-weight: bold; }
.keys { display: inline-block; vertical-align: top; margin-right: 32px; }
.keys h3 { font-weight: normal; font-style: italic; margin: 8px 0 4px; }
.keys p { margin: 2px 0; }
button.bind { min-width: 3em; margin: 0 0 0 8px; padding: 2px 8px; }
button.bind.listening { outline: 3px solid var(--focus); }
.stop { border-top: 1px solid var(--ground-line); padding: 8px 0 4px; max-width: 75ch; }
.stop h3 { font-weight: normal; margin: 4px 0 0; font-size: 1.2em; }
.stop h4 { font-weight: normal; font-style: italic; margin: 8px 0 0; }
.stop p { margin: 2px 0; }
/* The YouTube player stays visible: YouTube's terms do not allow a hidden one. */
#youtube-dock { position: fixed; right: 16px; bottom: 16px; z-index: 10; background: var(--paper);
                border: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; }
#youtube-dock iframe { display: block; width: 200px; height: 200px; border: 0; }
#youtube-dock button { margin: 4px 0 0; }
#youtube-link { font: inherit; max-width: 100%; }
/* The road's tree (after gear-master-2d's errands map). */
#stop-detail { border: 1px solid var(--ground-line); padding: 8px 16px 12px; margin-bottom: 16px; }
#stop-detail h3 { margin: 4px 0; }
#stop-detail h4 { margin: 10px 0 2px; }
#stop-detail .reqs { margin: 4px 0; padding-left: 20px; }
#stop-detail .reqs li p { margin: 0; }
#stop-detail .reqs li.met > p:first-child { text-decoration: line-through; color: var(--muted); }
#road-tree { position: relative; display: grid; gap: 28px; padding: 4px 0 16px; }
#road-tree .level { position: relative; z-index: 1; pointer-events: none; }
#road-tree .tier-label { margin: 0 0 6px; max-width: none; text-align: center; color: var(--muted); font-size: 0.85em; }
#road-tree .tier { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; }
#road-tree .node { pointer-events: auto; width: 152px; margin: 0; padding: 6px 4px; text-align: center; }
#road-tree .node.locked { color: var(--muted); border-style: dashed; border-color: var(--ground-line); }
#road-tree .node.open { border-width: 2px; }
#road-tree .node.won { border-color: var(--fighters-right-body); border-width: 2px; }
#road-tree .node.flawless { border-color: var(--fighters-right-body); border-width: 2px; box-shadow: inset 0 0 0 2px var(--fighters-right-body); }
#road-tree .node.picked { outline: 2px solid var(--focus); outline-offset: 2px; }
#road-tree .wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
#road-tree .wires path { fill: none; }
#road-tree .wires path.met { stroke: var(--fighters-right-body); stroke-width: 2; opacity: 0.8; }
#road-tree .wires path.unmet { stroke: var(--ground-line); stroke-width: 1.25; opacity: 0.7; }
#road-tree .wires path.hot { stroke: var(--focus); stroke-width: 3.5; opacity: 1; }
#road-tree .wires path.hit { stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: help; }
#road-tip { position: fixed; z-index: 20; max-width: 300px; background: var(--paper); border: 1px solid var(--line);
            padding: 6px 10px; pointer-events: none; font-size: 0.9em; }
#road-tip[hidden] { display: none; }
#road-tip p { margin: 2px 0; }
#road-tip p.met { text-decoration: line-through; color: var(--muted); }
@media (max-width: 600px) { #road-tree .node { width: 104px; font-size: 0.85em; } }
#mission-goal { border-left: 3px solid var(--focus); padding: 2px 12px; margin-bottom: 8px; }
#mission-goal p, #mission-status p { margin: 2px 0; }
/* The weapons (Weapon Master's equipment). */
#weapons { margin-bottom: 16px; }
#weapons .weapon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
#weapons .weapon { border: 1px solid var(--ground-line); padding: 6px 10px; }
#weapons .weapon h4 { margin: 2px 0; }
#weapons .weapon h4::first-letter { text-transform: uppercase; }
#weapons .weapon p { margin: 2px 0 6px; }
#weapons .weapon.carried { border: 2px solid var(--focus); }
#weapons .weapon.locked { border-style: dashed; color: var(--muted); }
#weapons .weapon p.met { text-decoration: line-through; }
/* The road's other designs. */
#road-views button[aria-pressed="true"] { border-width: 2px; border-color: var(--focus); }
#road-tree.chart { display: block; position: relative; border: 1px solid var(--ground-line); }
#road-tree.chart .band { position: absolute; left: 0; right: 0; z-index: 0; }
#road-tree.chart .band-0 { background: var(--paper); }
#road-tree.chart .band-1 { background: var(--meter-back); opacity: 0.55; }
#road-tree.chart .band .tier-label { text-align: left; margin: 4px 8px; font-style: italic; }
#road-tree.chart .node { position: absolute; z-index: 1; transform: translateX(-50%); width: auto; max-width: 120px;
  border: none; background: transparent; padding: 30px 2px 0; font-size: 0.85em; line-height: 1.2; }
#road-tree.chart .node::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); }
#road-tree.chart .node.locked::before { border-style: dashed; border-color: var(--ground-line); }
#road-tree.chart .node.won::before, #road-tree.chart .node.flawless::before { background: var(--fighters-right-body); border-color: var(--fighters-right-stripe); }
#road-tree.chart .node.flawless::before { box-shadow: 0 0 0 3px var(--fighters-right-body); }
#road-tree.chart .node.open::before { border-color: var(--focus); border-width: 3px; }
#road-tree.chart .node.picked { outline: none; text-decoration: underline; }
#road-tree.chart .wires path.met, #road-tree.chart .wires path.unmet { stroke-dasharray: 5 4; }
/* A fight that rewards a weapon: a small diamond. */
#road-tree .node.reward::after, #chapter-stages .stage.reward::after { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-left: 6px; transform: rotate(45deg); background: var(--focus); vertical-align: middle; }
#road-tree.chart .node.reward::after { position: absolute; top: 8px; left: calc(50% + 14px); margin: 0; }
#chapter-view { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 16px; margin-bottom: 16px; }
#chapters { list-style: none; padding: 0; margin: 0; }
#chapters li { margin-bottom: 4px; }
#chapters li p { margin: 0 0 0 4px; font-size: 0.85em; }
#chapters button { width: 100%; text-align: left; margin: 0; }
#chapters button.picked { border-width: 2px; border-color: var(--focus); }
#chapters button.locked { color: var(--muted); border-style: dashed; }
#chapter-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-content: start; }
#chapter-stages .stage { text-align: left; margin: 0; display: block; }
#chapter-stages .stage p { margin: 2px 0; font-size: 0.85em; }
#chapter-stages .stage p.met { text-decoration: line-through; color: var(--muted); }
#chapter-stages .stage.locked { color: var(--muted); border-style: dashed; }
#chapter-stages .stage.won, #chapter-stages .stage.flawless { border: 2px solid var(--fighters-right-body); }
#chapter-stages .stage.picked { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) { #chapter-view { grid-template-columns: 1fr; } }
#road-tree.chart .wires { z-index: 1; }
#road-tree.chart .node { z-index: 2; }
@media (max-width: 600px) {
  #road-tree.chart .node { font-size: 0.7em; max-width: 70px; }
}
/* The card over the arena when a round ends. */
#arena { position: relative; }
#death-popup { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 5;
  background: var(--paper); border: 2px solid var(--line); padding: 10px 26px 12px; text-align: center;
  max-width: min(90%, 560px); box-shadow: 0 6px 0 var(--ground-line); animation: pop 220ms ease-out; pointer-events: none; }
#death-popup .popup-head { font-size: 2em; margin: 0 0 4px; letter-spacing: 0.04em; }
#death-popup .popup-line { margin: 0; }
#death-popup.headshot { border-width: 3px; border-color: var(--focus); }
#death-popup.headshot .popup-head { font-size: 2.6em; color: var(--focus); }
@keyframes pop { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #death-popup { animation: none; } }
@media (max-width: 600px) { #death-popup .popup-head { font-size: 1.4em; } #death-popup.headshot .popup-head { font-size: 1.7em; } }
#road-tree.chart .node { max-width: 104px; }
/* The card wears the color of the fighter who won the round. */
#death-popup.won-0 { border-color: var(--fighters-left-body); border-top: 10px solid var(--fighters-left-body); }
#death-popup.won-0 .popup-head { color: var(--fighters-left-body); }
#death-popup.won-1 { border-color: var(--fighters-right-body); border-top: 10px solid var(--fighters-right-body); }
#death-popup.won-1 .popup-head { color: var(--fighters-right-stripe); }
#death-popup.headshot.won-0, #death-popup.headshot.won-1 { border-width: 3px; border-top-width: 12px; }
/* The sunburst: paths as wedges from the center, rows as rings. */
#road-tree.sunburst { display: block; position: relative; width: min(100%, 1000px); aspect-ratio: 1; margin: 0 auto; }
#road-tree.sunburst .node { position: absolute; z-index: 1; transform: translate(-50%, -12px); width: auto; max-width: 92px;
  border: none; background: transparent; padding: 28px 2px 0; font-size: 0.72em; line-height: 1.15; }
#road-tree.sunburst .node::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); }
#road-tree.sunburst .node.locked::before { border-style: dashed; border-color: var(--ground-line); }
#road-tree.sunburst .node.won::before, #road-tree.sunburst .node.flawless::before { background: var(--fighters-right-body); border-color: var(--fighters-right-stripe); }
#road-tree.sunburst .node.open::before { border-color: var(--focus); border-width: 3px; }
#road-tree.sunburst .node.picked { outline: none; text-decoration: underline; }
#road-tree.sunburst .wires .wedge-0 { fill: var(--paper); }
#road-tree.sunburst .wires .wedge-1 { fill: var(--meter-back); opacity: 0.55; }
#road-tree.sunburst .wires path.spoke { stroke: var(--line); stroke-width: 1.5; opacity: 0.5; }
#road-tree.sunburst .wires circle.ring { fill: none; stroke: var(--ground-line); stroke-width: 1; opacity: 0.3; }
#road-tree.sunburst .wires path.met, #road-tree.sunburst .wires path.unmet { stroke-dasharray: 5 4; }
/* Behavior trees: training tiles, encyclopedia entries, the drawn figures. */
#train-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
#train-tiles .tile { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; max-width: none; }
#train-tiles .tile .tile-name { font-weight: bold; }
#train-tiles .tile .tree-img { width: 100%; height: 120px; object-fit: contain; background: var(--paper); border: 1px solid var(--ground-line); }
#train-tiles .tile .desc { font-size: 0.85em; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#train-detail, #entries .entry { border-top: 1px solid var(--ground-line); padding-top: 10px; margin-top: 10px; }
.tree-scroll { overflow-x: auto; max-width: 100%; margin: 8px 0; }
.tree-scroll .tree-img { max-width: none; height: auto; display: block; }
#entries .entry.locked h3 { color: var(--muted); }
#how-they-decide .legend { list-style: none; padding: 0; display: grid; gap: 6px; }
#how-they-decide .legend li { display: flex; align-items: center; gap: 10px; }
#how-they-decide .legend img { width: 32px; height: 32px; }
#how-they-decide .legend .desc { margin: 0; }
/* Story mode: chapters and the fight's line of lives and time. */
#story-chapters .chapter { border-top: 1px solid var(--ground-line); padding-top: 8px; margin-top: 8px; }
#story-chapters .chapter.locked h3 { color: var(--muted); }
#story-chapters .scenes { margin: 4px 0 8px; }
#story-hud { font-weight: bold; margin: 4px 0; }
/* The goal a fight is played for, beside the arena: bold and boxed. */
#goal-callout { border: 3px solid var(--focus); border-left-width: 10px; padding: 8px 14px; margin: 6px 0 10px; }
#goal-callout p { font-weight: bold; font-size: 1.1em; margin: 2px 0; color: var(--focus); }
@media (min-width: 1500px) { #goal-callout { position: fixed; right: 16px; top: 140px; width: 230px; background: var(--paper); z-index: 4; } }

/* Arcade mode's door, first on the menu (Sam, 2026-10-06): ink on paper
   with an ochre edge, a brush stroke that runs under the label on hover. */
.item.featured { margin: 6px 0 22px; }
.item.featured button {
  position: relative; overflow: hidden;
  font-size: 1.6em; letter-spacing: 0.08em; padding: 14px 34px;
  color: var(--paper); background: var(--line);
  border: 3px solid var(--fighters-right-body); border-radius: 2px;
  box-shadow: 6px 6px 0 var(--fighters-right-stripe);
  transform: skew(-6deg);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.item.featured button::after {
  content: ""; position: absolute; left: -10%; bottom: 8px; height: 4px; width: 0;
  background: var(--fighters-right-body); transition: width 260ms ease;
}
.item.featured button:hover, .item.featured button:focus-visible {
  transform: skew(-6deg) translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--fighters-right-stripe);
}
.item.featured button:hover::after, .item.featured button:focus-visible::after { width: 120%; }
.item.featured button:active { transform: skew(-6deg) translate(3px, 3px); box-shadow: 2px 2px 0 var(--fighters-right-stripe); }
.item.featured .desc { font-size: 1.05em; }

/* --- the BT Lab (bt-lab.html) ------------------------------------------- */
body.btlab #lab { display: grid; gap: 14px; }
body.btlab #stage { width: 100%; height: auto; }
/* The lesson: pages to scroll through, the lecture beside the fight that
   shows it; the lab and the editor below. */
html:has(body.btlab) { scroll-snap-type: y proximity; }
body.btlab #app { max-width: 1500px; }
.lesson-head { padding: 8px 0 4px; }
.lesson-page { min-height: 100vh; box-sizing: border-box; scroll-snap-align: start; padding: 28px 40px 28px 0;
               display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; align-items: center;
               border-top: 1px solid var(--ground-line); }
.lesson-page .lecture h2 { font-size: 2em; margin: 0 0 10px; }
.lesson-page .lecture h3, .lesson-page .in-game h3 { margin: 0 0 8px; color: var(--fighters-right-stripe); font-size: 1em;
               text-transform: uppercase; letter-spacing: 0.08em; }
.lesson-page .lecture p { font-size: 1.15em; line-height: 1.5; max-width: 60ch; }
.lesson-page canvas { width: 100%; height: auto; border: 1px solid var(--line); display: block; }
.lesson-page .question { font-style: italic; font-size: 1.1em; }
.lecture-fig { width: 100%; max-height: 260px; margin: 10px 0; display: block; }
.lecture-fig .fig-edge { stroke: var(--line); stroke-width: 1.5; }
.lecture-fig .fig-node rect, .lecture-fig .fig-node ellipse, .lecture-fig .fig-node path { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.lecture-fig .fig-leaf rect { stroke: var(--fighters-left-ink); }
.lecture-fig .fig-symbol { font-size: 20px; font-weight: bold; fill: var(--line); }
.lecture-fig .fig-decor { font-size: 12px; fill: var(--line); }
.lecture-fig .fig-weight { font-size: 12px; font-style: italic; fill: var(--fighters-right-stripe); }
.lecture-fig .fig-text { font-size: 13px; line-height: 1.15; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--line); }
.lesson-page .ringed { color: var(--line); margin: 6px 0 0; padding-left: 26px; position: relative; }
.lesson-page .ringed::before { content: ""; position: absolute; left: 2px; top: 0.2em; width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--line); box-shadow: 0 0 0 2px var(--paper); }
.demo-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; min-height: 4.5em; }
.demo-readout p { margin: 0 0 4px; }
.demo-readout .side-0 p { color: var(--fighters-left-ink); }
.demo-readout .side-1 p { color: var(--fighters-right-stripe); }
#lesson-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#lesson-rail a { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); display: block; }
#lesson-rail a.on { background: var(--focus); border-color: var(--focus); }
#lesson-rail a.rail-lab, #lesson-rail a.rail-editor { border-radius: 2px; margin-top: 6px; }
#lab-section { border-top: 3px solid var(--fighters-right-body); padding-top: 12px; display: grid; gap: 14px; scroll-snap-align: start; }
#lab-section > h2 { font-size: 2em; margin: 0; }
body.btlab #editor { border-top: 3px solid var(--fighters-right-body); padding-top: 12px; scroll-snap-align: start; }
@media (max-width: 900px) {
  .lesson-page { grid-template-columns: 1fr; min-height: 0; padding-right: 28px; }
  #lesson-rail { right: 6px; }
}
#inspect { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { #inspect { grid-template-columns: 1fr; } }
.bt-scroll { overflow: auto; max-height: 520px; border: 1px solid var(--ground-line); }
.bt-svg .edges path { fill: none; stroke: var(--ground-line); stroke-width: 1.5; }
.bt-svg .edges path.active { stroke: var(--focus); stroke-width: 3; }
.bt-svg .node rect { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.bt-svg .node.interrupt rect { stroke-dasharray: 5 3; }
.bt-svg .node.active rect { fill: var(--focus); stroke: var(--focus); }
.bt-svg .node.active .node-text { color: var(--paper); }
.bt-svg .node.held rect { stroke: var(--fighters-right-body); stroke-width: 3; }
.bt-svg .node.failed { opacity: 0.35; }
.bt-svg .node-text { font-size: 12px; line-height: 1.15; color: var(--line); height: 100%; display: flex; align-items: center; }
.bt-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.9em; }
.bt-legend .swatch { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: middle; border: 1px solid var(--line); background: var(--paper); }
.bt-legend .lg-active .swatch { background: var(--focus); border-color: var(--focus); }
.bt-legend .lg-held .swatch { border: 3px solid var(--fighters-right-body); }
.bt-legend .lg-failed .swatch { opacity: 0.35; }
.bt-legend .lg-interrupt .swatch { border-style: dashed; }
#keys-panel .explain { border-top: 1px solid var(--ground-line); padding-top: 6px; }
#keys-panel .now { font-weight: bold; }
table.recipe { border-collapse: collapse; margin: 6px 0; font-size: 0.92em; }
table.recipe th, table.recipe td { border: 1px solid var(--ground-line); padding: 3px 8px; text-align: left; }
table.recipe tr.on td, table.recipe tr.on th { background: var(--meter-back); font-weight: bold; }
.caps kbd { display: inline-block; border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; margin: 1px 3px 1px 0; font-family: inherit; font-size: 0.85em; background: var(--paper); }
.throw-steps li.on { font-weight: bold; color: var(--focus); }
.keyboard { display: flex; flex-wrap: wrap; gap: 6px; }
.keyboard .cap { border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; min-width: 110px; font-size: 0.82em; background: var(--paper); }
.keyboard .cap.down { background: var(--focus); color: var(--paper); border-color: var(--focus); }
.keyboard .cap-key { display: block; font-weight: bold; font-size: 1.1em; }
#timeline-panel canvas { width: 100%; height: auto; border: 1px solid var(--ground-line); }
body.btlab #hud { display: flex; gap: 18px; justify-content: center; }

/* The chart, wide and scrolled sideways, over each region's art (Sam,
   2026-10-07). */
.chart-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--ground-line); margin-bottom: 16px; }
.chart-scroll #road-tree.chart { border: none; }
#road-tree.chart .band-art { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background-size: auto 100%; background-repeat: repeat-x; background-position: left center; opacity: 0.72;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
#road-tree.chart .band { background: transparent !important; opacity: 1; }
#road-tree.chart .band .tier-label { display: inline-block; background: var(--paper); padding: 2px 8px; border: 1px solid var(--ground-line); font-style: italic; }
#road-tree.chart .node { background: transparent; }
#road-tree.chart .node:not(.next-up) { text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); }
/* The fight to take next: the arcade button's ink, ochre edge and shadow. */
#road-tree.chart .node.next-up { z-index: 2; color: var(--paper); background: var(--line); padding: 30px 10px 6px;
  border: 3px solid var(--fighters-right-body); box-shadow: 5px 5px 0 var(--fighters-right-stripe); transform: translateX(-50%) skew(-6deg); }
#road-tree.chart .node.next-up::before { border-color: var(--fighters-right-body); background: var(--paper); top: 4px; }
/* The chapter view: a locked fight is greyed with its requirements under it,
   each struck through once met; an open fight drops them and takes the
   ready color; a won fight is struck through (Sam, 2026-10-07). */
#chapter-stages .stage.locked { opacity: 0.6; }
#chapter-stages .stage .met { text-decoration: line-through; opacity: 0.75; }
#chapter-stages .stage.open { background: var(--fighters-right-body); color: var(--paper); border-color: var(--fighters-right-stripe); }
#chapter-stages .stage.won strong, #chapter-stages .stage.flawless strong { text-decoration: line-through; text-decoration-thickness: 2px; }

/* The BT Lab's editor. */
#editor { border: 1px solid var(--ground-line); padding: 10px 16px; }
#editor ol.rules { padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
#editor li.rule { border: 1px solid var(--line); padding: 8px 10px; background: var(--paper); }
#editor li.rule.refused { border: 2px solid var(--focus); }
#editor ul.conds { padding-left: 16px; }
#editor ul.conds input[type=number] { width: 70px; }
#editor textarea { width: 100%; font-family: inherit; font-size: 0.85em; }
#editor .ok { color: var(--focus); font-weight: bold; }
#editor .refused { color: var(--focus); font-weight: bold; }

/* The stream's arena (arena.html), laid out for a 1920 by 1080 capture. */
body.arena { margin: 0; }
body.arena #arena-main { display: grid; grid-template-columns: 1fr 380px; gap: 12px; padding: 10px; height: 100vh; box-sizing: border-box; }
/* The fight fills what the side panel leaves: as wide as it can be while
   the names above and the result below still fit the capture's height. */
body.arena #arena-stage { display: flex; flex-direction: column; min-height: 0; }
body.arena #stage { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: contain; border: 2px solid var(--line); box-sizing: border-box; }
body.arena #arena-names { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.7em; margin-bottom: 4px; }
body.arena .fighter-name.side-0 strong { color: var(--fighters-left-ink); }
body.arena .fighter-name.side-1 strong { color: var(--fighters-right-stripe); }
body.arena .versus { margin: 0; color: var(--muted); }
body.arena #arena-result { font-size: 1.6em; min-height: 1.6em; }
body.arena #arena-result .code { font-size: 1.8em; letter-spacing: 0.15em; font-weight: bold; padding: 2px 12px; border: 3px solid var(--fighters-right-body); background: var(--line); color: var(--paper); }
body.arena #arena-side { border-left: 3px solid var(--fighters-right-body); padding-left: 14px; font-size: 1.05em; overflow: hidden; }
body.arena #arena-side h1 { font-size: 2em; margin-top: 0; }
body.arena .bar { position: relative; height: 34px; margin: 6px 0; border: 1px solid var(--line); background: var(--paper); }
body.arena .bar .fill { position: absolute; inset: 0 auto 0 0; }
body.arena .bar.side-0 .fill { background: var(--fighters-left-ink); }
body.arena .bar.side-1 .fill { background: var(--fighters-right-body); }
body.arena .bar span { position: relative; padding: 4px 10px; font-weight: bold; color: var(--paper); mix-blend-mode: difference; }

/* The chart's fights as small scenes (analysis/art/seals.py): each set off
   from the region art by a paper halo; a locked one in grey, an open one
   lifted and lit, a won one stamped. */
#road-tree.chart .node:not(.next-up), #road-tree.chart .node.won, #road-tree.chart .node.flawless {
  padding: 0 2px 2px; max-width: 160px; border: none; box-shadow: none; background: transparent; text-shadow: none; }
#road-tree.chart .node .seal-name { display: inline-block; position: relative; padding: 1px 7px; border: 1px solid var(--ground-line);
  border-radius: 3px; background: var(--paper); line-height: 1.25; }
#road-tree.chart .node.next-up .seal-name { background: transparent; border: none; }
#road-tree.chart .node.open:not(.next-up) .seal-name { border-color: var(--focus); border-width: 2px; }
#road-tree.chart .node::before { display: none; }
#road-tree.chart .node .seal-art { display: block; width: 150px; height: 112px; margin: 0 auto -6px; pointer-events: none;
  filter: drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 6px var(--paper)) drop-shadow(0 3px 0 var(--ground-line));
  transition: transform 160ms ease-out, filter 160ms ease-out; }
#road-tree.chart .node.locked .seal-art { filter: grayscale(0.9) drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 6px var(--paper)) drop-shadow(0 2px 0 var(--ground-line)); opacity: 0.8; }
#road-tree.chart .node.locked { color: var(--muted); }
#road-tree.chart .node.open .seal-art { filter: drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 7px var(--focus)) drop-shadow(0 0 2px var(--focus)) drop-shadow(0 4px 0 var(--ground-line));
  animation: seal-bob 2.4s ease-in-out infinite; }
#road-tree.chart .node.open { font-weight: bold; }
#road-tree.chart .node:hover .seal-art, #road-tree.chart .node:focus-visible .seal-art { transform: scale(1.1) translateY(-3px); }
#road-tree.chart .node.next-up .seal-art { width: 170px; height: 128px; filter: drop-shadow(0 0 4px var(--paper)) drop-shadow(0 0 10px var(--fighters-right-body)) drop-shadow(0 0 3px var(--fighters-right-body)); }
#road-tree.chart .node.next-up { padding: 0 10px 6px; }
/* Won: a stamp at the scene's shoulder; won without losing a round, a double ring. */
#road-tree.chart .node.won::after, #road-tree.chart .node.flawless::after { content: ""; position: absolute; top: 56px; left: calc(50% + 44px);
  width: 16px; height: 16px; border-radius: 50%; background: var(--fighters-right-body); border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line); transform: none; margin: 0; }
#road-tree.chart .node.flawless::after { box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--fighters-right-body); }
#road-tree.chart .node.reward:not(.won):not(.flawless)::after { top: 60px; left: calc(50% + 48px); }
@keyframes seal-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #road-tree.chart .node.open .seal-art { animation: none; } }
@media (max-width: 600px) {
  #road-tree.chart .node .seal-art { width: 84px; height: 63px; margin-bottom: -6px; }
  #road-tree.chart .node.next-up .seal-art { width: 96px; height: 72px; }
  #road-tree.chart .node.won::after, #road-tree.chart .node.flawless::after { left: calc(50% + 24px); top: 30px; width: 10px; height: 10px; }
}

/* The road's other views, folded away and quiet. */
#road-views-box { margin-top: 18px; font-size: 0.8em; color: var(--muted); }
#road-views-box summary { cursor: pointer; width: max-content; }
#road-views-box:not([open]) summary { opacity: 0.6; }
/* The cursed blade's box: the liquid that gathers into it. */
#weapons .cursed-box { display: block; width: 100%; height: auto; margin: 6px 0; cursor: crosshair; }
body.arena #arena-result .round-end, body.arena #arena-result .round-start { margin: 0; font-size: 1.5em; font-weight: bold; }
body.arena #arena-result .round-start { color: var(--focus); }

/* The vertical clip frame (clip.html), 1080 by 1920. */
body.clip { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--paper); }
body.clip #clip-app { display: grid; grid-template-rows: 300px 1440px 180px; height: 1920px; }
body.clip #clip-head { text-align: center; padding-top: 70px; }
body.clip #clip-game { margin: 0; font-size: 64px; letter-spacing: 0.08em; }
body.clip #clip-names { margin: 18px 0 0; font-size: 44px; }
body.clip #clip-names .side-0 { color: var(--fighters-left-ink); font-weight: bold; }
body.clip #clip-names .side-1 { color: var(--fighters-right-stripe); font-weight: bold; }
body.clip #stage { width: 1080px; height: 1440px; display: block; }
body.clip #clip-caption { margin: 0; padding: 20px 60px 0; font-size: 46px; line-height: 1.25; text-align: center; font-weight: bold; }
body.clip #clip-caption.big { font-size: 120px; line-height: 1; padding-top: 10px; }
body.clip #clip-caption.loud { font-size: 58px; }
/* Across the arena at a clip's end (Sam, 2026-10-08: "my website link and
   play for free on the browser should appear at the end of the battle across
   the canvas so its really visible"). */
body.clip #clip-app { position: relative; }
body.clip #clip-banner { position: absolute; left: 0; top: 300px; width: 1080px; height: 1440px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; text-align: center; }
body.clip #clip-banner[hidden] { display: none; }
body.clip #clip-banner .play { font-size: 104px; line-height: 1.05; font-weight: bold; color: var(--paper); background: var(--line); padding: 28px 48px; margin: 0 40px; }
body.clip #clip-banner .site { font-size: 70px; font-weight: bold; color: var(--line); background: var(--paper); padding: 14px 36px; border: 6px solid var(--line); }

/* A move's keys over its ticks, on the script lesson page. Bars carry the
   spans and the key name sits beside each lane, so the picture reads without
   colour: a lane with no bar held no key over that stretch. */
.key-chart { width: 100%; height: auto; margin: 0.6rem 0 0; display: block; }
.key-chart .chart-grid { stroke: var(--ground-line); stroke-width: 1; }
.key-chart .chart-tick,
.key-chart .chart-axis { font: 11px/1.2 var(--sans, sans-serif); fill: var(--muted); }
.key-chart .chart-bar { fill: var(--focus); stroke: var(--line); stroke-width: 1; }
.key-chart .chart-bar-step { fill: var(--post); }
.key-chart .chart-key { font: 12px/1.3 var(--sans, sans-serif); color: var(--line); text-align: right; }
.key-chart .chart-key { display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; }
.key-chart .chart-key kbd { font: inherit; font-weight: 700; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
.key-chart .chart-act { font-size: 10px; color: var(--muted); text-align: right; line-height: 1.1; }
.key-chart .chart-step { font-style: italic; }
@media (forced-colors: active) {
  .key-chart .chart-bar { fill: Highlight; stroke: CanvasText; }
  .key-chart .chart-bar-step { fill: Canvas; stroke: CanvasText; stroke-dasharray: 3 2; }
}