:root{
  --bg:#000;
  --panel:rgba(0,0,0,.78);
  --white:rgba(255,255,255,.95);
  --neon1:#00ffff;
  --neon2:#ff00ff;
  --neon3:#ffff00;
  --neon4:#00ff66;
}

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

body{
  min-height:100vh;
  background:var(--bg);
  color:#fff;
  overflow:hidden;
  font-family:"Comic Sans MS","Trebuchet MS",Arial,sans-serif;
  cursor:crosshair;
}

/* HUD */
.hud{
  position:fixed;
  top:12px;
  left:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  z-index:50;
  pointer-events:none;
}
.badge{
  background:rgba(0,0,0,.72);
  border:2px solid rgba(255,255,255,.55);
  padding:6px 8px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(0,255,255,.16);
}

/* Stars */
.stars,.stars2,.stars3{
  position:fixed;
  inset:0;
  background-repeat:repeat;
  pointer-events:none;
  image-rendering:pixelated;
}

.stars{
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 55%),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent 55%),
    radial-gradient(1px 1px at 70% 40%, #fff, transparent 55%),
    radial-gradient(1px 1px at 85% 15%, #fff, transparent 55%),
    radial-gradient(1px 1px at 45% 55%, #fff, transparent 55%),
    radial-gradient(1px 1px at 90% 70%, #fff, transparent 55%);
  background-size:260px 260px;
  animation:drift 14s linear infinite;
  opacity:.55;
}
.stars2{
  background-image:
    radial-gradient(1px 1px at 20% 30%, #a7f3ff, transparent 55%),
    radial-gradient(1px 1px at 60% 10%, #a7f3ff, transparent 55%),
    radial-gradient(1px 1px at 40% 90%, #a7f3ff, transparent 55%),
    radial-gradient(1px 1px at 85% 60%, #a7f3ff, transparent 55%);
  background-size:340px 340px;
  animation:drift2 22s linear infinite;
  opacity:.42;
}
.stars3{
  background-image:
    radial-gradient(2px 2px at 25% 65%, #fff, transparent 55%),
    radial-gradient(2px 2px at 75% 35%, #fff, transparent 55%);
  background-size:520px 520px;
  animation:drift3 36s linear infinite;
  opacity:.30;
}

@keyframes drift{  to{ transform:translateY(140px); } }
@keyframes drift2{ to{ transform:translateY(220px); } }
@keyframes drift3{ to{ transform:translateY(300px); } }

/* Sparkles */
.sparkle{
  position:fixed;
  width:10px;
  height:10px;
  border-radius:999px;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35));
  animation:pop 650ms ease-out forwards;
}
@keyframes pop{
  0%{ transform:translate(0,0) scale(.2) rotate(0deg); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(160deg); opacity:0; }
}

/* Layout */
.wrap{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.panel{
  width:min(760px,95vw);
  background:var(--panel);
  border:3px solid #fff;
  padding:22px 18px 16px;
  position:relative;

  box-shadow:
    0 0 0 4px rgba(0,255,255,.25),
    0 0 0 8px rgba(255,0,255,.18),
    0 0 40px rgba(0,255,255,.35),
    0 0 60px rgba(255,0,255,.25);

  animation:panelGlow 1.8s linear infinite;
  transform-style:preserve-3d;
  transition:transform 120ms ease;
  user-select:none;
}
.panel.dragging{
  cursor:grabbing;
  transition:none;
}

@keyframes panelGlow{ to{ filter:hue-rotate(360deg); } }

.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    transparent 2px,
    transparent 6px
  );
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:overlay;
}

/* Titlebar */
.titlebar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  margin-bottom:14px;
  position:relative;

  border:2px solid rgba(255,255,255,.55);
  background:linear-gradient(90deg,#001a33,#3a005a,#001a33);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.25),
    inset -2px -2px 0 rgba(0,0,0,.75);

  cursor:grab;
}

.title{
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:22px;

  background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3),var(--neon4));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow:0 0 12px rgba(255,255,255,.22);
  animation:blink 1.4s steps(2,end) infinite;
}
@keyframes blink{
  0%,70%{ opacity:1; }
  72%,78%{ opacity:.2; }
  100%{ opacity:1; }
}

.buttons{
  position:absolute;
  right:8px;
  display:flex;
  gap:6px;
}
.btn{
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.2));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.25);
}

/* Content */
.content{
  text-align:center;
  padding:10px 8px 16px;
}

.logo{
  font-size:58px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
  margin:10px 0 6px;

  color:#fff;
  text-shadow:
    3px 3px 0 rgba(0,255,255,.75),
    -3px -3px 0 rgba(255,0,255,.75),
    0 0 20px rgba(255,255,255,.15);

  animation:wobble 1.25s ease-in-out infinite;
  cursor:pointer;
}
@keyframes wobble{
  0%,100%{ transform:rotate(-1deg) translateY(0); }
  50%{ transform:rotate(1deg) translateY(-3px); }
}

.tagline{
  color:var(--neon4);
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:10px;
  text-shadow:0 0 12px rgba(0,255,102,.35);
}

.toggles{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:12px 0 14px;
}
.toggle{
  border:3px outset rgba(255,255,255,.70);
  padding:8px 10px;
  background:rgba(255,255,255,.06);
  color:var(--white);

  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;

  box-shadow:0 0 18px rgba(0,255,255,.15);
  transition:transform 100ms ease, filter 120ms ease;
}
.toggle:hover{ filter:brightness(1.12); }
.toggle:active{ border-style:inset; transform:translateY(1px); }

.marquee{
  border:2px dashed rgba(255,255,255,.45);
  background:rgba(255,255,255,.06);
  padding:10px 8px;
  margin:12px 0 16px;
}
marquee{
  font-weight:900;
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(0,255,255,.35);
}

.email{
  display:inline-block;
  padding:12px 16px;

  border:3px outset rgba(255,255,255,.70);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  color:#fff;
  text-decoration:none;

  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;

  box-shadow:0 0 18px rgba(0,255,255,.25);
  position:relative;
  overflow:hidden;
}
.email::before{
  content:"";
  position:absolute;
  inset:-60% -40%;
  background:
    radial-gradient(circle, rgba(255,0,255,.35), transparent 55%),
    radial-gradient(circle, rgba(0,255,255,.28), transparent 55%),
    radial-gradient(circle, rgba(255,255,0,.20), transparent 55%);
  transform:translateX(-35%);
  animation:glowSweep 2.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes glowSweep{
  0%{ transform:translateX(-45%) rotate(0deg); opacity:.5; }
  55%{ transform:translateX(45%) rotate(180deg); opacity:.9; }
  100%{ transform:translateX(45%) rotate(180deg); opacity:.6; }
}
.email:hover{
  filter:brightness(1.2);
  box-shadow:0 0 30px rgba(255,0,255,.40), 0 0 26px rgba(0,255,255,.30);
  transform:translateY(-2px);
}
.email:active{
  border-style:inset;
  transform:translateY(1px);
}

.divider{
  margin:18px auto 10px;
  height:6px;
  width:min(500px,90%);
  background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3),var(--neon4));
  box-shadow:0 0 18px rgba(255,255,255,.12);
  animation:hue 2.2s linear infinite;
}
@keyframes hue{ to{ filter:hue-rotate(360deg); } }

