/* CrunchyTile — all CSS. Linked with <link rel="stylesheet"> so it works on file://.
 *
 * --css-build is checked by index.html. Bump BOTH whenever the stylesheet gains rules a new feature
 * needs: a stale stylesheet is otherwise invisible — every script fresh, the layout silently wrong.
 *
 * The palette is the suite's, deliberately identical to CrunchySFX / VFX / BGM so the apps read as
 * one family.
 */
:root {
  --css-build: 32;
  color-scheme: dark;

  /* Set from CHECKER in tile.js at startup — these are only the fallback. */
  --chk-a: #ff00ff;
  --chk-b: #a000a0;

  --bg: #14121a;
  --panel: #1e1b28;
  --panel2: #282436;
  --line: #3a3550;
  --ink: #e8e4f0;
  --muted: #9a94ad;
  --accent: #ff7a45;
  --accent2: #45d0ff;
  --bad: #ff8f97;
}

* { box-sizing: border-box; }

/* [hidden] loses to any author `display` rule without this (inherited from CrunchyVFX). */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 16px; letter-spacing: 0.02em; }
header h1 span { color: var(--accent); }
header .tag { color: var(--muted); font-size: 12px; }
header .spacer { flex: 1; }

#deps { display: none; padding: 6px 14px; background: #4d1418; color: #ffb3b8; font-weight: 700; }
#deps.show { display: block; }

.app { flex: 1; display: flex; min-height: 0; }

aside#controls {
  width: 280px;
  flex: none;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
