:root{
  --white:#fff;
  --muted:rgba(255,255,255,.85);
  --accent1:#ff0044;
  --accent2:#00f0ff;
  --ui-font:'Special Elite', monospace;
  --ep-font:'Creepster', cursive;
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:var(--white);font-family:var(--ui-font);overflow:hidden}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Canvas background */
#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

/* overlays */
.overlays{position:fixed;inset:0;z-index:45;pointer-events:none}
.grain{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.22;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NgYGD4DwABAgEAf4c5NAAAAABJRU5ErkJggg==");animation:grainMove .35s steps(2) infinite}
@keyframes grainMove{0%{transform:translate(0,0)}25%{transform:translate(-5%,4%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-4%,0)}100%{transform:translate(0,6%)}}
.scanlines{position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(transparent,transparent 2px, rgba(255,255,255,0.03) 3px);mix-blend-mode:overlay}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%);mix-blend-mode:multiply}
.vhs{position:absolute;inset:0;mix-blend-mode:screen;opacity:.06;background-image:linear-gradient(transparent 92%, rgba(255,255,255,0.02) 100%);animation:vhsShake 6s infinite}
@keyframes vhsShake{0%{transform:translateX(0)}50%{transform:translateX(.6px)}100%{transform:translateX(0)}}

/* counter top-right */
.listeners-ui{
  position:fixed;
  top:18px;
  right:18px;
  z-index:9999;
  font-family:'Special Elite', monospace;
  pointer-events:none;
}

.terminal-box{
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.2);
  padding:10px 14px;
  backdrop-filter:blur(4px);
  box-shadow:
  0 0 8px rgba(255,255,255,0.08),
  inset 0 0 6px rgba(255,255,255,0.05);
}

.terminal-label{
  color:#bfbfbf;
  font-size:13px;
  margin-right:6px;
  opacity:.9;
}

.terminal-count{
  color:#ffffff;
  font-size:15px;
  letter-spacing:2px;
  position:relative;
}

/* glitch RGB */

.terminal-count::before,
.terminal-count::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:.6;
}

.terminal-count::before{
  color:#ff0040;
  transform:translate(1px,-1px);
  animation:glitch1 0.3s infinite;
}

.terminal-count::after{
  color:#00ffff;
  transform:translate(-1px,1px);
  animation:glitch2 0.35s infinite;
}

@keyframes glitch1{
  0%{transform:translate(1px,-1px)}
  50%{transform:translate(2px,0)}
  100%{transform:translate(1px,-1px)}
}

@keyframes glitch2{
  0%{transform:translate(-1px,1px)}
  50%{transform:translate(-2px,0)}
  100%{transform:translate(-1px,1px)}
}

/* stage center; logo slightly up */
.stage{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none}
.hero{display:flex;flex-direction:column;align-items:center;gap:.8rem;pointer-events:auto;transform:translateY(-48px)}

/* logo layers (centered) */
.logo-wrap{position:relative;width:min(900px,86vw);height:auto;display:flex;align-items:center;justify-content:center;z-index:30}
.logo-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76%;max-width:760px;user-select:none;pointer-events:none}
.logo-layer.base{z-index:10}
.logo-layer.red{z-index:11;opacity:.88;filter:drop-shadow(6px 0 rgba(255,0,0,.4));mix-blend-mode:screen}
.logo-layer.green{z-index:12;opacity:.78;filter:drop-shadow(0 0 rgba(0,255,0,.35));mix-blend-mode:screen}
.logo-layer.blue{z-index:13;opacity:.82;filter:drop-shadow(-6px 0 rgba(0,150,255,.35));mix-blend-mode:screen}

/* slices container sits above all layers */
.logo-slices{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;pointer-events:none}

/* country message */
.country-msg{font-size:18px;letter-spacing:1px;margin-top:90px;text-transform:uppercase;font-family:var(--ep-font);color:var(--accent1);text-shadow:0 0 6px rgba(255,0,68,.06)}

/* enter button */
.enter{margin-top:6px;padding:.6rem 1rem;font-size:30px;letter-spacing:6px;background:transparent;border:none;color:var(--white);cursor:pointer;pointer-events:auto;font-family:var(--ep-font)}
.enter:focus{outline:2px solid rgba(255,255,255,.12);outline-offset:3px}

/* player bottom-left */
.player{position:fixed;left:18px;bottom:18px;z-index:48;background:rgba(0,0,0,.64);padding:.6rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.04);backdrop-filter:blur(4px);pointer-events:auto;display:flex;gap:.6rem;align-items:center}
.track-title{font-size:12px}
.track-ep{font-size:11px;color:var(--muted);font-family:var(--ep-font)}
.btn{background:none;border:1px solid rgba(255,255,255,.08);padding:.25rem .6rem;color:var(--white);cursor:pointer}

/* booking bottom-center */
.booking{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:48;color:var(--muted);font-size:12px;pointer-events:auto}

/* interference messages */
.messages{position:fixed;inset:0;z-index:47;pointer-events:none;overflow:visible}
.msg{position:absolute;color:rgba(255,255,255,.08);font-family:var(--ui-font);font-size:14px;white-space:nowrap;transform-origin:center;animation:msgIn .6s ease-out forwards}
.msg.glitch{filter:drop-shadow(-1px 0 rgba(255,0,0,.45)) drop-shadow(1px 0 rgba(0,255,255,.45));opacity:.95}
@keyframes msgIn{0%{opacity:0;transform:translateY(6px) scale(.96) rotate(-2deg)}30%{opacity:1;transform:translateY(0) scale(1.02) rotate(3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}}


/* responsive tweaks */
@media (max-width:720px){
  .logo-layer{width:86%}
  .enter{font-size:16px;letter-spacing:4px}
  .msg{font-size:12px}
}