:root{
  --bezel:#0b0b0e;
  --amber:#f2b23e;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#050507;overflow:hidden;font-family:"Trebuchet MS",Verdana,sans-serif;color:#ddd}
#cabinet{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 8%, #14151c 0%, #0a0a0d 46%, #030304 100%);
}
#cabinet::before{ /* subtle floor reflection vibe */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 42% at 50% 104%, rgba(255,180,60,.05), transparent 70%);
}
#screenwrap{
  position:relative;background:#000;border-radius:14px;
  box-shadow:
    0 0 0 10px #131317,
    0 0 0 12px #000,
    0 26px 90px rgba(0,0,0,.9),
    inset 0 0 34px rgba(0,0,0,.9);
  overflow:hidden;
  width:min(96vw,calc(96vh * (4 / 3)));
  aspect-ratio:4/3;
}
#screen{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;background:#000}
/* ---- CRT overlay ---- */
#crt{position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:14px;overflow:hidden}
#crt.hidden{display:none}
#crt .scanlines{
  position:absolute;inset:-2%;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
#crt .aperture{
  position:absolute;inset:0;
  background:repeating-linear-gradient(to right,
    rgba(255,0,0,.033) 0 1px, rgba(0,255,0,.028) 1px 2px, rgba(0,60,255,.033) 2px 3px);
  mix-blend-mode:screen;
}
#crt .vignette{
  position:absolute;inset:0;
  background:radial-gradient(115% 105% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.34) 84%, rgba(0,0,0,.62) 100%);
}
#crt .glowbar{
  position:absolute;left:-10%;right:-10%;height:22%;top:-30%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.05), rgba(255,255,255,0));
  animation:crtroll 7.5s linear infinite;mix-blend-mode:screen;
}
@keyframes crtroll{from{top:-30%}to{top:130%}}
/* ---- boot gate (autoplay-audio policy) ---- */
#bootgate{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 40%, #101018 0%, #050507 75%)}
#bootgate.hidden{display:none}
.gate-inner{text-align:center;padding:2rem;max-width:640px}
.gate-logo{
  font-family:"Arial Black",Impact,sans-serif;font-style:italic;font-weight:900;
  font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:.06em;line-height:.95;
  color:#f4c65a;
  text-shadow:0 2px 0 #7a4c00,0 5px 0 #3a2400,0 0 34px rgba(244,180,70,.35);
}
.gate-logo span{display:inline-block;color:#e04a2e;font-size:.72em;vertical-align:.18em;
  text-shadow:0 2px 0 #5a1000,0 5px 0 #2b0700,0 0 28px rgba(224,74,46,.4);margin-left:.12em}
.gate-sub{margin:.9rem 0 2rem;color:#8ea0b8;letter-spacing:.34em;font-size:.72rem;text-transform:uppercase}
#bootbtn{
  font:inherit;font-weight:700;letter-spacing:.14em;font-size:.95rem;
  color:#111;background:linear-gradient(#ffd97a,#e6a422);
  border:0;padding:.85rem 1.7rem;border-radius:4px;cursor:pointer;
  box-shadow:0 4px 0 #7a5200,0 10px 28px rgba(230,164,34,.25);
  transition:transform .06s ease;
}
#bootbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a5200}
.gate-hint{margin-top:1.4rem;font-size:.68rem;color:#5c6878;letter-spacing:.06em}
.gate-keys{margin-top:.5rem;font-size:.62rem;color:#485364;letter-spacing:.05em}
@media (max-width:560px){ .gate-keys{display:none} }