.footer{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.70);
}

/* Modes */
body.party .panel{ animation-duration:.8s; }
body.party .logo{ animation-duration:.75s; }
body.party marquee{ text-shadow:0 0 18px rgba(255,0,255,.35); }

body.turbo .stars{ animation-duration:6s; }
body.turbo .stars2{ animation-duration:9s; }
body.turbo .stars3{ animation-duration:14s; }

body.silent .panel,
body.silent .logo,
body.silent .divider,
body.silent .email::before,
body.silent .stars,
body.silent .stars2,
body.silent .stars3{
  animation:none;
}

/* CRT */
body.crt{ filter:saturate(1.15) contrast(1.05); }
body.crt::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode:overlay;
  opacity:.35;
}

/* Shake reward */
@keyframes shake{
  0%{ transform:translate(0,0); }
  20%{ transform:translate(-2px,1px); }
  40%{ transform:translate(2px,-1px); }
  60%{ transform:translate(-2px,-1px); }
  80%{ transform:translate(2px,1px); }
  100%{ transform:translate(0,0); }
}
body.shake .wrap{ animation:shake 240ms linear; }

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);

  background:rgba(0,0,0,.75);
  border:2px solid rgba(255,255,255,.55);
  padding:8px 10px;

  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;

  box-shadow:0 0 18px rgba(0,255,255,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  z-index:60;
}
.toast.show{ opacity:1; }

/* Help overlay */
.help{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  place-items:center;
  z-index:70;
}
.help.show{ display:grid; }

.helpCard{
  width:min(620px,92vw);
  background:rgba(0,0,0,.80);
  border:3px solid rgba(255,255,255,.65);
  box-shadow:0 0 40px rgba(0,255,255,.25), 0 0 60px rgba(255,0,255,.20);
  padding:16px 14px;
}
.helpTitle{
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;

  background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3),var(--neon4));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.helpList{
  list-style:none;
  display:grid;
  gap:8px;
  margin-bottom:12px;
}
.helpBtn{
  width:100%;
  border:3px outset rgba(255,255,255,.70);
  padding:10px 12px;
  background:rgba(255,255,255,.06);
  color:var(--white);
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
}
.helpBtn:active{ border-style:inset; transform:translateY(1px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .stars,.stars2,.stars3,.panel,.logo,.divider,.email::before,.sparkle{ animation:none !important; }
  .panel{ transition:none !important; transform:none !important; }
}