/* Retro Black — fixed 1024×768 canvas, industrial chrome */
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:#0a0a0a;color:#e6e6e6}
button{font:inherit;cursor:pointer}

:root{
  --panel:#0f0f10;
  --metal1:#202225;
  --metal2:#0e0f11;
  --line:#2b2d31;
  --accent:#7fffd4;
}

#wrap{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#000;
}

/* 1024×768 stage */
#stage{ width:1024px; height:768px; position:relative; overflow:hidden; background: radial-gradient(ellipse at 50% 30%, #131416 0%, #090a0b 70%); border:1px solid #111; box-shadow:0 30px 80px rgba(0,0,0,.9); }
@media (max-width: 1100px){
  #wrap{ overflow:auto }
}

.chrome{ display:grid; grid-template-columns:260px 1fr 120px; align-items:center; padding:8px 10px;
  background:linear-gradient(#2a2d31,#1a1d21);
  border-bottom:1px solid #000; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.5);
}
.chrome.bottom{ position:absolute; bottom:0; left:0; right:0; border-top:1px solid #000; border-bottom:none; grid-template-columns: 1fr 1fr; }
.brand img{ height:22px; filter:invert(90%) contrast(120%) }
.menu{ display:flex; gap:8px; justify-content:center }
.menu button{ padding:8px 12px; color:#d7d7d7; background:linear-gradient(#1b1d20,#0f1012); border:1px solid #2a2d31; border-radius:4px; }
.menu button:hover{ border-color:#3d4046; color:#fff }
.leds{ justify-self:end; display:flex; gap:6px }
.leds span{ width:8px; height:8px; border-radius:50%; background:#333; box-shadow:0 0 8px #000 inset }
.leds .on{ background:#38f095; box-shadow:0 0 8px #38f095 }

.viewport{ position:absolute; inset:48px 0 48px; padding:0 12px; }
.noise, .scan{ position:absolute; inset:0; pointer-events:none }
.noise{ background:url('/assets/bg/static.gif') repeat; opacity:.07; mix-blend-mode:overlay }
.scan{ background: repeating-linear-gradient( to bottom, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 2px, transparent 4px ); }

.intro{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:20px }
.intro h1{ margin:0 0 8px; font-weight:900; letter-spacing:.12em }
.enter{ padding:10px 18px; border:1px solid #3a3d42; border-radius:999px;
  background:linear-gradient(#2a2d31,#15171a); color:#e6e6e6 }
.enter:hover{ filter:brightness(1.2) }

/* Window */
.window{ position:absolute; top:120px; left:120px; width:600px; min-width:280px; min-height:200px; background:linear-gradient(#121315,#0c0d0f);
  border:1px solid #000; box-shadow: 0 14px 40px rgba(0,0,0,.8), inset 0 0 0 1px #1c1e21; color:#dcdcdc }
.titlebar{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:linear-gradient(#1d1f23,#14161a); border-bottom:1px solid #000 }
.titlebar .t{ font-weight:800; letter-spacing:.1em }
.btns{ display:flex; gap:6px }
.btns .min, .btns .x{ width:26px; height:26px; border-radius:6px; border:1px solid #2a2d31; background:linear-gradient(#23262b,#121418); color:#e6e6e6 }
.btns .x{ background:linear-gradient(#3b1f1f,#130707); border-color:#3b1f1f }
.body{ padding:12px 14px; max-height:56vh; overflow:auto }
.grip{ position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; background: linear-gradient(135deg, transparent 50%, #2a2d31 50%) }

/* Content */
.h1{ font-size:18px; letter-spacing:.12em; font-weight:900; margin:0 0 10px }
.p{ color:#a7a7a7 }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px }
.card{ border:1px solid #1f2125; border-radius:6px; overflow:hidden; background:#0b0c0e }
.card figcaption{ padding:8px 10px; color:#9aa0a6; font-size:12px }

.product{ display:grid; grid-template-columns:160px 1fr; gap:12px; align-items:center; padding:10px; border:1px solid #1f2125; border-radius:8px; background:#0c0d10 }
.price{ color:var(--accent); font-weight:800 }

@media (max-width: 1024px){
  /* scale down the whole stage */
  #stage{ transform-origin: top left; }
}