:root {
  --ink: #110817;
  --paper: #f1c47e;
  --acid: #a7ff18;
  --green: #60f11f;
  --pink: #ff4ecb;
  --cyan: #29e7ff;
  --violet: #8d35ff;
  --cream: #fff5cf;
  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: #050207;
  color: var(--cream);
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

button, a { font: inherit; }
button { color: inherit; }

.stage {
  position: relative;
  isolation: isolate;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #180525;
  box-shadow: 0 0 80px #000;
}

.bg,
.spotlight,
.scanlines,
.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg {
  z-index: -5;
  inset: -2.5%;
  background: linear-gradient(90deg, rgba(7, 1, 13, .92) 0%, rgba(18, 4, 31, .76) 41%, rgba(13, 4, 21, .2) 72%),
              url("assets/psychedelic-bg.webp") center / cover no-repeat;
  transform: translate(calc(var(--mx) * -8px), calc(var(--my) * -6px)) scale(1.04);
  transition: transform .18s ease-out;
}

.spotlight {
  z-index: -3;
  background: radial-gradient(circle at calc(50% + var(--mx) * 15%) calc(50% + var(--my) * 15%), rgba(68, 255, 0, .13), transparent 25%);
  mix-blend-mode: screen;
}

.scanlines {
  z-index: 20;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.7) 4px 5px);
  mix-blend-mode: multiply;
}

.noise {
  z-index: 21;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: noise-jump .22s steps(2) infinite;
}

.topbar {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  padding: 1.5% 2.4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--cream);
  text-decoration: none;
  font-weight: 1000;
  font-size: clamp(.75rem, 1.1vw, 1.35rem);
  letter-spacing: .11em;
  text-shadow: 3px 3px 0 #000;
}

.brand img {
  width: clamp(34px, 3vw, 58px);
  height: clamp(34px, 3vw, 58px);
  border: 3px solid var(--ink);
  border-radius: 46% 54% 40% 60%;
  transform: rotate(-5deg);
  box-shadow: 4px 4px 0 var(--pink);
}

.nav { display: flex; gap: clamp(.35rem, .7vw, .8rem); }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .65em 1.05em;
  color: var(--cream);
  background: rgba(12, 4, 18, .82);
  border: 2px solid var(--cream);
  text-decoration: none;
  font-size: clamp(.62rem, .74vw, .92rem);
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 var(--violet);
  transition: transform .16s, box-shadow .16s, color .16s;
}

.nav-link--acid {
  color: var(--ink);
  background: var(--acid);
  border-color: var(--ink);
  transform: rotate(1deg);
  box-shadow: 4px 4px 0 var(--pink);
}

.nav-link:hover,
.nav-link:focus-visible {
  transform: rotate(0) translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--cyan);
  outline: none;
}

.hero {
  position: absolute;
  inset: 9.5% 2.4% 7.2%;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 1.8%;
}

.copy-column {
  position: relative;
  z-index: 3;
  align-self: center;
  padding-left: 1.2%;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 .3em;
  color: var(--cyan);
  font-family: "Courier New", monospace;
  font-size: clamp(.65rem, .9vw, 1.08rem);
  font-weight: 900;
  letter-spacing: .13em;
}

.status-dot {
  width: .72em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 .24em rgba(167,255,24,.2), 0 0 1em var(--acid);
  animation: blink 1.1s steps(2) infinite;
}

.title {
  margin: 0;
  line-height: .69;
  letter-spacing: -.06em;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(4rem, 8.3vw, 10rem);
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.title-line {
  position: relative;
  display: block;
  width: max-content;
  -webkit-text-stroke: clamp(2px, .2vw, 5px) var(--ink);
  filter: drop-shadow(.055em .06em 0 var(--ink));
}

.title-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--cyan);
  transform: translate(.045em, -.025em);
  opacity: .8;
}

.title-line--green { color: var(--green); }
.title-line--pink { color: var(--pink); margin-left: .2em; }

.tagline {
  width: max-content;
  max-width: 100%;
  margin: 1.2em 0 1em;
  padding: .42em .7em;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  font-size: clamp(.7rem, 1vw, 1.2rem);
  font-weight: 1000;
  letter-spacing: .13em;
  transform: rotate(.5deg);
  box-shadow: 5px 5px 0 var(--pink);
}

.tagline span { color: #7622ae; }

.actions {
  display: flex;
  align-items: stretch;
  gap: clamp(.45rem, .8vw, .9rem);
}

.ca-button,
.wake-button {
  position: relative;
  min-height: clamp(48px, 4.1vw, 72px);
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
}

.ca-button {
  min-width: min(18vw, 340px);
  padding: .65em 1.2em .5em;
  color: var(--ink);
  background: var(--acid);
  box-shadow: 6px 7px 0 var(--pink);
  font-weight: 1000;
  text-align: left;
  transform: rotate(-.6deg);
}

.ca-label {
  display: block;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.8rem, 1.15vw, 1.35rem);
  letter-spacing: .02em;
}

