@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;overflow:hidden;font-family:'Share Tech Mono',monospace;color:#0f0;cursor:none}

canvas#bgCanvas,canvas#fxCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh}
canvas#bgCanvas{z-index:0}
canvas#fxCanvas{z-index:1;pointer-events:none}

canvas#eqCanvas{
  position:fixed;bottom:55px;left:0;
  width:100vw;height:120px;
  z-index:2;pointer-events:none;
}

#overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}

#scanlines{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 3px)}
#vignette{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.8) 100%)}

.title{font-family:'Orbitron',sans-serif;font-size:clamp(1.5rem,4vw,3.5rem);font-weight:900;
  text-align:center;letter-spacing:.3em;
  text-shadow:0 0 10px #0f0,0 0 20px #0f0,0 0 40px #0a0,0 0 80px #080;
  animation:glitch 3s infinite,pulse 2s ease-in-out infinite;margin-bottom:10px}
.subtitle{font-family:'Orbitron',sans-serif;font-size:clamp(.6rem,1.5vw,1rem);letter-spacing:.5em;
  color:#f00;text-shadow:0 0 10px #f00,0 0 30px #a00;animation:blink 1.5s step-end infinite;margin-bottom:40px}

.countdown-container{display:flex;gap:clamp(10px,3vw,40px);margin-bottom:30px}
.countdown-unit{display:flex;flex-direction:column;align-items:center}
.countdown-value{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,7vw,6rem);font-weight:900;
  color:#0ff;text-shadow:0 0 10px #0ff,0 0 20px #0ff,0 0 40px #0aa,0 0 80px #088;
  min-width:2ch;text-align:center;animation:digitFlicker .1s infinite}
