:root{
  --orange:#ff9a2a;
  --orange-strong:#ffb84d;
  --bg:#000;
  --mono: "Share Tech Mono", monospace;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--orange);font-family:var(--mono);-webkit-font-smoothing:antialiased}
a{color:var(--orange)}
.hidden{display:none!important;pointer-events:none!important;opacity:0!important}

/* Background & scanlines */
#bg-grid{position:fixed;inset:0;z-index:0;background:
  radial-gradient(circle at 20% 15%, rgba(255,140,0,0.02), transparent 6%),
  linear-gradient(0deg, rgba(255,140,0,0.01) 1px, transparent 1px);background-size:100% 100%,40px 40px;pointer-events:none}
.scanline{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(transparent 92%, rgba(255,0,0,0.06) 93%);background-size:100% 6px;opacity:0.0;z-index:2}

/* Particles */
#particles{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.9}

/* Overlay base */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events:none}
.overlay.active{pointer-events:auto}

/* Loading */
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.radar{width:220px;height:220px;border-radius:50%;position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 20px rgba(255,140,0,0.18));border:1px solid rgba(255,140,0,0.04);z-index:11001}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(255,140,0,0.12)}
.ring-outer{width:210px;height:210px}
.ring-mid{width:150px;height:150px;border-style:dashed}
.ring-inner{width:96px;height:96px;border-style:dotted}
.radar-center{color:var(--orange-strong);font-weight:700;text-shadow:0 0 12px rgba(255,140,0,0.9)}
.sweep{position:absolute;inset:-200px;border-radius:50%;background:conic-gradient(rgba(255,160,60,0.16), rgba(255,140,0,0.02) 6%, transparent 12%);animation:sweep 2.8s linear infinite;mix-blend-mode:screen}
@keyframes sweep{to{transform:rotate(360deg)}}
.loader-text{color:var(--orange-strong);letter-spacing:1px}

/* Auth box */
.auth-box{width:700px;max-width:94%;padding:22px;border-radius:10px;border:1px solid rgba(255,140,0,0.06);background:linear-gradient(180deg, rgba(255,140,0,0.02), rgba(0,0,0,0.12));box-shadow:0 8px 40px rgba(255,140,0,0.06);text-align:center;z-index:11002}
.input-row{display:flex;gap:10px;justify-content:center;margin-top:12px}
#access-input{padding:12px 14px;background:transparent;border:1px solid rgba(255,140,0,0.12);color:var(--orange);width:320px;border-radius:8px;text-align:center}
#access-submit{background:linear-gradient(180deg,var(--orange),var(--orange-strong));color:#000;border:none;padding:11px 18px;border-radius:10px;cursor:pointer;font-weight:700}

/* countdown */
#countdown-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20000;pointer-events:none}
#countdown-number{font-size:9rem;color:#ff4a4a;text-shadow:0 0 30px rgba(255,60,60,0.95);font-weight:900;letter-spacing:8px}
.glow-count{animation:countPulse 1s infinite ease-in-out}
@keyframes countPulse{0%{transform:scale(1);opacity:0.95}50%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:0.95}}

