/* v3/chassis.css — Device frames.
   Each chassis is .stage with:
   - --stage-ar, --stage-w : bezel silhouette size
   - --screen-cx, --screen-cy, --screen-w, --screen-mh, --screen-radius : screen cutout
   - bezel art via ::before/::after pseudo-elements
   - .controls children positioned in chassis-specific spots inside the stage
*/

.pc-deck, .nes-pad, .nes-cable { display:none; }

/* ===========================================================
   ANALOG STICKS — shared base; chassis overrides position/size
   =========================================================== */
.stick {
  position:absolute; width:14%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 35% 28%, #4a5070 0%, #1c2030 60%, #0b0f1d 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06),
              inset 0 -6px 12px rgba(0,0,0,.5),
              0 6px 14px rgba(0,0,0,.55);
  display:none; touch-action:none; user-select:none; pointer-events:auto;
  z-index:5;
}
.stick .ring {
  position:absolute; inset:8%; border-radius:50%;
  border:1px dashed rgba(255,255,255,.08); pointer-events:none;
}
.stick .nub {
  position:absolute; left:50%; top:50%; width:48%; aspect-ratio:1;
  margin-left:-24%; margin-top:-24%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 28%, #c9d3ea 0%, #6c7794 55%, #2a3046 100%);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.6);
  transition: transform .08s ease-out;
  pointer-events:none;
}
.stick.active { box-shadow: inset 0 0 0 2px rgba(245,179,1,.4), inset 0 -6px 12px rgba(0,0,0,.5), 0 0 14px rgba(245,179,1,.35); }

/* Deck: dual sticks at top of grips */
.page.device-deck .controls .stick { display:block; width:11%; }
.page.device-deck .controls .stickL { left: 18%; top: 18%; }
.page.device-deck .controls .stickR { right: 18%; top: 18%; }

/* Phone overlay: small stick replaces dpad when 'mode-stick' set */
.page.device-phone .controls.mode-stick .dpad { display:none; }
.page.device-phone .controls.mode-stick .stickL { display:block; left:4%; bottom:12%; width:30%; }

/* CRT/SNES: sticks hidden (SNES dpad only) */
.page.device-crt .controls .stick { display:none; }

/* ===========================================================
   BARE — just the 16:10 screen
   =========================================================== */
.page.device-bare .stage {
  --stage-ar: 16/10;
  --stage-w: min(96vw, 92vh * 16/10);
  --screen-cx:50%; --screen-cy:50%;
  --screen-w:100%; --screen-mh:100%;
  --screen-radius:0;
  background:#000 !important;
  border:0 !important; border-radius:0; box-shadow:none;
}
.page.device-bare .controls { display:none; }

/* ===========================================================
   PC — Monitor face. Keyboard sits outside .stage in .pc-deck.
   =========================================================== */