.countdown-label{font-size:clamp(.5rem,1.2vw,.8rem);letter-spacing:.3em;color:#0a0;
  text-shadow:0 0 5px #0a0;margin-top:5px}
.countdown-separator{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,7vw,6rem);font-weight:900;
  color:#0ff;text-shadow:0 0 10px #0ff,0 0 20px #0ff;animation:blink 1s step-end infinite;align-self:flex-start}

.status-bar{width:clamp(300px,60vw,700px);height:4px;background:rgba(0,255,0,.1);
  border:1px solid rgba(0,255,0,.3);margin-bottom:20px;overflow:hidden}
.status-bar-fill{height:100%;background:linear-gradient(90deg,#0f0,#0ff,#0f0);
  box-shadow:0 0 10px #0f0,0 0 20px #0f0;transition:width 1s linear}

.log-container{width:clamp(300px,60vw,700px);max-height:150px;overflow:hidden;
  border:1px solid rgba(0,255,0,.2);padding:10px;background:rgba(0,0,0,.6);backdrop-filter:blur(5px)}
.log-line{font-size:clamp(.5rem,1vw,.75rem);line-height:1.6;opacity:0;animation:fadeIn .3s forwards;
  white-space:nowrap;overflow:hidden}
.log-line .timestamp{color:#555}
.log-line .bracket{color:#ff0}
.log-line .system{color:#f0f;text-shadow:0 0 5px #f0f}
.log-line .ok{color:#0f0}
.log-line .warn{color:#ff0}
.log-line .danger{color:#f00;text-shadow:0 0 5px #f00}

.hex-ticker{font-size:.6rem;color:rgba(0,255,0,.3);letter-spacing:.2em;margin-top:15px;
  font-family:'Share Tech Mono',monospace}

/* ============================================
   TERMINAL
   ============================================ */
#terminalWrap{
  position:fixed;top:20px;left:20px;
  width:480px;
  height:380px;
  min-width:320px;
  min-height:180px;
  max-height:calc(100vh - 75px);
  z-index:20;
  display:flex;flex-direction:column;
  border:1px solid rgba(0,255,0,.25);
  border-radius:8px;
  background:rgba(0,5,0,.92);
  backdrop-filter:blur(14px);
  box-shadow:
    0 0 30px rgba(0,255,0,.06),
    0 8px 32px rgba(0,0,0,.7),
    0 2px 8px rgba(0,0,0,.5),
    inset 0 0 80px rgba(0,0,0,.4);
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
  overflow:hidden;
  resize:both;
  animation:terminalPopIn .4s cubic-bezier(.175,.885,.32,1.275) forwards;
  transform-origin:bottom left;
}

#terminalWrap.hidden{
  animation:terminalPopOut .25s ease forwards;
  pointer-events:none;
}

#terminalWrap.fullscreen{
  top:0 !important;left:0 !important;right:0 !important;bottom:55px !important;
  width:100vw !important;height:calc(100vh - 55px) !important;
  max-height:none !important;
  border-radius:0;
  resize:none;
  animation:terminalMaximize .3s ease forwards;
}

#terminalWrap.minimized #terminalBody{display:none}
#terminalWrap.minimized{
  width:280px !important;height:auto !important;max-height:none !important;
  resize:none;animation:terminalMinimize .25s ease forwards;
}

@keyframes terminalPopIn{
  0%{opacity:0;transform:scale(.3) translateY(40px)}
  60%{opacity:1;transform:scale(1.03) translateY(-4px)}
  80%{transform:scale(.98) translateY(2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes terminalPopOut{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.3) translateY(40px)}
}
@keyframes terminalMaximize{
  0%{transform:scale(.95);opacity:.8}
  100%{transform:scale(1);opacity:1}
}
@keyframes terminalMinimize{
  0%{transform:scale(1)}50%{transform:scale(.95)}100%{transform:scale(1)}
}

#terminalBar{
  display:flex;align-items:center;
  padding:8px 12px;
  background:rgba(0,255,0,.06);
  border-bottom:1px solid rgba(0,255,0,.15);
  border-radius:8px 8px 0 0;
  cursor:move;user-select:none;
  min-height:34px;gap:8px;flex-shrink:0;
}
#terminalBtns{display:flex;gap:7px;align-items:center;flex-shrink:0;order:-1}
#terminalBtns button{
  width:13px;height:13px;border-radius:50%;border:none;cursor:pointer;
  font-size:0;padding:0;transition:all .15s ease;position:relative;
}
#terminalBtns button:hover{transform:scale(1.25)}
#termCloseBtn{
  background:radial-gradient(circle at 35% 35%,#ff6058,#e0443e);
  box-shadow:0 0 4px rgba(255,96,88,.4);
}
#termMinBtn{
  background:radial-gradient(circle at 35% 35%,#ffd62e,#f5c211);
  box-shadow:0 0 4px rgba(255,214,46,.4);
}
#termMaxBtn{
  background:radial-gradient(circle at 35% 35%,#2ecc40,#1db934);
  box-shadow:0 0 4px rgba(46,204,64,.4);
}
#termCloseBtn:hover::after{
  content:'×';font-size:11px;font-weight:bold;color:rgba(0,0,0,.6);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
#termMinBtn:hover::after{
  content:'−';font-size:11px;color:rgba(0,0,0,.6);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
#termMaxBtn:hover::after{
  content:'+';font-size:11px;color:rgba(0,0,0,.6);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
#terminalTitle{
  font-size:.75rem;color:#0f0;letter-spacing:.15em;text-shadow:0 0 4px #0f0;
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
  flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}

#termOpenBtn{
  position:fixed;top:20px;left:20px;z-index:20;
  background:rgba(0,255,0,.1);border:1px solid rgba(0,255,0,.3);color:#0f0;
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
  font-size:.7rem;letter-spacing:.15em;padding:6px 14px;cursor:pointer;
  text-shadow:0 0 4px #0f0;border-radius:4px;display:none;
  animation:terminalPopIn .3s ease forwards;transition:all .2s;
}
#termOpenBtn:hover{background:rgba(0,255,0,.2);box-shadow:0 0 12px rgba(0,255,0,.25)}
#termOpenBtn.visible{display:block}

#terminalBody{
  display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;
  position:relative;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 1px,
      rgba(0,20,0,0.08) 1px,
      rgba(0,20,0,0.08) 2px
    ),
    radial-gradient(ellipse at 50% 50%, rgba(0,30,0,0.0) 0%, rgba(0,0,0,0.35) 100%);
  transition: opacity .1s, transform .05s, filter .05s, text-shadow .08s;
}

