/* com_dc360pcbuilder — "DC360 PC Builder" front-end styling.
 *
 * Ported from the original standalone game's css/style.css, which owned the
 * whole page (html,body{overflow:hidden}, #app{width:100vw;height:100vh}).
 * Embedded in a Joomla page template we can't hijack the real viewport like
 * that, so every rule below is scoped under .dcpcbuilder-root (the wrapper
 * div in site/tmpl/game/default.php) and #app fills that wrapper's own
 * height instead of the true viewport. fitStageToViewport() in screens.js
 * measures the real rendered box of .workbench at runtime regardless, so
 * this containment is invisible to the game logic — it only ever needed a
 * real flex-height layout to measure, not literally 100vh.
 *
 * All custom-property names, class names and layout structure are kept
 * identical to the original so every ported JS/SVG file's className
 * references (render.js, art/*.js, ui/*.js) work unchanged. Keyframe names
 * are prefixed (dcpcbuilder-*) since @keyframes are global regardless of
 * selector scoping and this page can share a Joomla template with other
 * DC360 games that use similar generic names (shake, fadeIn, popUp).
 *
 * Appended at the end: the rp-* rules for the rear-panel engine
 * (engine/rearPanelEngine.js), which replaces this campaign's Chapter 6 —
 * visual language ported from the retired com_dc360pcsetup's pcsetup.css,
 * re-themed from that component's bright Comic-Sans palette into this
 * game's dark "workshop" theme so it sits naturally among the other 34
 * ported levels sharing the same .stage/.tray-dock/#side-panel chrome.
 */

/* ===========================================================
   TEACHER RESULTS PAGE (site/tmpl/results/default.php)
   A normal Joomla content-flow page, not the self-contained dark game
   screen above — bright/rounded house style matching the retired
   com_dc360pcsetup's results table (site/tmpl/results in that component),
   its own light palette rather than the game's dark workshop vars.
=========================================================== */
.dcpcbuilder{
  --dcb-primary:#2563eb;
  --dcb-primary-dark:#1d4ed8;
  --dcb-ink:#1f2430;
  --dcb-panel-bg:#ffffff;
  --dcb-radius:18px;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  color:var(--dcb-ink);
}
.dcpcbuilder-title{
  font-size:1.6rem; color:var(--dcb-primary-dark); margin:0 0 4px;
}
.dcpcbuilder-task{
  font-size:0.95rem; color:var(--dcb-ink); margin:0 0 14px;
}
.dcpcbuilder-results-table-wrap{overflow-x:auto;}
.dcpcbuilder-results-table{
  width:100%; border-collapse:collapse; background:var(--dcb-panel-bg);
  border-radius:var(--dcb-radius); overflow:hidden;
}
.dcpcbuilder-results-table th, .dcpcbuilder-results-table td{
  padding:10px 14px; text-align:left; border-bottom:1px solid #eef3ff;
}
.dcpcbuilder-results-table th{background:var(--dcb-primary); color:#fff;}

.dcpcbuilder-root{
  --bg-0:#0b0f16;
  --bg-1:#111826;
  --bg-2:#161f30;
  --bg-3:#1d2940;
  --panel:#141c2b;
  --panel-edge:#2a3855;
  --grid-line:rgba(90,130,190,0.08);
  --text-0:#eaf0ff;
  --text-1:#aebbd6;
  --text-2:#7686a8;
  --accent:#4fd1c5;
  --accent-2:#5b8cff;
  --warn:#ffb454;
  --bad:#ff5d6c;
  --good:#4fd18a;
  --gold:#e0b84a;

  --pcb-green:#0f3d2e;
  --pcb-green-lt:#155a44;
  --pcb-dark:#0c1420;
  --metal-lt:#dbe4f2;
  --metal-md:#93a3bf;
  --metal-dk:#4d5975;
  --plastic-dk:#20242e;
  --plastic-md:#2c3140;

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;

  --shadow-panel:0 10px 30px rgba(0,0,0,0.45);
  --shadow-piece:0 6px 16px rgba(0,0,0,0.5);
  --font-ui:'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:'Consolas','SFMono-Regular',Menlo,monospace;

  position:relative;
  width:100%;
  max-width:1400px;
  height:min(82vh, 900px);
  min-height:560px;
  margin:0 auto;
  overflow:hidden;
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-panel);
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
.dcpcbuilder-root, .dcpcbuilder-root *{box-sizing:border-box;}

/* Plain (results-page) presentation — overridden below when nested inside
   the dark, self-contained game screen. */
.dcpcbuilder-guest-note{
  background:#fff4da; color:#7a4a00; font-weight:700; font-size:0.95rem;
  padding:10px 18px; border-radius:12px; margin:0 0 14px; text-align:center;
}
.dcpcbuilder-root .dcpcbuilder-guest-note{
  position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:70;
  background:var(--warn); color:#241a00; font-size:12.5px;
  padding:6px 16px; border-radius:999px; margin:0; white-space:nowrap;
  box-shadow:var(--shadow-piece);
}

.dcpcbuilder-root #app{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% -10%, rgba(79,209,197,0.06), transparent 40%),
    radial-gradient(circle at 100% 110%, rgba(91,140,255,0.07), transparent 45%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/40px 40px,
    var(--bg-0);
}

.dcpcbuilder-root .screen{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  animation:dcpcbuilder-fadeIn .25s ease;
}
.dcpcbuilder-root .screen.active{display:flex;}
@keyframes dcpcbuilder-fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- Scrollbars ---------- */
.dcpcbuilder-root ::-webkit-scrollbar{width:10px; height:10px;}
.dcpcbuilder-root ::-webkit-scrollbar-track{background:transparent;}
.dcpcbuilder-root ::-webkit-scrollbar-thumb{background:var(--panel-edge); border-radius:6px;}

/* ---------- Top bar ---------- */
.dcpcbuilder-root .topbar{
  display:flex; align-items:center; gap:16px;
  padding:10px 20px;
  background:linear-gradient(var(--bg-1), rgba(17,24,38,0.85));
  border-bottom:1px solid var(--panel-edge);
  flex:0 0 auto;
  z-index:5;
}
.dcpcbuilder-root .topbar .brand{
  font-weight:700; letter-spacing:.5px; font-size:15px;
  display:flex; align-items:center; gap:8px; color:var(--text-0);
}
.dcpcbuilder-root .topbar .brand .chip-mark{width:20px;height:20px;}
.dcpcbuilder-root .topbar .brand .chip-mark svg{width:100%;height:100%;display:block;}
.dcpcbuilder-root .topbar .spacer{flex:1;}
.dcpcbuilder-root .topbar .btn-icon{
  background:var(--bg-2); border:1px solid var(--panel-edge); color:var(--text-1);
  border-radius:var(--radius-s); padding:6px 12px; font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:.15s;
}
.dcpcbuilder-root .topbar .btn-icon:hover{background:var(--bg-3); color:var(--text-0); border-color:var(--accent);}

.dcpcbuilder-root .hud{display:flex; align-items:center; gap:18px; font-size:13px; color:var(--text-1);}
.dcpcbuilder-root .hud .stat{display:flex; align-items:center; gap:6px;}
.dcpcbuilder-root .hud .stat b{color:var(--text-0); font-family:var(--font-mono);}
.dcpcbuilder-root .hud .stars{display:flex; gap:2px;}
.dcpcbuilder-root .hud .stars svg{width:14px;height:14px;}

/* ---------- Buttons ---------- */
.dcpcbuilder-root .btn{
  font-family:var(--font-ui); font-weight:600; font-size:14px;
  border-radius:var(--radius-m); border:1px solid var(--panel-edge);
  padding:12px 22px; cursor:pointer; color:var(--text-0);
  background:var(--bg-2); transition:transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.dcpcbuilder-root .btn:hover{transform:translateY(-1px); border-color:var(--accent);}
.dcpcbuilder-root .btn:active{transform:translateY(0px) scale(.98);}
.dcpcbuilder-root .btn.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#062026; border:none; box-shadow:0 8px 20px rgba(79,209,197,0.25);
}
.dcpcbuilder-root .btn.primary:hover{box-shadow:0 10px 26px rgba(79,209,197,0.4);}
.dcpcbuilder-root .btn.ghost{background:transparent;}
.dcpcbuilder-root .btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.dcpcbuilder-root .btn.small{padding:7px 14px; font-size:12.5px; border-radius:var(--radius-s);}
.dcpcbuilder-root .btn.danger{border-color:var(--bad); color:var(--bad);}

/* ===========================================================
   MAIN MENU
=========================================================== */
.dcpcbuilder-root #screen-menu .menu-wrap{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  text-align:center; padding:20px;
}
.dcpcbuilder-root .title-block h1{
  font-size:44px; margin:0; letter-spacing:1px;
  background:linear-gradient(135deg,#eaf0ff, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dcpcbuilder-root .title-block p{margin:8px 0 0; color:var(--text-2); font-size:15px;}
.dcpcbuilder-root .menu-actions{display:flex; flex-direction:column; gap:12px; width:280px;}
.dcpcbuilder-root .menu-hero-art{width:min(560px,80vw); opacity:.95; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));}

