:root { --bg: #1A0B2E; --fg: #FFF6EC; --pink: #FF3D8B; --gold: #FFD23F; --sky: #7FD8FF; --lime: #C6FF3D; --lav: #C9B6E4; --deep: #12071F; --spd: .55s; --accent: #7FD8FF; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font-family: 'Space Grotesk', system-ui, sans-serif; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

/* ---------- shared scene ---------- */
.scene { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 20%, #4A1E7A 0%, #2A1150 45%, var(--bg) 80%); }
.kicker { margin: 0; font: 700 13px 'Space Mono', monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.kicker.gold { color: var(--gold); }
.big { margin: 8px 0 0; font: italic 900 clamp(46px, 8.6vw, 140px)/.88 Fraunces, Georgia, serif; letter-spacing: -.02em; color: var(--fg); }
.glow { text-shadow: 0 6px 0 var(--pink), 0 12px 40px rgba(255, 61, 139, .5); }
.sub { margin: 12px auto 0; max-width: 620px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.45; color: #E4D8F5; }
.label { font: 700 11px 'Space Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--lav); }
.pill { border: 0; cursor: pointer; padding: 18px 32px; border-radius: 999px; font-weight: 700; font-size: 18px; letter-spacing: .06em; }
.pill.gold { background: var(--gold); color: var(--deep); box-shadow: 0 10px 0 #B8901A; }
.pill.gold:active { transform: translateY(6px); box-shadow: 0 4px 0 #B8901A; }
.pill.ghost { background: none; border: 2px solid var(--lav); color: var(--lav); padding: 14px 24px; font-size: 16px; }
.link { background: none; border: 0; color: #9C88BD; text-decoration: underline; cursor: pointer; font-size: 14px; }

.beam { position: absolute; top: -20px; width: 150px; height: 80%; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: beam 3s ease-in-out infinite alternate; transform-origin: 50% 0; pointer-events: none; }
.beam.l { left: 16%; background: linear-gradient(180deg, rgba(255, 90, 170, .38), transparent); }
.beam.r { right: 16%; background: linear-gradient(180deg, rgba(90, 220, 255, .38), transparent); animation-delay: -1.5s; }
@keyframes beam { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.bunting { position: absolute; left: 0; top: 0; width: 100%; height: 110px; pointer-events: none; }
.floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; transform: perspective(500px) rotateX(55deg); transform-origin: bottom; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; padding: 4px; pointer-events: none; }
.floor span { border-radius: 3px; animation: tile 1.2s steps(1) infinite; }
@keyframes tile { 50% { opacity: .35; } }
.balloon { position: absolute; width: 70px; animation: float 4s ease-in-out infinite; pointer-events: none; }
@keyframes float { 50% { transform: translateY(-22px) rotate(4deg); } }

/* ---------- gate ---------- */
#gate { display: grid; place-items: center; text-align: center; padding: 24px; }
.gate-face { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--gold); animation: bounce .6s ease-in-out infinite alternate; }
.countdown { margin-top: 18px; font: 700 clamp(40px, 11vw, 90px) 'Space Mono', monospace; color: var(--gold); }

/* ---------- dancers (head on a cartoon body) ---------- */
.dancer { display: flex; flex-direction: column; align-items: center; flex: none; }
.dancer .tag { margin-bottom: 8px; background: var(--gold); color: var(--bg); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.dancer .rig { position: relative; width: 100%; animation: bounce var(--spd) ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-14px); } }
.dancer .head { position: relative; width: 62%; aspect-ratio: 1; margin: 0 auto -10%; z-index: 2; animation: headbob var(--spd) ease-in-out infinite alternate; }
@keyframes headbob { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.head::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3B0A14; clip-path: inset(calc(var(--m, 72%) - 3%) 22% 4% 22% round 40%); } /* only the open mouth, no dark halo */
.head i { position: absolute; inset: 0; border-radius: 50%; background: var(--img) center / cover; }
.head .top { clip-path: inset(0 0 calc(100% - var(--m, 72%)) 0); }
.head .jaw { clip-path: inset(var(--m, 72%) 0 0 0); transition: transform .08s; }
.open .head .jaw, .head.open .jaw { transform: translateY(11%); }
.head .hat { position: absolute; left: 30%; top: -42%; width: 40%; }
.dancer svg.body { display: block; width: 100%; }
svg .arm, svg .leg, svg .hips { transform-box: fill-box; }
svg .arm { transform-origin: 50% 6%; }
svg .leg { transform-origin: 50% 4%; }
svg .hips { transform-origin: 50% 100%; }
.m-disco .armR { animation: discoR calc(var(--spd) * 2) ease-in-out infinite; }
.m-disco .armL { transform: rotate(25deg); }
.m-disco .hips { animation: sway calc(var(--spd) * 2) ease-in-out infinite; }
@keyframes discoR { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-20deg); } }
.m-wave .armL { animation: waveL var(--spd) ease-in-out infinite alternate; }
.m-wave .armR { animation: waveR var(--spd) ease-in-out infinite alternate; }
@keyframes waveL { from { transform: rotate(150deg); } to { transform: rotate(110deg); } }
@keyframes waveR { from { transform: rotate(-150deg); } to { transform: rotate(-110deg); } }
.m-twist .hips { animation: sway var(--spd) ease-in-out infinite alternate; }
.m-twist .armL { animation: twistL var(--spd) ease-in-out infinite alternate; }
.m-twist .armR { animation: twistR var(--spd) ease-in-out infinite alternate; }
@keyframes twistL { from { transform: rotate(60deg); } to { transform: rotate(10deg); } }
@keyframes twistR { from { transform: rotate(-10deg); } to { transform: rotate(-60deg); } }
@keyframes sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.m-chicken .armL { animation: chickL calc(var(--spd) / 1.5) ease-in-out infinite alternate; }
.m-chicken .armR { animation: chickR calc(var(--spd) / 1.5) ease-in-out infinite alternate; }
@keyframes chickL { from { transform: rotate(40deg); } to { transform: rotate(80deg); } }
@keyframes chickR { from { transform: rotate(-40deg); } to { transform: rotate(-80deg); } }
.m-chicken .legL, .m-wave .legL { animation: kick var(--spd) ease-in-out infinite alternate; }
@keyframes kick { to { transform: rotate(22deg); } }


/* ---------- party ---------- */
.headline { position: absolute; left: 0; right: 0; top: 84px; text-align: center; z-index: 3; padding: 0 16px; }
.dancers { position: absolute; left: 0; right: 0; bottom: 72px; z-index: 4; display: flex; justify-content: center; align-items: flex-end; gap: clamp(2px, 1.4vw, 22px); padding: 0 8px; }
.dancers .dancer { width: clamp(64px, min(9vw, 13vh), 130px); }
.dancers .dancer.star { width: clamp(150px, min(20vw, 30vh), 290px); }
.cake { position: absolute; right: 3%; top: 34%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; }
.cake svg { width: 100%; }
.cake small { font: 700 11px 'Space Mono', monospace; color: var(--lav); letter-spacing: .1em; text-transform: uppercase; }
.candles { display: flex; gap: 12px; }
.candles span { display: flex; flex-direction: column; align-items: center; }
.candles i { width: 14px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff 0, #FFB300 55%, #ff6a00 100%); animation: flame .25s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes flame { from { transform: scaleY(.85) rotate(-5deg); } to { transform: scaleY(1.15) rotate(5deg); } }
.candles b { font: 900 46px/1 Fraunces, serif; }
.c1 { color: var(--sky); } .c2 { color: var(--pink); }
.moves { position: absolute; left: 24px; top: 300px; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.moves button { cursor: pointer; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; background: rgba(26, 11, 46, .6); color: var(--fg); border: 1.5px solid rgba(255, 246, 236, .4); text-align: left; }
.moves button.on { background: var(--gold); color: var(--bg); }
.karaoke { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 5; background: rgba(15, 5, 28, .85); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 16px; }
.karaoke span { font: italic 900 clamp(22px, 3vw, 40px) Fraunces, serif; color: rgba(255, 246, 236, .4); transition: color .1s; }
.karaoke span.lit { color: var(--gold); }
.karaoke .hint { font: 500 16px 'Space Grotesk', sans-serif; color: rgba(255, 246, 236, .6); }
.invite { position: absolute; inset: 0; z-index: 20; background: rgba(20, 6, 36, .9); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 6px; }
.choice { position: relative; width: min(540px, 100%); height: 130px; margin-top: 18px; }
#yes { position: absolute; left: 0; top: 30px; }
#no { position: absolute; left: 62%; top: 34px; transition: left .22s, top .22s; }

/* ---------- arcade ---------- */
.hud { position: absolute; left: 20px; right: 20px; top: 24px; z-index: 6; display: flex; align-items: center; gap: 16px; font-family: 'Space Mono', monospace; }
.hud .side { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud .right { align-items: flex-end; }
.who { font-size: 13px; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gold { color: var(--gold); } .pink { color: var(--pink); }
.bar { width: 100%; height: 22px; border: 3px solid var(--fg); border-radius: 4px; background: var(--deep); transform: skewX(-12deg); display: flex; }
.bar.flip { transform: skewX(12deg); justify-content: flex-end; }
.bar i { height: 100%; background: linear-gradient(90deg, var(--lime), var(--gold)); transition: width .4s; }
.bar i.pinkbar { background: linear-gradient(90deg, #FF8FB1, var(--pink)); }
.timer { width: 92px; height: 74px; border: 3px solid var(--fg); border-radius: 8px; background: var(--deep); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.timer b { font-size: 34px; line-height: 1; }
.timer small { font-size: 9px; letter-spacing: .1em; color: #9C88BD; }
.hiscore { position: absolute; left: 0; right: 0; top: 112px; z-index: 6; margin: 0; text-align: center; font: 700 12px 'Space Mono', monospace; letter-spacing: .2em; color: var(--lime); }
.back { position: absolute; left: 20px; top: 112px; z-index: 7; font-family: 'Space Mono', monospace; text-decoration: none; color: var(--lav); }
.gtitle { position: absolute; left: 0; right: 0; top: 146px; z-index: 5; text-align: center; padding: 0 16px; }
.gtitle .kicker { color: var(--accent); }
.gtitle .big { font-size: clamp(44px, 7vw, 110px); text-shadow: 0 6px 0 var(--accent), 0 12px 40px rgba(0, 0, 0, .5); }
.fighter { position: absolute; bottom: 160px; z-index: 4; width: clamp(130px, min(18vw, 26vh), 260px); display: flex; flex-direction: column; align-items: center; }
.fighter.p1 { left: 6%; }
.fighter.cpu { right: 6%; --spd: .42s; }
.fighter .dancer { width: 100%; }
.fighter.cpu .rig { transform-origin: center; }
.fighter.cpu .mirror { transform: scaleX(-1); }
.bubble { margin-bottom: 10px; background: #fff; color: var(--deep); font-weight: 700; font-size: 15px; padding: 10px 14px; border-radius: 16px; text-align: center; max-width: 240px; }
.bubble.pinkbg { background: var(--pink); color: #fff; }
.vs { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vs-word { font: italic 900 clamp(90px, 11vw, 150px)/.8 Fraunces, serif; color: var(--gold); text-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--deep); }
.credits { font: 700 12px 'Space Mono', monospace; letter-spacing: .2em; color: var(--lav); animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: .35; } }
.select { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 12px; }
.select .label { color: var(--fg); font-size: 13px; }
.tiles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tile-btn { position: relative; width: 104px; height: 96px; border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 246, 236, .35); transition: transform .2s; }
.tile-btn.on { transform: translateY(-10px) scale(1.08); box-shadow: 0 0 0 4px var(--gold), 0 0 30px var(--accent); }
.tile-btn img { position: absolute; left: 50%; top: 10px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; object-fit: cover; }
.tile-btn b { position: absolute; left: 4px; right: 4px; bottom: 6px; font-size: 11px; line-height: 1.1; color: #fff; text-align: center; }
.tile-btn small { position: absolute; left: 6px; top: 4px; font: 700 10px 'Space Mono', monospace; color: rgba(255, 255, 255, .8); }

/* ---------- game overlay ---------- */
.play { position: fixed; inset: 0; z-index: 100; background: #0B0414; display: grid; place-items: center; touch-action: none; }
#gcv { display: block; touch-action: none; }
.quit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer; }
.gpanel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: rgba(18, 7, 31, .82); }
.gpanel:empty { display: none; }
.gpanel h3 { margin: 0; font: italic 900 clamp(40px, 8vw, 84px)/.9 Fraunces, serif; }
.gpanel p { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.45; color: #E4D8F5; }
.gpanel .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.gpanel img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--gold); }

/* ---------- song button ---------- */
.song-btn { position: fixed; right: 20px; bottom: 88px; z-index: 50; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 10px 30px rgba(255, 61, 139, .55); }
.round { position: fixed; right: 20px; bottom: 150px; z-index: 50; margin: 0; background: #2A1150; border: 1px solid rgba(255, 246, 236, .2); border-radius: 999px; padding: 8px 14px; font: 700 12px 'Space Mono', monospace; color: var(--gold); }
body.in-game .song-btn, body.in-game .round { display: none; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .headline { top: 70px; }
  .moves { left: 0; right: 0; top: auto; bottom: 78px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 8px; z-index: 6; }
  .moves .label { display: none; }
  .moves button { padding: 7px 11px; font-size: 12px; }
  .dancers { bottom: 160px; }
  .dancers .dancer.extra { display: none; }
  .dancers .dancer { width: 21vw; }
  .dancers .dancer.star { width: 42vw; }
  .cake { width: 110px; right: 8px; bottom: auto; top: 250px; }
  .candles b { font-size: 30px; }
  .song-btn { bottom: 16px; right: 12px; padding: 13px 18px; font-size: 15px; }
  .round { bottom: 74px; right: 12px; }
  .karaoke { top: auto; bottom: 0; height: 64px; display: none; }
  body.singing .karaoke { display: flex; z-index: 7; }
  .hud { top: 14px; left: 10px; right: 10px; gap: 8px; }
  .timer { width: 64px; height: 58px; } .timer b { font-size: 24px; }
  .bar { height: 14px; border-width: 2px; }
  .hiscore { top: 82px; font-size: 10px; }
  .back { top: 100px; left: 10px; font-size: 11px; }
  .gtitle { top: 118px; }
  .gtitle .sub { font-size: 14px; }
  .fighter { width: 30vw; bottom: 300px; }
  .fighter.p1 { left: 3%; } .fighter.cpu { right: 3%; }
  .bubble { font-size: 11px; padding: 6px 8px; max-width: 30vw; }
  .vs { top: auto; bottom: 230px; transform: translateX(-50%); gap: 10px; }
  .vs-word { font-size: 70px; }
  .vs .pill { padding: 14px 20px; font-size: 15px; }
  .select { bottom: 12px; }
  .tile-btn { width: 30vw; max-width: 104px; height: 78px; }
  .tile-btn img { width: 44px; height: 44px; margin-left: -22px; top: 6px; }
}

/* ---------- arcade as a grid so nothing overlaps on short screens ---------- */
#arcade { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "hud hud hud" "hi hi hi" "title title title" "p1 vs cpu" "sel sel sel"; padding: 18px 20px 16px; gap: 6px 12px; }
#arcade .hud, #arcade .hiscore, #arcade .gtitle, #arcade .fighter, #arcade .vs, #arcade .select { position: relative; inset: auto; transform: none; }
#arcade .hud { grid-area: hud; }
#arcade .hiscore { grid-area: hi; }
#arcade .gtitle { grid-area: title; }
#arcade .gtitle .big { font-size: clamp(40px, min(7vw, 10vh), 110px); }
#arcade .fighter { align-self: end; justify-self: center; width: clamp(110px, min(18vw, 24vh), 240px); }
#arcade .p1 { grid-area: p1; }
#arcade .cpu { grid-area: cpu; }
#arcade .vs { grid-area: vs; align-self: center; }
#arcade .vs-word { font-size: clamp(64px, min(11vw, 14vh), 150px); }
#arcade .select { grid-area: sel; padding-bottom: 4px; }
#arcade .back { top: 70px; }
@media (max-width: 700px) {
  #arcade { grid-template-columns: 1fr 1fr; grid-template-areas: "hud hud" "hi hi" "title title" "p1 cpu" "vs vs" "sel sel"; grid-template-rows: auto auto auto 1fr auto auto; padding: 12px 10px; }
  #arcade .fighter { width: 34vw; }
  #arcade .back { top: 54px; }
  .song-btn span { display: none; }
  .song-btn { width: 56px; height: 56px; padding: 0; justify-content: center; font-size: 24px; bottom: 50%; }
  .round { bottom: calc(50% + 64px); }
}
#arcade { height: 100vh; height: 100dvh; min-height: 560px; }
#arcade .fighter { width: clamp(90px, min(18vw, 19vh), 240px); }
#arcade .bubble { font-size: 13px; padding: 7px 10px; }
#arcade .gtitle .sub { margin-top: 6px; font-size: clamp(13px, 1.9vh, 18px); }
#arcade .tile-btn { height: clamp(64px, 11vh, 96px); }
#arcade .tile-btn img { width: clamp(36px, 6.5vh, 56px); height: clamp(36px, 6.5vh, 56px); margin-left: calc(clamp(36px, 6.5vh, 56px) / -2); top: 6px; }
#arcade .back { top: 104px; left: 20px; }
@media (max-width: 700px) {
  .dancers .dancer { width: min(21vw, 12vh); }
  .dancers .dancer.star { width: min(40vw, 22vh); }
  .dancers { bottom: 118px; }
  .cake { display: none; }
  #arcade { grid-template-columns: 1fr auto 1fr; grid-template-areas: "hud hud hud" "title title title" "p1 vs cpu" "sel sel sel"; grid-template-rows: auto auto 1fr auto; }
  #arcade .hiscore { display: none; }
  #arcade .back { top: 64px; }
  #arcade .gtitle { padding-top: 22px; }
  #arcade .gtitle .big { font-size: clamp(34px, 10vw, 54px); }
  #arcade .fighter { width: min(27vw, 15vh); }
  #arcade .bubble { font-size: 11px; padding: 5px 7px; max-width: 32vw; }
  #arcade .vs { gap: 8px; }
  #arcade .vs-word { font-size: 52px; }
  #arcade .vs .pill { padding: 12px 14px; font-size: 13px; }
  #arcade .credits { font-size: 10px; letter-spacing: .08em; }
  #arcade .tiles { gap: 6px; }
  #arcade .tile-btn { width: 30vw; height: 64px; }
}

/* ---------- round 3 ---------- */
.dancer svg.body { overflow: visible; }
.dancer .rig, .dancer { overflow: visible; }
.dancers { padding: 0 40px; }
.crowd { position: absolute; left: 0; right: 0; bottom: 250px; z-index: 3; display: flex; justify-content: center; align-items: flex-end; gap: 2px; padding: 0 30px; opacity: .78; filter: saturate(.85); pointer-events: none; }
.crowd .dancer { width: clamp(46px, min(5.4vw, 8vh), 84px); }
.nope { background: #fff !important; color: var(--pink) !important; border: 0 !important; padding: 18px 30px !important; font-size: 18px !important; box-shadow: 0 10px 0 #C9B6E4; transition: left .18s ease, top .18s ease; z-index: 30; }
.tap-start { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 15; border: 0; cursor: pointer; padding: 22px 34px; border-radius: 999px; background: var(--gold); color: var(--deep); font-weight: 700; font-size: 20px; box-shadow: 0 10px 0 #B8901A, 0 0 60px rgba(255, 210, 63, .6); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.07); } }
.song-dock { position: fixed; right: 20px; bottom: 88px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.song-dock .song-btn { position: static; }
.langs { display: flex; background: rgba(18, 7, 31, .8); border: 1px solid rgba(255, 246, 236, .25); border-radius: 999px; padding: 3px; }
.langs button { border: 0; cursor: pointer; background: none; color: var(--fg); font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 999px; }
.langs button.on { background: var(--pink); }
.round { bottom: 200px; }
.games-btn { position: fixed; left: 20px; bottom: 88px; z-index: 50; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 999px; background: var(--gold); color: var(--deep); font-weight: 700; font-size: 17px; box-shadow: 0 10px 30px rgba(255, 210, 63, .45); }
body.in-game .song-dock, body.in-game .games-btn { display: none; }
#arcade:not([hidden]) ~ .games-btn { display: none; }
.tile-btn { cursor: pointer; }
.tile-btn::after { content: "▶ PLAY"; position: absolute; right: 4px; top: 4px; font: 700 9px 'Space Mono', monospace; color: #fff; background: rgba(0, 0, 0, .35); padding: 2px 5px; border-radius: 4px; }
.tile-btn:hover { transform: translateY(-6px) scale(1.05); }
#arcade .select .label { font-size: 15px; color: var(--gold); }
#insert span { font-weight: 700; }
@media (max-width: 700px) {
  .crowd { bottom: 210px; }
  .crowd .dancer { width: 11vw; }
  .crowd .dancer.extra { display: none; }
  .song-dock { right: 10px; bottom: auto; top: 46%; }
  .song-dock .song-btn { width: 56px; height: 56px; padding: 0; justify-content: center; font-size: 24px; }
  .song-dock .song-btn span { display: none; }
  .langs button { font-size: 11px; padding: 5px 8px; }
  .games-btn { left: 10px; bottom: auto; top: 46%; width: 56px; height: 56px; padding: 0; justify-content: center; font-size: 26px; }
  .games-btn span { display: none; }
  .round { display: none !important; }
  .tap-start { font-size: 16px; padding: 18px 22px; width: 80vw; }
  .nope { padding: 14px 20px !important; font-size: 15px !important; }
}

/* ---------- high score board on the game over card ---------- */
.board { width: min(420px, 100%); display: flex; flex-direction: column; gap: 8px; }
.board .save { display: flex; gap: 8px; }
.board input { flex: 1; min-width: 0; font: 700 17px 'Space Grotesk', sans-serif; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--gold); background: var(--deep); color: var(--fg); }
.board .save .pill { padding: 12px 20px; font-size: 15px; box-shadow: 0 5px 0 #B8901A; }
.board .note { font: 700 12px 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.board ol { margin: 0; padding: 0; list-style: none; counter-reset: r; max-height: 34vh; overflow: auto; }
.board li { counter-increment: r; display: flex; gap: 12px; align-items: center; padding: 6px 12px; border-radius: 10px; font-size: 15px; }
.board li::before { content: counter(r); width: 22px; font: 700 13px 'Space Mono', monospace; color: var(--gold); }
.board li span { flex: 1; text-align: left; }
.board li b { font-family: 'Space Mono', monospace; }
.board li.me { background: var(--pink); }
.gpanel { overflow-y: auto; justify-content: flex-start; padding-top: max(40px, 6vh); }
.gpanel img { width: 90px; height: 90px; }

/* ---------- game tiles: big clear icons, no faces ---------- */
#arcade .select { background: rgba(12, 5, 24, .94); border-top: 3px solid var(--gold); margin: 0 -20px -16px; padding: 12px 12px 16px; }
#arcade .tiles { gap: 12px; }
#arcade .tile-btn { width: 150px; height: auto; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--b); border: 3px solid var(--c); border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .45); overflow: visible; }
#arcade .tile-btn::after { content: none; }
#arcade .tile-btn .ico { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
#arcade .tile-btn b { position: static; font-size: 16px; line-height: 1.1; color: #fff; }
#arcade .tile-btn em { font: 700 10px 'Space Mono', monospace; font-style: normal; letter-spacing: .08em; color: var(--c); }
#arcade .tile-btn i { font: 700 12px 'Space Mono', monospace; font-style: normal; background: var(--c); color: var(--deep); padding: 4px 10px; border-radius: 999px; margin-top: 2px; }
#arcade .tile-btn.on { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 30px var(--c); }
#arcade .tile-btn:hover { transform: translateY(-6px) scale(1.04); }
@media (max-width: 700px) {
  #arcade .select { margin: 0 -10px -12px; padding: 8px 6px 10px; }
  #arcade .tiles { gap: 6px; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  #arcade .tile-btn { width: auto; padding: 8px 4px; }
  #arcade .tile-btn .ico { font-size: 30px; }
  #arcade .tile-btn b { font-size: 12px; }
  #arcade .tile-btn em { display: none; }
  #arcade .tile-btn i { font-size: 10px; padding: 3px 8px; }
}
@media (max-height: 820px) {
  #arcade .tile-btn { padding: 8px 6px; gap: 2px; width: 140px; }
  #arcade .tile-btn .ico { font-size: 34px; }
  #arcade .tile-btn em { display: none; }
  #arcade .select { padding-top: 8px; padding-bottom: 10px; }
  #arcade .select .label { font-size: 12px; }
  #arcade .gtitle .sub { display: none; }
}

/* ---------- head stays on the neck ---------- */
.dancer .head { margin-bottom: -16%; transform-origin: 50% 92%; }
@keyframes headbob { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.dancer svg.body .neck { transform-box: fill-box; }

/* ---------- creative dances ---------- */
.m-floss .armL, .m-floss .armR { animation: floss var(--spd) ease-in-out infinite alternate; }
.m-floss .hips { animation: sway var(--spd) ease-in-out infinite alternate-reverse; }
@keyframes floss { from { transform: rotate(40deg); } to { transform: rotate(-40deg); } }
.m-robot .rig { animation: robobob calc(var(--spd) * 2) steps(1) infinite; }
.m-robot .armL { animation: robotL calc(var(--spd) * 4) steps(1) infinite; }
.m-robot .armR { animation: robotR calc(var(--spd) * 4) steps(1) infinite; }
.m-robot .head { animation: robohead calc(var(--spd) * 2) steps(1) infinite; }
@keyframes robotL { 0% { transform: rotate(90deg); } 25% { transform: rotate(0); } 50% { transform: rotate(160deg); } 75% { transform: rotate(45deg); } }
@keyframes robotR { 0% { transform: rotate(0); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-45deg); } 75% { transform: rotate(-160deg); } }
@keyframes robohead { 0% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes robobob { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.m-moon .rig { animation: moon calc(var(--spd) * 6) ease-in-out infinite alternate; }
.m-moon .legL { animation: kick var(--spd) ease-in-out infinite alternate; }
.m-moon .legR { animation: kick var(--spd) ease-in-out infinite alternate-reverse; }
.m-moon .armL { transform: rotate(20deg); } .m-moon .armR { transform: rotate(-20deg); }
@keyframes moon { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
.m-spin .rig { animation: spin3d calc(var(--spd) * 4) linear infinite; }
.m-spin .armL { transform: rotate(120deg); } .m-spin .armR { transform: rotate(-120deg); }
@keyframes spin3d { to { transform: rotateY(360deg); } }
.m-frog .rig { animation: frog var(--spd) cubic-bezier(.3, 0, .3, 1) infinite alternate; transform-origin: 50% 100%; }
.m-frog .armL { animation: waveL var(--spd) ease-in-out infinite alternate; }
.m-frog .armR { animation: waveR var(--spd) ease-in-out infinite alternate; }
@keyframes frog { from { transform: scaleY(.82) scaleX(1.12); } to { transform: translateY(-28%) scaleY(1.05); } }
.m-worm .rig { animation: worm calc(var(--spd) * 2) ease-in-out infinite; transform-origin: 50% 100%; }
.m-worm .armL { transform: rotate(160deg); } .m-worm .armR { transform: rotate(-160deg); }
@keyframes worm { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-70deg) translateY(10%); } 50% { transform: rotate(-90deg) translateY(25%) scaleY(.9); } 75% { transform: rotate(-40deg) translateY(5%); } }
.moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.moves .label { grid-column: 1 / -1; }
.moves button { padding: 8px 12px; font-size: 13px; }

/* ---------- tiles: never clipped on short screens ---------- */
@media (max-height: 820px) {
  #arcade .tile-btn { flex-direction: row; width: auto; padding: 6px 12px; gap: 8px; }
  #arcade .tile-btn .ico { font-size: 26px; }
  #arcade .tile-btn b { font-size: 14px; white-space: nowrap; }
  #arcade .tile-btn i { display: none; }
}
@media (max-width: 700px) {
  .moves { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .moves button { flex: none; }
  #arcade .tile-btn { flex-direction: column; }
}

/* ---------- the frenemy ---------- */
.head .horns { position: absolute; left: 0; width: 100%; top: -24%; z-index: 3; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.dancer.evil .tag { background: #E5001E; color: #fff; }
.dancer.evil .head i { box-shadow: 0 0 0 3px #E5001E; }

/* ---------- the frenemy ---------- */
.head .horns { position: absolute; left: 0; width: 100%; top: -24%; z-index: 3; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.dancer.evil .tag { background: #E5001E; color: #fff; }
.mirror .tag { transform: scaleX(-1); display: inline-block; }

/* ---------- top 5 board, top-left of the party ---------- */
.hof { position: absolute; left: 20px; top: 110px; z-index: 6; width: 230px; background: rgba(12, 5, 24, .82); border: 2px solid var(--gold); border-radius: 16px; padding: 10px 14px 8px; box-shadow: 0 0 30px rgba(255, 210, 63, .25); }
.hof-title { margin: 0 0 6px; font: 700 13px 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hof ol { margin: 0; padding: 0; list-style: none; }
.hof li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed rgba(255, 246, 236, .18); font-size: 14px; }
.hof li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof li b { font-family: 'Space Mono', monospace; color: var(--lime); }
.hof li.empty { color: var(--lav); font-size: 13px; }
.moves { top: 330px; }
@media (max-height: 760px) { .moves { top: 300px; } .hof { top: 96px; } .hof li:nth-child(n+4) { display: none; } }
@media (max-width: 700px) {
  .hof { left: 6px; top: 150px; width: 40vw; padding: 6px 8px; border-radius: 12px; }
  .hof-title { font-size: 10px; letter-spacing: .06em; }
  .hof li { font-size: 11px; padding: 2px 0; }
}
@media (min-width: 701px) {
  .headline { left: 260px; right: 160px; }
  .headline .big { font-size: clamp(40px, 6.4vw, 110px); }
}
.quit.pause { right: 64px; font-size: 18px; }
.play:not(:has(.gpanel:empty)) .pause { display: none; }

/* pause: a small bar, the game and faces stay visible */
.gpanel.mini { inset: auto; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); flex-direction: row; gap: 10px; padding: 8px 10px 8px 18px; border-radius: 999px; background: rgba(18, 7, 31, .92); border: 2px solid var(--gold); justify-content: center; overflow: visible; }
.gpanel.mini h3 { font-size: 20px; white-space: nowrap; }
.gpanel.mini p { display: none; }
.gpanel.mini .row { margin: 0; flex-wrap: nowrap; gap: 6px; }
.gpanel.mini .pill { padding: 9px 14px; font-size: 13px; box-shadow: none; }

/* ---------- dancing on the beat of the real song ---------- */
body.singing { --spd: .465s; }
.beat .dancers .dancer, .beat .crowd .dancer { animation: hop .2s ease-out; }
.beat-big .dancers .dancer, .beat-big .crowd .dancer { animation: hopbig .3s ease-out; }
@keyframes hop { 40% { transform: translateY(-6px); } }
@keyframes hopbig { 35% { transform: translateY(-16px) scale(1.04); } }
.beat-big .floor span { filter: brightness(1.5); }
.games-btn { animation: gpulse 1.6s ease-in-out infinite; }
@keyframes gpulse { 50% { box-shadow: 0 0 0 8px rgba(255, 210, 63, .25), 0 10px 30px rgba(255, 210, 63, .6); transform: scale(1.04); } }

/* locked countdown: no corner buttons, nothing to sneak through */
body.locked .song-dock, body.locked .games-btn, body.locked .round { display: none !important; }