/* CRT phosphor afterglow on the body */
#terminalBody::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,255,0,0.02) 0%, transparent 70%);
}

#terminalOutput{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:12px 14px;font-size:.8rem;line-height:1.55;color:#0f0;
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
  scrollbar-width:thin;scrollbar-color:rgba(0,255,0,.2) transparent;
  text-shadow:0 0 2px rgba(0,255,0,0.5), 0 0 8px rgba(0,255,0,0.08);
  image-rendering:pixelated;
  position:relative;z-index:1;
}
#terminalOutput::-webkit-scrollbar{width:4px}
#terminalOutput::-webkit-scrollbar-track{background:rgba(0,5,0,0.3)}
#terminalOutput::-webkit-scrollbar-thumb{background:rgba(0,255,0,.18);border-radius:2px}
#terminalOutput::-webkit-scrollbar-thumb:hover{background:rgba(0,255,0,.35)}

#terminalOutput .term-line{
  white-space:pre-wrap;word-break:break-all;
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
  padding:0.5px 0;
  animation:termLineAppear .15s ease-out;
}
@keyframes termLineAppear{
  0%{opacity:0;filter:brightness(2) blur(1px)}
  50%{opacity:0.8;filter:brightness(1.3)}
  100%{opacity:1;filter:none}
}

#terminalOutput .term-cyan{color:#0ef;text-shadow:0 0 3px rgba(0,238,255,0.4)}
#terminalOutput .term-yellow{color:#fd0;text-shadow:0 0 3px rgba(255,221,0,0.3)}
#terminalOutput .term-red{color:#f55;text-shadow:0 0 4px rgba(255,85,85,0.4)}
#terminalOutput .term-magenta{color:#e4f;text-shadow:0 0 3px rgba(238,68,255,0.3)}
#terminalOutput .term-green{color:#0f0;text-shadow:0 0 3px rgba(0,255,0,0.4)}
#terminalOutput .term-dim{color:#5a5a5a;text-shadow:none}
#terminalOutput .term-white{color:#e0e0e0;text-shadow:0 0 2px rgba(224,224,224,0.2)}
#terminalOutput .term-bold{font-weight:bold}

#terminalInputLine{
  display:flex;align-items:center;padding:7px 14px 10px;
  border-top:1px solid rgba(0,255,0,.06);flex-shrink:0;
  background:rgba(0,10,0,0.3);
  position:relative;z-index:1;
}
#terminalPrompt{
  font-size:.8rem;color:#0f0;text-shadow:0 0 4px rgba(0,255,0,0.6);white-space:nowrap;flex-shrink:0;
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
}
#terminalInput{
  flex:1;background:none;border:none;outline:none;color:#0f0;
  font-family:'Consolas','Menlo','Monaco','Courier New',monospace;
  font-size:.8rem;
  caret-color:#0f0;
  caret-shape:block;
  text-shadow:0 0 3px rgba(0,255,0,0.5);
  margin-left:2px;
}
/* Block cursor blink */
@keyframes termCursorBlink{
  0%,100%{border-color:#0f0}
  50%{border-color:transparent}
}
#terminalInput:focus{
  animation:termCursorBlink 1s step-end infinite;
}

/* Pre-formatted lines for box drawing — no word-break, exact spacing */
#terminalOutput .term-pre{
  white-space:pre;
  word-break:normal;
  overflow-x:hidden;
  letter-spacing:0;
}

#terminalWrap:not(.fullscreen):not(.minimized)::after{
  content:'';position:absolute;bottom:0;right:0;width:16px;height:16px;
  cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 50%,rgba(0,255,0,.2) 50%),
    linear-gradient(135deg,transparent 60%,rgba(0,255,0,.1) 60%),
    linear-gradient(135deg,transparent 70%,rgba(0,255,0,.05) 70%);
  border-radius:0 0 8px 0;z-index:1;
}
#terminalWrap::-webkit-resizer{background:transparent}