/* ===========================================================
   LEVEL SELECT
=========================================================== */
.dcpcbuilder-root #screen-levels .content{flex:1; overflow-y:auto; padding:24px 40px 60px;}
.dcpcbuilder-root .chapter-block{margin-bottom:34px;}
.dcpcbuilder-root .chapter-head{display:flex; align-items:baseline; gap:12px; margin-bottom:12px;}
.dcpcbuilder-root .chapter-head .num{
  font-family:var(--font-mono); color:var(--accent); font-size:13px;
  border:1px solid var(--panel-edge); padding:2px 8px; border-radius:20px;
}
.dcpcbuilder-root .chapter-head h2{font-size:17px; margin:0; color:var(--text-0);}
.dcpcbuilder-root .chapter-head .desc{color:var(--text-2); font-size:12.5px;}
.dcpcbuilder-root .level-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px;}
.dcpcbuilder-root .level-tile{
  position:relative; aspect-ratio:1; border-radius:var(--radius-m);
  background:var(--panel); border:1px solid var(--panel-edge);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; transition:.15s; color:var(--text-1);
}
.dcpcbuilder-root .level-tile:hover{border-color:var(--accent); transform:translateY(-2px);}
.dcpcbuilder-root .level-tile .n{font-size:20px; font-weight:700; color:var(--text-0); font-family:var(--font-mono);}
.dcpcbuilder-root .level-tile .stars{display:flex; gap:2px;}
.dcpcbuilder-root .level-tile .stars svg{width:10px;height:10px;}
.dcpcbuilder-root .level-tile.locked{opacity:.35; cursor:not-allowed;}
.dcpcbuilder-root .level-tile.locked:hover{transform:none; border-color:var(--panel-edge);}
.dcpcbuilder-root .level-tile.locked .lock{position:absolute; top:6px; right:6px; width:12px; height:12px; opacity:.6;}

