/* ============ THE THINGS WE LEFT BEHIND — monitor chassis ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; background:#05070c; overflow:hidden; }
body {
  font-family:'Press Start 2P', 'Courier New', monospace;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 700px at 50% 40%, #101826 0%, #070a12 55%, #03050a 100%);
  color:#9fd8c8;
  -webkit-user-select:none; user-select:none;
}
#app { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; height:100%; justify-content:center; }

/* ---- scaling: the whole chassis scales to fit viewport ---- */
#monitor {
  --s:1;
  transform:scale(var(--s));
  transform-origin:center center;
  flex:none;
}

#monitor {
  background:linear-gradient(180deg,#3a3f4a 0%, #262a33 8%, #1d2027 60%, #14161c 100%);
  border-radius:14px;
  padding:0;
  box-shadow:
    0 0 0 2px #0c0e13,
    0 4px 0 0 #0a0c10,
    0 24px 60px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
}
.casing-top, .casing-bottom {
  height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; position:relative;
  background:linear-gradient(180deg,#343945,#22252e);
  border-bottom:1px solid #101318;
}
.casing-bottom { border-bottom:none; border-top:1px solid #383d49; background:linear-gradient(180deg,#1b1e25,#242833); }
.screw {
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #8b93a3, #4a505c 60%, #23262d);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.6);
  position:relative;
}
.screw::after { content:''; position:absolute; left:2px; right:2px; top:6px; height:2px; background:#1a1d23; transform:rotate(40deg); }
.badge { text-align:center; line-height:1.7; }
.badge-line { font-size:8px; letter-spacing:2px; color:#7d8697; }
.badge-model { font-size:9px; color:#d8b25a; letter-spacing:1px; }
.ports { display:flex; gap:8px; align-items:center; }
.ports span { width:26px; height:8px; background:#0b0d11; border-radius:2px; box-shadow:inset 0 0 0 1px #30343d; display:block; }
.label { font-size:7px; color:#6a7280; letter-spacing:2px; }

.screen-bezel {
  display:flex; align-items:stretch;
  background:linear-gradient(180deg,#15171d,#0d0f14);
  padding:14px 14px 14px 14px; gap:10px;
  border-top:1px solid #414655; border-bottom:1px solid #08090c;
}
#screen {
  position:relative; width:960px; height:540px; flex:none;
  background:#02070a;
  border-radius:8px;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 3px #060a0e,
    inset 0 0 24px rgba(0,0,0,.9),
    0 0 0 4px #232732,
    0 0 0 5px #0b0d12,
    0 0 34px rgba(64,224,190,.06);
}
#game { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; display:block; }
#scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.7;
}
#glass {
  position:absolute; inset:0; pointer-events:none; z-index:6;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(3,10,12,.35) 100%),
    radial-gradient(80% 60% at 22% 12%, rgba(180,255,240,.05), transparent 60%);
}
#screen.flicker #scanlines { animation:flick .12s steps(2) infinite; }
@keyframes flick { 0%{opacity:.7} 50%{opacity:.45} 100%{opacity:.75} }

/* side column with LEDs */
.bezel-right {
  width:64px; flex:none; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding-top:12px;
  background:linear-gradient(180deg,#232732,#181b22);
  border-radius:6px;
  box-shadow:inset 0 0 0 1px #0a0c10;
}
.led { width:12px; height:12px; border-radius:50%; background:#1c2027; box-shadow:inset 0 0 0 2px rgba(0,0,0,.5); }
.led.on { background:#57e0a8; box-shadow:0 0 8px #57e0a8aa, inset 0 0 0 2px rgba(0,0,0,.25); }
#led-sig.on { background:#59c8f0; box-shadow:0 0 8px #59c8f0aa; }
#led-sig.blink { animation:ledblink 1.2s steps(2) infinite; }
#led-dsk.on { background:#e0b457; box-shadow:0 0 8px #e0b457aa; }
@keyframes ledblink { 0%{opacity:1} 50%{opacity:.2} 100%{opacity:1} }
.vent { width:40px; height:180px; margin-top:8px;
  background:repeating-linear-gradient(180deg, #0d0f13 0 4px, #20242c 4px 8px);
  border-radius:4px; box-shadow:inset 0 0 0 1px #0a0c10; }
.plate { font-size:6px; color:#6a7280; text-align:center; line-height:2; letter-spacing:1px; }

/* Controls live outside the scaled chassis so targets remain finger-sized. */
#touch { display:none; }
body.touch #touch { display:flex; }
#touch { flex:none; flex-direction:column; gap:6px; width:min(100%, 960px); padding:6px; }
.touch-tools, .touch-pad { display:flex; justify-content:center; gap:6px; }
#touch button { min-width:44px; min-height:44px; padding:8px; border:1px solid #528b80;
  border-radius:8px; background:#12262c; color:#b8f3de; font:12px monospace;
  touch-action:none; -webkit-touch-callout:none; }
#touch button[hidden] { display:none; }
#touch button:active, #touch button.held { background:#28594e; }
#touch button:focus-visible { outline:2px solid #f0c090; outline-offset:2px; }
.touch-pad button { flex:1; max-width:100px; }
#touch-help { font:11px/1.4 monospace; text-align:center; color:#8da99f; }
#game { touch-action:none; -webkit-touch-callout:none; }
#footer { font-size:8px; color:#4d5766; letter-spacing:2px; text-align:center; }

/* Keep the complete game frame; only decorative chassis chrome is compacted. */
body.touch #app { justify-content:center; gap:4px; height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.touch #monitor { transform:none; width:var(--game-width, 100%); max-width:100%; }
body.touch .casing-top, body.touch .casing-bottom, body.touch .bezel-right,
body.touch #footer { display:none; }
body.touch .screen-bezel { padding:0; border:0; display:block; overflow:auto; max-height:var(--game-height); }
body.touch #screen { width:100%; height:auto; aspect-ratio:16 / 9; border-radius:4px; }
body.touch #scanlines { opacity:.2; }
body.touch.zoomed #screen { width:max(960px, 100%); }
body.touch.zoomed .screen-bezel { touch-action:pan-x pan-y; }
body.touch.zoomed #game { touch-action:pan-x pan-y; }
@media (max-height:540px) and (orientation:landscape) {
  body.touch #touch { display:contents; }
  body.touch #touch-help { display:none; }
  body.touch .touch-tools, body.touch .touch-pad { position:absolute; top:50%; transform:translateY(-50%);
    width:104px; flex-wrap:wrap; gap:6px; }
  body.touch .touch-tools { left:max(4px, env(safe-area-inset-left)); }
  body.touch .touch-pad { right:max(4px, env(safe-area-inset-right)); }
  body.touch #touch .touch-pad button { flex:1 0 44px; min-width:44px; max-width:48px; padding:2px; font-size:10px; }
}