/* ============ SCREEN 2: RACE DASHBOARD ============ */
#screen-race { overflow: hidden; }

.race-topbar {
  flex: none; display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 3vw, 2.5rem);
  padding: .4rem .8rem; position: relative; z-index: 10;
}
.clock {
  font-size: clamp(2rem, 6.5vw, 4rem); font-style: italic; letter-spacing: .04em;
  color: var(--white); -webkit-text-stroke: 2px var(--ink);
  text-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(255,196,0,.5);
  min-width: 4.2em; text-align: center;
}
.clock.warn { color: #ff3b2e; animation: clockPulse .5s ease-in-out infinite alternate; }
@keyframes clockPulse { from { transform: scale(1); } to { transform: scale(1.12); text-shadow: 0 4px 0 var(--ink), 0 0 40px rgba(255,60,20,.95); } }
.race-goal {
  font-size: clamp(.8rem, 2vw, 1.2rem); font-style: italic; letter-spacing: .1em;
  color: var(--gold-hi); text-shadow: 2px 2px 0 rgba(0,0,0,.6);
}
.quit-btn {
  font-size: 1.1rem; font-weight: 900; width: 2.2em; height: 2.2em;
  background: rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.3); border-radius: 50%;
  color: #ffb3ac;
}

/* ---- arena / floating platform ---- */
.arena { flex: 1; position: relative; min-height: 0; padding: 0 clamp(.5rem, 2vw, 2rem) clamp(1rem, 3vh, 2rem); }
.arena-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.backdrop { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.backdrop-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,10,40,.55), rgba(18,10,40,.25) 40%, rgba(18,10,40,.6)); }
.bg-stars { position: absolute; inset: 0; opacity: .5; background:
  radial-gradient(1.5px 1.5px at 12% 20%, #fff9, transparent),
  radial-gradient(2px 2px at 45% 8%, #ffd70088, transparent),
  radial-gradient(1.5px 1.5px at 78% 15%, #fff8, transparent),
  radial-gradient(1px 1px at 30% 45%, #fff6, transparent),
  radial-gradient(2px 2px at 90% 40%, #fff7, transparent),
  radial-gradient(1.5px 1.5px at 60% 30%, #ffd70066, transparent);
  animation: twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .2; } }

.track {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-auto-rows: 1fr; gap: clamp(2px, .8vh, 8px);
  background: linear-gradient(180deg, #3d2a6e, #2a1c50 60%, #1f1440);
  border: var(--outline); border-radius: 14px;
  box-shadow: 0 18px 0 -6px #120b28, 0 30px 40px rgba(0,0,0,.6), inset 0 3px 0 rgba(255,255,255,.14);
  padding: clamp(4px, 1vh, 10px);
  overflow: hidden;
}

/* ---- lane ---- */
.lane {
  position: relative; min-height: 0;
  display: grid; grid-template-columns: clamp(120px, 17vw, 220px) 1fr;
  align-items: stretch; gap: clamp(4px, .8vw, 10px);
}
.lane + .lane::before {
  content: ''; position: absolute; left: 1%; right: 1%; top: calc(-.5 * clamp(2px, .8vh, 8px) - 1px);
  height: 2px; background: linear-gradient(90deg, transparent, var(--pcolor, #8f7bff) 15%, var(--pcolor, #8f7bff) 85%, transparent);
  opacity: .35; filter: blur(.5px);
}

/* first lane column: star button stacked over the penalty button */
.lane-controls { display: flex; flex-direction: column; min-width: 0; gap: clamp(2px, .6vh, 5px); }
.lane-controls .star-btn { flex: 1; margin: clamp(2px, .6vh, 6px) 0 0; }

/* star button */
.star-btn {
  position: relative; z-index: 5; min-width: 0;
  margin: clamp(2px, .6vh, 6px) 0;
  border: 4px solid var(--ink); border-radius: 10px;
  background: linear-gradient(180deg, var(--pcolor) 0%, var(--pcolor) 55%, rgba(0,0,0,.28) 160%);
  box-shadow: 0 5px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.35);
  color: var(--white);
  display: flex; align-items: center; justify-content: center; gap: .35em;
  padding: .2em .5em;
  font-weight: 900;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.star-btn:active, .star-btn.pressed { transform: translateY(4px) scale(.97); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.star-btn .sb-star { font-size: clamp(1.1rem, 3.2vh, 2rem); filter: drop-shadow(1px 2px 0 rgba(0,0,0,.5)); }
.star-btn .sb-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.star-btn .sb-name {
  font-size: clamp(.75rem, 2.4vh, 1.25rem); line-height: 1.05; font-style: italic;
  text-shadow: 1px 2px 0 rgba(0,0,0,.55);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.star-btn .sb-count { font-size: clamp(.65rem, 1.9vh, 1rem); color: #ffe; opacity: .95; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
.star-btn:disabled { filter: saturate(.35) brightness(.75); cursor: default; }
.star-btn.done, .star-btn.done:disabled {
  filter: none; color: var(--ink);
  background: linear-gradient(180deg, #ffe97a, #ffb400);
  box-shadow: 0 0 20px rgba(255,200,0,.65), 0 5px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5);
}
.star-btn.done .sb-name, .star-btn.done .sb-count { color: var(--ink); text-shadow: none; }

/* penalty button — adult-only "misbehaved" control, small and deliberately distinct from the star button */
.penalty-btn {
  flex: none; z-index: 5; min-width: 0;
  height: clamp(1.5rem, 3.6vh, 2.1rem);
  border: 3px solid var(--ink); border-radius: 8px;
  background: linear-gradient(180deg, #ff6b57 0%, #c62828 70%, rgba(0,0,0,.3) 160%);
  box-shadow: 0 4px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.3);
  color: var(--white); font-size: clamp(.8rem, 2.2vh, 1.15rem);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}
.penalty-btn:active, .penalty-btn.pressed { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.penalty-btn:disabled { filter: saturate(.25) brightness(.65); cursor: default; }

/* lane scene: scrolling world strip + one slime + progress rail */
.lane-track {
  position: relative; min-width: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.35);
}
.bg-scroll {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
  background-repeat: repeat-x; background-size: auto 100%;
  transition: transform 850ms cubic-bezier(.5,.05,.4,1);
  will-change: transform;
}
.rail {
  position: absolute; top: 4px; left: 2%; right: 9%; height: 8px; z-index: 6;
  background-color: rgba(0,0,0,.5);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), inset 0 1px 2px rgba(0,0,0,.6);
}
.rail-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 8px rgba(255,200,0,.75);
  transition: width .5s ease;
}
.rail-flag {
  position: absolute; top: 1px; right: 2%; z-index: 6;
  font-size: clamp(.75rem, 2.4vh, 1.15rem);
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.7));
}

/* avatar */
.avatar {
  position: absolute; bottom: 3%; left: 4.5%;
  height: 82%;
  z-index: 4;
}

/* slime */
.slime-slot {
  position: absolute; bottom: 3%; left: 56%;
  aspect-ratio: 1; z-index: 3;
  transition: transform .6s cubic-bezier(.3,.8,.4,1);
}
.slime-slot .strip { image-rendering: pixelated; }
.slime-slot.enter { transform: translateX(180%); transition: none; }
.slime-slot.lunge { transform: translateX(var(--lunge, -40%)); transition: transform .43s cubic-bezier(.6,0,.9,.6); }
.slime-slot.gone { opacity: 0; transition: opacity .25s; }
.slime-slot.hitstop .sprite-box { animation: hitFlash 140ms steps(2) both; }
.slime-slot.big .sprite-box { filter: drop-shadow(0 0 8px rgba(255,130,40,.65)); }
.slime-slot.boss .sprite-box { filter: drop-shadow(0 0 14px rgba(255,40,40,.85)) saturate(1.25); }

/* health pips over multi-hit (big/boss) slimes */
.hp-bar {
  position: absolute; left: 50%; top: -12%; transform: translateX(-50%);
  display: flex; gap: 3px; z-index: 6; pointer-events: none;
}
.hp-pip {
  width: clamp(7px, 1.7vh, 13px); height: clamp(7px, 1.7vh, 13px);
  border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid var(--ink);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.3);
  transition: background .15s ease, box-shadow .15s ease;
}
.hp-pip.full { background: radial-gradient(circle at 35% 30%, #ff9a86, #d6291a 70%); box-shadow: 0 0 6px rgba(255,60,30,.8), inset 0 -2px 0 rgba(0,0,0,.3); }
.avatar .medal {
  position: absolute; top: 0; right: 4%;
  font-size: clamp(.85rem, 2.6vh, 1.4rem);
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.6));
  animation: medalPop 500ms cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes medalPop { from { transform: scale(0) rotate(-180deg); } }
.avatar.hitstop .sprite-box { animation: hitFlash 140ms steps(2) both; }
@keyframes hitFlash { 50% { filter: brightness(3) saturate(0); } }
.avatar.recoil .sprite-box { animation: recoilKnock .38s ease-out; }
@keyframes recoilKnock { 30% { transform: translateX(-7%) rotate(-4deg); } }

/* ============ CHARACTER POSES (sprite sheets) ============ */
.sprite-box { position: relative; height: 100%; max-width: 100%; margin: 0 auto; }
.anim {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; overflow: hidden; display: none;
}
.anim .strip { display: block; height: 100%; }
@keyframes stripLoop { to { transform: translateX(-100%); } }
@keyframes stripOnce { to { transform: translateX(var(--end)); } }

/* idle (default) */
.anim.idle { display: block; }

/* run: play move strip; fighters without one (.hop) bounce their idle strip */
.pose-run .anim.idle { display: none; }
.pose-run .anim.move { display: block; }
.pose-run .sprite-box.hop .anim.idle { display: block; }
.pose-run .sprite-box.hop { animation: hopBounce .3s ease-in-out infinite; }
@keyframes hopBounce { 50% { transform: translateY(-13%) rotate(3deg); } }

/* eat: play the reaction strip once */
.pose-eat .anim { display: none; }
.pose-eat .anim.eat { display: block; }
.pose-eat .sprite-box { animation: eatPop .4s cubic-bezier(.2,1.4,.4,1) both; }
.pose-eat .sprite-box:not(:has(.anim.eat)) .anim.idle { display: block; }
@keyframes eatPop { 30% { transform: scale(1.1, .9); } 60% { transform: scale(.95, 1.06); } }

/* cheer: move strip in place + jump */
.pose-cheer .anim.idle { display: none; }
.pose-cheer .anim.move { display: block; }
.pose-cheer .sprite-box.hop .anim.idle { display: block; }
.pose-cheer .sprite-box { animation: cheerJump .55s ease-in-out infinite alternate; }
@keyframes cheerJump { from { transform: translateY(0); } to { transform: translateY(-9%); } }

/* hurt: quick reaction strip (slimes) */
.pose-hurt .anim { display: none; }
.pose-hurt .anim.hurt { display: block; }
.pose-hurt .sprite-box:not(:has(.anim.hurt)) .anim.idle { display: block; }

/* charred/KO: play dead strip once and hold; fighters without one faint comically */
.pose-charred .anim { display: none; }
.pose-charred .anim.dead { display: block; }
.pose-charred .sprite-box.no-dead .anim.idle {
  display: block;
  filter: grayscale(1) brightness(.5) sepia(.3);
}
.pose-charred .sprite-box.no-dead { animation: koFall .7s cubic-bezier(.4,1.6,.6,1) forwards; transform-origin: 50% 90%; }
@keyframes koFall { 55% { transform: rotate(-95deg) translateY(4%); } 75% { transform: rotate(-82deg); } 100% { transform: rotate(-88deg) translateY(4%); } }

/* ============ FX ============ */
.fly-star {
  position: fixed; z-index: 65; pointer-events: none;
  font-size: clamp(1.4rem, 4vh, 2.4rem);
  filter: drop-shadow(0 0 8px rgba(255,215,0,.9));
}
.sparkle {
  position: absolute; width: 10px; height: 10px; z-index: 6; pointer-events: none;
  background: radial-gradient(circle, #fff, var(--gold) 55%, transparent 70%);
  border-radius: 50%;
  animation: sparkleFly 550ms ease-out both;
}
@keyframes sparkleFly { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.dust {
  position: absolute; bottom: 4%; width: 14px; height: 14px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(200,190,255,.25) 60%, transparent);
  border-radius: 50%;
  animation: dustPuff 500ms ease-out both;
}
@keyframes dustPuff { to { transform: translate(-26px, -12px) scale(2.2); opacity: 0; } }
.speedline {
  position: absolute; height: 3px; width: 40px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8));
  border-radius: 2px;
  animation: lineZip 350ms ease-out both;
}
@keyframes lineZip { to { transform: translateX(-70px); opacity: 0; } }
.smoke {
  position: absolute; width: 20px; height: 20px; z-index: 7; pointer-events: none;
  background: radial-gradient(circle, rgba(90,90,90,.9), rgba(40,40,40,.5) 60%, transparent);
  border-radius: 50%;
  animation: smokeRise 1.2s ease-out both;
}
@keyframes smokeRise { to { transform: translate(var(--dx, 6px), -70px) scale(2.6); opacity: 0; } }
.confetti-bit {
  position: absolute; width: 8px; height: 12px; z-index: 7; pointer-events: none;
  animation: confFall 1.4s cubic-bezier(.3,.4,.6,1) both;
}
@keyframes confFall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
.spotlight {
  position: absolute; inset: -10% -4%; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at var(--fx, 88%) 50%, rgba(255,240,150,.5), transparent 40%);
  animation: spotIn 900ms ease-out both;
}
@keyframes spotIn { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.finish-zoom { animation: laneZoom 700ms cubic-bezier(.2,.9,.3,1) both; z-index: 8; }
@keyframes laneZoom { 30% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---- results ---- */
.results-list { display: flex; flex-direction: column; gap: .45rem; }
.result-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .35rem .7rem;
  background: rgba(255,255,255,.55); border: 3px solid var(--ink); border-radius: 8px;
  animation: rowIn 400ms cubic-bezier(.2,1.2,.4,1) both; animation-delay: var(--delay, 0ms);
}
.result-row .rr-place { font-size: clamp(1.1rem, 3vw, 1.7rem); min-width: 1.6em; text-align: center; }
.result-row .rr-avatar { width: clamp(44px, 7vw, 70px); height: clamp(44px, 7vw, 66px); flex: none; }
.result-row .rr-name { font-size: clamp(.95rem, 2.6vw, 1.4rem); font-style: italic; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-row .rr-time { font-size: clamp(.8rem, 2.2vw, 1.1rem); color: #4a4032; }
.result-row.toasted { background: rgba(60,50,50,.65); color: #eee; }
.result-row .pose-charred .sprite-box.no-dead { animation: none; }   /* no KO-fall inside rows */
.result-row.toasted .rr-time { color: #ffb08a; font-style: italic; }
@keyframes rowIn { from { transform: translateX(-40px) skewX(-6deg); opacity: 0; } }

/* narrow screens: stack button above lane */
@media (max-width: 640px) {
  .lane { grid-template-columns: clamp(96px, 26vw, 140px) 1fr; }
  .race-topbar { gap: .6rem; }
}