*{margin:0;padding:0;box-sizing:border-box}

:root{
  --c1:#00ffe0;
  --c2:#ff2d6b;
  --c3:#ffe600;
  --c4:#7b5fff;
  --bg:#020a0e;
  --bg2:#040f14;
  --font:'Courier New',Courier,monospace;
}

html,body{width:100%;min-height:100%;background:var(--bg)}
body{font-family:var(--font);color:var(--c1);position:relative;overflow-x:hidden}

canvas#bg{position:fixed;inset:0;z-index:0;opacity:.35}

.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,224,.018) 3px,rgba(0,255,224,.018) 4px)
}

.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)
}

/* HUD — fixed on desktop, static top/bottom bars on mobile */
.hud{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:24px 32px;pointer-events:none}
@media(max-height:699px), (max-width:499px){
  .hud{position:static;padding:16px 20px 0}
  .bottom-bar{position:fixed;bottom:0;left:0;right:0;padding:12px 20px;background:linear-gradient(transparent,rgba(2,10,14,.95));pointer-events:none}
  .gauge-left,.gauge-right{display:none}
}

/* Top bar */
.top-bar{display:flex;justify-content:space-between;align-items:flex-start}
.sys-id{font-size:11px;letter-spacing:.18em;color:var(--c1);opacity:.7}
.sys-id span{display:block;line-height:1.7}
.sys-id .hi{color:var(--c3);opacity:1;font-size:12px}
.top-right{text-align:right;font-size:11px;letter-spacing:.12em;color:var(--c1);opacity:.6}
.top-right span{display:block;line-height:1.7}

/* Bottom bar */
.bottom-bar{display:flex;justify-content:space-between;align-items:flex-end}
.stat-block{font-size:10px;letter-spacing:.15em;color:var(--c1);opacity:.5;line-height:2}
.stat-block .val{color:var(--c3);opacity:.9}
.progress-wrap{width:160px}
.progress-label{font-size:10px;letter-spacing:.15em;color:var(--c1);opacity:.5;margin-bottom:6px}
.progress-bar{height:6px;background:transparent;display:flex;gap:3px;align-items:center}
.progress-seg{flex:1;height:4px;border-radius:1px;animation:segWave 1.8s ease-in-out infinite}

/* Center — flows naturally on mobile, absolutely centred on desktop */
.center{
  position:relative;top:auto;left:auto;transform:none;
  text-align:center;z-index:3;width:min(700px,90vw);
  margin:0 auto;padding:100px 0 120px;
}
@media(min-height:700px) and (min-width:500px){
  .center{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    padding:0;
  }
}

/* Portal rings */
.portal-ring{margin:0 auto 28px;width:180px;height:180px;position:relative}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c1);animation:spin 10s linear infinite,ringPulse 2.5s ease-in-out infinite}
.ring2{border-color:var(--c3);border-style:dashed;animation-duration:7s,2.5s;animation-direction:reverse,normal;border-width:1.5px}
.ring3{inset:20px;border-color:var(--c1);animation-duration:14s,2.5s;border-width:1.5px;opacity:.7}
.ring-inner{
  position:absolute;inset:40px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,224,.25) 0%,rgba(0,255,224,.05) 60%,rgba(0,20,40,.4) 100%);
  border:2px solid rgba(0,255,224,.6);animation:innerPulse 2s ease-in-out infinite
}
.ring-dot{
  position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;
  background:var(--c1);transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--c1),0 0 24px var(--c1);animation:dotPulse 2s ease-in-out infinite
}

/* Text elements */
.chevron{font-size:10px;letter-spacing:.35em;color:var(--c2);opacity:.8;margin-bottom:10px;text-transform:uppercase}
.headline{
  font-size:clamp(22px,5vw,40px);font-weight:bold;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;line-height:1.15;margin-bottom:10px;
  text-shadow:0 0 30px rgba(0,255,224,.4)
}
.headline .accent{color:var(--c1)}
.subline{font-size:clamp(10px,2vw,13px);letter-spacing:.3em;color:var(--c1);opacity:.6;text-transform:uppercase;margin-bottom:28px}
.divider{width:220px;height:1px;background:linear-gradient(90deg,transparent,var(--c1),transparent);margin:0 auto 24px;opacity:.5}
.portal-msg{
  font-size:clamp(18px,3.5vw,28px);letter-spacing:.35em;color:#fff;margin-bottom:28px;
  text-transform:uppercase;font-weight:bold;
  text-shadow:0 0 18px rgba(255,255,255,.5),0 0 40px rgba(0,255,224,.2);
  animation:portalPulse 2s ease-in-out infinite
}