/* small critical */
.small-critical{position:fixed;top:8%;left:50%;transform:translateX(-50%);z-index:15000;padding:10px 18px;border-radius:8px;background:rgba(0,0,0,0.6);border:1px solid rgba(255,40,40,0.12);color:#ffb3b3;display:flex;align-items:center}
.critical-text{font-weight:700}

/* CRITICAL FULLSCREEN */
#critical-full{position:fixed;inset:0;z-index:30000;background:linear-gradient(180deg,rgba(15,0,0,0.92),rgba(0,0,0,0.96));display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center}
.critical-full-inner{z-index:30010}
.critical-title{font-size:3.2rem;color:#ff4a4a;text-shadow:0 0 40px rgba(255,30,30,0.9);font-weight:900;animation:critPulse 1s infinite alternate}
@keyframes critPulse{from{transform:scale(1)}to{transform:scale(1.03)}}
.critical-sub{color:rgba(255,180,180,0.8);margin-top:6px}

/* reboot terminal */
.reboot-terminal{margin-top:18px;background:#030303;border:1px solid rgba(0,255,0,0.08);padding:10px;border-radius:6px;min-width:420px;max-width:85vw}
.reboot-lines{color:#66ff66;background:transparent;text-align:left;white-space:pre-wrap;font-family:var(--mono);font-size:16px;line-height:1.2;}

/* flashing scanlines (visible only during critical) */
.critical-scanlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient( rgba(255,0,0,0.02) 1px, transparent 3px);background-size:100% 6px;opacity:0;animation:scanFlash 0.12s infinite linear;mix-blend-mode:screen;z-index:30005}
@keyframes scanFlash{0%{opacity:0}50%{opacity:0.16}100%{opacity:0}}

/* sparks */
.critical-sparks{position:absolute;inset:0;pointer-events:none;z-index:30015}
.critical-sparks::after{content:"";position:absolute;left:10%;top:30%;width:4px;height:4px;background:rgba(255,180,40,0.9);box-shadow:0 0 10px rgba(255,180,40,0.8);border-radius:50%;filter:blur(1px);animation:spark 1.8s infinite}
@keyframes spark{0%{transform:translateY(0) scale(0.6);opacity:1}100%{transform:translateY(-200px) scale(0.2);opacity:0}}

/* Aftermath overlay */
#aftermath-overlay{position:fixed;inset:0;z-index:26000;display:flex;align-items:center;justify-content:center;background:black;color:var(--orange-strong);font-size:2rem;opacity:0;transition:opacity 1s ease}
#aftermath-overlay.show{opacity:1}

/* Admin */
.admin-panel{position:fixed;right:20px;top:20px;width:360px;background:linear-gradient(180deg,rgba(0,0,0,0.92),rgba(10,0,0,0.98));border:1px solid rgba(255,140,0,0.12);color:var(--orange);z-index:12000;border-radius:10px;box-shadow:0 12px 40px rgba(255,140,0,0.06);overflow:hidden;user-select:none}
.admin-panel.hidden{display:none}
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,140,0,0.02);border-bottom:1px solid rgba(255,140,0,0.03);cursor:move}
.admin-body{padding:12px}

/* layout */
main#main{position:relative;z-index:5;width:100%;max-width:1300px;margin:0 auto;padding:18px 22px;display:flex;gap:18px;align-items:flex-start;justify-content:center;overflow:auto;height:100vh}
.title{flex:1;text-align:left}
.glow-title{color:var(--orange);text-shadow:0 0 12px rgba(255,140,0,0.8);font-size:1.8rem;margin:0}
.subtitle{color:rgba(255,200,110,0.85);font-size:0.95rem;margin-top:6px}

/* content & TOC */
.toc{width:260px;flex:0 0 260px}
.toc ul{list-style:none;padding:12px;margin:0;border:1px solid rgba(255,140,0,0.03);border-radius:8px;background:rgba(0,0,0,0.02)}
.toc a{color:var(--orange);text-decoration:none;padding:6px 8px;border-radius:6px;display:inline-block}
.content{flex:2;background:linear-gradient(180deg,rgba(255,140,0,0.01),rgba(0,0,0,0.02));padding:16px;border-radius:8px;border:1px solid rgba(255,140,0,0.02);max-height:68vh;overflow:auto}
.content h2{color:var(--orange);text-shadow:0 0 8px rgba(255,140,0,0.7)}
.content p{color:var(--orange);line-height:1.6}
.content img{max-width:100%;height:auto;border-radius:12px;margin:12px 0}

/* console */
.console{width:100%;margin-top:18px;display:block}
.console-output{height:160px;overflow:auto;background:rgba(0,0,0,0.2);padding:8px;border-radius:6px;color:var(--orange);font-size:13px}
.console-input-row{display:flex;gap:8px;margin-top:8px}
#console-input{flex:1;padding:8px;border-radius:6px;border:1px solid rgba(255,140,0,0.06);background:transparent;color:var(--orange)}
#console-send{background:var(--orange);color:#000;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}

/* screen shake helper */
.shake{animation:screen-shake 0.12s infinite}
@keyframes screen-shake{0%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(6px,-4px)}75%{transform:translate(-3px,2px)}100%{transform:translate(0,0)}}

/* responsive */
@media (max-width:920px){
  main#main{flex-direction:column;padding:12px;height:100vh}
  .toc{order:3;width:auto;flex:initial}
  #countdown-number{font-size:4.5rem}
  .reboot-terminal{min-width:260px}
}