/* Superkids V1 -- Race 🏎️ (Star Drive) */
.race-root { display: block !important; }
.race-wrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: #bfe6ff; user-select: none; -webkit-user-select: none; }
.race-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* speed lines (boost) */
.race-lines {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.0) 0deg 4deg, rgba(255,255,255,.55) 4.4deg 5deg, rgba(255,255,255,0) 5.4deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, transparent 34%, #000 72%);
  mask-image: radial-gradient(ellipse at 50% 52%, transparent 34%, #000 72%);
  animation: race-lines .35s linear infinite;
}
@keyframes race-lines { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } 100% { transform: rotate(0deg) scale(1); } }

/* ---------- HUD ---------- */
.race-hud {
  position: absolute; left: 0; right: 0; top: 96px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 12px; pointer-events: none;
  transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.race-hud.off { opacity: 0; transform: translateY(-30px); }
.race-hud > * { pointer-events: auto; }
.race-top { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.race-q {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-width: 230px; min-height: 86px; max-width: calc(100vw - 112px);
  padding: 8px 30px; border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #fff6ec 100%);
  font-size: 50px; font-weight: 800; line-height: 1; color: #2d2a45;
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px #ff6b6b, 0 9px 0 5px #d94b57, 0 18px 30px rgba(40,20,80,.28);
}
.race-q.pop { animation: race-qpop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes race-qpop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.race-pics { font-size: 38px; letter-spacing: 1px; line-height: 1.1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.race-num { color: #6c5ce7; }
.race-op { color: #ff6b6b; }
.race-eq { color: #2d2a45; opacity: .8; }
.race-qm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 18px; background: #ffd23f; color: #2d2a45;
  box-shadow: inset 0 -5px 0 #f0a500; animation: race-qm 1.2s ease-in-out infinite;
}
@keyframes race-qm { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
.race-ready { font-size: 36px; color: #ff6b6b; }
.race-say {
  flex: none; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffd23f 60%, #ffb703);
  font-size: 36px; line-height: 1;
  box-shadow: 0 0 0 5px #fff, 0 8px 0 5px #e09a00, 0 16px 24px rgba(40,20,80,.25);
}
.race-say img { width: 46px; height: 46px; }
.race-say:active { transform: translateY(6px); box-shadow: 0 0 0 5px #fff, 0 2px 0 5px #e09a00; }

.race-info { display: flex; align-items: center; gap: 10px; pointer-events: none !important; }
.race-prog {
  display: flex; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.88); box-shadow: 0 4px 0 rgba(40,20,80,.15), 0 8px 16px rgba(40,20,80,.12);
}
.race-prog i {
  font-style: normal; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e6e3f3; color: #9c97b8; font-size: 17px; font-weight: 800;
  transition: background .3s, color .3s;
}
.race-prog i.on { background: linear-gradient(180deg, #4ee39a, #00b894); color: #fff; box-shadow: inset 0 -3px 0 #009a7a; animation: sk-bump .5s cubic-bezier(.34,1.56,.64,1); }
.race-stars {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 14px 4px 10px; border-radius: 999px; background: rgba(255,255,255,.9);
  font-size: 22px; font-weight: 800; line-height: 1.1; color: #2d2a45;
  box-shadow: 0 4px 0 #e09a00, 0 8px 16px rgba(40,20,80,.12);
}
.race-stars.bump { animation: sk-bump .45s cubic-bezier(.34,1.56,.64,1); }

/* ---------- steering ---------- */
.race-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between;
  padding: 0 18px max(20px, env(safe-area-inset-bottom)); pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.race-ctrl.off { opacity: 0; transform: translateY(40px); }
.race-ctrl.off .race-steer { pointer-events: none; }
.race-steer {
  pointer-events: auto; touch-action: none;
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #ffffff, #ffeef2 65%, #ffd9e2);
  box-shadow: 0 0 0 6px rgba(255,255,255,.85), 0 9px 0 6px #e05a6e, 0 18px 28px rgba(40,20,80,.3);
  transition: transform .08s, box-shadow .08s;
}
.race-steer img { width: 66px; height: 66px; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.race-fb { font-size: 52px; color: #ff4757; font-family: system-ui, sans-serif; line-height: 1; }
.race-steer.down, .race-steer:active { transform: translateY(8px) scale(.95); box-shadow: 0 0 0 6px #fff, 0 1px 0 6px #e05a6e, 0 6px 12px rgba(40,20,80,.25); }

/* ---------- cheer + countdown ---------- */
.race-cheer {
  position: absolute; left: 50%; top: 46%; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: 50px; font-weight: 800; color: #fff; white-space: nowrap; line-height: 1;
  --c: #ff6b6b; --d: #d94b57;
  padding: 14px 30px 16px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: 0 0 0 6px #fff, 0 10px 0 6px var(--d), 0 22px 34px rgba(40,20,80,.3);
  text-shadow: 0 3px 0 var(--d);
}
.race-cheer.good { --c: #00b894; --d: #00866a; }
.race-cheer.oops { --c: #8f7dff; --d: #5243c9; font-size: 38px; }
.race-cheer.go { animation: race-cheer 1.25s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes race-cheer {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  75% { transform: translate(-50%, -62%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -95%) scale(.9); opacity: 0; }
}
.race-count {
  position: absolute; left: 50%; top: 36%; z-index: 3; pointer-events: none;
  width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffd23f 60%, #ffb703);
  box-shadow: 0 0 0 10px #fff, 0 12px 0 10px #e09a00, 0 26px 40px rgba(40,20,80,.35);
  font-size: 120px; font-weight: 800; color: #fff; line-height: 1;
  -webkit-text-stroke: 4px #ff6b6b; paint-order: stroke fill; text-shadow: 0 6px 0 #d94b57;
}
.race-count.go { width: 240px; margin-left: -120px; border-radius: 90px; font-size: 96px;
  background: radial-gradient(circle at 35% 30%, #a8ffd9, #2fe0a0 60%, #00b894); box-shadow: 0 0 0 10px #fff, 0 12px 0 10px #009a7a, 0 26px 40px rgba(40,20,80,.35);
  -webkit-text-stroke-color: #00866a; text-shadow: 0 6px 0 #00866a; }
.race-count.pop { animation: race-count .9s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes race-count {
  0% { transform: scale(.2) rotate(-20deg); opacity: 0; }
  30% { transform: scale(1.1) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- start card ---------- */
.race-over {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(45,42,69,0) 55%, rgba(45,42,69,.28));
}
.race-card {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,236,.96)); border-radius: 38px;
  padding: 18px 26px 22px; text-align: center; width: min(430px, 100%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 12px 0 6px #e05a6e, 0 30px 60px rgba(40,20,80,.35);
  animation: race-card .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes race-card { 0% { transform: translateY(80px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
.race-title { font-size: 50px; font-weight: 800; line-height: 1.05; letter-spacing: .5px; }
.race-title span:first-child { color: #ffb703; -webkit-text-stroke: 2px #e09a00; }
.race-title span:last-child { color: #ff4757; }
.race-sub { font-size: 21px; font-weight: 700; color: #5c5878; margin: 4px 0 14px; }
.race-go {
  font-size: 46px; font-weight: 800; color: #fff; padding: 10px 56px; min-height: 92px; border-radius: 999px;
  background: linear-gradient(180deg, #4ee39a, #00b894);
  box-shadow: 0 0 0 5px #fff, 0 9px 0 5px #00866a, 0 18px 28px rgba(0,100,80,.35);
  animation: race-goflo 1.6s ease-in-out infinite;
  -webkit-text-stroke: 2px #00866a; paint-order: stroke fill;
}
.race-go:active { transform: translateY(7px); box-shadow: 0 0 0 5px #fff, 0 2px 0 5px #00866a; animation: none; }
@keyframes race-goflo { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.race-how { margin-top: 14px; font-size: 18px; font-weight: 700; color: #8a86a6; display: flex; align-items: center; justify-content: center; gap: 6px; }
.race-how i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: #ffe3e8; color: #ff4757; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }

@media (max-width: 600px) {
  .race-hud { top: 84px; gap: 8px; }
  .race-q { font-size: 40px; min-height: 76px; min-width: 190px; padding: 6px 18px; border-radius: 28px; gap: 6px; }
  .race-pics { font-size: 30px; }
  .race-qm { width: 48px; height: 48px; border-radius: 15px; }
  .race-say { width: 70px; height: 70px; }
  .race-say img { width: 40px; height: 40px; }
  .race-steer { width: 98px; height: 98px; }
  .race-steer img { width: 58px; height: 58px; }
  .race-cheer { font-size: 38px; padding: 12px 24px 14px; }
  .race-cheer.oops { font-size: 28px; padding: 12px 22px 14px; }
  .race-prog i { width: 26px; height: 26px; font-size: 15px; }
  .race-title { font-size: 44px; }
  .race-count { width: 150px; height: 150px; margin: -75px 0 0 -75px; font-size: 96px; }
  .race-count.go { width: 200px; margin-left: -100px; font-size: 78px; }
}
@media (max-height: 560px) {
  .race-hud { top: 80px; flex-direction: row; justify-content: center; }
  .race-q { min-height: 66px; font-size: 34px; }
  .race-card { padding: 12px 20px 14px; }
  .race-title { font-size: 38px; }
  .race-go { min-height: 72px; font-size: 36px; }
}