.copy-hint {
  display: block;
  margin-top: .15em;
  font: 700 clamp(.5rem, .5vw, .68rem) "Courier New", monospace;
  letter-spacing: .12em;
}

.wake-button {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .5em 1em;
  color: var(--cream);
  background: var(--ink);
  border-color: var(--cream);
  box-shadow: 6px 7px 0 var(--cyan);
  font-size: clamp(.62rem, .8vw, 1rem);
  font-weight: 900;
  letter-spacing: .07em;
  transform: rotate(.8deg);
}

.ca-button:hover,
.ca-button:focus-visible,
.wake-button:hover,
.wake-button:focus-visible {
  outline: none;
  filter: saturate(1.3) brightness(1.08);
  transform: translate(-3px, -3px) rotate(0);
  box-shadow: 10px 11px 0 var(--violet);
}

.ca-button:active,
.wake-button:active { transform: translate(3px, 4px); box-shadow: 2px 2px 0 var(--pink); }

.lore-card {
  position: relative;
  width: min(90%, 760px);
  margin-top: clamp(1rem, 2vw, 2.4rem);
  padding: 1.15em 1.35em 1em;
  color: #231325;
  background: #e9c58a;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0,0,0,.8);
  transform: rotate(-.4deg);
  font-family: "Courier New", monospace;
  font-size: clamp(.58rem, .72vw, .9rem);
  line-height: 1.43;
}

.lore-card p { margin: 0; }
.lore-card .lore-label { margin-bottom: .45em; font-weight: 1000; letter-spacing: .08em; }

.tape {
  position: absolute;
  top: -14%;
  left: 37%;
  width: 24%;
  height: 24%;
  background: rgba(187, 255, 48, .66);
  border-left: 2px dashed rgba(18,8,23,.5);
  border-right: 2px dashed rgba(18,8,23,.5);
  transform: rotate(2deg);
}

.character-zone {
  position: relative;
  height: 90%;
  align-self: center;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.character {
  position: relative;
  z-index: 5;
  width: min(37vw, 720px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translate(calc(var(--mx) * 11px), calc(var(--my) * 9px)) rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 5deg));
  animation: float 4.6s ease-in-out infinite;
  transition: filter .25s;
}

.character:focus-visible { outline: 5px dashed var(--cyan); outline-offset: 5px; }
.character:hover { filter: saturate(1.2) brightness(1.05); }

.character-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(6% 8%, 91% 2%, 98% 19%, 96% 89%, 76% 98%, 12% 94%, 2% 74%, 4% 23%);
  border-radius: 8%;
  user-select: none;
}

.character-img--main {
  filter: drop-shadow(12px 17px 0 rgba(0,0,0,.72)) drop-shadow(0 0 28px rgba(161,38,255,.55));
}

.character-img--ghost {
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.character-shadow {
  position: absolute;
  left: 14%;
  right: 8%;
  bottom: -3%;
  height: 10%;
  border-radius: 50%;
  background: #000;
  filter: blur(12px);
  opacity: .7;
  animation: shadow-pulse 4.6s ease-in-out infinite;
}

.character.is-awake .character-img--main { animation: violent-wobble .38s steps(2) 4; }
.character.is-awake .ghost-a { opacity: .48; animation: glitch-a .16s steps(2) 7; filter: hue-rotate(80deg); }
.character.is-awake .ghost-b { opacity: .42; animation: glitch-b .13s steps(2) 8; filter: hue-rotate(210deg); }

.zzz {
  position: absolute;
  z-index: 9;
  top: 10%;
  right: 1%;
  color: var(--cyan);
  font: 1000 clamp(1rem, 2.2vw, 2.7rem) Impact, sans-serif;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(9deg);
}

.zzz i { position: absolute; font-style: normal; animation: zzz 2.8s ease-in-out infinite; }
.zzz i:nth-child(2) { transform: translate(1.1em, -1em) scale(.75); animation-delay: .45s; }
.zzz i:nth-child(3) { transform: translate(1.8em, -2em) scale(.5); animation-delay: .9s; }
.character.is-awake .zzz { opacity: 0; }

.scribble {
  position: absolute;
  z-index: 8;
  margin: 0;
  padding: .35em .55em;
  color: var(--ink);
  background: var(--cyan);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--pink);
  font: 1000 clamp(.6rem, .9vw, 1.1rem) "Courier New", monospace;
  letter-spacing: .04em;
}

.scribble--top { top: 3%; right: 6%; transform: rotate(7deg); }
.scribble--side { left: -3%; bottom: 18%; transform: rotate(-10deg); background: var(--acid); }

.warning-sticker {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 3%;
  width: clamp(82px, 7vw, 140px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--ink);
  background: var(--pink);
  border: 4px solid var(--ink);
  border-radius: 50% 45% 48% 42%;
  box-shadow: 7px 8px 0 var(--cyan);
  transform: rotate(12deg);
  animation: sticker-spin 9s ease-in-out infinite;
}