/* Console block */
.console-block{
  background:rgba(0,255,224,.04);border:1px solid rgba(0,255,224,.15);
  padding:14px 18px;text-align:left;font-size:11px;letter-spacing:.1em;
  line-height:2;color:rgba(0,255,224,.55);max-width:420px;margin:0 auto 28px;position:relative
}
.console-block::before{
  content:'// SYSTEM LOG';position:absolute;top:-9px;left:14px;
  background:var(--bg);padding:0 8px;font-size:10px;color:var(--c2);letter-spacing:.2em
}
.log-line{display:flex;gap:10px}
.log-line .ok{color:var(--c1);opacity:.9}
.log-line .warn{color:var(--c3)}
.log-line .err{color:var(--c2)}
.log-cursor{
  display:inline-block;width:8px;height:12px;background:var(--c1);
  vertical-align:middle;animation:blink .8s step-end infinite;margin-left:4px
}

/* Button */
.enter-btn-wrap{position:relative;display:inline-block;cursor:pointer}
.enter-btn{
  display:inline-block;padding:12px 36px;border:1px solid var(--c1);
  color:var(--c1);background:transparent;font-family:var(--font);
  font-size:12px;letter-spacing:.35em;text-transform:uppercase;
  cursor:inherit;position:relative;transition:color .1s,border-color .1s
}
.enter-btn::before,.enter-btn::after{
  content:'';position:absolute;width:8px;height:8px;
  border-color:var(--c3);border-style:solid;transition:all .2s
}
.enter-btn::before{top:-4px;left:-4px;border-width:1px 0 0 1px}
.enter-btn::after{bottom:-4px;right:-4px;border-width:0 1px 1px 0}
.enter-btn-wrap:hover .enter-btn::before,
.enter-btn-wrap:hover .enter-btn::after{width:14px;height:14px}
.enter-btn.glitching{animation:glitch .08s steps(1) infinite;color:var(--c2);border-color:var(--c2)}
.err-msg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  white-space:nowrap;font-size:11px;letter-spacing:.2em;color:var(--c2);
  opacity:0;pointer-events:none;font-family:var(--font);transition:opacity .15s;text-transform:uppercase
}
.enter-btn-wrap:hover .err-msg{opacity:1}
.enter-btn-wrap:hover .enter-btn{color:transparent;border-color:var(--c2)}

/* Corner brackets */
.corner{position:fixed;width:36px;height:36px;z-index:3;pointer-events:none}
.corner.tl{top:16px;left:16px;border-top:1.5px solid var(--c1);border-left:1.5px solid var(--c1)}
.corner.tr{top:16px;right:16px;border-top:1.5px solid var(--c1);border-right:1.5px solid var(--c1)}
.corner.bl{bottom:16px;left:16px;border-bottom:1.5px solid var(--c1);border-left:1.5px solid var(--c1)}
.corner.br{bottom:16px;right:16px;border-bottom:1.5px solid var(--c1);border-right:1.5px solid var(--c1)}

/* Side gauges */
.gauge-left,.gauge-right{
  position:fixed;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:6px;pointer-events:none
}
.gauge-left{left:20px}
.gauge-right{right:20px}
.gauge-bar{width:3px;background:rgba(0,255,224,.15)}
.gauge-bar.active{background:var(--c1);animation:pulse 1.5s ease-in-out infinite}
.gauge-bar:nth-child(odd){height:14px}
.gauge-bar:nth-child(even){height:22px}

/* Mobile type scale */
@media(max-width:499px){
  .sys-id,.top-right{font-size:10px;letter-spacing:.1em}
  .top-right span:not(:first-child){display:none}
  .portal-ring{width:130px;height:130px;margin-bottom:18px}
  .ring3{inset:14px}
  .ring-inner{inset:28px}
  .console-block{font-size:10px;padding:10px 12px}
  .stat-block{font-size:9px}
  .progress-wrap{width:110px}
}
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ringPulse{0%,100%{opacity:.4;filter:brightness(1)}50%{opacity:1;filter:brightness(1.8)}}
@keyframes innerPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes dotPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.6);opacity:1}}
@keyframes portalPulse{
  0%,100%{opacity:.7;text-shadow:0 0 10px rgba(255,255,255,.4)}
  50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.7),0 0 60px rgba(0,255,224,.3)}
}
@keyframes segWave{
  0%,100%{background:rgba(0,255,224,.12)}
  50%{background:rgba(0,255,224,.95)}
}
@keyframes glitch{
  0%  {clip-path:inset(20% 0 60% 0);transform:translateX(-4px)}
  20% {clip-path:inset(60% 0 10% 0);transform:translateX(4px)}
  40% {clip-path:inset(40% 0 30% 0);transform:translateX(-2px) skewX(5deg)}
  60% {clip-path:inset(10% 0 80% 0);transform:translateX(3px)}
  80% {clip-path:inset(80% 0  5% 0);transform:translateX(-3px) skewX(-4deg)}
  100%{clip-path:inset(30% 0 50% 0);transform:translateX(2px)}
}