/* ============================================================
   "You Didn't Say the Magic Word" — Jurassic Park lockout page
   ============================================================ */

@font-face{
  font-family:'VT323';
  src:url('assets/fonts/vt323.woff2') format('woff2');
  font-display:swap;
}

:root{
  --teal:#3c6e6b; --teal-2:#2c5350;
  --gray:#c7c7c2; --gray-lite:#e6e6e2; --gray-dark:#8f8f8a;
  --term-blue:#1e22c4; --term-blue-2:#1a1ea8;
  --white:#f2f4ff; --green:#33ff5e; --red:#e03a2c;
  --barblue:#2424e6; --barcyan:#36d2e0; --bargreen:#2fbf3f;
  /* CRT intensity — tweak to taste */
  --scan-alpha:.13; --vignette-alpha:.32;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:radial-gradient(ellipse at 50% 38%, #4a807c 0%, var(--teal) 55%, #244e4b 100%);
  font-family:'VT323','Consolas',monospace;
  overflow:hidden;
  cursor:default;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

#desktop{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;}

/* ---------- window chrome (SGI / Motif) ---------- */
.window{
  background:var(--gray);
  border-top:2px solid var(--gray-lite);
  border-left:2px solid var(--gray-lite);
  border-right:2px solid var(--gray-dark);
  border-bottom:2px solid var(--gray-dark);
  box-shadow:3px 4px 0 rgba(0,0,0,.35), 6px 8px 22px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
}
.window-inner{display:flex;flex-direction:column;flex:1;min-height:0;}
.titlebar{
  display:flex;align-items:center;gap:7px;
  height:24px;padding:0 5px;flex:0 0 auto;
  background:linear-gradient(#e9e9e4,#bcbcb6);
  border-bottom:1px solid var(--gray-dark);
  font-family:'Consolas','DejaVu Sans Mono',monospace;
  font-size:13px;font-weight:700;color:#15151a;
  letter-spacing:.2px;white-space:nowrap;
}
.winbtn{
  width:13px;height:13px;flex:0 0 auto;
  background:linear-gradient(#eee,#aaa);
  border-top:1px solid #fff;border-left:1px solid #fff;
  border-right:1px solid #6f6f6a;border-bottom:1px solid #6f6f6a;
}
.title{flex:1;overflow:hidden;text-overflow:ellipsis;}

/* ---------- gr_osview side panel ---------- */
#osview{position:absolute;top:34px;left:34px;width:296px;z-index:2;}
#osview .titlebar{font-style:italic;font-weight:700;}
.osview-body{
  background:#bdbdb8;padding:9px 9px 11px;
  display:flex;flex-direction:column;gap:7px;
}
.meter-label{
  font-family:'Consolas','DejaVu Sans Mono',monospace;
  font-size:11px;font-style:italic;color:#1a1a1a;margin-bottom:2px;
}
.meter-label b{color:#1a1aa0;font-style:normal;}
.meter-label i{color:#a01a1a;}
.bar{
  height:15px;display:flex;background:#f4f4ee;
  border:1px solid #000;overflow:hidden;
}
.seg{height:100%;}
.seg.blue{background:var(--barblue);}
.seg.cyan{background:var(--barcyan);}
.seg.green{background:var(--bargreen);}
.seg.red{background:var(--red);}
.seg.live{animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35);}}

/* ---------- main terminal window ---------- */
#terminal{
  position:absolute;top:34px;left:356px;right:48px;bottom:48px;
  z-index:3;
}
.term-body{
  flex:1;min-height:0;position:relative;overflow:hidden;
  background:linear-gradient(var(--term-blue),var(--term-blue-2));
  color:var(--white);
  padding:16px 20px;
  font-size:clamp(20px,2.5vw,33px);
  line-height:1.22;font-weight:400;letter-spacing:.4px;
  text-shadow:0 0 1px rgba(255,255,255,.55),0 0 6px rgba(150,170,255,.35);
}
.ln{white-space:pre-wrap;word-break:break-word;}
.cursor{
  display:inline-block;width:.62em;height:1.05em;
  background:var(--green);vertical-align:-2px;margin-left:1px;
  box-shadow:0 0 6px var(--green);
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.flood-line{font-weight:800;letter-spacing:.5px;}

/* ---------- fullscreen lockout video ---------- */
#lockoutVideo{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;
  z-index:40;opacity:0;pointer-events:none;
  transition:opacity .45s ease;
}
#lockoutVideo.show{opacity:1;}

/* ---------- CRT polish ---------- */
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;}
#scan{
  background:repeating-linear-gradient(
    0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,var(--scan-alpha)) 2px 3.5px);
  mix-blend-mode:multiply;
}
#vignette{
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 54%,rgba(0,0,0,var(--vignette-alpha)) 84%,rgba(0,0,0,.6) 100%);
}
#glow{
  background:radial-gradient(ellipse at 50% 42%,
    rgba(120,160,255,.10) 0%,rgba(0,0,0,0) 60%);
}
#flicker{background:rgba(180,200,255,.04);animation:flick .14s steps(2) infinite;}
@keyframes flick{0%{opacity:.55;}100%{opacity:1;}}

/* ---------- phone ---------- */
@media (max-width:680px){
  #desktop{display:flex;flex-direction:column;padding:10px;gap:10px;}
  #osview{position:relative;top:0;left:0;width:100%;flex:0 0 auto;}
  .osview-body{display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px;}
  #osview .meter:nth-child(n+3){display:none;}
  #osview .meter-label{font-size:12px;}
  #osview .bar{height:17px;}
  #terminal{position:relative;top:0;left:0;right:0;bottom:auto;width:100%;flex:1 1 auto;height:auto;min-height:0;}
  .term-body{font-size:clamp(19px,5.2vw,26px);line-height:1.3;padding:13px 14px;}
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  #flicker{animation:none;}
  .seg.live{animation:none;}
  .cursor{animation:none;opacity:1;}
}