/* ===========================================================
   GAME SCREEN
=========================================================== */
.dcpcbuilder-root #screen-game{flex-direction:row;}
.dcpcbuilder-root .game-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.dcpcbuilder-root .level-banner{
  display:flex; align-items:center; gap:16px; padding:12px 22px;
  border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(90deg, rgba(79,209,197,0.10), rgba(20,28,43,.6) 40%);
  border-left:3px solid var(--accent);
}
.dcpcbuilder-root .level-banner .lvl-title{font-weight:700; font-size:13px; color:var(--text-2); white-space:nowrap;}
.dcpcbuilder-root .level-banner .obj-wrap{
  flex:1; min-width:0; display:flex; align-items:baseline; gap:8px;
  cursor:pointer; border-radius:8px; padding:4px 8px; margin:-4px -8px; transition:background .15s;
}
.dcpcbuilder-root .level-banner .obj-wrap:hover{background:rgba(79,209,197,0.08);}
.dcpcbuilder-root .level-banner .obj-tag{
  flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:1px; color:#062026;
  background:var(--accent); padding:2px 8px; border-radius:20px; text-transform:uppercase;
}
.dcpcbuilder-root .level-banner .lvl-obj{color:var(--text-0); font-size:16px; font-weight:600; line-height:1.3;}
.dcpcbuilder-root .mistake-dots{display:flex; gap:4px; flex:0 0 auto;}
.dcpcbuilder-root .mistake-dots span{width:8px;height:8px;border-radius:50%;background:var(--panel-edge);}
.dcpcbuilder-root .mistake-dots span.hit{background:var(--bad);}

/* Big dismissible objective card shown when a level starts (and re-openable
   via the "Goal" pill in the top banner). */
.dcpcbuilder-root .objective-intro{
  position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,14,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:1; transition:opacity .4s ease; cursor:pointer;
}
.dcpcbuilder-root .objective-intro.fade{opacity:0; pointer-events:none;}
.dcpcbuilder-root .objective-intro .card{
  max-width:min(640px,84vw); text-align:center; padding:34px 42px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius-l);
  box-shadow:var(--shadow-panel); transform:translateY(0) scale(1); transition:transform .4s ease;
  cursor:default;
}
.dcpcbuilder-root .objective-intro.fade .card{transform:translateY(-8px) scale(.98);}
.dcpcbuilder-root .objective-intro .eyebrow{
  font-size:12px; font-weight:800; letter-spacing:1.5px; color:var(--accent); text-transform:uppercase; margin-bottom:10px;
}
.dcpcbuilder-root .objective-intro .headline{font-size:26px; font-weight:700; color:var(--text-0); line-height:1.35;}
.dcpcbuilder-root .objective-intro .missions{
  list-style:none; margin:20px 0 0; padding:0; text-align:left; display:flex; flex-direction:column; gap:9px;
}
.dcpcbuilder-root .objective-intro .missions li{
  display:flex; align-items:baseline; gap:10px; font-size:14.5px; color:var(--text-1); line-height:1.4;
}
.dcpcbuilder-root .objective-intro .missions .m-n{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--bg-3); color:var(--accent);
  font-family:var(--font-mono); font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.dcpcbuilder-root .objective-intro .tap-hint{margin-top:22px; font-size:11.5px; color:var(--text-2);}

/* Mission checklist in the side panel for multi-part recognition levels */
.dcpcbuilder-root .mission-panel{display:flex; flex-direction:column; gap:7px;}
.dcpcbuilder-root .mission-panel .m-item{
  display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--text-2); line-height:1.4; transition:.2s;
}
.dcpcbuilder-root .mission-panel .m-item .tick{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--panel-edge);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.dcpcbuilder-root .mission-panel .m-item.done{color:var(--text-1); text-decoration:line-through; text-decoration-color:var(--panel-edge);}
.dcpcbuilder-root .mission-panel .m-item.done .tick{background:var(--good); border-color:var(--good);}
.dcpcbuilder-root .mission-panel .m-item.current{color:var(--text-0); font-weight:600;}
.dcpcbuilder-root .mission-panel .m-item.current .tick{border-color:var(--accent);}

.dcpcbuilder-root .workbench{
  flex:1; position:relative; overflow:auto; padding:26px;
  display:flex; align-items:center; justify-content:center;
}
.dcpcbuilder-root .workbench svg{overflow:visible;}
.dcpcbuilder-root .stage{position:relative;}

.dcpcbuilder-root .tray-dock{
  flex:0 0 auto; display:flex; gap:14px; padding:16px 22px 20px; min-height:148px;
  border-top:1px solid var(--panel-edge); background:rgba(17,24,38,.7);
  overflow-x:auto;
}
.dcpcbuilder-root .tray-item{
  flex:0 0 auto; width:96px; display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:grab; padding:8px; border-radius:var(--radius-m); border:1px solid transparent;
  transition:.15s; -webkit-user-select:none; user-select:none; touch-action:none;
}
.dcpcbuilder-root .tray-item:hover{background:var(--bg-2); border-color:var(--panel-edge);}
.dcpcbuilder-root .tray-item.dragging{opacity:.25;}
.dcpcbuilder-root .tray-item.placed{opacity:.25; pointer-events:none;}
.dcpcbuilder-root .tray-item svg{width:74px; height:60px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));}
.dcpcbuilder-root .tray-item .label{font-size:11px; color:var(--text-1); text-align:center; line-height:1.25;}
.dcpcbuilder-root .tray-item .label small{display:block; color:var(--text-2); font-size:9.5px;}

.dcpcbuilder-root .side-panel{
  width:300px; flex:0 0 auto; border-left:1px solid var(--panel-edge);
  background:var(--panel); display:flex; flex-direction:column; padding:18px; gap:14px; overflow-y:auto;
}
.dcpcbuilder-root .side-panel h3{margin:0 0 4px; font-size:13px; color:var(--text-2); text-transform:uppercase; letter-spacing:.6px;}
.dcpcbuilder-root .info-card{
  background:var(--bg-2); border:1px solid var(--panel-edge); border-radius:var(--radius-m);
  padding:12px; font-size:12.5px; color:var(--text-1); line-height:1.5;
}
.dcpcbuilder-root .specs-card{padding:11px 12px;}
.dcpcbuilder-root .specs-card .spec-row{
  display:flex; justify-content:space-between; gap:10px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.05); font-size:12px;
}
.dcpcbuilder-root .specs-card .spec-row:last-child{border-bottom:none;}
.dcpcbuilder-root .specs-card .spec-row span{color:var(--text-2);}
.dcpcbuilder-root .specs-card .spec-row b{color:var(--text-0); text-align:right; font-weight:600;}

