.builder{background:var(--ink);color:#fff;border-color:var(--ink)}
.builder .hint{color:#aeb3c2}
.b-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.stage{background:radial-gradient(circle at 30% 20%,#4a6cf0 0,#2a3a8f 45%,#1b2156 100%);border-radius:14px;padding:16px;min-height:380px;overflow:hidden}
.hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:6px;height:48px;padding-right:6px;box-sizing:border-box;color:#fff;font:800 22px/1 system-ui,sans-serif;-webkit-text-stroke:0;text-shadow:0 2px 0 #1E1B2E}
.pill img{margin:-12px 0 -12px -8px}
.bar{position:relative;flex:1 1 160px;max-width:260px;height:36px}
.track,.fill{position:absolute;left:0;top:0;height:36px;box-sizing:border-box}
.track{width:100%}
.fill{min-width:26px;max-width:100%}
.panel{box-sizing:border-box;padding:4px;min-height:250px;display:flex;flex-direction:column;align-items:center;gap:14px}
.slots{display:grid;grid-template-columns:repeat(3,auto);gap:8px;justify-content:center}
.slot{box-sizing:border-box;width:84px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font:800 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 0 #1E1B2E,0 -1px 0 #1E1B2E,1px 0 0 #1E1B2E,-1px 0 0 #1E1B2E}
.slot img{margin:-14px 0 -2px}
@media (max-width:760px){.slot{font-size:8.5px}}
.gbtn{box-sizing:border-box;height:76px;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;cursor:pointer;padding:0;color:#fff;font:900 26px/1 system-ui,sans-serif;letter-spacing:.02em;text-shadow:0 2px 0 #1E1B2E,0 -2px 0 #1E1B2E,2px 0 0 #1E1B2E,-2px 0 0 #1E1B2E,2px 2px 0 #1E1B2E,-2px -2px 0 #1E1B2E,2px -2px 0 #1E1B2E,-2px 2px 0 #1E1B2E;touch-action:manipulation}
.gbtn[data-state=pressed] span,.gbtn[data-state=pressed] img{transform:translateY(4px)}
.gbtn img,.gbtn .tint{width:40px;height:40px;margin:-12px 0 -4px}
.gbtn span{margin-top:-12px}
.tint{display:inline-block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.controls{display:flex;flex-direction:column;gap:12px}
.controls label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#dfe2ea}
.controls label.inline{flex-direction:row;align-items:center;gap:8px}
.controls input[type=range]{width:100%}
.controls input:not([type]),.controls select{background:#1d2130;color:#fff;border:1px solid #333a4f;border-radius:10px;padding:8px 10px;font:inherit;min-height:42px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:36px;height:36px;border-radius:10px;border:3px solid #1E1B2E;cursor:pointer;box-shadow:0 0 0 2px transparent}
.sw.on{box-shadow:0 0 0 3px #fff}
.tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:10px}
.tools input[type=search]{flex:1 1 240px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;min-height:44px}
label.inline{display:flex;align-items:center;gap:6px;font-size:14px}
.chips{margin-bottom:12px}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;background:#2B2F4A;border-radius:14px;padding:12px}
.icons.light{background:#FFF3D6}
.ic{margin:0;text-align:center;color:#dfe2ea;font-size:12px}
.icons.light .ic{color:#2B2F4A}
.ic img{display:block;margin:0 auto 4px}
.pieces h3{margin:14px 0 6px}
.pieces .n,.chip .n{opacity:.6;font-weight:500;margin-left:4px}
.pc-row{display:flex;flex-wrap:wrap;gap:8px;background:#2B2F4A;border-radius:12px;padding:10px}
.pc{margin:0;text-align:center;color:#dfe2ea;font-size:11px;width:82px}
.pc img{display:block;margin:0 auto 4px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
@media (max-width:760px){
  .b-grid{grid-template-columns:1fr}
  .stage{min-height:0;padding:12px}
  .slot{width:76px;height:76px}
  .icons{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .ic img{width:60px;height:60px}
  .lede{font-size:16px}
  .facts{gap:6px}
  .facts li{font-size:13px;padding:4px 10px}
}