:root {
  --void: #07030f;
  --pink: #ff2bd6;
  --cyan: #19f6ff;
  --acid: #c6ff00;
  --yellow: #ffd400;
  --violet: #8a5cff;
  --ink: #f4f0ff;
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------- HUD ---------------- */
.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s .4s;
}
body.playing .hud { opacity: 1; }

.hud-tl { position: absolute; top: 18px; left: 20px; }
.back {
  display: inline-block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(7, 3, 15, .55);
  pointer-events: auto;
}
.back:hover, .back:focus-visible { background: var(--yellow); color: #000; border-color: var(--yellow); outline: none; }
.intro-back { margin: 0 0 22px; }
.logo { display: flex; flex-direction: column; line-height: .92; font-family: var(--display); }
.logo span { font-size: 11px; letter-spacing: .32em; color: var(--cyan); font-weight: 700; }
.logo b {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--pink), var(--yellow) 70%, var(--acid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hud-tr {
  position: absolute;
  top: 18px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.chaos { text-align: right; }
.chaos-label { font-size: 10px; letter-spacing: .4em; color: var(--acid); font-weight: 700; }
.chaos-val {
  font-family: var(--display);
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chaos-bar {
  width: 190px;
  height: 9px;
  border: 1px solid var(--acid);
  margin-top: 6px;
  transform: skewX(-24deg);
}
.chaos-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--acid) 0 6px, transparent 6px 8px);
  transition: width .35s cubic-bezier(.2, 1.4, .4, 1);
}

.btns { display: flex; gap: 6px; pointer-events: auto; }
.btns button {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(7, 3, 15, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s, color .15s, border-color .15s;
}
.btns button:hover, .btns button:focus-visible { background: var(--pink); border-color: var(--pink); color: #000; outline: none; }
.btns button[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }

.hud-bl { position: absolute; left: 20px; bottom: 56px; }
.speed {
  font-family: var(--display);
  font-weight: 900;
  font-size: 76px;
  line-height: .85;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: skewX(-10deg);
  font-variant-numeric: tabular-nums;
  text-shadow: 4px 4px 0 var(--pink);
}
.speed small {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--cyan);
  text-shadow: none;
}
.boost {
  width: 230px;
  height: 7px;
  background: rgba(255, 255, 255, .12);
  margin-top: 12px;
  transform: skewX(-24deg);
}
.boost i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transform-origin: left;
}

.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: var(--yellow);
  color: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 3px solid #000;
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: tick 38s linear infinite;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
}
.ticker-track span { padding: 0 20px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------------- SLAM TEXT ---------------- */
.slam {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
  padding: 0 16px;
}
.slam b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(54px, 13vw, 210px);
  line-height: .86;
  letter-spacing: -.03em;
  text-align: center;
  color: var(--yellow);
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--cyan);
  animation: slam 1.7s cubic-bezier(.2, 1.5, .3, 1) forwards;
}
.slam b small {
  display: inline-block;
  margin-top: .7em;
  padding: .45em .9em;
  font-family: var(--mono);
  font-size: max(12px, .1em);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: #000;
  background: var(--acid);
}
@keyframes slam {
  0% { transform: scale(2.8) rotate(-12deg); opacity: 0; filter: blur(8px); }
  14% { transform: scale(1) rotate(-4deg); opacity: 1; filter: blur(0); }
  20% { transform: scale(1.08) rotate(-3deg); }
  78% { transform: scale(1.02) rotate(-4deg); opacity: 1; }
  100% { transform: scale(.85) rotate(-6deg) translateY(-40px); opacity: 0; }
}

/* ---------------- TOUCH ---------------- */
.touch { display: none; }
body.playing.is-touch .touch { display: block; }
.stick {
  position: fixed;
  left: 22px;
  bottom: 62px;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .45);
  background: rgba(7, 3, 15, .35);
  touch-action: none;
}
.stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 24px var(--pink), inset 0 -6px 0 rgba(0, 0, 0, .25);
}
.touch-btns {
  position: fixed;
  right: 18px;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.touch-btns button {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 900;
  font-size: 12px;
  border: 3px solid #000;
  background: var(--yellow);
  color: #000;
  box-shadow: 4px 4px 0 var(--cyan);
  touch-action: none;
}
.touch-btns button:active, .touch-btns button.on { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--cyan); background: var(--acid); }
.is-touch .hud-bl { bottom: auto; top: 74px; left: 20px; }
.is-touch .speed { font-size: 40px; text-shadow: 3px 3px 0 var(--pink); }
.is-touch .boost { width: 140px; }