.dcpcbuilder-root .power-meter{height:10px; border-radius:6px; background:var(--bg-3); overflow:hidden; position:relative;}
.dcpcbuilder-root .power-meter .fill{height:100%; border-radius:6px; transition:width .3s ease, background .3s;}
.dcpcbuilder-root .power-meter-labels{display:flex; justify-content:space-between; font-size:11px; color:var(--text-2); margin-top:4px; font-family:var(--font-mono);}

.dcpcbuilder-root .hint-log{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto;}
.dcpcbuilder-root .hint-log .entry{
  font-size:12px; padding:8px 10px; border-radius:var(--radius-s);
  background:var(--bg-2); border-left:3px solid var(--accent-2); color:var(--text-1); line-height:1.45;
}
.dcpcbuilder-root .hint-log .entry.bad{border-left-color:var(--bad);}
.dcpcbuilder-root .hint-log .entry.good{border-left-color:var(--good);}

.dcpcbuilder-root .action-row{display:flex; gap:8px;}

/* ---------- Slots on motherboard / stage ---------- */
.dcpcbuilder-root .slot-hit{fill:transparent; stroke:none; cursor:pointer;}
.dcpcbuilder-root .slot-highlight{
  fill:rgba(79,209,197,0.14); stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4;
  opacity:0; transition:opacity .15s; pointer-events:auto; cursor:default;
}
.dcpcbuilder-root .slot-highlight.show{opacity:1;}
.dcpcbuilder-root .slot-highlight.bad{stroke:var(--bad); fill:rgba(255,93,108,0.12);}
.dcpcbuilder-root .slot-highlight.snap{opacity:1; stroke:var(--good); fill:rgba(79,209,138,0.22); stroke-dasharray:none;}
.dcpcbuilder-root .slot-label-hint{
  position:absolute; pointer-events:none; font-size:11px; color:var(--accent); font-family:var(--font-mono);
  background:rgba(11,15,22,.85); padding:2px 6px; border-radius:4px; border:1px solid var(--accent);
  transform:translate(-50%,-130%); white-space:nowrap; z-index:35;
}

.dcpcbuilder-root .ghost-drag{position:fixed; pointer-events:none; z-index:999; transform:translate(-50%,-50%); filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));}
.dcpcbuilder-root .ghost-drag svg{width:110px;}

/* Non-SVG (HTML) slot highlight, used for the one custom drive-power port */
.dcpcbuilder-root .slot-highlight-box{
  position:absolute; border:2px dashed var(--accent); border-radius:6px;
  background:rgba(79,209,197,0.14); opacity:0; transition:opacity .15s; pointer-events:auto;
}
.dcpcbuilder-root .slot-highlight-box.show{opacity:1;}
.dcpcbuilder-root .slot-highlight-box.bad{border-color:var(--bad); background:rgba(255,93,108,0.12);}
.dcpcbuilder-root .slot-highlight-box.snap{opacity:1; border-color:var(--good); background:rgba(79,209,138,0.22); border-style:solid;}

.dcpcbuilder-root .board-name-label{
  position:absolute; left:50%; top:-22px; transform:translateX(-50%);
  font-size:11px; color:var(--text-2); font-family:var(--font-mono); letter-spacing:1px; white-space:nowrap; pointer-events:none;
}

.dcpcbuilder-root .storage-bay{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.dcpcbuilder-root .storage-bay .bay-label{font-size:10.5px; color:var(--text-2); font-family:var(--font-mono);}
.dcpcbuilder-root .storage-bay svg{width:150px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));}
.dcpcbuilder-root .peripheral-bay{width:120px; text-align:center;}
.dcpcbuilder-root .peripheral-bay .bay-label{white-space:nowrap;}
.dcpcbuilder-root .peripheral-bay svg{width:96px;}

/* An empty drive bay in place mode — a drop target the player drags a SATA
   SSD/HDD into, distinct from the motherboard's own M.2 slot. Always visible
   (unlike .slot-highlight-box) since there's no underlying art to overlay. */
.dcpcbuilder-root .drive-bay-slot{
  position:absolute; width:150px; height:82px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; text-align:center; padding:4px;
  border:2px dashed var(--panel-edge); border-radius:8px; background:rgba(20,28,43,.4);
  font-size:10px; color:var(--text-2); font-family:var(--font-mono); transition:.15s; pointer-events:auto;
}
.dcpcbuilder-root .drive-bay-slot.show{border-color:var(--accent); background:rgba(79,209,197,0.14);}
.dcpcbuilder-root .drive-bay-slot.bad{border-color:var(--bad); background:rgba(255,93,108,0.12);}
.dcpcbuilder-root .drive-bay-slot.snap{border-color:var(--good); background:rgba(79,209,138,0.22); border-style:solid;}

.dcpcbuilder-root .psu-anchor{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 10px; border-radius:var(--radius-m); border:1.5px dashed var(--panel-edge);
  background:rgba(20,28,43,.65); transition:.2s;
}
.dcpcbuilder-root .psu-anchor .bay-label{font-size:10px; color:var(--text-2); font-family:var(--font-mono); letter-spacing:.5px;}
.dcpcbuilder-root .psu-anchor svg{width:56px;}
.dcpcbuilder-root .psu-slot-outline{width:56px; height:48px; border:2px dashed var(--panel-edge); border-radius:6px;}
.dcpcbuilder-root .psu-anchor.chosen{border-style:solid; border-color:var(--accent);}
.dcpcbuilder-root .psu-anchor.show{border-color:var(--accent); background:rgba(79,209,197,0.14);}
.dcpcbuilder-root .psu-anchor.bad{border-color:var(--bad); background:rgba(255,93,108,0.12);}
.dcpcbuilder-root .psu-anchor.snap{border-color:var(--good); background:rgba(79,209,138,0.22); border-style:solid;}