.page.device-pc .stage {
  --stage-ar: 16/10;
  --stage-w: min(94vw, 64vh * 16/10);
  --screen-cx:50%; --screen-cy:46%;
  --screen-w: 88%; --screen-mh: 80%;
  --screen-radius: 4px;
  padding:0;
  background: linear-gradient(180deg,#23262e 0%,#15171c 100%) !important;
  border:0 !important; border-radius:14px;
  box-shadow:
    0 0 0 6px #0c0d11, inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 -3px 0 rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.65);
}
.page.device-pc .stage::after {
  content:'KULL'; position:absolute; left:0; right:0; bottom:3%; text-align:center;
  font-size:11px; letter-spacing:.4em; color:#4a4e5c; font-weight:800; pointer-events:none;
}
.page.device-pc .controls { display:none; }

/* PC keyboard panel — fixed height, below stage */
.page.device-pc .pc-deck {
  display:flex; flex:0 0 auto; gap:10px;
  width: min(98vw, 1100px); height: min(22vh, 200px);
  padding: 8px 10px;
  background: linear-gradient(180deg,#1a1f2e 0%, #0e1220 100%);
  border:1px solid #2a3055; border-radius:10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  align-items:stretch;
}
@media (max-width: 800px) {
  .page.device-pc .pc-deck { height: 16vh; padding:5px 6px; gap:5px; }
}
.pc-kbd { flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.kb-row { display:flex; gap:3px; flex:1 1 auto; min-height:0; align-items:stretch; }
.kb-row.kb-f { flex:0 0 16px; }
.kb-gap { flex:0 0 8%; }
.kb-gap-sm { flex:0 0 2%; }
.kb-stack { display:flex; flex-direction:column; gap:3px; flex:1 1 0; min-width:0; }
.kb-stack .pk { flex:1 1 0; }
.pk {
  flex:1 1 0; min-width:0;
  background: linear-gradient(180deg,#2b3358 0%, #161c36 100%);
  color:#cfd9ff; border:1px solid #3a4470; border-top-color:#4a5590;
  border-radius:4px;
  font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing:.02em; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  text-transform: lowercase;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .04s, background .08s;
  user-select:none;
}
.pk:hover { border-color:#5a6aa0; color:#fff; }
.pk.held, .pk:active {
  background: linear-gradient(180deg,#f5b301 0%, #c99700 100%);
  color:#1a1206; border-color:#f5b301;
  transform: translateY(1px);
  box-shadow: 0 0 0 1px #f5b301, 0 0 12px rgba(245,179,1,.4);
}
.pk.w125 { flex:1.25 1 0; }
.pk.w15  { flex:1.50 1 0; }
.pk.w175 { flex:1.75 1 0; }
.pk.w2   { flex:2.00 1 0; }
.pk.w225 { flex:2.25 1 0; }
.pk.w275 { flex:2.75 1 0; }
.pk.space { flex:7 1 0; }
.pk.arrow { font-size:9px; }

/* Mouse / trackpad column */
.pc-mouse {
  flex:0 0 130px; display:flex; flex-direction:column; gap:4px;
  background: linear-gradient(180deg,#0a0f1e, #060914);
  border:1px solid #1e2547; border-radius:8px; padding:6px;
}
.mouse-top { display:grid; grid-template-columns: 1fr 16px 1fr; gap:3px; height:22px; }
.mb-btn {
  background: linear-gradient(180deg,#2b3358, #161c36);
  color:#cfd9ff; border:1px solid #3a4470; border-radius:3px;
  font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:inherit;
}
.mb-btn:hover { border-color:#f5b301; color:#f5b301; }
.mb-btn:active { background: linear-gradient(180deg,#f5b301, #c99700); color:#1a1206; }
.mb-wheel {
  background: repeating-linear-gradient(0deg,#3a3a3a 0 2px,#1a1a1a 2px 4px);
  border:1px solid #444; border-radius:3px;
}
.trackpad {
  flex:1 1 auto; background:#04060f;
  border:1px solid #1a2240; border-radius:4px;
  position:relative; cursor:crosshair; overflow:hidden;
  box-shadow: inset 0 0 14px rgba(0,0,0,.6);
}
.tp-dot {
  position:absolute; left:50%; top:50%; width:4px; height:4px;
  background:#f5b301; border-radius:50%; transform:translate(-50%,-50%);
  box-shadow: 0 0 6px #f5b301; pointer-events:none;
  transition: left .05s linear, top .05s linear;
}
.tp-label {
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  font: 700 7px/1 ui-monospace, monospace; color:#1a2240;
  letter-spacing:.2em; pointer-events:none;
}
@media (max-width:700px){ .pc-mouse { display:none; } }

/* ===========================================================
   DECK — handheld, scene with side gutters for controls
   =========================================================== */
.page.device-deck .stage {
  --stage-ar: 16/10;
  --stage-w: min(96vw, 70vh * 16/10);
  --screen-cx:50%; --screen-cy:50%;
  --screen-w: 60%; --screen-mh: 80%;
  --screen-radius: 6px;
  background: linear-gradient(180deg,#3e4250 0%, #2a2e3a 100%) !important;
  border:0 !important; border-radius:14% / 22%;
  box-shadow: 0 0 0 4px #1a1d26, inset 0 2px 0 rgba(255,255,255,.1),
    inset 0 -3px 0 rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.6);
}
.page.device-deck .stage::before {
  content:''; position:absolute; left:21%; right:21%; top:10%; bottom:10%;
  background:#06080d; border-radius:2%;
  box-shadow: inset 0 0 0 2px #14171f, inset 0 4px 12px rgba(0,0,0,.7);
  pointer-events:none;
}
/* Deck dpad — left bezel gutter */
.page.device-deck .controls .dpad {
  position:absolute; left: 4%; top:50%; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  width: 13%; aspect-ratio:1; gap:3%;
}
.page.device-deck .controls .dpad .k {
  background:#1c2028; border:2px solid #3a3f4d; border-radius:18%;
  display:grid; place-items:center; color:#c9d3ea; font-size:120%; font-weight:700;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.6);
}
/* Deck face — right bezel gutter */
.page.device-deck .controls .face {
  position:absolute; right:4%; top:50%; transform:translateY(-50%);
  width:14%; aspect-ratio:1;
}
.page.device-deck .controls .face .fb {
  position:absolute; width:38%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; font-weight:900; color:#0b1020;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.4);
}
.page.device-deck .controls .face .Y { top:0;  left:50%; transform:translateX(-50%); background:#eab308; }
.page.device-deck .controls .face .X { top:50%; left:0;  transform:translateY(-50%); background:#38bdf8; }
.page.device-deck .controls .face .B { top:50%; right:0; transform:translateY(-50%); background:#ef4444; color:#fff; }
.page.device-deck .controls .face .A { bottom:0; left:50%; transform:translateX(-50%); background:#22c55e; }
.page.device-deck .controls .sys {
  position:absolute; left:50%; bottom:3%; transform:translateX(-50%);
  display:flex; gap:14px;
}
.page.device-deck .controls .sys .s {
  padding:3px 10px; background:#1c2028; border:1px solid #3a3f4d;
  border-radius:14px; color:#f5b301; font-size:10px; letter-spacing:.16em; font-weight:800;
}

/* ===========================================================
   GB — vertical handheld. Screen top, controls bottom.
   =========================================================== */
.page.device-gb .stage {
  --stage-ar: 10/16;
  --stage-w: min(92vw, 92vh * 10/16);
  --screen-cx:50%; --screen-cy:27%;
  --screen-w: 78%; --screen-mh: 33%;
  --screen-radius: 0;
  background:#c4bba7 !important; border-radius:4% 4% 12% 4%;
  border:0 !important;
  box-shadow: 0 0 0 3px #8a8170, inset 0 3px 0 rgba(255,255,255,.3),
    inset 0 -3px 0 rgba(0,0,0,.2), 0 24px 50px rgba(0,0,0,.6);
}
.page.device-gb .stage::before {
  content:''; position:absolute; left:6%; right:6%; top:10%; bottom:50%;
  background:#2d2d2d; border-radius: 4% 4% 18% 4%;
  box-shadow: inset 0 4px 10px rgba(0,0,0,.6);
  pointer-events:none;
}
.page.device-gb .stage::after {
  content:'KULL-BOY'; position:absolute; top:4%; left:50%; transform:translateX(-50%);
  color:#3d3d3d; font-weight:900; font-size:14px; letter-spacing:.15em;
  font-family: ui-serif, Georgia, serif; font-style:italic;
}
.page.device-gb .controls .dpad {
  position:absolute; left:8%; top:60%;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  width:32%; aspect-ratio:1;
  background:#1a1a1a; padding:5%; border-radius:8%;
}
.page.device-gb .controls .dpad .k {
  background:#1a1a1a; color:#888; display:grid; place-items:center;
  font-size:140%; font-weight:700;
}
.page.device-gb .controls .face {
  position:absolute; right:8%; top:62%;
  width:32%; aspect-ratio:1;
}
.page.device-gb .controls .face .fb {
  position:absolute; width:40%; aspect-ratio:1; border-radius:50%;
  color:#fff; display:grid; place-items:center; font-size:14px; font-weight:900;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.4);
}
.page.device-gb .controls .face .Y { top:0;  left:50%; transform:translateX(-50%); background:#eab308; color:#0b1020; }
.page.device-gb .controls .face .X { top:50%; left:0;  transform:translateY(-50%); background:#38bdf8; color:#0b1020; }
.page.device-gb .controls .face .B { top:50%; right:0; transform:translateY(-50%); background:#ef4444; }
.page.device-gb .controls .face .A { bottom:0; left:50%; transform:translateX(-50%); background:#22c55e; color:#0b1020; }
.page.device-gb .controls .sys {
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  display:flex; gap:14px;
}
.page.device-gb .controls .sys .s {
  padding:5px 14px; background:#5c5c5c; color:#f5b301; border-radius:12px;
  font-size:10px; font-weight:800; letter-spacing:.14em; border:0;
}

/* ===========================================================
   CRT — beige tube, NES pad in bottom strip
   =========================================================== */
.page.device-crt .stage {
  --stage-ar: 4/5;
  --stage-w: min(72vh * 4/5, 92vw);
  --screen-cx:50%; --screen-cy:38%;
  --screen-w: 82%; --screen-mh: 50%;
  --screen-radius: 16px;
  background:#c0b89a !important; border:0 !important; border-radius:4%;
  box-shadow: 0 0 0 4px #6b6650, inset 0 3px 0 rgba(255,255,255,.25),
    inset 0 -4px 0 rgba(0,0,0,.25), 0 24px 50px rgba(0,0,0,.6);
}
.page.device-crt .stage::before {
  content:''; position:absolute; left:6%; right:6%; top:6%; bottom:30%;
  background: radial-gradient(ellipse at center, #1a1f2e 0%, #0b0f1d 70%, #050810 100%);
  border-radius: 24px / 18px;
  box-shadow: inset 0 0 0 6px #2a2520, inset 0 0 0 9px #6b6650,
    inset 0 0 50px rgba(0,0,0,.85);
  pointer-events:none;
}
.page.device-crt .stage::after {
  content:'KULLOTRON   ◉ POWER'; position:absolute; left:0; right:0; top:72%;
  text-align:center; font-size:10px; letter-spacing:.25em; color:#4a4530;
  font-weight:800; pointer-events:none;
}
.page.device-crt .controls {
  position:absolute; left:5%; right:5%; bottom:4%; top:auto; height:22%;
  background:
    radial-gradient(ellipse 70% 80% at 50% 55%, #b6b8bd 0%, #b6b8bd 38%, transparent 41%),
    linear-gradient(180deg,#e6e3da 0%,#d3cfc3 100%);
  border-radius: 50px / 80%;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.18),
    0 4px 0 #8a8579, 0 12px 24px rgba(0,0,0,.4);
}
.page.device-crt .controls::before {
  content:'KULL · 16'; position:absolute; left:50%; top:8%; transform:translateX(-50%);
  font-size:9px; letter-spacing:.35em; color:#6a6555; font-weight:900;
}
.page.device-crt .controls .dpad {
  position:absolute; left:6%; top:50%; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(3,3.5vmin); grid-template-rows:repeat(3,3.5vmin);
}
.page.device-crt .controls .dpad .k {
  background:#4a4538; color:#d3cfc3; display:grid; place-items:center;
  font-size:10px; font-weight:800;
}
.page.device-crt .controls .face {
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:14vmin; height:14vmin;
}
.page.device-crt .controls .face .fb {
  position:absolute; width:4vmin; height:4vmin; border-radius:50%;
  display:grid; place-items:center; font-size:10px; font-weight:900; color:#fff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.4), 0 0 0 2px #4a4538;
}
.page.device-crt .controls .face .X { top:0;     left:50%; transform:translateX(-50%); background:#6c5ce7; }
.page.device-crt .controls .face .B { bottom:0;  left:50%; transform:translateX(-50%); background:#b89c2a; }
.page.device-crt .controls .face .Y { top:50%; left:0;     transform:translateY(-50%); background:#2a8f4a; }
.page.device-crt .controls .face .A { top:50%; right:0;    transform:translateY(-50%); background:#b8242c; }
.page.device-crt .controls .sys {
  position:absolute; left:50%; top:62%; transform:translate(-50%,-50%);
  display:flex; gap:10px;
}
.page.device-crt .controls .sys .s {
  padding:3px 12px; background:linear-gradient(180deg,#6a6555,#4a4538);
  color:#d3cfc3; border-radius:14px; font-size:8px; font-weight:800; letter-spacing:.2em;
  border:0;
}

/* CRT — external SNES gamepad below TV (reparented from #controls) */
.page.device-crt .nes-cable {
  display:block; position:absolute; left:50%; bottom:170px;
  transform:translateX(-50%); width:220px; height:70px; pointer-events:none; z-index:5;
}
.page.device-crt .nes-cable::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90px 18px at 50% 100%, rgba(0,0,0,.4), transparent 70%);
}
.page.device-crt .nes-pad {
  display:block; position:fixed; left:50%; bottom:24px;
  transform:translateX(-50%); width:min(560px,92vw); height:180px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, #b6b8bd 0%, #b6b8bd 38%, transparent 41%),
    linear-gradient(180deg,#e6e3da 0%,#d3cfc3 100%);
  border-radius: 90px / 80px;
  box-shadow: 0 0 0 2px #4a4538, inset 0 3px 0 rgba(255,255,255,.55),
              0 24px 50px rgba(0,0,0,.55);
  z-index: 6;
}
.page.device-crt .nes-pad .nes-brand {
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-size:9px; letter-spacing:.35em; color:#6a6555; font-weight:900; z-index:8;
}
.page.device-crt .nes-pad-mount {
  position:absolute; inset:30px 6% 18px 6%;
}
.page.device-crt .nes-pad #controls,
.page.device-crt .nes-pad .controls {
  position:absolute !important; inset:0 !important; height:auto !important;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
.page.device-crt .nes-pad .controls::before { content:none; }

/* ===========================================================
   PHONE — vertical 9:16. Scene upper half, on-screen controls lower half.
   All control sizes are stage-relative (% of .stage), NOT vmin,
   so they scale with the phone bezel — not the browser viewport.
   =========================================================== */
.page.device-phone .stage {
  --stage-ar: 9/16;
  --stage-w: min(50vh * 9/16, 92vw);
  --screen-cx:50%; --screen-cy:28%;
  --screen-w: 88%; --screen-mh: 36%;
  --screen-radius: 4%;
  background:#0a0a0a !important; border:0 !important; border-radius: 8%;
  box-shadow:
    0 0 0 3px #2a2a2a,
    inset 0 0 0 2px #000,
    inset 0 0 0 8px #161616,
    0 24px 50px rgba(0,0,0,.7);
}
/* Speaker grill at top */
.page.device-phone .stage::before {
  content:''; position:absolute; left:50%; top:2.5%; transform:translateX(-50%);
  width:18%; height:0.8%; background:#1a1a1a; border-radius:99px; z-index:3;
}
/* Notch / camera dot */
.page.device-phone .stage::after {
  content:''; position:absolute; left:62%; top:2.2%; width:1.6%; aspect-ratio:1;
  background: radial-gradient(circle at 35% 35%, #2a3a5a 0%, #050810 70%);
  border-radius:50%; z-index:3;
}

/* Phone controls fill the lower half of the screen overlay area. */
.page.device-phone .controls {
  /* explicit overlay zone underneath the scene */
  position:absolute;
  left:6%; right:6%; top:52%; bottom:6%;
}
.page.device-phone .controls .dpad {
  position:absolute;
  left:0; bottom:14%;
  width:38%; aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:3%;
}
.page.device-phone .controls .dpad .k {
  background:rgba(20,30,55,.7); color:#cfd9f0; border:1px solid rgba(58,80,140,.55);
  border-radius:12%; display:grid; place-items:center;
  font-size: clamp(10px, 1.6vw, 16px); font-weight:700;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
}
.page.device-phone .controls .dpad .k.empty { background:transparent; border:0; box-shadow:none; }
.page.device-phone .controls .dpad .k.pressed,
.page.device-phone .controls .dpad .k:active { background:rgba(245,179,1,.6); color:#fff; }

.page.device-phone .controls .face {
  position:absolute;
  right:0; bottom:14%;
  width:38%; aspect-ratio:1;
}
.page.device-phone .controls .face .fb {
  position:absolute;
  width:32%; aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  font-size: clamp(10px, 1.6vw, 16px); font-weight:900; color:#fff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  user-select:none; cursor:pointer;
}
.page.device-phone .controls .face .Y { top:0;     left:50%; transform:translateX(-50%); background:rgba(234,179,8,.9); color:#0b1020; }
.page.device-phone .controls .face .X { top:50%;   left:0;   transform:translateY(-50%); background:rgba(56,189,248,.9); color:#0b1020; }
.page.device-phone .controls .face .B { top:50%;   right:0;  transform:translateY(-50%); background:rgba(239,68,68,.9); }
.page.device-phone .controls .face .A { bottom:0;  left:50%; transform:translateX(-50%); background:rgba(34,197,94,.9); color:#0b1020; }

.page.device-phone .controls .sys {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:flex; gap:8%;
  width:46%; justify-content:center;
}
.page.device-phone .controls .sys .s {
  padding: 2.5% 6%;
  background:rgba(20,28,52,.65); border:1px solid rgba(58,80,140,.5);
  border-radius:99px; color:#cfd9f0;
  font-size: clamp(8px, 1.1vw, 11px);
  letter-spacing:.14em; font-weight:700;
  backdrop-filter:blur(4px);
  white-space:nowrap;
}

/* Home-bar at very bottom of phone */
.page.device-phone .stage > .scene ~ .controls::after {
  content:''; position:absolute; left:30%; right:30%; bottom:-3%; height:3px;
  background:#444; border-radius:99px; opacity:.6;
}