/* ---------------- INTRO ---------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(7, 3, 15, .1), rgba(7, 3, 15, .82) 72%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
  transition: opacity .9s, transform .9s cubic-bezier(.6, 0, .3, 1), visibility .9s;
}
.intro.gone { opacity: 0; visibility: hidden; transform: scale(1.25); }
.intro-inner { position: relative; width: min(1100px, 100% - 32px); }

.kicker {
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--cyan);
  text-transform: uppercase;
}
.title {
  font-family: var(--display);
  font-weight: 900;
  font-size: min(17vw, 230px);
  line-height: .82;
  letter-spacing: -.045em;
  margin: 16px 0 26px;
}
.title span { display: block; position: relative; width: max-content; }
.title span:nth-child(2) { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.title span::before,
.title span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-text-stroke: 0;
}
.title span::before { color: var(--pink); mix-blend-mode: screen; animation: glitchA 2.6s infinite steps(1); }
.title span::after { color: var(--cyan); mix-blend-mode: screen; animation: glitchB 3.3s infinite steps(1); }
@media (min-width: 720px) { .title span:nth-child(2) { margin-left: .45em; } }

@keyframes glitchA {
  0% { clip-path: inset(18% 0 62% 0); transform: translate(-7px, 2px); }
  6% { clip-path: inset(66% 0 8% 0); transform: translate(6px, -2px); }
  12%, 58% { clip-path: inset(100% 0 0 0); }
  60% { clip-path: inset(38% 0 44% 0); transform: translate(-12px, 0); }
  64%, 100% { clip-path: inset(100% 0 0 0); }
}
@keyframes glitchB {
  0%, 30% { clip-path: inset(100% 0 0 0); }
  32% { clip-path: inset(8% 0 70% 0); transform: translate(9px, 1px); }
  36% { clip-path: inset(52% 0 30% 0); transform: translate(-5px, -1px); }
  40%, 82% { clip-path: inset(100% 0 0 0); }
  84% { clip-path: inset(74% 0 4% 0); transform: translate(7px, 0); }
  88%, 100% { clip-path: inset(100% 0 0 0); }
}

.sticker {
  position: absolute;
  right: 2%;
  top: 4%;
  width: clamp(92px, 14vw, 176px);
  aspect-ratio: 1;
  filter: drop-shadow(6px 6px 0 var(--pink));
  animation: wobble 5s ease-in-out infinite;
}
.sticker i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-style: normal;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(11px, 1.55vw, 19px);
  line-height: 1;
  color: #000;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 13%, 77% 6%, 79% 23%, 96% 25%, 88% 40%, 100% 52%, 86% 62%, 92% 78%, 75% 79%, 71% 96%, 56% 87%, 43% 100%, 35% 85%, 18% 92%, 18% 75%, 2% 70%, 12% 56%, 0% 43%, 14% 34%, 8% 18%, 25% 18%, 30% 2%, 43% 12%);
}
@keyframes wobble {
  0%, 100% { transform: rotate(12deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.06); }
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 12px;
  color: rgba(244, 240, 255, .78);
  list-style: none;
  margin-bottom: 30px;
}
.keys li { display: flex; align-items: center; gap: 8px; }
kbd {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-bottom-width: 3px;
  border-radius: 4px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
.touch-hint { display: none; font-size: 12px; color: rgba(244, 240, 255, .78); margin-bottom: 26px; }
.is-touch .keys { display: none; }
.is-touch .touch-hint { display: block; }

.enter {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: -.01em;
  padding: 18px 34px;
  background: var(--acid);
  color: #000;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 var(--pink);
  transform: rotate(-2deg);
  transition: transform .15s, box-shadow .15s, background .2s;
}
.enter:hover:not(:disabled), .enter:focus-visible { transform: rotate(-2deg) translate(-3px, -3px); box-shadow: 11px 11px 0 var(--pink); outline: none; }
.enter:active:not(:disabled) { transform: rotate(-2deg) translate(5px, 5px); box-shadow: 2px 2px 0 var(--pink); }
.enter:disabled { background: #2a2433; color: #9a90aa; box-shadow: 8px 8px 0 #1a1522; cursor: wait; }
.enter:not(:disabled) { animation: throb 1.4s ease-in-out infinite; }
@keyframes throb { 50% { background: var(--yellow); } }

.hint { margin-top: 24px; font-size: 12px; color: rgba(244, 240, 255, .6); max-width: 52ch; }

/* ---------------- CURSOR ---------------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--acid);
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: difference;
  transition: width .2s, height .2s, margin .2s, background .2s;
  display: none;
}
@media (pointer: fine) { .cursor { display: block; } }
.cursor.big { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: var(--acid); }
body.playing .cursor { opacity: .5; }

/* ---------------- SMALL SCREENS ---------------- */
@media (max-width: 600px) {
  .logo b { font-size: 20px; }
  .chaos-val { font-size: 32px; }
  .chaos-bar { width: 120px; }
  .btns button { padding: 7px 8px; letter-spacing: .12em; }
  .ticker { height: 28px; }
  .ticker-track { font-size: 11px; }
  .hud-bl { bottom: 46px; }
  .speed { font-size: 48px; }
  .stick, .touch-btns { bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .title span::before, .title span::after { display: none; }
  .ticker-track { animation-duration: 120s; }
  .sticker, .enter:not(:disabled) { animation: none; }
  .slam b { animation-duration: 2.2s; }
}