.dcpcbuilder-root .rear-panel{min-width:130px; align-items:stretch;}
.dcpcbuilder-root .rear-port{
  position:relative; font-size:10px; color:var(--text-1); font-family:var(--font-mono);
  background:var(--bg-3); border:1px solid var(--panel-edge); border-radius:5px;
  padding:5px 8px; margin-top:4px;
}

.dcpcbuilder-root .power-btn-widget{
  position:absolute; right:-64px; top:42%; width:48px; height:48px; padding:0;
  border-radius:50%; border:2px solid var(--panel-edge); background:radial-gradient(circle at 35% 30%, #2c3242, #14161c);
  color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.5); transition:.15s;
}
.dcpcbuilder-root .power-btn-widget svg{width:22px; height:22px;}
.dcpcbuilder-root .power-btn-widget:hover{border-color:var(--accent); color:var(--accent); box-shadow:0 0 16px rgba(79,209,197,.35), 0 6px 14px rgba(0,0,0,.5);}
.dcpcbuilder-root .power-btn-widget:active{transform:scale(.92); color:var(--good); border-color:var(--good);}

.dcpcbuilder-root .cable-overlay{position:absolute; inset:0; pointer-events:none; overflow:visible;}

.dcpcbuilder-root .placed-piece{cursor:pointer; transition:filter .15s;}
.dcpcbuilder-root .placed-piece:hover{filter:brightness(1.15);}
.dcpcbuilder-root .placed-piece.preplaced{cursor:default;}
.dcpcbuilder-root .placed-piece.preplaced:hover{filter:none;}
.dcpcbuilder-root .placed-piece.wrong-shake{animation:dcpcbuilder-shake .4s;}
.dcpcbuilder-root .placed-piece.lifting{z-index:30; filter:drop-shadow(0 14px 20px rgba(0,0,0,.6)) brightness(1.2); transition:filter .1s;}
@keyframes dcpcbuilder-shake{
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);} 80%{transform:translateX(4px);}
}
.dcpcbuilder-root .snap-pulse{animation:dcpcbuilder-snapPulse .5s ease;}
@keyframes dcpcbuilder-snapPulse{
  0%{filter:drop-shadow(0 0 0 rgba(79,209,138,0));}
  40%{filter:drop-shadow(0 0 16px rgba(79,209,138,.85));}
  100%{filter:drop-shadow(0 0 0 rgba(79,209,138,0));}
}

.dcpcbuilder-root .score-pop{
  position:absolute; font-family:var(--font-mono); font-weight:700; color:var(--good);
  pointer-events:none; animation:dcpcbuilder-popUp 1s ease forwards; font-size:14px;
}
@keyframes dcpcbuilder-popUp{
  0%{opacity:0; transform:translateY(0);}
  15%{opacity:1;}
  100%{opacity:0; transform:translateY(-40px);}
}

/* ---------- Cable drawing ---------- */
.dcpcbuilder-root .cable-path{fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:.95;}
.dcpcbuilder-root .cable-path.ghost{stroke-dasharray:3 7; opacity:.75; stroke-width:4; animation:dcpcbuilder-cableMarch .6s linear infinite;}
.dcpcbuilder-root .cable-path.ghost.invalid{animation:none; stroke-dasharray:none; transition:opacity .5s ease;}
@keyframes dcpcbuilder-cableMarch{ to{ stroke-dashoffset:-20; } }
.dcpcbuilder-root .cable-hit{fill:none; stroke:transparent; stroke-width:16; stroke-linecap:round;}
.dcpcbuilder-root .cable-group.unpluggable{cursor:pointer;}
.dcpcbuilder-root .cable-group.unpluggable:hover .cable-path{filter:brightness(1.35);}
.dcpcbuilder-root .port-highlight{fill:rgba(255,180,84,.15); stroke:var(--warn); stroke-width:2; stroke-dasharray:4 3; opacity:0; transition:opacity .15s;}
.dcpcbuilder-root .port-highlight.show{opacity:1;}

/* ---------- Modals ---------- */
.dcpcbuilder-root .modal-veil{
  position:absolute; inset:0; background:rgba(6,9,14,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50; opacity:0; pointer-events:none; transition:opacity .2s;
}
.dcpcbuilder-root .modal-veil.show{opacity:1; pointer-events:auto;}
.dcpcbuilder-root .modal-card{
  width:min(460px,90vw); background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius-l);
  padding:28px; box-shadow:var(--shadow-panel); text-align:center; transform:translateY(10px) scale(.97); transition:transform .2s;
}
.dcpcbuilder-root .modal-veil.show .modal-card{transform:none;}
.dcpcbuilder-root .modal-card h2{margin:0 0 6px;}
.dcpcbuilder-root .modal-card .stars-big{display:flex; justify-content:center; gap:8px; margin:18px 0;}
.dcpcbuilder-root .modal-card .stars-big svg{width:40px; height:40px;}
.dcpcbuilder-root .modal-stats{display:flex; justify-content:center; gap:22px; margin:14px 0 20px; font-size:12.5px; color:var(--text-2);}
.dcpcbuilder-root .modal-stats b{display:block; color:var(--text-0); font-size:17px; font-family:var(--font-mono);}
.dcpcbuilder-root .modal-actions{display:flex; gap:10px; justify-content:center;}

