/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Barlow Condensed', 'Trebuchet MS', sans-serif;
  color: #f0eeff;
  background: #06000e;
  -webkit-tap-highlight-color: transparent;
}

/* ── App shell ───────────────────────────────────────── */
/*
  Neon cyan + magenta palette on a near-black base.
  Two sweeping aurora-band gradients cross-cut the background;
  radial blooms anchor each corner.
*/
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
  background:
    /* Diagonal aurora wash — cyan top-left, magenta bottom-right */
    linear-gradient(118deg, rgba(0,220,255,.13) 0%, transparent 38%),
    linear-gradient(298deg, rgba(255,0,180,.12) 0%, transparent 36%),
    /* Corner radial blooms */
    radial-gradient(ellipse at 15% 20%, rgba(0,200,255,.38) 0%, transparent 35%),
    radial-gradient(ellipse at 85% 14%, rgba(255,0,200,.28) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 96%, rgba(120,0,220,.30) 0%, transparent 42%),
    radial-gradient(ellipse at  5% 88%, rgba(0,160,255,.22) 0%, transparent 28%),
    radial-gradient(ellipse at 92% 80%, rgba(255,0,150,.18) 0%, transparent 26%),
    /* Near-black base with a faint blue-purple tint */
    linear-gradient(165deg, #06000e 0%, #0a0018 45%, #0c001e 68%, #07000f 100%);
}

/* ── Atmospheric light layers ────────────────────────── */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.stars::before,
.stars::after { content: ''; position: absolute; inset: 0; }

/*
  Aurora curtain: one cyan sweep, one magenta sweep, heavily blurred.
  No tiling, no dots — pure atmospheric colour wash.
*/
.stars::before {
  background:
    linear-gradient(112deg,
      transparent       8%,
      rgba(0,220,255,.10) 24%,
      rgba(0,240,255,.16) 42%,
      rgba(0,200,255,.10) 58%,
      transparent       72%
    ),
    linear-gradient(268deg,
      transparent        12%,
      rgba(255,0,180,.09) 30%,
      rgba(255,40,200,.13) 50%,
      rgba(255,0,160,.09)  66%,
      transparent        80%
    );
  filter: blur(56px);
}

/*
  Bokeh orbs: 18 hand-placed glowing circles, alternating cyan and magenta.
  Each = sharp core (2–3 px) + soft halo ring. Nothing repeats.
*/
.stars::after {
  background-image:
    /* cyan orbs */
    radial-gradient(circle at 11% 15%, rgba(0,220,255,.92) 0 2px, rgba(0,220,255,.22) 2px 16px, transparent 17px),
    radial-gradient(circle at 44% 27%, rgba(0,200,255,.85) 0 2px, rgba(0,200,255,.20) 2px 12px, transparent 13px),
    radial-gradient(circle at 21% 55%, rgba(0,230,255,.88) 0 3px, rgba(0,230,255,.22) 3px 20px, transparent 21px),
    radial-gradient(circle at  7% 77%, rgba(0,210,255,.82) 0 3px, rgba(0,210,255,.20) 3px 18px, transparent 19px),
    radial-gradient(circle at 50%  4%, rgba(0,240,255,.85) 0 2px, rgba(0,240,255,.20) 2px 11px, transparent 12px),
    radial-gradient(circle at 73% 28%, rgba(0,200,255,.78) 0 2px, rgba(0,200,255,.16) 2px 12px, transparent 13px),
    radial-gradient(circle at 38% 62%, rgba(0,220,255,.62) 0 2px, rgba(0,220,255,.14) 2px 10px, transparent 11px),
    radial-gradient(circle at 29%  8%, rgba(0,240,255,.82) 0 2px, rgba(0,240,255,.18) 2px 14px, transparent 15px),
    radial-gradient(circle at 54% 50%, rgba(0,200,255,.58) 0 2px, rgba(0,200,255,.12) 2px  8px, transparent  9px),
    /* magenta orbs */
    radial-gradient(circle at 86% 11%, rgba(255,0,200,.88) 0 2px, rgba(255,0,200,.20) 2px 14px, transparent 15px),
    radial-gradient(circle at 77% 46%, rgba(255,20,190,.82) 0 2px, rgba(255,20,190,.18) 2px 13px, transparent 14px),
    radial-gradient(circle at 60% 68%, rgba(255,0,180,.78) 0 2px, rgba(255,0,180,.18) 2px 12px, transparent 13px),
    radial-gradient(circle at 65% 80%, rgba(255,30,200,.76) 0 2px, rgba(255,30,200,.16) 2px 11px, transparent 12px),
    radial-gradient(circle at 93% 72%, rgba(255,0,180,.80) 0 2px, rgba(255,0,180,.18) 2px 14px, transparent 15px),
    radial-gradient(circle at 18% 33%, rgba(255,40,200,.74) 0 2px, rgba(255,40,200,.14) 2px  9px, transparent 10px),
    radial-gradient(circle at 96% 38%, rgba(255,0,200,.74) 0 2px, rgba(255,0,200,.14) 2px  8px, transparent  9px),
    radial-gradient(circle at 33% 87%, rgba(255,20,190,.80) 0 2px, rgba(255,20,190,.16) 2px  9px, transparent 10px),
    radial-gradient(circle at 82% 92%, rgba(255,0,160,.70) 0 2px, rgba(255,0,160,.14) 2px 12px, transparent 13px);
}

