*{box-sizing:border-box}
:root{
  --bg:#040108;
  --panel:rgba(12,3,20,.75);
  --text:#f4ecff;
  --muted:#cdbde0;
  --purple:#a24dff;
  --red:#ff234f;
  --border:rgba(206,157,255,.28);
}
html,body{min-height:100%;margin:0}
body{
  min-height:100vh;
  overflow:hidden;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 10%,rgba(69,20,105,.30),transparent 36%),
    linear-gradient(180deg,#07010e 0%,#020104 100%);
}
.scene{
  min-height:100vh;display:grid;place-items:center;position:relative;
  isolation:isolate;padding:30px 18px
}
.card{
  width:min(780px,94vw);text-align:center;
  padding:clamp(24px,4vw,52px);
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(21,6,33,.84),rgba(4,1,8,.76));
  border-radius:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.68),inset 0 0 50px rgba(90,30,145,.11);
  backdrop-filter:blur(10px);
  position:relative;z-index:4
}
.ghost{
  width:clamp(120px,20vw,190px);
  filter:drop-shadow(0 0 18px rgba(188,136,255,.66));
  animation:floatGhost 4s ease-in-out infinite;user-select:none
}
.eyebrow{
  letter-spacing:.28em;font-size:.78rem;color:#c49eea;margin:12px 0 0
}
h1{
  margin:2px 0 0;
  font-size:clamp(5.2rem,18vw,11rem);
  line-height:.88;letter-spacing:-.05em;font-weight:1000;
  text-shadow:0 0 10px rgba(255,255,255,.22),0 0 24px rgba(162,77,255,.72),0 0 60px rgba(98,27,166,.62)
}
h1 .accent{color:#b872ff;animation:flicker 4.8s infinite}
h2{
  font-size:clamp(1.2rem,4vw,2rem);margin:22px 0 10px;letter-spacing:.08em
}
.message{
  max-width:610px;margin:0 auto;color:var(--muted);line-height:1.65;
  font-size:clamp(.98rem,2vw,1.08rem)
}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{
  min-width:170px;padding:14px 24px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;font-weight:800;letter-spacing:.06em;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;font:inherit
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px) scale(1.03);outline:none}
.btn-primary{
  color:#fff;background:linear-gradient(135deg,#7d24d9,#d32362);
  box-shadow:0 0 24px rgba(162,77,255,.36)
}
.btn-primary:hover{box-shadow:0 0 36px rgba(162,77,255,.65)}
.btn-secondary{color:#eee5f8;background:rgba(255,255,255,.055)}
.sound-toggle{
  margin-top:18px;border:0;color:#c9b8dd;background:transparent;
  cursor:pointer;font-size:.92rem
}
.sound-toggle:hover{color:#fff}
.tiny{margin-top:22px;color:rgba(255,255,255,.34);font-size:.72rem;letter-spacing:.24em}
.moon{
  position:absolute;width:420px;height:420px;border-radius:50%;
  top:-220px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 46% 42%,rgba(218,184,255,.28),rgba(86,22,133,.08) 64%,transparent 67%);
  z-index:0
}
.fog{
  position:fixed;width:160vw;height:44vh;left:-30vw;bottom:-4vh;pointer-events:none;
  background:url("/error-assets/fog.svg") repeat-x center/760px 260px;
  opacity:.18;filter:blur(4px);z-index:2
}
.fog-a{animation:fogMove 38s linear infinite}
.fog-b{bottom:10vh;opacity:.10;transform:scaleY(.75);animation:fogMoveReverse 56s linear infinite}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:8;opacity:.035;
  background-image:repeating-radial-gradient(circle at 0 0,transparent 0,#fff 1px,transparent 2px);
  background-size:4px 4px;mix-blend-mode:overlay
}
.vignette{position:fixed;inset:0;box-shadow:inset 0 0 180px 70px #000;pointer-events:none;z-index:7}
.pulse-red{animation:redPulse 2.4s ease-in-out infinite}
@keyframes floatGhost{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes flicker{0%,14%,16%,19%,22%,80%,100%{opacity:1}15%,18%,21%{opacity:.34}81%{opacity:.62}}
@keyframes fogMove{from{transform:translateX(0)}to{transform:translateX(-520px)}}
@keyframes fogMoveReverse{from{transform:translateX(-520px) scaleY(.75)}to{transform:translateX(0) scaleY(.75)}}
@keyframes redPulse{0%,100%{text-shadow:0 0 10px rgba(255,255,255,.22),0 0 24px rgba(255,35,79,.5),0 0 60px rgba(140,0,40,.4)}50%{text-shadow:0 0 14px rgba(255,255,255,.28),0 0 36px rgba(255,35,79,.85),0 0 80px rgba(140,0,40,.65)}}
@media(max-height:760px){
  .card{padding-top:18px;padding-bottom:18px}.ghost{width:105px}
  h1{font-size:clamp(4.7rem,15vh,7.5rem)}h2{margin-top:10px}
}
@media(max-width:520px){
  body{overflow-y:auto}.scene{min-height:100svh}.card{border-radius:20px}
  .actions{flex-direction:column}.btn{width:100%}
}