:root {
  --night: #160b2e;     /* arena after dark */
  --stage: #2e1257;     /* haze over the stage */
  --hot: #ff4fa3;       /* lightstick pink */
  --lav: #b9a6ff;
  --mint: #5ef2d0;
  --butter: #ffe066;
  --sky: #7cc8ff;
  --text: #f6efff;
  --text-soft: rgba(246, 239, 255, 0.7);
  --gutter: clamp(16px, 3vw, 36px);
  --cute: "Jua", ui-rounded, system-ui, sans-serif;
  --loud: "Black Han Sans", "Jua", Impact, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--text);
  font-family: var(--cute);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(185, 166, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(255, 79, 163, 0.22), transparent 70%),
    linear-gradient(var(--night), var(--stage) 70%, #1c0a35);
  cursor: crosshair;
}

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

/* ---------- Broadcast corners ---------- */

.show {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-soft);
  /* Keep corner text readable over the glowing crowd. */
  text-shadow: 0 0 3px var(--night), 0 1px 8px var(--night), 0 0 16px rgba(22, 11, 46, 0.8);
}

.corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl, .tr { top: max(var(--gutter), env(safe-area-inset-top)); }
.bl, .br { bottom: max(var(--gutter), env(safe-area-inset-bottom)); }
.tl, .bl { left: max(var(--gutter), env(safe-area-inset-left)); }
.tr, .br { right: max(var(--gutter), env(safe-area-inset-right)); text-align: right; align-items: flex-end; }

.strong { color: var(--text); }

.onair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hot);
  font-size: 17px;
}

.onair .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 10px var(--hot);
  animation: onair 1s steps(1) infinite;
}

@keyframes onair { 50% { opacity: 0.25; } }

.deck {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.skip {
  pointer-events: auto;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(22, 11, 46, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transition: transform 0.12s, background 0.12s;
}

.skip svg { width: 18px; height: 18px; fill: currentColor; }
.skip:hover { background: rgba(255, 79, 163, 0.35); }
.skip:active { transform: scale(0.92); }
.skip:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; }

#play {
  pointer-events: auto;
  cursor: pointer;
  padding: 11px 22px 12px;
  font: 18px/1 var(--cute);
  color: #fff;
  background: linear-gradient(135deg, var(--hot), #b06cff);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) inset, 0 6px 24px rgba(255, 79, 163, 0.45);
  transition: transform 0.12s;
  text-shadow: none;
}

#play:hover { transform: scale(1.05); }
#play:active { transform: scale(0.96); }
#play:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; }
#play[aria-pressed="true"] { background: linear-gradient(135deg, #b06cff, var(--sky)); }

/* ---------- Centre stage ---------- */

.center {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(100% - 2 * var(--gutter), 900px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.idol {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
}

#bear {
  width: clamp(120px, 15vw, 176px);
  height: auto;
  flex: none;
  overflow: visible;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 22px rgba(255, 79, 163, 0.35));
}

#wink,
#tongue { display: none; }
#bear.winking #wink,
#bear.winking #tongue { display: inline; }
#bear.winking #eye-r { display: none; }

.bubble {
  position: relative;
  margin: 0;
  width: min(310px, 52vw);
  min-height: 4.4em;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  font: clamp(14px, 1.5vw, 17px)/1.4 var(--cute);
  color: #3a1a5c;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 0 3px var(--hot), 0 0 24px rgba(255, 79, 163, 0.5);
  text-shadow: none;
}

.bubble::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  margin-top: -9px;
  border-style: solid;
  border-width: 9px 14px 9px 0;
  border-color: transparent #fff transparent transparent;
  filter: drop-shadow(-3px 0 0 var(--hot));
}

/* LED stage sign: near-white letters, each in its own neon. */
.name {
  margin: 0.08em 0 0;
  font: 400 clamp(70px, 15vw, 196px)/1 var(--loud);
  letter-spacing: 0.04em;
  padding-left: 0.04em;
  transform: skewX(-7deg);
  color: #fff7fc;
  user-select: none;
}

.name span {
  display: inline-block;
  --glow: var(--hot);
  text-shadow:
    0 0 0.04em #fff,
    0 0 0.1em var(--glow),
    0 0 0.28em var(--glow),
    0 0 0.6em var(--glow);
  animation: drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.name span:nth-child(2) { --glow: var(--lav);    animation-delay: 0.07s; }
.name span:nth-child(3) { --glow: var(--mint);   animation-delay: 0.14s; }
.name span:nth-child(4) { --glow: var(--butter); animation-delay: 0.21s; }
.name span:nth-child(5) { --glow: var(--sky);    animation-delay: 0.28s; }
.name span:nth-child(6) { --glow: var(--hot);    animation-delay: 0.35s; }

@keyframes drop {
  from { transform: translateY(-0.5em) scale(1.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- Cheers ---------- */

#cheers {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.cheer {
  position: absolute;
  left: 0;
  top: 0;
  font: clamp(22px, 3.4vw, 40px)/1 var(--loud);
  white-space: nowrap;
  color: #fff;
  --glow: var(--hot);
  text-shadow: 0 0 0.12em var(--glow), 0 0 0.4em var(--glow);
  animation: cheer 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.cheer.c1 { --glow: var(--lav); }
.cheer.c2 { --glow: var(--mint); }
.cheer.c3 { --glow: var(--butter); }
.cheer.c4 { --glow: var(--sky); }

@keyframes cheer {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(var(--tilt)); opacity: 0; }
  15%  { transform: translate(-50%, -80%) scale(1.15) rotate(var(--tilt)); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(1) rotate(var(--tilt)); opacity: 0; }
}

.back {
  pointer-events: auto;
  margin-top: clamp(22px, 4vw, 44px);
  padding: 11px 22px 12px;
  font: 18px/1 var(--cute);
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--hot), #b06cff);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) inset, 0 6px 24px rgba(255, 79, 163, 0.45);
}

.back:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; }

.noscript {
  position: fixed;
  inset: auto 0 20% 0;
  text-align: center;
  font: 20px var(--cute);
  z-index: 5;
}

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .show { font-size: 14px; }
  .center { top: 42%; }
  .idol { flex-direction: column; gap: 16px; }
  .bubble { width: min(320px, 86vw); min-height: 3.6em; justify-content: center; text-align: center; }
  .bubble::before {
    left: 50%; top: -13px; margin: 0 0 0 -9px;
    border-width: 0 9px 14px 9px;
    border-color: transparent transparent #fff transparent;
    filter: drop-shadow(0 -3px 0 var(--hot));
  }
}

@media (prefers-reduced-motion: reduce) {
  .onair .dot, .name span { animation: none; }
}