/* ── HUD ─────────────────────────────────────────────── */
.hud {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
}

.brand {
  font-family: 'Anton', sans-serif;
  font-size: clamp(22px, 6.5vw, 36px);
  color: #fff;
  letter-spacing: 1.5px;
  text-shadow:
    0 0 8px rgba(255,255,255,.5),
    0 0 20px rgba(0,220,255,.95);
  align-self: flex-start;
}

.hud-badges {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.hud-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 14px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(4, 0, 16, .88);
  box-shadow: 0 0 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  flex: 1;
  justify-content: center;
}
/* Score badge: magenta */
.hud-score {
  border-color: rgba(255, 0, 200, .70);
  box-shadow: 0 0 16px rgba(255,0,190,.60), inset 0 0 8px rgba(255,0,190,.14);
}
/* Time badge: cyan */
.hud-time {
  border-color: rgba(0, 220, 255, .70);
  box-shadow: 0 0 16px rgba(0,210,255,.60), inset 0 0 8px rgba(0,210,255,.14);
}
.hud-label {
  font-size: clamp(17px, 4.5vw, 22px);
  font-weight: 700;
  color: #ddeeff;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hud-value {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}

/* ── Game area ───────────────────────────────────────── */
.game-area {
  position: relative;
  flex: 1;
  overflow: hidden;
  touch-action: manipulation;
}

/* ── Splash (hidden when game starts) ───────────────── */
.splash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 110px; /* bottom padding clears CTA + mascot */
  gap: 10px;
  pointer-events: none;
  user-select: none;
}
.splash.hidden { display: none; }