.warning-sticker span { font-size: .55em; font-weight: 1000; letter-spacing: .12em; }
.warning-sticker strong { font-size: clamp(.75rem, 1vw, 1.2rem); }

.orbit {
  position: absolute;
  border: clamp(3px, .3vw, 6px) dashed currentColor;
  border-radius: 50%;
  pointer-events: none;
}

.orbit--one { width: 78%; aspect-ratio: 1; color: rgba(41,231,255,.4); animation: orbit 18s linear infinite; }
.orbit--two { width: 94%; aspect-ratio: 1; color: rgba(255,78,203,.28); animation: orbit 26s linear reverse infinite; }

.footer {
  position: absolute;
  z-index: 30;
  left: 2.5%;
  right: 2.5%;
  bottom: 1.8%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255,245,207,.78);
  font: 700 clamp(.48rem, .55vw, .7rem) "Courier New", monospace;
  letter-spacing: .08em;
}

.footer p { margin: 0; }

.toast,
.groan {
  position: absolute;
  z-index: 100;
  left: 50%;
  pointer-events: none;
  opacity: 0;
}

.toast {
  bottom: 5%;
  padding: .8em 1.2em;
  color: var(--ink);
  background: var(--cyan);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  font-size: clamp(.7rem, 1vw, 1.15rem);
  font-weight: 1000;
  transform: translate(-50%, 18px) rotate(-2deg);
  transition: opacity .2s, transform .2s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }

.groan {
  top: 42%;
  color: var(--acid);
  font: 1000 clamp(3rem, 8vw, 9rem) Impact, sans-serif;
  -webkit-text-stroke: 4px var(--ink);
  text-shadow: 9px 9px 0 var(--pink);
  transform: translate(-50%, -50%) rotate(-9deg) scale(.4);
}

.groan.show { animation: groan-pop 1.15s ease-out both; }

.particle {
  position: absolute;
  z-index: 90;
  width: clamp(8px, .8vw, 16px);
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  pointer-events: none;
  animation: particle-burst .8s ease-out forwards;
}

.stage.shake { animation: screen-shake .45s steps(2) 2; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2.2%; }
}
@keyframes shadow-pulse { 50% { transform: scale(.84); opacity: .45; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes noise-jump { 0% { transform: translate(0); } 25% { transform: translate(-1%,1%); } 50% { transform: translate(1%,-1%); } 75% { transform: translate(1%,1%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes sticker-spin { 50% { transform: rotate(-8deg) scale(1.04); } }
@keyframes zzz { 0%, 100% { opacity: 0; translate: 0 .25em; } 30%, 70% { opacity: 1; } 70% { translate: 0 -.25em; } }
@keyframes violent-wobble { 0% { transform: translate(0) rotate(0); } 25% { transform: translate(-2%,1%) rotate(-2deg); } 50% { transform: translate(2%,-1%) rotate(2deg); } 75% { transform: translate(-1%,2%) rotate(-1deg); } }
@keyframes glitch-a { 0% { transform: translate(-3%,0); clip-path: inset(10% 0 68%); } 50% { transform: translate(4%,0); clip-path: inset(55% 0 18%); } }
@keyframes glitch-b { 0% { transform: translate(3%,0); clip-path: inset(72% 0 5%); } 50% { transform: translate(-4%,0); clip-path: inset(30% 0 45%); } }
@keyframes screen-shake { 0%,100% { transform: translate(0); } 25% { transform: translate(-7px,4px); } 50% { transform: translate(6px,-4px); } 75% { transform: translate(-4px,-5px); } }
@keyframes groan-pop { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-9deg) scale(.4); } 20% { opacity: 1; transform: translate(-50%,-50%) rotate(3deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-65%) rotate(-4deg) scale(1.12); } }
@keyframes particle-burst { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(380deg) scale(.25); } }

@media (max-aspect-ratio: 1/1) {
  body { display: block; overflow: auto; }
  .stage { width: 100%; height: auto; min-height: 100dvh; aspect-ratio: auto; overflow: hidden; }
  .topbar { position: relative; height: auto; padding: 1rem; }
  .brand span { display: none; }
  .hero { position: relative; inset: auto; min-height: 900px; padding: 1.5rem 1rem 5rem; grid-template-columns: 1fr; }
  .copy-column { padding: 0; }
  .title { font-size: clamp(4rem, 23vw, 7.8rem); }
  .tagline { font-size: .72rem; }
  .actions { flex-direction: column; align-items: flex-start; }
  .ca-button { min-width: min(92vw, 390px); }
  .lore-card { width: 100%; font-size: .72rem; }
  .character-zone { min-height: 470px; }
  .character { width: min(88vw, 550px); }
  .footer { position: absolute; font-size: .48rem; }
  .footer p:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .bg, .character { transform: none; }
}