/* ---- COPYRIGHT — animated color cycling + glow ---- */
#copyright{
  position:fixed;
  bottom:56px;
  left:0;right:0;
  z-index:9;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.25em;
  padding:5px 0;
  pointer-events:none;
  user-select:none;
  animation:copyrightGlow 8s ease-in-out infinite, copyrightColor 12s linear infinite;
}

@keyframes copyrightColor{
  0%   {color:#0f0;text-shadow:0 0 8px #0f0,0 0 20px rgba(0,255,0,.3)}
  15%  {color:#0ff;text-shadow:0 0 8px #0ff,0 0 20px rgba(0,255,255,.3)}
  30%  {color:#f0f;text-shadow:0 0 8px #f0f,0 0 20px rgba(255,0,255,.3)}
  45%  {color:#ff0;text-shadow:0 0 8px #ff0,0 0 20px rgba(255,255,0,.3)}
  60%  {color:#f44;text-shadow:0 0 8px #f44,0 0 20px rgba(255,68,68,.3)}
  75%  {color:#4af;text-shadow:0 0 8px #4af,0 0 20px rgba(68,170,255,.3)}
  90%  {color:#4f4;text-shadow:0 0 8px #4f4,0 0 20px rgba(68,255,68,.3)}
  100% {color:#0f0;text-shadow:0 0 8px #0f0,0 0 20px rgba(0,255,0,.3)}
}

@keyframes copyrightGlow{
  0%,100%{opacity:.6;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.4)}
}

.copyright-sep{margin:0 10px;opacity:.5}

/* ---- MUSIC PANEL ---- */
#musicPanel{
  position:fixed;bottom:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(0,5,0,.85);border-top:1px solid rgba(0,255,0,.2);
  padding:8px 20px;backdrop-filter:blur(10px);height:55px;
}
#trackInfo{
  font-size:.65rem;color:#0f0;text-shadow:0 0 4px #0f0;letter-spacing:.12em;
  max-width:280px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;
}
#musicControls{display:flex;gap:4px;align-items:center;flex-shrink:0}
#musicControls button{
  background:rgba(0,255,0,.06);border:1px solid rgba(0,255,0,.25);color:#0f0;
  font-size:.9rem;width:36px;height:30px;cursor:pointer;
  font-family:'Share Tech Mono',monospace;
  text-shadow:0 0 4px #0f0;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
#musicControls button:hover{background:rgba(0,255,0,.18);box-shadow:0 0 12px rgba(0,255,0,.25)}
#musicControls button.active{background:rgba(0,255,0,.2);box-shadow:inset 0 0 8px rgba(0,255,0,.2)}
#volControl{display:flex;align-items:center;gap:6px;flex-shrink:0}
#volLabel{font-size:.55rem;color:#0a0;letter-spacing:.1em}
#volSlider{
  -webkit-appearance:none;appearance:none;width:90px;height:3px;
  background:rgba(0,255,0,.15);outline:none;border-radius:2px;cursor:pointer;
}
#volSlider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:10px;height:10px;
  background:#0f0;border-radius:50%;box-shadow:0 0 6px #0f0;cursor:pointer;
}
#volSlider::-moz-range-thumb{
  width:10px;height:10px;background:#0f0;border:none;
  border-radius:50%;box-shadow:0 0 6px #0f0;cursor:pointer;
}
#timeDisplay{font-size:.55rem;color:#0a0;letter-spacing:.1em;min-width:80px;text-align:center;flex-shrink:0}

#cursor{position:fixed;width:20px;height:20px;border:1px solid #0f0;border-radius:50%;
  pointer-events:none;z-index:999;box-shadow:0 0 10px #0f0,inset 0 0 5px #0f0}
#cursor::after{content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:10px;color:#0f0}

@keyframes glitch{
  0%,92%,100%{transform:translate(0);filter:none}
  93%{transform:translate(-5px,2px);filter:hue-rotate(90deg)}
  94%{transform:translate(5px,-2px);filter:hue-rotate(-90deg)}
  95%{transform:translate(-3px,-1px);filter:hue-rotate(45deg)}
  96%{transform:translate(3px,1px);filter:none}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.85}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes digitFlicker{0%,100%{opacity:1}50%{opacity:.95}}
@keyframes fadeIn{to{opacity:.9}}