/* spore.css — the Spore-style body creator (lane SPORE, public/spore.js), inside the builder's Body step.
   Dark, dense, classic-styled: 1 px rules, small caps heads, pixel font; laid out at 1280x720 (zoomed by --ui-scale).
   Every .sp rule is scoped under :where(.bld-spore) (zero specificity: the cascade inside the creator is unchanged): a bare .sp
   also matched the Hearth gold chip's "here" span (app.js) and threw the spent amount into the chip's corner (verdict 14). */
.bld-spore { grid-column: 1 / -1; min-height: 0; position: relative; }
.bld[data-mode=sbody] .bld-main > .bld-left, .bld[data-mode=sbody] .bld-main > .bld-centre, .bld[data-mode=sbody] .bld-main > .bld-right { display: none; }
.bld[data-mode=sbody] .bld-main { grid-template-columns: minmax(0, 1fr); }
:where(.bld-spore) > .sp { position: absolute; inset: 0; display: grid; grid-template-columns: 292px minmax(0, 1fr) 268px; font-size: 12px; }
:where(.bld-spore) > .sp h4 { font-family: var(--title); font-weight: 400; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 4px; }
:where(.bld-spore) > .sp h4 small { text-transform: none; letter-spacing: 0; color: var(--dimmer); font-family: var(--font); font-size: 11px; }
:where(.bld-spore) > .sp button { font-size: 11px; padding: 4px 7px; letter-spacing: 0.5px; }
:where(.bld-spore) > .sp .sp-gap { flex: 1; }
.sp-fact { color: var(--dim); font-size: 11px; line-height: 1.3; margin: 5px 0 0; }

