/* builder.css — the Automaton builder (lane L3; docs/automaton-stage3-spec.md §3). Loaded by index.html (L4).
   Everything lives under .bld (inside #builder) and is zoomed by --ui-scale like the other screens:
   laid out at 1280x720, 1.5x at 1920x1080. */
#builder { background: #0b0a0d; }
.bld { position: absolute; left: 0; top: 0; zoom: var(--ui-scale, 1); width: calc(100vw / var(--ui-scale, 1)); height: calc(100vh / var(--ui-scale, 1));
  display: flex; flex-direction: column; font-family: var(--font); color: var(--text); font-size: 13px;
  background: radial-gradient(ellipse at 50% 35%, #1b1519 0%, #0b0a0d 75%); user-select: none;
  --bcard-bg: radial-gradient(ellipse at 50% 60%, #6e5a48 0%, #4a3b31 45%, #2c2226 100%); }
.bld kbd { font-family: var(--title); font-size: 10px; background: #1a1614; border: 1px solid var(--edge); padding: 0 4px; color: #fff; }
.bld kbd.pad { border-color: #8a7a5a; color: var(--gold); }
.bld button { font-size: 12px; padding: 5px 9px; letter-spacing: 0.5px; }
.bld button.small { font-size: 10px; padding: 3px 6px; }
.bld input:not([type]), .bld input[type=text] { font-family: var(--font); font-size: 14px; padding: 4px 6px; width: 100%; min-width: 0; text-transform: none; }
.bld select { font-size: 12px; padding: 3px 26px 3px 8px; }
.bld h4 { font-family: var(--title); font-weight: 400; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 4px; }
.bld h4:first-child { margin-top: 0; }
.bld h4 small { text-transform: none; letter-spacing: 0; color: var(--dimmer); font-family: var(--font); font-size: 11px; }
.bld-dim { color: var(--dim); }
.bld-small { font-size: 11px; line-height: 1.35; margin: 4px 0; }
.bld-row { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.bld-row > label { color: var(--dim); font-size: 11px; min-width: 36px; text-transform: uppercase; letter-spacing: 1px; }
.bld-row select { flex: 1; min-width: 0; }

/* ---- top bar */
.bld-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--panel); border-bottom: 2px solid var(--edge); box-shadow: 0 2px 0 #000; }
.bld-name { min-width: 140px; max-width: 180px; display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; }
.bld-nm { font-family: var(--title); color: var(--gold); font-size: 15px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-sk { color: var(--dimmer); font-size: 11px; }
.bld-tabs { display: flex; gap: 3px; margin: 0 auto; }
.bld-tabs button { font-size: 12px; padding: 6px 8px; }
.bld-tabs button.on { border-color: var(--gold); color: #ffe7a8; background: linear-gradient(#5e4830, #3a2c1e); box-shadow: inset 0 0 0 2px #1a1410, 0 2px 0 #000, 0 0 10px rgba(242, 193, 78, 0.25); }
.bld-acts { display: flex; gap: 4px; align-items: center; }
.bld-ico { min-width: 30px; padding: 5px 7px !important; font-size: 14px !important; }
.bld-comm { display: flex; flex-direction: column; align-items: center; line-height: 1.05; border-color: #b08a3a !important; color: #ffe7a8; }
.bld-comm small { font-size: 9px; color: var(--gold); text-transform: none; letter-spacing: 0; font-family: var(--font); }

/* ---- the three columns */
.bld-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr) 292px; }
.bld[data-mode=stats] .bld-main, .bld[data-mode=identity] .bld-main, .bld[data-mode=fx] .bld-main { grid-template-columns: 380px minmax(0, 1fr) 292px; }
.bld-left, .bld-right { overflow-y: auto; overflow-x: hidden; background: rgba(16, 13, 18, 0.92); scrollbar-width: thin; scrollbar-color: #4a3f36 transparent; }
.bld-left { padding: 8px; border-right: 2px solid var(--edge); }
.bld-right { padding: 8px; border-left: 2px solid var(--edge); display: flex; flex-direction: column; gap: 8px; }
.bld-centre { position: relative; min-width: 0; min-height: 0; }
.bld-canvaswrap { position: absolute; inset: 6px; border: 2px solid #2a231e; background: #0d0a10; cursor: crosshair; }
.bld-canvaswrap.padcanvas, .bld-canvaswrap.padon { border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 193, 78, 0.3); }
.bld-cv { width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
.bld-cvinfo { position: absolute; left: 8px; bottom: 5px; display: flex; gap: 12px; font-size: 11px; color: var(--dim); pointer-events: none; text-shadow: 1px 1px 0 #000; }
.bld-cvinfo span:first-child { color: var(--gold); font-family: var(--title); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.bld-padbadge { position: absolute; right: 8px; top: 8px; font-size: 11px; color: var(--gold); background: rgba(0, 0, 0, 0.75); border: 1px solid var(--gold); padding: 2px 6px; pointer-events: none; font-family: var(--title); letter-spacing: 1px; }

/* ---- tools */
.bld-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bld .bld-tool { display: flex; align-items: center; gap: 4px; padding: 3px 4px; text-transform: none; font-family: var(--font); text-align: left; min-width: 0; letter-spacing: 0; }
.bld-tool i { font-style: normal; width: 16px; flex: none; text-align: center; font-size: 13px; color: var(--gold); line-height: 1; }
.bld-tool span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.bld .bld-tool { position: relative; }
.bld .bld-tool kbd { position: absolute; right: 1px; top: 0; font-size: 8px; padding: 0 2px; border: none; background: transparent; color: var(--dimmer); line-height: 1.2; }
.bld-tool.on { border-color: var(--gold); background: linear-gradient(#5e4830, #3a2c1e); color: #fff; }
.bld-tool.act { background: linear-gradient(#2e2a2c, #221e20); }
.bld-tool.act.on { border-color: #78d8ff; background: linear-gradient(#24404a, #1a2a30); }
.bld-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bld .bld-stamp { padding: 2px; display: flex; align-items: center; justify-content: center; height: 30px; }
.bld-stamp canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.bld-stamp.on { border-color: var(--gold); background: linear-gradient(#5e4830, #3a2c1e); }
.bld-chk { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); margin-top: 4px; }
.bld-chk input { width: 16px; height: 16px; }
.bld-partsel { display: flex; align-items: center; gap: 4px; }
.bld-partsel span { flex: 1; text-align: center; font-size: 12px; }
.bld-partsel b { color: var(--gold); font-weight: 400; }
.bld-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.bld .bld-sw { height: 24px; padding: 0; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: var(--dim); font-size: 12px;
  background: repeating-conic-gradient(#2a2428 0 25%, #18141a 0 50%) 0 0 / 8px 8px; }
.bld .bld-sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.bld-br.on, .bld-mo.on { border-color: var(--gold) !important; color: #fff; background: linear-gradient(#5e4830, #3a2c1e) !important; }
.bld-motions { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bld .bld-mo { font-size: 11px; padding: 6px 4px; }

/* ---- stats */
.bld-sliders { display: flex; flex-direction: column; gap: 6px; }
.bld-slider { background: var(--panel2); border: 2px solid #2a231e; padding: 5px 8px; }
.bld-sl-h { display: flex; justify-content: space-between; font-family: var(--title); font-size: 13px; }
.bld-sl-h b { font-weight: 400; color: var(--text); }
.bld-sl-h span { color: var(--gold); }
.bld-slider input[type=range] { width: 100%; }
.bld-slider small { color: var(--dimmer); font-size: 11px; }
.bld-stab { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.bld-stab th { color: var(--dimmer); font-weight: 400; font-size: 10px; text-align: left; text-transform: uppercase; }
.bld-stab td { padding: 2px 4px; border-top: 1px solid #2a231e; }
.bld-stab td:first-child { color: var(--dim); }
.bld-statinfo + button { margin-top: 8px; width: 100%; }

/* ---- identity */
.bld-sets { display: flex; flex-direction: column; gap: 3px; }
.bld-set { display: flex; gap: 3px; align-items: center; }
.bld .bld-setpick { flex: 1; text-align: left; font-size: 11px; padding: 4px 8px; }
.bld-setpick em { font-style: normal; color: var(--gold); }
.bld-set.on .bld-setpick { border-color: var(--gold); color: #fff; background: linear-gradient(#5e4830, #3a2c1e); }
.bld .bld-play { padding: 3px 6px; font-size: 9px; }
.bld-adv { margin-top: 6px; font-size: 12px; color: var(--dim); }
.bld-adv summary { cursor: pointer; }
.bld-ramps { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bld .bld-ramp { display: flex; padding: 3px; height: 22px; gap: 0; }
.bld-ramp i { flex: 1; height: 100%; }
.bld-ramp.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }

/* ---- fx */
.bld-fxhead { background: var(--panel2); border: 2px solid #5a4630; padding: 6px 8px; font-size: 13px; }
.bld-fxhead b { color: var(--gold); font-weight: 400; }
.bld-fxhead small { display: block; color: var(--dimmer); font-size: 11px; margin-top: 2px; }
.bld-fxgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
/* the Animation row's long names ("Extra keyframes", "Cathedral voice") on one line: 3 wider cards */
.bld-fxgrid.bld-fxgrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bld-fxgrid3 .bld-fxc b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld .bld-fxc { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; text-transform: none; font-family: var(--font); letter-spacing: 0; min-width: 0; }
.bld-fxc b { font-weight: 400; font-size: 11px; line-height: 1.1; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.bld-fxc em { font-style: normal; font-size: 10px; color: var(--gold); }
.bld-fxc.on { border-color: var(--gold); background: linear-gradient(#5e4830, #3a2c1e); color: #fff; }
.bld-glow i { width: 18px; height: 12px; display: block; border: 1px solid #000; box-shadow: 0 0 6px currentColor; }
.bld-fxused { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: 11px; }
.bld-fxused span { background: #241c16; border: 1px solid #5a4630; padding: 1px 5px; }
.bld-fxused em { font-style: normal; color: var(--gold); }

/* ---- right column: preview, meter, hints */
.bld-prev { position: relative; height: 196px; flex: none; border: 2px solid #2a231e; background: #0d0a10; }
.bld-pv { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.bld-pvlbl { position: absolute; left: 6px; top: 4px; font-family: var(--title); font-size: 10px; color: var(--gold); letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
.bld-pins { display: flex; flex-wrap: wrap; gap: 2px; flex: none; }
.bld .bld-pins button { padding: 2px 4px; font-size: 9px; }
.bld-pins button.on { border-color: var(--gold); color: #fff; }
.bld-behpin { font-size: 10px !important; padding: 1px 20px 1px 4px !important; background-position: right 5px center !important; flex: 1; min-width: 0; }
.bld-meter, .bld-hints { flex: none; }
.bld-band { position: relative; display: flex; height: 12px; border: 2px solid #000; margin: 2px 0 4px; }
.bld-band i { flex: 1; opacity: 0.55; }
.bld-band i.on { opacity: 1; }
.bld-band .b-trivial { background: #5a5a5a; } .bld-band .b-easy { background: #4f9a3a; } .bld-band .b-fair { background: #a8b03a; }
.bld-band .b-hard { background: #c88a2a; } .bld-band .b-brutal { background: #c8462a; } .bld-band .b-unkillable { background: #6a1a3a; }
.bld-band u { position: absolute; top: -5px; width: 4px; margin-left: -2px; height: 18px; background: #fff; box-shadow: 0 0 0 1px #000; }
.bld-bandlbl { font-family: var(--title); font-size: 12px; }
.bld-bandlbl b { font-weight: 400; }
.bld-bandlbl.ok { color: var(--green); } .bld-bandlbl.bad { color: #ff7a5a; }
.bld-reason, .bld-qh { font-size: 12px; line-height: 1.3; margin-top: 4px; padding: 3px 6px; background: rgba(60, 30, 20, 0.35); border-left: 2px solid #c8462a; }
.bld-qh { background: rgba(40, 36, 20, 0.35); border-left-color: var(--gold); }
.bld-reason button, .bld-qh button { margin-left: 4px; padding: 1px 6px !important; font-size: 9px !important; }
.bld-sim { font-size: 12px; margin-top: 5px; color: var(--text); }
.bld-sim b { color: var(--gold); font-weight: 400; }
.bld-sim.stale { color: var(--dimmer); }

/* ---- the tutorial card (docked under the preview) + ring (tutorial.js look) */
.bld-tut { flex: none; }
.bld-tut .tutcard { position: static; width: auto; font-size: 13px; padding: 8px 10px; }
.bld-tut .tutbtns { justify-content: flex-start; }
.bld-tutring { position: fixed; z-index: 30; }

/* ---- bottom: timeline + hint strip */
.bld-bot { flex: none; background: var(--panel); border-top: 2px solid var(--edge); }
.bld-timeline { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-bottom: 1px solid #2a231e; }
.bld-track { position: relative; flex: 1; height: 22px; background: #120f14; border: 2px solid var(--edge); cursor: pointer;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), #2a231e calc(12.5% - 1px) 12.5%); }
.bld-kf { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; background: #e8dcc8; transform: rotate(45deg); border: 2px solid #000; cursor: ew-resize; }
.bld-kf.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.bld-ph { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #78d8ff; pointer-events: none; }
.bld-hint { min-height: 26px; padding: 4px 10px; font-size: 12px; color: var(--dim); line-height: 1.4; }
.bld-hint b { color: var(--gold); font-weight: 400; }
.bld-padkeys { margin-left: 8px; color: var(--dimmer); }

/* ---- tooltip */
.bld-tip { position: fixed; z-index: 40; max-width: 280px; background: rgba(12, 10, 14, 0.97); border: 2px solid var(--edge2); box-shadow: 0 0 0 2px #000, 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 5px 8px; font-size: 12px; line-height: 1.35; pointer-events: none; }
.bld-tip b { display: block; font-family: var(--title); font-weight: 400; color: var(--gold); font-size: 12px; letter-spacing: 0.5px; }
.bld-tip span { color: var(--text); }

/* ---- dialogs (template picker, commission, menu) */
.bld-dlg { position: absolute; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; }
.bld-dlgbox { background: var(--panel); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #1f1a16, 0 10px 40px rgba(0, 0, 0, 0.6); padding: 16px 18px; max-height: 94%; overflow-y: auto; }
.bld-dlgbox.tpl { width: min(900px, 96%); }
.bld-dlgbox.menu { width: 300px; }
.bld-dlgbox.comm { width: min(640px, 96%); }
.bld-dlgbox h2 { margin-bottom: 4px; }
.bld-dlgbox .hint { margin: 0 0 10px; }
.bld-tplgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bld-shuf { margin-top: 8px; padding-top: 8px; border-top: 2px solid #2a231e; }
.bld .bld-tplcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; text-transform: none; font-family: var(--font); letter-spacing: 0; min-width: 0; }
.bld-tplcard canvas { width: 96px; height: 96px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 70%, #2a1e1a, #0d0a10 70%); border: 1px solid #000; }
.bld-tplcard b { font-weight: 400; font-family: var(--title); font-size: 11px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bld-tplcard small { color: var(--dimmer); font-size: 10px; }
.bld-tplcard.draft { border-color: #78d8ff; }
.bld-tplrow { margin-top: 10px; }
.bld-tplrow select { flex: 0 0 120px; }
.bld-right-btn { margin-left: auto; }
.bld-menu { display: flex; flex-direction: column; gap: 6px; }
.bld-cgrid { display: grid; grid-template-columns: 160px 1fr; gap: 14px; }
.bld-cgrid canvas, .bld-csuccess canvas { width: 140px; height: 140px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 70%, #2a1e1a, #0d0a10 70%); border: 2px solid #2a231e; }
.bld-cgrid p { text-align: center; font-family: var(--title); color: var(--gold); margin: 4px 0; }
.bld-toks { display: flex; gap: 4px; flex-wrap: wrap; }
.bld .bld-tok { display: flex; flex-direction: column; align-items: center; text-transform: none; }
.bld-tok small { color: var(--dimmer); font-size: 10px; }
.bld-tok.on { border-color: var(--gold); color: #fff; }
.bld-citem { font-size: 12px; } .bld-citem em { font-style: normal; color: var(--gold); } .bld-citem.over em { color: #ff7a5a; }
.bld-warn { color: #ffb08a; font-size: 12px; margin: 8px 0; }
.bld-csuccess { text-align: center; }
.bld-csuccess canvas { width: 160px; height: 160px; }
.bld-csuccess p b { color: var(--gold); font-family: var(--title); font-weight: 400; }
.bld-full { width: 100%; }
.bld-mt { margin-top: 3px; }
.bld-dlg[data-kind=templates] { right: 292px; }
.bld-grow { flex: 1; min-width: 0; }
.bld .bld-play { min-width: 30px; }
/* study-builder.md quick wins: Surprise me first in New Automaton, the bare skeleton demoted, one-click random colours */
.bld-tplhead { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; margin-bottom: 8px; }
.bld-tplhead .hint { margin: 0; }
.bld .bld-surprise { flex: none; font-size: 15px; padding: 10px 18px; white-space: nowrap; }
.bld .bld-bare { margin-left: auto; opacity: 0.8; }
.bld .bld-dice { white-space: nowrap; }
/* the Workshop first-visit starters (library.js; this sheet is page-wide) */
#autos .wsstart { margin-top: 6px; }
#autos .wssurprise { justify-content: center; }
#autos .wsdie { font-size: 54px; line-height: 90px; height: 90px; color: var(--gold, #ffd36a); text-shadow: 0 0 12px rgba(255, 200, 90, 0.35); }

/* ---- the Kit tab (D75-D78, lane D): wands + the draft rows in the centre, instead of the canvas */
.bld[data-mode=kit] .bld-main { grid-template-columns: 236px minmax(0, 1fr) 292px; }
.bld[data-mode=kit] .bld-canvaswrap { display: none; }
.bld-kit { position: absolute; inset: 6px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 8px;
  scrollbar-width: thin; scrollbar-color: #4a3f36 transparent; }
.bk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bk-acts .primary { grid-column: 1 / -1; }
.bld .bk-acts button { font-size: 11px; padding: 5px 4px; white-space: nowrap; }
.bk-how { margin: 8px 0 4px; padding-left: 18px; font-size: 12px; line-height: 1.35; color: var(--text); }
.bk-how li { margin: 2px 0; }
.bk-how b { color: var(--gold); font-weight: 400; }
.bk-threat { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; background: var(--panel2); border: 2px solid #2a231e; padding: 6px 8px; font-size: 11px; color: var(--dim); }
.bk-threat b { color: #ffb070; font-weight: 400; font-family: var(--title); font-size: 14px; }
.bk-budget { flex: none; background: var(--panel2); border: 2px solid #2a231e; padding: 6px 8px; }
.bk-bar { display: flex; height: 12px; border: 1px solid #000; background: #120f12; }
.bk-bar i { display: block; height: 100%; min-width: 2px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.6); }
.bk-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: 11px; color: var(--dim); align-items: center; }
.bk-legend u { display: inline-block; width: 9px; height: 9px; margin-right: 3px; vertical-align: -1px; border: 1px solid #000; text-decoration: none; }
.bk-legend b { color: var(--text); font-weight: 400; }
.bk-kitpts { color: var(--gold); }
.bk-room { margin-left: auto; color: var(--gold); }
.bk-room.low { color: #ff7a5a; }
.bk-wands { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bk-wand { background: rgba(28, 22, 20, 0.95); border: 2px solid #4a3a2a; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-wh { display: flex; align-items: center; justify-content: space-between; font-family: var(--title); font-size: 12px; color: var(--gold); padding: 0 2px; min-height: 20px; }
.bk-wh b { font-weight: 400; }
.bld .bk-x { padding: 0 5px; font-size: 10px; line-height: 16px; }
.bk-slot { position: relative; display: flex; align-items: center; gap: 4px; padding: 2px 3px; min-height: 30px; background: #151114; border: 2px solid #2a231e; cursor: pointer; min-width: 0; }
.bk-slot:hover { border-color: #6a5640; }
.bk-slot.sel { border-color: var(--gold); box-shadow: 0 0 8px rgba(242, 193, 78, 0.35); background: #241c14; }
.bk-slot.padon, .bk-card.padon, .bk-chip.padon, .bk-addw.padon { outline: 2px solid #78d8ff; outline-offset: 1px; }
.bk-sn { font-family: var(--title); font-size: 9px; color: var(--dimmer); width: 8px; flex: none; }
.bk-slot img, .bk-card img, .bk-chip img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.bk-sw { display: inline-block; width: 18px; height: 18px; border: 1px solid #000; flex: none; }
.bk-empty { display: inline-block; width: 20px; height: 20px; border: 1px dashed #4a3f36; flex: none; }
.bk-snm { flex: 1; min-width: 0; font-size: 11px; line-height: 1.1; overflow-wrap: anywhere; }
.bk-snm em { color: var(--dimmer); font-style: normal; }
.bk-mods { display: flex; gap: 1px; flex: none; }
.bld .bk-mod { padding: 0; border: 1px solid #3a5a90; background: #18223a; line-height: 0; }
.bld .bk-mod img { width: 16px; height: 16px; }
.bld .bk-mod .bk-sw { width: 14px; height: 14px; }
.bld .bk-rm { padding: 0 4px; font-size: 9px; line-height: 14px; flex: none; opacity: 0.7; }
.bld .bk-rm:hover { opacity: 1; }
.bld .bk-addw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-style: dashed; font-size: 13px; min-height: 60px; }
.bk-addw em { font-style: normal; font-size: 11px; color: var(--gold); }
.bk-addw.dim, .bk-card.dim { opacity: 0.45; }
.bk-have { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); }
.bk-have em { font-style: normal; color: var(--dimmer); margin-right: 8px; }
.bk-hl { font-family: var(--title); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.bk-hl + * { margin-left: 2px; }
.bld .bk-chip { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 11px; }
.bld .bk-chip img { width: 18px; height: 18px; }
.bk-chip u { text-decoration: none; color: var(--dimmer); font-size: 9px; }
.bk-draft { flex: none; display: flex; flex-direction: column; gap: 5px; border-top: 2px solid #2a231e; padding-top: 6px; }
.bk-row { display: grid; grid-template-columns: 112px repeat(3, minmax(0, 1fr)) 30px; gap: 5px; align-items: stretch; }
.bk-rl { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.bk-rl b { font-family: var(--title); font-weight: 400; font-size: 13px; color: var(--gold); }
.bk-rl small { font-size: 10px; color: var(--dimmer); }
.bld .bk-card { display: flex; align-items: center; gap: 5px; padding: 4px 6px; text-transform: none; letter-spacing: 0; font-family: var(--font); text-align: left; min-width: 0; min-height: 40px; }
.bld .bk-card img { width: 26px; height: 26px; }
.bk-cn { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.bk-cn b { font-weight: 400; font-size: 12px; line-height: 1.1; overflow-wrap: anywhere; color: var(--text); }
.bk-cn small { font-size: 10px; color: var(--dim); }
.bk-card em { flex: none; font-style: normal; font-family: var(--title); font-size: 13px; color: var(--gold); min-width: 14px; text-align: right; }
.bk-none { grid-column: span 3; align-self: center; font-size: 11px; color: var(--dimmer); }
.bld .bk-roll { font-size: 14px; padding: 0; }
.bld-ckit { font-size: 11px; line-height: 1.35; color: var(--text); max-height: 92px; overflow-y: auto; }
.bld-ckit b { font-weight: 400; color: var(--gold); }
.bld-ckit small { color: var(--dim); }

/* ==== the simple steps (docs/design-beast-builder.md): Body · Powers · Personality, the boss alive in the middle;
   .bld[data-studio=adv] is the Advanced studio (everything above, unchanged) */
.bld[data-studio=simple] .bld-tabs, .bld[data-studio=simple] .bld-adv-only, .bld[data-studio=simple] .bld-canvaswrap, .bld[data-studio=simple] .bld-kit,
.bld[data-studio=simple] .bld-prev, .bld[data-studio=simple] .bld-pins, .bld[data-studio=simple] .bld-hints, .bld[data-studio=simple] .bld-timeline { display: none !important; }
.bld[data-studio=adv] .bld-steps, .bld[data-studio=adv] .bld-simple-only, .bld[data-studio=adv] .bld-stagewrap, .bld[data-studio=adv] .bld-strip, .bld[data-studio=adv] .bld-next { display: none !important; }
.bld[data-studio=simple] .bld-main { grid-template-columns: 300px minmax(0, 1fr) 262px; }
.bld[data-studio=simple] .bld-dlg[data-kind=templates] { right: 262px; }
.bld[data-studio=simple] .bld-centre { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
/* top bar */
.bld-steps { display: flex; gap: 4px; margin: 0 auto; }
.bld .bld-steps button { font-size: 13px; padding: 6px 12px 6px 8px; display: flex; align-items: center; gap: 7px; }
.bld-steps button em { font-style: normal; width: 18px; height: 18px; line-height: 15px; text-align: center; font-size: 11px; border: 2px solid var(--dimmer); color: var(--dim); background: #120f14; }
.bld-steps button.on { border-color: var(--gold); color: #ffe7a8; background: linear-gradient(#5e4830, #3a2c1e); box-shadow: inset 0 0 0 2px #1a1410, 0 2px 0 #000, 0 0 10px rgba(242, 193, 78, 0.25); }
.bld-steps button.on em { border-color: var(--gold); color: #1a1208; background: var(--gold); }
.bld .bld-test { border-color: #4a8a5a; color: #c8f0c0; white-space: nowrap; }
.bld .bld-test:hover, .bld .bld-test.padon { border-color: #8ae07a; color: #fff; }
.bld .bld-done { font-size: 13px; padding: 6px 14px; white-space: nowrap; }
.bld .bld-studio { font-size: 10px; padding: 5px 7px; color: var(--dim); white-space: nowrap; letter-spacing: 0.5px; }
.bld[data-studio=adv] .bld-name { min-width: 110px; max-width: 150px; }
.bld[data-studio=adv] .bld-top { gap: 6px; }
.bld[data-studio=adv] .bld-tabs button { padding: 6px 7px; }
/* the stage */
.bld-stagewrap { position: relative; flex: 1 1 auto; min-height: 160px; border: 2px solid #2a231e; background: #0d0a10; box-shadow: inset 0 0 0 1px #000; }
.bld-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.bld-stlbl { position: absolute; left: 8px; top: 6px; font-family: var(--title); font-size: 11px; color: var(--gold); letter-spacing: 1px; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.bld-stpins { position: absolute; right: 6px; top: 6px; display: flex; gap: 3px; }
.bld .bld-stpins button { padding: 3px 7px; font-size: 10px; background: rgba(26, 20, 18, 0.85); }
.bld-stpins button.on { border-color: var(--gold); color: #fff; }
.bld-stcard { position: absolute; left: 8px; top: 26px; max-width: 54%; display: flex; gap: 8px; align-items: flex-start; background: rgba(12, 10, 14, 0.9);
  border: 2px solid var(--edge2); box-shadow: 0 0 0 2px #000; padding: 6px 8px; pointer-events: none; }
.bld-stcard img, .bld-stcard .bk-sw { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.bld-stcard b { display: block; font-family: var(--title); font-weight: 400; color: var(--gold); font-size: 12px; }
.bld-stcard small { display: block; color: #9ab8ff; font-size: 10px; margin: 1px 0 2px; }
.bld-stcard span { display: block; font-size: 11px; line-height: 1.3; color: var(--text); }
/* the strip (the step's palette) */
.bld-strip { flex: 0 0 auto; height: 236px; display: flex; flex-direction: column; min-height: 0; background: rgba(16, 13, 18, 0.92); border: 2px solid #2a231e; padding: 6px; }
.bs-tabs { flex: none; display: flex; gap: 4px; align-items: center; margin-bottom: 6px; min-height: 24px; }
.bld .bs-tabs button { font-size: 11px; padding: 4px 10px; }
.bs-tabs button.on { border-color: var(--gold); color: #ffe7a8; background: linear-gradient(#5e4830, #3a2c1e); }
.bs-tabhint { margin-left: auto; color: var(--dimmer); font-size: 10px; line-height: 1.15; text-align: right; min-width: 0; }
.bs-title { font-family: var(--title); color: var(--gold); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.bs-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; align-content: start;
  scrollbar-width: thin; scrollbar-color: #4a3f36 transparent; padding: 1px; }
.bld .bs-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; text-transform: none; font-family: var(--font); letter-spacing: 0; min-width: 0; }
/* lane P: the body fills its card (integer zoom, builder.js) on a lit stone backdrop, so a dark silhouette reads */
.bs-card canvas { width: 100%; height: 60px; image-rendering: pixelated; background: var(--bcard-bg); border: 1px solid #000; }
.bs-part canvas { width: 88px; height: 88px; }
.bs-pgrid .bs-part canvas { width: 100%; }
.bs-pgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.bs-pgrid .bs-more i { line-height: 88px; height: 88px; }
.bs-card b { font-weight: 400; font-family: var(--title); font-size: 9px; line-height: 1.15; color: var(--gold); text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.bs-card i { font-style: normal; font-size: 36px; line-height: 60px; height: 60px; color: var(--gold); text-shadow: 0 0 12px rgba(255, 200, 90, 0.35); }
.bs-card.on { border-color: var(--gold); background: linear-gradient(#4e3c28, #2e2418); box-shadow: inset 0 0 0 2px #1a1410, 0 0 10px rgba(242, 193, 78, 0.35); }
.bs-surprise { border-color: #b08a3a !important; }
.bs-none { grid-column: 1 / -1; color: var(--dimmer); font-size: 12px; align-self: center; }
/* the Body step's left column */
.bs-sl { margin-bottom: 7px; }
.bs-slh { display: flex; align-items: baseline; gap: 6px; }
.bs-slh b { font-family: var(--title); font-weight: 400; font-size: 12px; color: var(--text); }
.bs-slh small { flex: 1; color: var(--dimmer); font-size: 10px; min-width: 0; }
.bs-slh span { color: var(--gold); font-family: var(--title); font-size: 11px; }
.bs-sl input[type=range] { width: 100%; margin: 2px 0 0; }
.bs-sl input[type=range]:disabled { opacity: 0.4; }
.bld h4 .bs-dice { float: right; margin-top: -4px; font-size: 9px; padding: 2px 6px; letter-spacing: 0.5px; }
/* the Powers step */
.bp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bp-acts .primary { grid-column: 1 / -1; }
.bld .bp-acts button { font-size: 11px; padding: 6px 4px; white-space: nowrap; }
.bp-pts { margin: 8px 0 6px; background: var(--panel2); border: 2px solid #2a231e; padding: 5px 7px; }
.bp-ptl { display: flex; gap: 10px; font-size: 11px; color: var(--dim); margin-top: 3px; }
.bp-ptl b { color: var(--text); font-weight: 400; }
.bp-ptl .bk-room { margin-left: auto; }
.bp-wand { background: rgba(28, 22, 20, 0.95); border: 2px solid #4a3a2a; padding: 3px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 5px; }
.bp-wand .bk-slot { min-height: 26px; }
/* lane N1: 3-4 wands, one compact row each (icon tiles) */
.bp-wc { padding: 2px; margin-bottom: 3px; }
.bp-wrow { display: flex; gap: 2px; align-items: stretch; }
.bp-wn { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--title); font-weight: 400; font-size: 11px; color: var(--gold); }
.bp-wc .bk-slot { flex: 1; min-height: 32px; justify-content: center; padding: 2px; }
.bp-wc .bk-slot .bk-mods { position: absolute; right: 1px; bottom: 1px; }
.bld .bp-wc .bk-mod img { width: 11px; height: 11px; }
.bld .bp-wc .bk-rm { position: absolute; right: 0; top: 0; padding: 0 2px; line-height: 10px; font-size: 8px; }
.bld .bp-wc > .bp-wrow > .bk-x { flex: none; align-self: center; padding: 2px 4px; font-size: 9px; }
.bld .bp-addw { width: 100%; border-style: dashed; font-size: 11px; padding: 5px; }
.bp-addw em { font-style: normal; color: var(--gold); margin-left: 6px; }
.bp-addw.dim { opacity: 0.45; }
.bld-left .bk-have { margin-top: 5px; }
.bld-left .bk-threat { margin-top: 6px; }
.bp-kinds button em { font-style: normal; color: var(--gold); margin-left: 6px; font-size: 10px; }
.bp-where { flex: none; display: flex; gap: 8px; font-size: 12px; color: var(--dim); margin-bottom: 5px; }
.bp-where b { color: var(--text); font-weight: 400; }
.bp-where em { margin-left: auto; color: var(--gold); white-space: nowrap; font-style: normal; }
.bp-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 62px; gap: 6px; }
.bld .bp-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 6px 6px 5px; text-transform: none;
  font-family: var(--font); letter-spacing: 0; overflow: hidden; min-width: 0; min-height: 0; background: linear-gradient(#2e2620, #1e1814); }
.bp-card img, .bp-card .bk-sw { width: 32px; height: 32px; image-rendering: pixelated; margin-bottom: 2px; flex: none; }
.bp-card b { font-family: var(--title); font-weight: 400; color: var(--gold); font-size: 12px; line-height: 1.15; }
.bp-card small { color: #9ab8ff; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
/* (lane BF: no line clamp — a clamp's '…' cut Sawblade orbit's effect off mid-sentence; builder.js fitCardText steps
   the font down until the whole description fits the card) */
.bp-card p { margin: 3px 0 2px; font-size: 11px; color: var(--text); line-height: 1.25; min-height: 0; flex: 0 1 auto; overflow: hidden; overflow-wrap: break-word; }
.bld .bp-card em { margin-top: auto; }
.bp-card em { font-style: normal; color: var(--gold); font-size: 10px; font-family: var(--title); }
.bp-n { position: absolute; left: 5px; top: 3px; font-family: var(--title); font-size: 10px; color: var(--dimmer); }
.bp-card.dim { opacity: 0.45; }
/* lane BF: a card that can't be taken shakes while the toast says why (a pick never silently does nothing) */
@keyframes bld-no { 0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.bld .bld-no { animation: bld-no 0.4s linear; }
.bld .bp-roll { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; padding: 4px 2px; }
.bp-roll small { font-size: 9px; letter-spacing: 0; }
/* the Personality step */
.bm-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bld .bm-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; padding: 6px; text-transform: none; font-family: var(--font); letter-spacing: 0; text-align: center; min-width: 0; }
.bm-card canvas { width: 72px; height: 72px; image-rendering: pixelated; background: var(--bcard-bg); border: 1px solid #000; flex: none; }
.bm-card b { font-family: var(--title); font-weight: 400; font-size: 15px; color: var(--gold); }
.bm-card small { font-size: 11px; color: var(--dim); line-height: 1.3; }
.bm-card.on { border-color: var(--gold); background: linear-gradient(#4e3c28, #2e2418); box-shadow: inset 0 0 0 2px #1a1410, 0 0 10px rgba(242, 193, 78, 0.35); }
.bm-card.on small { color: var(--text); }
.bp-voices { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bp-voices .bld-set .bld-setpick { flex: 1; min-width: 0; }
.bld .bp-voices .bld-setpick { font-size: 11px; padding: 5px 6px; }
/* lane N1: the Look rows (premium trail / glow / death burst) */
.bp-lkrow { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-bottom: 4px; }
.bp-lkrow > span { width: 40px; flex: none; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.bld .bp-lk { display: flex; gap: 3px; align-items: center; font-size: 10px; padding: 3px 5px; text-transform: none; font-family: var(--font); letter-spacing: 0; min-width: 0; }
.bp-lk em { font-style: normal; color: var(--gold); font-size: 9px; }
.bp-lk i { width: 10px; height: 10px; display: inline-block; border: 1px solid #000; }
.bld .bp-lk.on { border-color: var(--gold); background: linear-gradient(#5e4830, #3a2c1e); color: #fff; }
/* the right column */
.bld-plain { font-size: 12px; line-height: 1.35; margin: 3px 0 4px; color: var(--text); }
.bld-bandends { display: flex; justify-content: space-between; font-size: 9px; color: var(--dimmer); margin: -3px 0 2px; text-transform: uppercase; letter-spacing: 1px; }
.bld .bld-fixbtn { width: 100%; margin-top: 2px; font-size: 11px; padding: 6px; }
.bld-next { flex: none; }
.bld .bld-nextbtn { width: 100%; font-size: 13px; padding: 10px 8px; }
.bld-donebtns { margin: 10px 0 6px; }
.bld-dtext { font-size: 13px; line-height: 1.4; margin: 6px 0; color: var(--text); white-space: normal; overflow-wrap: break-word; }
.bld-cgrid > div { min-width: 0; }
.bld-dtext b { color: var(--gold); font-weight: 400; }
.bld-done .bld-bandlbl { font-size: 14px; }
.bld .bld-donebtns .primary { font-size: 15px; padding: 10px 16px; }