/* ---------- Explanation toast (wrong placement) ---------- */
.dcpcbuilder-root .explain-toast{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%) translateY(10px);
  background:var(--bg-2); border:1px solid var(--bad); color:var(--text-0);
  padding:10px 16px; border-radius:var(--radius-m); font-size:13px; max-width:420px; text-align:center;
  opacity:0; transition:.2s; pointer-events:none; z-index:30; box-shadow:var(--shadow-piece);
}
.dcpcbuilder-root .explain-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Cheat-code confirmation (dev/QA aid, not a game feature) ---------- */
.dcpcbuilder-root .cheat-toast{
  position:fixed; left:50%; top:22px; transform:translateX(-50%) translateY(-10px);
  background:var(--panel); border:1px solid var(--accent); color:var(--text-0);
  padding:10px 18px; border-radius:var(--radius-m); font-size:13px; font-weight:600;
  opacity:0; transition:.25s; pointer-events:none; z-index:999; box-shadow:var(--shadow-piece);
}
.dcpcbuilder-root .cheat-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Boot sequence ---------- */
.dcpcbuilder-root .boot-overlay{position:absolute; inset:0; background:#000; z-index:60; display:none; align-items:center; justify-content:center; flex-direction:column;}
.dcpcbuilder-root .boot-overlay.show{display:flex;}
.dcpcbuilder-root .boot-screen{
  width:min(640px,85vw); aspect-ratio:16/10; background:#000; border:10px solid #111; border-radius:8px;
  box-shadow:0 0 0 2px #333, 0 30px 70px rgba(0,0,0,.7);
  font-family:var(--font-mono); color:#8fffb0; padding:22px; overflow:hidden; position:relative;
}
.dcpcbuilder-root .boot-screen.off{background:#000;}
.dcpcbuilder-root .boot-screen .post-lines{font-size:12.5px; line-height:1.7; white-space:pre-wrap;}
.dcpcbuilder-root .boot-glow{position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(143,255,176,.06), transparent 70%); pointer-events:none;}
.dcpcbuilder-root .boot-fail{color:var(--bad) !important;}
.dcpcbuilder-root .boot-status-row{display:flex; gap:14px; margin-top:26px; justify-content:center;}
.dcpcbuilder-root .boot-status-row .step{
  display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10.5px; color:var(--text-2); width:70px; text-align:center;
}
.dcpcbuilder-root .boot-status-row .dot{width:14px;height:14px;border-radius:50%; background:var(--panel-edge); transition:.25s;}
.dcpcbuilder-root .boot-status-row .step.active .dot{background:var(--accent); box-shadow:0 0 10px var(--accent);}
.dcpcbuilder-root .boot-status-row .step.fail .dot{background:var(--bad); box-shadow:0 0 10px var(--bad);}

/* ---------- Hint button badge ---------- */
.dcpcbuilder-root .hint-btns{display:flex; gap:8px;}
.dcpcbuilder-root .hint-btns .btn{flex:1; position:relative;}
.dcpcbuilder-root .hint-btns .btn .cost{position:absolute; top:-7px; right:-7px; background:var(--warn); color:#241a00; font-size:10px; border-radius:10px; padding:1px 6px; font-weight:700;}

/* ---------- Requirement checklist (spec / budget levels) ---------- */
.dcpcbuilder-root .req-list{display:flex; flex-direction:column; gap:6px; font-size:12.5px;}
.dcpcbuilder-root .req-list .req{display:flex; align-items:center; gap:8px; color:var(--text-1);}
.dcpcbuilder-root .req-list .req .tick{width:14px;height:14px; border-radius:4px; border:1px solid var(--panel-edge); flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.dcpcbuilder-root .req-list .req.met .tick{background:var(--good); border-color:var(--good);}
.dcpcbuilder-root .req-list .req.met{color:var(--text-0);}
.dcpcbuilder-root .budget-bar{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:13px;}
.dcpcbuilder-root .budget-bar .over{color:var(--bad);}

/* ---------- Chapter 10: PC setup hero scene + OS desktop simulation ---------- */
.dcpcbuilder-root .art-pc-scene{width:min(680px, 62vw); filter:drop-shadow(0 10px 22px rgba(0,0,0,.4));}
.dcpcbuilder-root .pc-scene-hit{cursor:pointer;}
.dcpcbuilder-root .pc-scene-hit:hover{stroke:var(--accent);}
.dcpcbuilder-root .pc-scene-wrap{position:relative; display:inline-block;}
.dcpcbuilder-root .pc-scene-wrap:hover .pc-scene-hint{opacity:1;}
.dcpcbuilder-root .pc-scene-hint{
  position:absolute; left:14%; top:15%; transform:translateX(-50%);
  background:var(--bg-2); border:1px solid var(--accent); color:var(--text-0);
  padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:600;
  opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap;
}

.dcpcbuilder-root .os-desktop{
  position:relative; width:min(760px, 66vw); aspect-ratio:16/10;
  background:linear-gradient(160deg, #1c3f66, #0d1f36 70%);
  border-radius:10px; border:3px solid #05060a; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 10px 26px rgba(0,0,0,.45);
  font-family:var(--font-ui); -webkit-user-select:none; user-select:none;
}
.dcpcbuilder-root .os-icons{
  flex:1; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  gap:4px; padding:16px; align-items:flex-start;
}
.dcpcbuilder-root .os-icon{
  width:78px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; border-radius:var(--radius-s); cursor:pointer; border:1px solid transparent;
}
.dcpcbuilder-root .os-icon:hover, .dcpcbuilder-root .os-icon:focus-visible{background:rgba(255,255,255,.12); outline:none;}
.dcpcbuilder-root .os-icon-art svg{width:40px; height:40px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
.dcpcbuilder-root .os-icon-label{font-size:11px; color:#eaf0ff; text-align:center; line-height:1.25; text-shadow:0 1px 2px rgba(0,0,0,.6);}

.dcpcbuilder-root .os-taskbar{
  flex:0 0 auto; height:38px; background:#0b0f16; border-top:1px solid #05060a;
  display:flex; align-items:center; gap:10px; padding:0 12px; color:var(--text-1); font-size:12px;
}
.dcpcbuilder-root .os-taskbar-start{font-weight:700; color:var(--text-0); font-size:12.5px; letter-spacing:.4px;}
.dcpcbuilder-root .os-taskbar-apps{flex:1; display:flex; gap:8px;}
.dcpcbuilder-root .os-taskbar-apps .os-taskbar-app{width:22px; height:22px; opacity:.85;}
.dcpcbuilder-root .os-taskbar-apps .os-taskbar-app svg{width:100%; height:100%;}
.dcpcbuilder-root .os-clock{font-family:var(--font-mono); color:var(--text-1);}

.dcpcbuilder-root .os-window{
  position:absolute; left:8%; top:5%; width:84%; height:85%;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius-m);
  box-shadow:0 14px 30px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow:hidden;
  animation:dcpcbuilder-os-win-in .16s ease-out;
}
.dcpcbuilder-root .os-window[hidden]{display:none;}
@keyframes dcpcbuilder-os-win-in{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
.dcpcbuilder-root .os-window-titlebar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-2); border-bottom:1px solid var(--panel-edge);
}
.dcpcbuilder-root .os-window-icon svg{width:18px; height:18px;}
.dcpcbuilder-root .os-window-title{flex:1; font-size:12.5px; font-weight:600; color:var(--text-0);}
.dcpcbuilder-root .os-window-close{
  width:22px; height:22px; border-radius:5px; border:1px solid var(--panel-edge); background:var(--bg-3);
  color:var(--text-1); cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.dcpcbuilder-root .os-window-close:hover{background:var(--bad); border-color:var(--bad); color:#fff;}
.dcpcbuilder-root .os-window-body{flex:1; overflow-y:auto; padding:16px; font-size:13px; color:var(--text-1); line-height:1.55;}
.dcpcbuilder-root .os-window-body h4{margin:0 0 8px; color:var(--text-0); font-size:14px;}
.dcpcbuilder-root .os-window-body .btn{margin-top:10px;}

.dcpcbuilder-root .os-toast{
  position:absolute; right:14px; top:14px; max-width:250px; z-index:20;
  background:var(--bg-2); border:1px solid var(--accent-2); color:var(--text-0);
  padding:10px 14px; border-radius:var(--radius-m); font-size:12px; line-height:1.4;
  box-shadow:0 8px 18px rgba(0,0,0,.4); opacity:0; transform:translateY(-6px); transition:.2s;
}
.dcpcbuilder-root .os-toast.show{opacity:1; transform:none;}
.dcpcbuilder-root .os-toast.bad{border-color:var(--bad);}
.dcpcbuilder-root .os-toast.good{border-color:var(--good);}
.dcpcbuilder-root .os-toast.warn{border-color:var(--warn); animation:dcpcbuilder-os-toast-pulse 1.4s infinite;}
@keyframes dcpcbuilder-os-toast-pulse{0%,100%{box-shadow:0 8px 18px rgba(0,0,0,.4);} 50%{box-shadow:0 8px 18px rgba(255,180,84,.55);}}

/* Explorer window: file/folder grid + drag */
.dcpcbuilder-root .os-file-grid{display:flex; flex-wrap:wrap; gap:14px; align-content:flex-start; min-height:120px;}
.dcpcbuilder-root .os-file{
  width:74px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; border-radius:var(--radius-s); cursor:grab; border:1px solid transparent; touch-action:none;
}
.dcpcbuilder-root .os-file:hover{background:var(--bg-3); border-color:var(--panel-edge);}
.dcpcbuilder-root .os-file.dragging{opacity:.35;}
.dcpcbuilder-root .os-file svg{width:36px; height:36px;}
.dcpcbuilder-root .os-file .os-file-label{font-size:10.5px; color:var(--text-1); text-align:center; line-height:1.2; word-break:break-word;}
.dcpcbuilder-root .os-file.os-folder.drop-hover{background:rgba(79,209,197,.18); border-color:var(--accent);}
.dcpcbuilder-root .os-folder-name-input{
  width:66px; font-size:10.5px; text-align:center; background:var(--bg-1); color:var(--text-0);
  border:1px solid var(--accent); border-radius:4px; padding:2px 3px;
}
.dcpcbuilder-root .os-file-count{font-size:9.5px; color:var(--accent); font-weight:700;}

/* Browser app: fake inbox / message list */
.dcpcbuilder-root .os-mail-list{display:flex; flex-direction:column; gap:6px;}
.dcpcbuilder-root .os-mail-row{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-s);
  background:var(--bg-2); border:1px solid var(--panel-edge); cursor:pointer; transition:.12s;
}
.dcpcbuilder-root .os-mail-row:hover{border-color:var(--accent-2); transform:translateX(2px);}
.dcpcbuilder-root .os-mail-row .from{font-size:11.5px; color:var(--text-2); font-family:var(--font-mono);}
.dcpcbuilder-root .os-mail-row .subject{font-size:13px; color:var(--text-0); font-weight:600;}

/* Security app: scan / threat list */
.dcpcbuilder-root .os-scan-progress{
  height:10px; border-radius:6px; background:var(--bg-3); overflow:hidden; margin:14px 0;
}
.dcpcbuilder-root .os-scan-progress .bar{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .1s linear;}
.dcpcbuilder-root .os-threat-list{display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.dcpcbuilder-root .os-threat-row{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-s);
  background:var(--bg-2); border-left:3px solid var(--bad); font-family:var(--font-mono); font-size:12px; color:var(--text-0);
}

/* ===========================================================
   REAR PANEL ENGINE (Chapter 6 replacement) — engine/rearPanelEngine.js
   Re-themed from the retired com_dc360pcsetup's bright palette into this
   game's dark workshop theme; mounts inside the same .stage/.tray-dock
   elements every other level mode uses, so it inherits .workbench's
   centering and .tray-dock's horizontal-scroll tray row for free.
=========================================================== */
.dcpcbuilder-root .rp-panel-wrap{
  /* inline-block, not width:100% — .stage has no definite width of its
     own (it's a shrink-to-fit flex item of .workbench), so this sizes to
     its content instead: the SVG's own explicit pixel width, set in
     rearPanelEngine.js right before this wrap is populated. */
  display:inline-block;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--panel-edge); border-radius:var(--radius-l);
  padding:14px; box-shadow:var(--shadow-panel);
}
.dcpcbuilder-root .rp-panel-svg{display:block; height:auto; touch-action:none;}

.dcpcbuilder-root .rp-port{cursor:default;}
.dcpcbuilder-root .rp-port-hitarea{fill:transparent; pointer-events:all;}

/* A big ring behind the socket, not just a glow on the socket itself — the
   dragged chip is often as big as or bigger than the socket it's over, so a
   highlight confined to the socket's own outline can be completely hidden
   under it. assistMode:'test' never adds is-hover-valid/invalid at all (see
   rearPanelEngine.js's updatePortHover mode check), so this ring simply
   never lights up on the final test level. */
.dcpcbuilder-root .rp-port-hover-ring{
  fill:none; stroke:transparent; stroke-width:7; opacity:0; transition:opacity .1s ease;
}
.dcpcbuilder-root .rp-port.is-hover-valid .rp-port-hover-ring{stroke:var(--good); opacity:1;}
.dcpcbuilder-root .rp-port.is-hover-invalid .rp-port-hover-ring{stroke:var(--bad); opacity:1;}

.dcpcbuilder-root .rp-port-shape{transition:filter .15s ease;}
.dcpcbuilder-root .rp-port.is-hover-valid .rp-port-shape{filter:drop-shadow(0 0 6px rgba(79,209,138,.95));}
.dcpcbuilder-root .rp-port.is-hover-invalid .rp-port-shape{filter:drop-shadow(0 0 6px rgba(255,93,108,.9));}
.dcpcbuilder-root .rp-port.is-filled .rp-port-shape{filter:drop-shadow(0 0 5px rgba(79,209,138,.85));}
/* assistMode:'test' only — a plugged-in socket that deliberately doesn't
   say whether it's right or wrong (correctness isn't revealed until
   Finish). Muted grey-blue, not green. */
.dcpcbuilder-root .rp-port.is-occupied .rp-port-shape{filter:drop-shadow(0 0 4px rgba(118,134,168,.85));}

.dcpcbuilder-root .rp-port-check{opacity:0; color:var(--good); transition:opacity .15s ease;}
.dcpcbuilder-root .rp-port.is-filled .rp-port-check{opacity:1;}
.dcpcbuilder-root .rp-port.is-occupied .rp-port-check{opacity:1; color:var(--text-2);}

.dcpcbuilder-root .rp-tray{display:flex; gap:14px;}
.dcpcbuilder-root .rp-chip{
  flex:0 0 auto; width:96px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 6px; border-radius:var(--radius-m); background:var(--bg-2); border:1.5px solid var(--panel-edge);
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; transition:transform .12s ease, border-color .12s ease, opacity .2s ease;
}
.dcpcbuilder-root .rp-chip:hover{border-color:var(--accent); transform:translateY(-2px);}
.dcpcbuilder-root .rp-chip.is-dragging{
  position:fixed; z-index:400; cursor:grabbing; pointer-events:none;
  /* Semi-transparent while dragging — otherwise the chip itself (often as
     big as or bigger than a socket) sits right on top of the very socket
     highlight it needs to reveal. */
  opacity:.6; box-shadow:0 10px 22px rgba(0,0,0,.5); border-color:var(--accent);
}
.dcpcbuilder-root .rp-chip.is-shake{animation:dcpcbuilder-shake .4s ease; border-color:var(--bad);}
.dcpcbuilder-root .rp-chip.is-placed{display:none;}
.dcpcbuilder-root .rp-chip-icon{width:64px; height:54px; pointer-events:none;}
.dcpcbuilder-root .rp-chip-icon svg{width:100%; height:100%; overflow:visible;}
.dcpcbuilder-root .rp-chip-label{font-size:11px; font-weight:600; color:var(--text-0); text-align:center; line-height:1.2; pointer-events:none;}
.dcpcbuilder-root .rp-chip-conn{font-size:9.5px; color:var(--text-2); text-align:center; line-height:1.1; pointer-events:none;}

.dcpcbuilder-root .rp-finish-row{flex:0 0 auto; display:flex; align-items:center; padding:0 4px;}

/* responsive-ish */
@media (max-width:980px){
  .dcpcbuilder-root .side-panel{width:240px;}
  .dcpcbuilder-root .tray-item{width:80px;}
}

/* Portrait / narrow-viewport layout — a fixed-width sidebar sitting beside
   the workbench works fine on a landscape desktop screen, but on a tall,
   narrow one (a tablet held upright, a phone) it leaves almost no width for
   the board itself, forcing fitStageToViewport to shrink everything down to
   near-illegible. Moving the side panel below the workbench instead gives
   the board the FULL viewport width to scale into — fitStageToViewport
   already measures the workbench's real rendered box at runtime, so this
   reflow alone is enough; nothing in JS needs to know which layout it's in.
*/
@media (max-width:820px), (orientation:portrait){
  .dcpcbuilder-root #screen-game{flex-direction:column;}
  .dcpcbuilder-root .game-main{flex:1 1 auto; min-height:0; min-width:auto;}
  .dcpcbuilder-root .side-panel{
    width:auto; flex:0 0 auto; max-height:34vh;
    border-left:none; border-top:1px solid var(--panel-edge);
  }
  .dcpcbuilder-root .workbench{padding:14px;}
  .dcpcbuilder-root .tray-dock{padding:10px 14px 12px; min-height:120px;}
  .dcpcbuilder-root .tray-item{width:78px;}
}
@media (max-width:520px){
  .dcpcbuilder-root .level-banner{flex-wrap:wrap; gap:8px 16px; padding:10px 14px;}
  .dcpcbuilder-root .side-panel{max-height:40vh; padding:14px;}
}