/* ---- the palette (left) */
.sp-pal { display: flex; flex-direction: column; min-height: 0; background: rgba(14, 11, 16, 0.95); border-right: 2px solid var(--edge); padding: 6px; gap: 6px; }
.sp-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; flex: none; }
:where(.bld-spore) > .sp .sp-cat { display: flex; align-items: center; gap: 3px; padding: 1px 3px; text-transform: none; font-family: var(--font); font-size: 11px; letter-spacing: 0; min-width: 0; height: 26px; }
.sp-cat canvas { width: 22px; height: 22px; flex: none; image-rendering: pixelated; }
.sp-cat i { width: 22px; text-align: center; font-style: normal; color: var(--gold); flex: none; }
.sp-cat span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-cat.on { border-color: var(--gold); color: #ffe7a8; background: linear-gradient(#5e4830, #3a2c1e); }
.sp-tiles { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; align-content: start; scrollbar-width: thin; scrollbar-color: #4a3f36 transparent; }
:where(.bld-spore) > .sp .sp-tile { display: flex; flex-direction: column; align-items: center; padding: 2px 1px 1px; text-transform: none; font-family: var(--font); letter-spacing: 0; min-width: 0; cursor: grab;
  background: radial-gradient(ellipse at 50% 45%, #2a2128 0%, #17121a 80%); border: 1px solid #3a3029; box-shadow: none; }
:where(.bld-spore) > .sp .sp-tile:hover, :where(.bld-spore) > .sp .sp-tile:focus-visible { border-color: var(--gold); background: radial-gradient(ellipse at 50% 45%, #3e3128 0%, #1c161c 80%); }
.sp-tile canvas { width: 56px; height: 48px; image-rendering: pixelated; pointer-events: none; }
.sp-tile b { font-weight: 400; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sp-empty { grid-column: 1 / -1; color: var(--dim); font-size: 11px; line-height: 1.35; }
.sp-starts { flex: none; }
.sp-starts h4 { margin-top: 0; }
.sp-srow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
:where(.bld-spore) > .sp .sp-start { display: flex; flex-direction: column; align-items: center; padding: 1px; text-transform: none; font-family: var(--font); letter-spacing: 0; min-width: 0; border-width: 1px; box-shadow: none; }
.sp-start canvas { width: 44px; height: 40px; image-rendering: pixelated; }
.sp-start i { font-style: normal; font-size: 20px; color: var(--gold); line-height: 40px; height: 40px; }
.sp-start b { font-weight: 400; font-size: 11px; color: var(--dim); }

/* ---- the edit view (centre) */
.sp-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sp-bar { flex: none; display: flex; gap: 4px; align-items: center; padding: 4px 6px; background: rgba(20, 16, 22, 0.95); border-bottom: 1px solid var(--edge); }
.sp-sel { display: flex; gap: 4px; align-items: center; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.sp-sel select { font-size: 11px; padding: 2px 22px 2px 6px; }
:where(.bld-spore) > .sp .sp-tg.on { border-color: #78d8ff; color: #d8f4ff; background: linear-gradient(#24404a, #1a2a30); }
.sp-tg b { font-weight: 400; color: var(--gold); }
.sp-cvwrap { position: relative; flex: 1; min-height: 0; margin: 4px; border: 2px solid #2a231e; background: #0d0a10; }
.sp-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
.sp-hint { position: absolute; left: 6px; top: 4px; font-size: 11px; color: var(--dimmer); pointer-events: none; }
.sp-status { flex: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 8px 5px; color: var(--dim); font-size: 11px; }
.sp-status b { color: var(--gold); font-weight: 400; }

/* ---- the side (right): live, the selected part, materials, the body's stats */
.sp-side { overflow-y: auto; overflow-x: hidden; background: rgba(14, 11, 16, 0.95); border-left: 2px solid var(--edge); padding: 6px; scrollbar-width: thin; scrollbar-color: #4a3f36 transparent; }
.sp-live { border: 1px solid #2a231e; background: #0c090d; }
.sp-pv { width: 100%; height: 118px; display: block; image-rendering: pixelated; }
.sp-pins { display: flex; gap: 2px; padding: 2px; }
.sp-pins button { flex: 1; padding: 2px 2px !important; }
.sp-pins button.on { border-color: var(--gold); color: #ffe7a8; }
.sp-insp { min-height: 104px; }
.sp-insp h4:first-child { margin-top: 4px; }
.sp-mh { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px; gap: 6px; align-items: center; margin: 7px 0 3px; }
.sp-mh h4 { margin: 0; white-space: nowrap; }
.sp-mh input[type=range] { width: 100%; min-width: 0; }
.sp-mh em { font-style: normal; font-size: 11px; color: var(--dim); text-align: right; }
.sp-vars { display: flex; gap: 2px; margin-bottom: 4px; }
.sp-vars button { flex: 1; }
.sp-vars button.on { border-color: var(--gold); color: #ffe7a8; background: linear-gradient(#5e4830, #3a2c1e); }
.sp-sl { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; gap: 4px; align-items: center; margin: 2px 0; }
.sp-sl span { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.sp-sl input[type=range] { width: 100%; min-width: 0; }
.sp-sl em { font-style: normal; color: var(--text); font-size: 11px; text-align: right; }
.sp-tgs { display: flex; gap: 2px; margin-top: 3px; align-items: center; }
.sp-tgs button { flex: 1; }
.sp-z { color: var(--dim); font-size: 11px; padding: 0 4px; white-space: nowrap; }
:where(.bld-spore) > .sp .sp-del { border-color: #8a3a2a; }
.sp-sw { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; }
:where(.bld-spore) > .sp .sp-ramp { display: flex; flex-direction: column; height: 22px; padding: 0 !important; border-width: 1px; box-shadow: none; overflow: hidden; min-width: 0; }
.sp-ramp i { flex: 1; }
:where(.bld-spore) > .sp .sp-ramp.on { border-color: #fff; outline: 1px solid var(--gold); }
.sp-glows { grid-template-columns: repeat(8, 1fr); }
:where(.bld-spore) > .sp .sp-glow { height: 18px; padding: 2px !important; border-width: 1px; box-shadow: none; display: flex; }
.sp-glow i { flex: 1; }
:where(.bld-spore) > .sp .sp-glow.on { border-color: #fff; outline: 1px solid var(--gold); }

/* ---- the part forge (ADVANCED), over the creator. Opaque (lane UIFIX, verdict 14 #7): at 0.97 the creator's toolbar
   ghosted through its header ("SEGMENTED · GAIT · RANDOM · FORGE" behind PART FORGE) */
.sp-forge { position: absolute; inset: 0; background: rgb(8, 6, 9); z-index: 5; display: flex; }
.sp-forge.hidden { display: none; }
.spf { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 6px; gap: 6px; }
.spf-top, .spf-bot { flex: none; display: flex; gap: 6px; align-items: center; color: var(--dim); font-size: 11px; }
.spf-top b { font-family: var(--title); color: var(--gold); letter-spacing: 1px; font-weight: 400; }
.spf-top label { display: flex; gap: 4px; align-items: center; text-transform: uppercase; letter-spacing: 0.5px; }
.spf-top select { font-size: 11px; padding: 2px 20px 2px 6px; }
:where(.bld-spore) > .sp input.spf-name { width: 170px; flex: none; font-size: 12px; padding: 3px 6px; text-transform: none; }
.spf-size { color: var(--text); }
.spf-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px; }
.spf-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: start; }
:where(.bld-spore) > .sp .spf-tool { text-transform: none; font-family: var(--font); letter-spacing: 0; display: flex; justify-content: space-between; align-items: center; }
.spf-tool kbd { font-size: 10px; padding: 0 3px; }
.spf-tool.on { border-color: var(--gold); background: linear-gradient(#5e4830, #3a2c1e); color: #fff; }
.spf-cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 6px; }
:where(.bld-spore) > .sp .spf-col { height: 22px; padding: 0 !important; border-width: 1px; box-shadow: none; color: var(--dim); }
.spf-col.on { border-color: #fff; outline: 2px solid var(--gold); }
.spf-cvwrap { position: relative; min-width: 0; min-height: 0; border: 2px solid #2a231e; }
.spf-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; touch-action: none; }

/* ---- phones / small screens: it opens and works, two columns (the side panel scrolls under the palette) */
body.phone :where(.bld-spore) > .sp { grid-template-columns: 200px minmax(0, 1fr) 190px; }
body.phone .sp-tiles { grid-template-columns: repeat(3, 1fr); }
body.phone .sp-srow { grid-template-columns: repeat(3, 1fr); }
body.phone .sp-bar .sp-sel { display: none; }
body.phone .sp-pv { height: 96px; }
body.phone .spf-tool kbd { font-size: 11px; }
/* touch screens: every control a finger's size (44 px), nothing cut */
body.touch .sp-sw, body.touch .sp-glows { grid-template-columns: repeat(4, 1fr); gap: 2px; }
body.touch :where(.bld-spore) > .sp .sp-ramp, body.touch :where(.bld-spore) > .sp .sp-glow { height: 44px; min-width: 44px; }
body.phone .sp-cat canvas { display: none; }
body.phone .sp-pal { overflow-y: auto; }   /* (the categories take the column: it scrolls whole, the tiles under them) */
body.phone .sp-tiles { flex: none; overflow: visible; }
body.phone .sp-cats { grid-template-columns: repeat(3, 1fr); }
body.phone :where(.bld-spore) > .sp .sp-cat { padding: 1px 2px; justify-content: center; }
body.phone .sp-pins { flex-wrap: wrap; }
body.phone .sp-pins button { flex: 1 0 30%; }
body.phone .sp-bar { flex-wrap: wrap; }
body.phone .sp-bar [data-sp=walk] { display: none; }