.splash-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(60px, 19vw, 122px);
  line-height: 1;
  text-align: center;
  letter-spacing: 2px;
  filter:
    drop-shadow(0 0 12px rgba(0,220,255,.85))
    drop-shadow(0 0 28px rgba(255,0,200,.60));
}
/* "HU-" — cyan-to-white gradient */
.t-hu {
  display: inline;
  background: linear-gradient(180deg, #ffffff 0%, #88eeff 55%, #00ccff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* "DROP" — magenta-to-hot-pink gradient */
.t-drop {
  display: inline;
  background: linear-gradient(180deg, #ffaaff 0%, #ff00cc 50%, #cc0088 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Subtitle */
.splash-sub {
  font-size: clamp(20px, 5.5vw, 32px);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #00eeff;
  text-shadow:
    0 0 8px rgba(0,238,255,.90),
    0 0 20px rgba(0,200,255,.55);
}

/* ── Start button ─────────────────────────────────────── */
.start-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 8px;
  min-height: 54px;
  padding: 10px 44px;
  border-radius: 14px;
  border: none;
  outline: none;

  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);

  cursor: pointer;
  user-select: none;
  pointer-events: auto;

  /* Magenta skin */
  background: linear-gradient(175deg, #ff40dd 10%, #cc0088 100%);
  box-shadow:
    0 0 28px rgba(255,0,200,.95),
    0 6px 0  rgba(80,0,50,.65),
    inset 0 -2px 0 rgba(0,0,0,.20);

  animation: startPulse 1.8s ease-in-out infinite;
}
.start-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,.40) 0%,
    rgba(255,255,255,.10) 45%,
    transparent 56%
  );
  pointer-events: none;
}
.start-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 18px rgba(255,0,200,.80), 0 2px 0 rgba(80,0,50,.65);
  animation: none;
}
@keyframes startPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255,0,200,.95), 0 6px 0 rgba(80,0,50,.65); }
  50%       { box-shadow: 0 0 55px rgba(255,0,220,1.00), 0 0 90px rgba(255,0,200,.45), 0 6px 0 rgba(80,0,50,.65); }
}

/* ── Mascot ──────────────────────────────────────────── */
.mascot {
  position: absolute;
  left: 6px;
  bottom: 56px;
  z-index: 1;
  width: 110px;
  pointer-events: none;
  user-select: none;
}
.mascot-emoji {
  position: relative;
  z-index: 2;
  font-size: 76px;
  line-height: 1;
  filter:
    drop-shadow(0 0 8px  rgba(255,0,200,.80))
    drop-shadow(0 0 20px rgba(0,200,255,.60));
}
.mascot-rainbow {
  position: absolute;
  left: 38px;
  bottom: 16px;
  width: 90px;
  height: 56px;
  border-radius: 56px 56px 0 0;
  border: 0 solid transparent;
  border-top: 8px solid #ff3c5a;
  box-shadow:
    0 -8px  0 0 #ff8c28,
    0 -16px 0 0 #ffe03a,
    0 -24px 0 0 #3fff80,
    0 -32px 0 0 #38c4ff,
    0 -40px 0 0 #cc00ff;
  opacity: .85;
}

/* ── CTA bar ─────────────────────────────────────────── */
.cta {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(92%, 560px);
  padding: 9px 18px;
  border-radius: 12px;
  border: 2px solid rgba(255, 0, 200, .75);
  background: linear-gradient(180deg, rgba(30,0,40,.90), rgba(14,0,24,.95));
  box-shadow:
    0 0 18px rgba(255,0,190,.60),
    inset 0 0 10px rgba(255,0,190,.16);
  text-align: center;
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
  color: #ffccff;
  text-shadow: 0 0 8px rgba(255,0,200,.70);
  pointer-events: none;
  white-space: nowrap;
}
.cta strong {
  color: #00eeff;
  text-shadow: 0 0 8px rgba(0,230,255,.80);
}

/* ── Falling word tokens ─────────────────────────────── */
.word {
  position: absolute;
  left: 0; top: 0;
  will-change: transform, opacity;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 6px 18px;
  border-radius: 14px;
  border: none;
  outline: none;
  overflow: hidden;
  font-size: clamp(24px, 6.5vw, 36px);
  font-weight: 800;
  color: #fff;
  letter-spacing: .4px;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  /* No transform transition — prevents slide-in from origin.
     Opacity is driven entirely by tick() for the 0.3 s fade-in. */
  transition: filter 60ms;
}
.word::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,.38) 0%,
    rgba(255,255,255,.10) 45%,
    transparent 56%
  );
  pointer-events: none;
}
.word:active {
  filter: brightness(1.22);
  transform: scale(.96) !important;
}