aside h2 {
  margin: 14px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
aside > h2:first-child { margin-top: 0; }

.ctl { display: grid; grid-template-columns: 104px 1fr 34px; align-items: center; gap: 6px; margin: 4px 0; }
.ctl label { color: var(--muted); }
.ctl select { grid-column: 2 / 4; }
.ctl output { text-align: right; font-variant-numeric: tabular-nums; }

select, button, input[type="range"] { font: inherit; color: var(--ink); }
select, button {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #1a1010; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* PRESET THUMBNAILS (§37, css-build 8): a three-column grid of picture buttons — the picture on top (pixelated, its
   own aspect), the name below, clipped with an ellipsis. */
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.presetbtn { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 3px; font-size: 11px; text-align: left; min-width: 0; }
.presetbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presetbtn canvas.presetthumb { width: 100%; height: 44px; object-fit: cover; image-rendering: pixelated; border-radius: 2px;
  background: repeating-conic-gradient(#2a2a33 0% 25%, #22222a 0% 50%) 0 0 / 8px 8px; }

main#stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stage-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.stage-row figure { margin: 0; }
.stage-row figcaption { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* The preview IS the renderer, scaled by integer nearest-neighbour — never a CSS approximation.
   Transparency shows as a MAGENTA checker: grey would be read as content (tile.js CHECKER). */
canvas.art {
  display: block;
  image-rendering: pixelated;
  background-color: var(--chk-a);
  background-image:
    linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%),
    linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid var(--line);
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* LEVEL KITS (§35): a second row under the export buttons — pick a kit, preview its cover, export it. */
.kitbar { align-items: center; margin-top: 8px; }
.kitbar label { font-size: 12px; opacity: .75; }
.kitbar select { min-width: 12em; }

/* GAME PRESETS (css-build 10): presets made for one game (kit.js presetGame) fold away at the end of
   the grid, spanning all three columns, with their own grid inside. */
.presetgame { grid-column: 1 / -1; margin-top: 4px; }
.presetgame summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 3px 0; }
.presetgame summary:hover { color: var(--ink); }
.presetgame .presets { margin-top: 4px; }

/* WELCOME TOUR (css-build 10): ported from CrunchyUI, which ported it from CrunchyVFX. */
.tour { position: fixed; inset: 0; z-index: 300; }
.tour[hidden] { display: none; }
/* css-build 12: the dimming is four .tour-shade panels around the hole (index.html tourShade), not a 9999 px
   box-shadow — that is a ~20000 px texture, animated and redrawn on every resize, and AJ's browser began
   closing itself after the tour arrived. No transitions: nothing here animates. */
.tour-shade { position: absolute; background: rgba(8, 7, 12, 0.82); }
.tour-hole {
  position: absolute; border-radius: 8px; border: 2px solid var(--accent);
  pointer-events: none;
}
.tour-hole.notarget { border-color: transparent; }
.tour-card {
  position: absolute; width: min(360px, 90vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.tour-title { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.tour-body { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.tour-where { font-size: 12px; color: var(--muted); margin-top: 7px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.tour-progress { font-size: 12px; color: var(--muted); }
.tour-btns { display: flex; gap: 8px; }
.tour-btns button { padding: 6px 12px; font-size: 13px; }
#tourBtn { margin-right: 10px; }

/* YOUR KITS (§50, css-build 11): a name box and an add button under the kit picker; a kit of yours shows
   its parts as removable chips. */
.mykit input[type="text"] { min-width: 14em; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; }
.kitstatus { font-size: 12px; color: var(--muted); }
.kitparts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-basis: 100%; }
.kitchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 2px 1px 9px; }
.kitchip button { border: 0; background: none; padding: 0 5px; line-height: 1.2; }
#kitDelete.armed { border-color: var(--bad); color: var(--bad); }

/* YOUR OBJECTS (§68, css-build 16): a name box and a save button on the Objects tab; each saved object a
   card — its picture, its name (click to open it), a "use" box and an x. */
.objlib input[type="text"] { min-width: 14em; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; }
.objlist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.objcard { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 3px 3px 5px; }
.objthumb { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.objname { cursor: pointer; }
.objname:hover { color: var(--accent, #ff7a45); }
.objuse { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.objcard button { border: 0; background: none; padding: 0 5px; line-height: 1.2; }

footer.license {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border-top: 1px solid var(--line);
}
footer.license strong { color: var(--ink); }

/* TABS — one per thing you can make (params.js TABS). Built 2026-10-07; css-build 2. */
#tabs { display: flex; gap: 2px; margin-left: 18px; }
#tabs button {
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 14px;
}
#tabs button:hover { color: var(--ink); border-color: var(--line); }
#tabs button.active { background: var(--panel2); color: var(--ink); border-color: var(--accent); border-bottom-color: var(--panel2); }

/* PALETTE IMPORT (css-build 3). */
.import-row { margin: 6px 0 2px; }
.import-row button { width: 100%; }
.note { color: var(--muted); font-size: 11px; min-height: 14px; margin-top: 3px; }

/* PICTURE PICKERS (css-build 4) — ported in spirit from crunchyUI's pickerCtl. */
.ctl.pick { display: block; }
.ctl.pick > label { display: none; }
.pickchip, .pickhead {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 5px 7px;
}
.pickhead { flex-direction: row; font-weight: 600; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ptitle { color: var(--muted); font-size: 11px; }
.prow { display: flex; align-items: center; gap: 7px; }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcount { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pcaret { color: var(--muted); }
.pickfilter {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-top: 0; padding: 3px 7px;
}
.pickgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; max-height: 260px; overflow-y: auto;
  padding: 4px; background: var(--bg); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px;
}
.pickgrid.tex { grid-template-columns: repeat(3, 1fr); }
.pickcell { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px; font-size: 11px; text-align: left; }
.pickcell span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickcell.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatchstrip { display: flex; height: 14px; min-width: 64px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.swatchstrip > span { flex: 1; }
.swatchstrip.empty { border-style: dashed; }
.pickchip .swatchstrip { width: 96px; flex: none; }
canvas.texthumb { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--line); }
.pickcell canvas.texthumb { width: 100%; height: auto; aspect-ratio: 1; }
canvas.rthumb { height: 22px; width: auto; image-rendering: pixelated; vertical-align: middle; margin-right: 5px; }
.ctl label { display: flex; align-items: center; }

/* ITEM CARDS (css-build 5) — added items only, each with its preview, its sliders and an x. */
.itemlist { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.itemcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px 3px; }
.itemhead { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.itemname { flex: 1; font-weight: 600; }
.itemx { padding: 0 7px; line-height: 20px; font-size: 15px; color: var(--muted); background: transparent; border-color: transparent; }
.itemx:hover { color: var(--bad); border-color: var(--bad); }
canvas.cardthumb { height: 28px; width: auto; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.itemadd { margin: 6px 0 2px; }
.addbtn { width: 100%; border-style: dashed; color: var(--muted); }
.addbtn:hover { color: var(--ink); }
.addgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; padding: 4px;
           background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.addcell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; font-size: 11px; }
.addcell canvas.cardthumb { height: 36px; }

/* THE GROWTHS HINT (css-build 9): growths need variant tiles on a tileset; say so, with the fix. */
.itemhint { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; margin: 4px 0; font-size: 11px;
  border: 1px dashed var(--accent); border-radius: 4px; }
.itemhint button { align-self: flex-start; }
/* RANDOMIZE / VARY / BACK (css-build 6). */
.rollbar { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; gap: 4px; margin-bottom: 10px; }
.rollbar button:disabled { opacity: 0.45; cursor: default; }

/* DECORATIONS (§59, css-build 13): the big Baked / Separate toggle, and the preview checkbox. */
.ctl.seg { display: block; }
.segbox { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.segbox button { padding: 7px 6px; font-size: 12px; font-weight: 600; }
.segbox button.on { background: var(--accent); border-color: var(--accent); color: #1a1010; }
.decoshow { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-top: -6px; }
.decoshow[hidden] { display: none; }

/* IMPORTED SPRITES (§63, css-build 14): an import button, the recolour box and a chip per sprite. */
.spriterow { align-items: center; }
.spriterow[hidden] { display: none; }
.spriterecolor { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

/* FOLDING SECTIONS (css-build 15): a section's title folds it; a folded one keeps its added item cards. */
.group > h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.group > h2::before { content: "\25BE"; font-size: 10px; opacity: .7; width: 10px; }
.group.collapsed > h2::before { content: "\25B8"; }
.group > h2:hover { color: var(--ink); }
.group.collapsed > :not(h2):not(.itemlist) { display: none !important; }
.groupcount { margin-left: auto; font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent); }

/* THE PRESET GRID (css-build 15): a scrolling panel about three rows tall, a filter, and a folding title. */
#presetsHead { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
#presetsHead::before { content: "\25BE"; font-size: 10px; opacity: .7; width: 10px; }
#presetsHead.folded::before { content: "\25B8"; }
#presetsBox .pickfilter { width: 100%; margin-bottom: 4px; }
#presets { max-height: 236px; overflow-y: auto; padding-right: 2px; }

/* PLACED OBJECTS (§69, css-build 17): the Objects section on Overhead, Side view and Walls & floors — a hint
   line, item cards like the other sections, and an add grid split into Your objects and Presets. */
.placedhint { font-size: 11px; color: var(--muted); margin: 0 0 4px; }
.addsub { grid-column: 1 / -1; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 2px 0; }
.addbtn:disabled { opacity: .45; cursor: default; }

/* THE LIBRARY (§79, css-build 18): the desktop asset viewer (library.js). PORTABLE: only the suite's shared
   custom properties and `lib-*` classes, so this block copies into any Crunchy tool (PROJECTS-HANDOFF.md). */
.lib-overlay[hidden] { display: none !important; }   /* self-contained, as .suite-overlay below */
.lib-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(8, 7, 12, 0.78); display: flex;
               align-items: center; justify-content: center; }
.lib-panel { width: min(1100px, 94vw); height: min(820px, 90vh); display: flex; flex-direction: column; gap: 10px;
             background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.lib-busy .lib-panel { cursor: progress; }
.lib-top, .lib-bar, .lib-tools, .lib-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-title { margin: 0; font-size: 16px; color: var(--accent); }
.lib-spacer { flex: 1; }
.lib-close { font-size: 16px; line-height: 1; padding: 4px 9px; }
.lib-path { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.lib-links { display: grid; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.lib-link strong { min-width: 4.5em; }
.lib-link.linked strong { color: var(--accent2); }
.lib-toggle { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.lib-search { flex: 1; min-width: 14em; }
.lib-chip { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.lib-chip.on { border-color: var(--accent); color: var(--accent); }
.lib-grid { flex: 1; overflow: auto; padding-right: 4px; scrollbar-color: var(--line) transparent; }
.lib-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 6px; font-weight: 600; }
.lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lib-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: flex;
            flex-direction: column; gap: 4px; min-width: 0; }
.lib-pic { padding: 6px; height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden;
           background: var(--bg); }
.lib-thumb { image-rendering: pixelated; width: 100%; height: 100%; object-fit: contain; }
.lib-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.lib-rename { width: 100%; font-size: 13px; }
.lib-meta { font-size: 11px; color: var(--muted); }
.lib-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.lib-badge { font-size: 10px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--accent2); color: var(--accent2); }
.lib-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.lib-acts button { font-size: 11px; padding: 2px 6px; }
.lib-danger.armed { border-color: var(--bad); color: var(--bad); }
.lib-start { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lib-recent { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 24em; text-align: left; }
.lib-hint { color: var(--muted); font-size: 13px; max-width: 70ch; }
.lib-status { font-size: 12px; color: var(--muted); min-height: 1.5em; }
/* the project row under the exports (desktop only) */
.projbar #projCurrent { font-weight: 600; color: var(--ink); }

/* THE CRUNCHY SUITE (§80, css-build 19): suite.js's dialog. PORTABLE like the lib-* block: the suite's shared
   custom properties and `suite-*` classes only, so it copies into every Crunchy tool unchanged. */
/* Self-contained: a host app may lack the global `[hidden] { display: none !important }`, and then this block's
   `display: flex` would beat the browser's [hidden] and the dialog could never close (found porting to VFX). */
.suite-overlay[hidden] { display: none !important; }
.suite-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(8, 7, 12, 0.78); display: flex;
                 align-items: center; justify-content: center; padding: 16px; }
.suite-panel { width: min(640px, 100%); max-height: 100%; overflow: auto; background: var(--panel);
               border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.suite-head { display: flex; align-items: center; gap: 8px; }
.suite-title { margin: 0; flex: 1; font-size: 17px; color: var(--accent); }
.suite-close { font-size: 16px; line-height: 1; padding: 4px 9px; }
.suite-line { margin: 6px 0 12px; color: var(--ink); }
.suite-list { display: grid; gap: 8px; }
.suite-tool { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--line);
              border-radius: 6px; padding: 10px 12px; }
.suite-tool.here { border-color: var(--accent); }
.suite-icon { font-size: 22px; width: 1.4em; text-align: center; color: var(--accent2); }
.suite-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suite-name { font-size: 14px; }
.suite-what { font-size: 12.5px; color: var(--muted); }
.suite-go { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.suite-link { font-size: 12.5px; color: var(--accent2); text-decoration: none; border: 1px solid var(--line);
              border-radius: 4px; padding: 3px 9px; }
.suite-link:hover { border-color: var(--accent2); }
.suite-here, .suite-soon { font-size: 12px; color: var(--muted); }
.suite-here { color: var(--accent); }
.suite-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .suite-tool { flex-wrap: wrap; } .suite-go { flex-direction: row; } }

#suiteBtn { white-space: nowrap; }

/* PHONE WIDTH (css-build 20, before the web launch): a shared link brings phone visitors, and the desktop
   layout (a fixed 280 px sidebar beside the preview) cut the preview off. Below 760 px the page stacks and
   scrolls as a whole: the header wraps, the tabs scroll sideways, the PREVIEW comes first (what it makes),
   the controls follow, and previews shrink to the width (still pixelated). Nothing changes above 760 px. */
@media (max-width: 760px) {
  html, body { height: auto; }
  header { flex-wrap: wrap; row-gap: 6px; }
  header .tag { display: none; }
  #tabs { order: 10; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  #tabs button { white-space: nowrap; flex: none; }
  .app { flex-direction: column; min-height: auto; }
  main#stage { order: -1; overflow: visible; padding: 10px; }
  aside#controls { width: auto; overflow: visible; border-right: none; border-top: 1px solid var(--line); }
  canvas.art { max-width: 100%; max-height: 60vh; width: auto; height: auto; }   /* both caps keep the aspect */
  .stage-row { flex-direction: column; }
}

/* ERAS (§82, css-build 21): the header's era select, set apart from the tabs so it reads as a mode. */
.erapick { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.erapick select { font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel2); border: 1px solid var(--accent);
                  border-radius: 5px; padding: 3px 6px; }
@media (max-width: 760px) { .erapick { margin-left: 0; order: 9; } }
/* nine tabs, the era and the suite button share the header. Nothing in it breaks mid-label; the header may
   wrap, so a second row appears only when the window really is too narrow; the tagline gives way first. */
header { flex-wrap: wrap; row-gap: 6px; }
#tabs button, header > button, header .tag { white-space: nowrap; }
@media (max-width: 1600px) { header .tag:not(#build) { display: none; } }

/* THE WIZARD (§86, css-build 22): four question screens of cards, then a grid of nine designs. Self-hiding, like
   the suite dialog. */
.wiz-overlay { position: fixed; inset: 0; z-index: 240; background: rgba(8, 7, 12, 0.78); display: flex;
               align-items: center; justify-content: center; padding: 16px; }
.wiz-overlay[hidden] { display: none !important; }
.wiz-panel { width: min(980px, 100%); max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line);
             border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.wiz-head { display: flex; align-items: center; gap: 10px; }
.wiz-title { margin: 0; font-size: 17px; color: var(--accent); }
.wiz-steps { flex: 1; font-size: 12px; color: var(--muted); }
.wiz-close { font-size: 16px; line-height: 1; padding: 4px 9px; }
.wiz-q { margin: 0; font-size: 15px; }
.wiz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wiz-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 9px 11px; }
.wiz-card b { font-size: 13.5px; }
.wiz-card i { font-style: normal; font-size: 12px; color: var(--muted); }
.wiz-card.on { border-color: var(--accent); }
.wiz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wiz-pick { display: flex; flex-direction: column; gap: 5px; padding: 6px; font-size: 12px; color: var(--muted); }
.wiz-thumb { width: 100%; height: 150px; object-fit: contain; image-rendering: pixelated; background: var(--bg); border-radius: 3px; }
.wiz-foot { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) { .wiz-grid { grid-template-columns: repeat(2, 1fr); } }
#wizardBtn { white-space: nowrap; }
.wiz-objs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wiz-objs-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.wiz-obj { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; font-size: 12px; border-radius: 14px; }
.wiz-obj.on { border-color: var(--accent); color: var(--ink); }
.wiz-obj:not(.on) { opacity: .65; }
.wiz-obj-pic { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

/* OBJECT TAG CHIPS (§89, css-build 23): over the Objects tab's presets and the "add an object" grid. They span the
   whole grid row (the grids are CSS grids) and wrap. */
.tagchips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.tagchip { font-size: 11px; padding: 2px 8px; border-radius: 11px; color: var(--muted); }
.tagchip.on { border-color: var(--accent); color: var(--ink); }
.tagchip.clear { border-style: dashed; }


/* THE PRESET STRIP (§90, css-build 24): the presets left the sidebar for a strip under the header, in CrunchyUI's
   kit-strip shape: one row of pictures, PAGED by arrows (never a sideways scrollbar), the page counted. Above
   them, the toggle, a search over every tab and the tag chips, on one line. */
#presetbar { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 5px 14px 6px;
             background: var(--panel2); border-bottom: 1px solid var(--line); min-width: 0; }
.pbar-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
#presetsHead { flex: none; display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .08em;
               text-transform: uppercase; color: var(--muted); background: none; border: none; padding: 2px 0; cursor: pointer; }
#presetsHead::before { content: "\25BE"; font-size: 10px; opacity: .7; width: 10px; }
#presetsHead.folded::before { content: "\25B8"; }
#presetsHead:hover { color: var(--ink); }
#presetFilter { flex: none; width: 190px; }
#presetTags { flex: 1 1 auto; min-width: 0; }
#presetTags { display: flex; align-items: center; gap: 4px; }
/* no scrollbar (AJ: it "pops up to block" the chips): the row is stepped by the arrows beside it (chipPager) */
#presetTags .tagchips { margin: 0; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: hidden; scroll-behavior: smooth; }
#presetTags .chippg { flex: none; padding: 0 6px; font-size: 15px; line-height: 20px; }
#presetTags .chippg[hidden] { display: none; }
#presetTags .tagchip { flex: none; white-space: nowrap; }
.pbar-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pbar-row[hidden] { display: none; }
#presets { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
#presets > .presetbtn { flex: none; width: 96px; position: relative; }
#presets > .presetbtn canvas.presetthumb { height: 52px; }
#presets > .presetbtn.game { border-style: dashed; }
#presets > [hidden] { display: none; }
#presets .ptab { position: absolute; top: 4px; left: 4px; font-style: normal; font-size: 9px; padding: 0 4px; border-radius: 3px;
                 background: rgba(0, 0, 0, .7); color: var(--ink); pointer-events: none; }
#presets .pgame { flex: none; width: 96px; align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center;
                  font-size: 11px; color: var(--muted); border-left: 2px solid var(--line); padding: 0 6px; }
#presets .pnone { color: var(--muted); font-size: 12px; padding: 20px 4px; }
.pbar-row .pgbtn { flex: none; align-self: stretch; padding: 0 6px; font-size: 18px; line-height: 1; }
.pbar-row .tbarpage { flex: none; min-width: 40px; text-align: center; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  #presetbar { padding: 5px 10px 6px; }
  .pbar-top { flex-wrap: wrap; row-gap: 4px; }
  #presetFilter { flex: 1 1 auto; width: auto; }
  #presetTags { flex-basis: 100%; }
}

/* STRIP SECTIONS (§92, css-build 25): the strip's mode chips (Presets, then this tab's picture sections), the
   section pictures (added ones marked), and the FOCUSED sidebar section floated to the top: an accent edge, a
   tinted panel and an "Editing" label, so it can't be mistaken for the sections below it. */
.stripmodes { display: flex; gap: 2px; flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.stripmode { font-size: 12px; padding: 2px 10px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); white-space: nowrap; }
.stripmode:hover { color: var(--ink); }
.stripmode.on { background: var(--accent); color: #fff; font-weight: 600; }
.stripmode .groupcount { margin-left: 5px; }
.stripmode.on .groupcount { color: #fff; opacity: .85; }
#presetsHead:empty { padding: 2px 2px; }
#presetFilter[hidden] { display: none; }
#presets > .itemcell canvas.presetthumb { object-fit: contain; }
#presets > .itemcell.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#presets > .itemcell.on::after { content: "\2713  added"; position: absolute; top: 4px; right: 4px; font-size: 9px; padding: 0 4px;
                                 border-radius: 3px; background: var(--accent); color: #fff; pointer-events: none; }
#presets > .itemcell.mine span { font-style: italic; }
.group.focus { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-radius: 0 6px 6px 0;
               padding: 6px 8px 8px 9px; margin: 0 -4px 14px -8px; }
.group.focus > h2::before { content: "\25BE  EDITING \00B7"; width: auto; opacity: 1; color: var(--accent); font-weight: 700; font-size: 11px; white-space: pre; }
.group.focus.collapsed > h2::before { content: "\25B8  EDITING \00B7"; }
.group.focus .itemadd { display: none; }                     /* its pictures are in the strip */
.itemcard.flash, .placedcard.flash { animation: cardflash .9s ease-out; }
@keyframes cardflash { from { box-shadow: 0 0 0 2px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 760px) {
  .stripmodes { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
}

/* ⚙ SETTINGS (§93.1, css-build 27): CrunchyBGM's preferences dialog: a row per preference, the label and its
   explanation on the left, the control on the right. Self-hiding, like the suite dialog. */
.set-overlay[hidden] { display: none !important; }
.set-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(8, 7, 12, 0.78); display: flex;
               align-items: center; justify-content: center; padding: 16px; }
.set-panel { width: min(620px, 100%); max-height: 100%; overflow: auto; background: var(--panel);
             border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.set-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.set-title { margin: 0; font-size: 17px; color: var(--accent); }
.set-hint { flex: 1; font-size: 12px; color: var(--muted); }
.set-close { font-size: 16px; line-height: 1; padding: 4px 9px; }
.setrow { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setrow:last-of-type { border-bottom: 0; }
.setlbl { flex: 1; font-size: 13.5px; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.setsub { font-size: 12px; color: var(--muted); line-height: 1.45; }
.setchk { margin-top: 2px; }
.setchk input { width: 18px; height: 18px; accent-color: var(--accent); }

/* SWITCHES (§94.1, css-build 28): an on/off row (Animate) as a switch on the row's right; the label stays left. */
.ctl.switchrow { align-items: center; }
.ctl.switchrow .switch { grid-column: 2 / 4; justify-self: end; }
.switch { position: relative; width: 38px; height: 20px; padding: 0; border-radius: 10px; flex: none;
          background: var(--panel2); border: 1px solid var(--line); cursor: pointer; }
.switch span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted);
               transition: left .12s ease, background .12s ease; }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on span { left: 20px; background: #fff; }

/* CRT (§95, css-build 29): the header toggle beside the era select, lit when on. */
.crtbtn { font-size: 12px; padding: 3px 9px; white-space: nowrap; }
.crtbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* LOOKS IN THE STRIP (§96, css-build 30): a look is chosen, not added */
#presets > .itemcell[data-look].on::after { content: "\2713  in use"; }

/* §98.1 (css-build 31): the stand-in figure's banner over the Objects preview: unmistakably a NOTE, not the art */
.prevnote { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 8px 12px; border-radius: 6px;
            background: #3a2f12; border: 1px solid #c9a227; color: #f3e3b0; font-size: 13px; line-height: 1.4; }
.prevnote[hidden] { display: none; }
.prevnote span { flex: 1; }
.prevnote.off { background: var(--panel2); border-color: var(--line); color: var(--muted); }
.prevnote button { flex: none; }

/* A preset picture that failed to draw (css-build 32): marked, so it can be reported by name; the queue carries on */
#presets > .presetbtn.thumbfail { border: 1px dashed #d05050; }
#presets > .presetbtn.thumbfail::after { content: "!"; position: absolute; top: 4px; right: 6px; color: #ff7070; font-weight: 700; }