/* Skins */
.skin-green {
  background: linear-gradient(175deg, #3ed860 10%, #18a038 100%);
  box-shadow: 0 0 22px rgba(50,220,80,.85), 0 5px 0 rgba(0,80,20,.60), inset 0 -2px 0 rgba(0,0,0,.20);
}
.skin-pink {
  background: linear-gradient(175deg, #ff30cc 10%, #cc0080 100%);
  box-shadow: 0 0 22px rgba(255,0,180,.90), 0 5px 0 rgba(80,0,50,.60), inset 0 -2px 0 rgba(0,0,0,.20);
}
.skin-purple {
  background: linear-gradient(175deg, #6040ff 10%, #2800cc 100%);
  box-shadow: 0 0 22px rgba(100,60,255,.88), 0 5px 0 rgba(20,0,100,.60), inset 0 -2px 0 rgba(0,0,0,.20);
}
.skin-orange {
  background: linear-gradient(175deg, #ffb83a 10%, #e05800 100%);
  box-shadow: 0 0 22px rgba(255,160,30,.85), 0 5px 0 rgba(100,40,0,.60), inset 0 -2px 0 rgba(0,0,0,.20);
}
.skin-cyan {
  background: linear-gradient(175deg, #00e0ff 10%, #0070ee 100%);
  box-shadow: 0 0 22px rgba(0,220,255,.92), 0 5px 0 rgba(0,40,100,.60), inset 0 -2px 0 rgba(0,0,0,.20);
}

/* ── Score delta pop (+1 / −1) ───────────────────────── */
.delta {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  font-family: 'Anton', sans-serif;
  font-size: clamp(36px, 11vw, 58px);
  line-height: 1;
  letter-spacing: 1px;
  animation: floatUp .70s ease-out forwards;
}
.delta-good {
  color: #40ffcc;
  text-shadow: 0 0 10px rgba(0,255,200,.95), 0 0 24px rgba(0,200,160,.6);
}
.delta-bad {
  color: #ff2080;
  text-shadow: 0 0 10px rgba(255,0,120,.95), 0 0 24px rgba(200,0,80,.6);
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate3d(0, 12px, 0) scale(.75); }
  12%  { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.06); }
  100% { opacity: 0; transform: translate3d(0, -58px, 0) scale(1.12); }
}

/* ── End screen overlay ───────────────────────────────── */
.end-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 0, 10, .86);
  backdrop-filter: blur(8px);
}
.end-screen.hidden { display: none; }

.end-card {
  width: min(100%, 500px);
  border-radius: 20px;
  border: 2px solid rgba(255, 0, 200, .75);
  background: linear-gradient(158deg, rgba(30,0,50,.97), rgba(10,0,24,.97));
  box-shadow:
    0 0 32px rgba(255,0,190,.65),
    inset 0 0 24px rgba(0,180,255,.14);
  padding: 28px 22px;
  text-align: center;
}
.end-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(44px, 13vw, 80px);
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #88eeff 40%, #00ccff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(0,200,255,.70));
}
.end-score {
  margin: 10px 0 24px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(44px, 13vw, 78px);
  line-height: 1;
  color: #ff40ee;
  text-shadow: 0 0 16px rgba(255,0,200,.90);
}

.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
  min-height: 46px;
  min-width: 130px;
  padding: 8px 20px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.30);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: filter 80ms, transform 80ms;
}
.btn:active { transform: translateY(2px); filter: brightness(1.15); }
.btn-primary {
  background: linear-gradient(180deg, #00d0ff, #0050cc);
  box-shadow: 0 0 14px rgba(0,190,255,.75), 0 4px 0 rgba(0,30,80,.5);
}
.btn-secondary {
  background: linear-gradient(180deg, #ff30cc, #aa0070);
  box-shadow: 0 0 14px rgba(255,0,180,.70), 0 4px 0 rgba(80,0,50,.5);
}

/* ── Utility ─────────────────────────────────────────── */
.hidden { display: none !important; }

@media (min-width: 640px) {
  .hud { padding-left: 20px; padding-right: 20px; }
  .mascot { left: 14px; bottom: 64px; width: 130px; }
  .mascot-emoji { font-size: 90px; }
}