* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

:root {
  --bg: #090b12;
  --panel: rgba(255,255,255,0.075);
  --line: rgba(255,255,255,0.13);
  --text: #ffffff;
  --muted: #aeb5c7;
  --orange: #ff5b25;
  --yellow: #ffc83d;
  --blue: #00b7ff;
  --red: #ff3030;
  --green: #40f58b;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 5%, rgba(255,91,37,0.22), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(0,183,255,0.18), transparent 30%),
    linear-gradient(135deg, #070811, #111623 45%, #090b12);
  color: var(--text);
  overflow-x: hidden;
}

.app {
  width: min(1240px, 96%);
  margin: 0 auto;
  padding: 22px 0 42px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.brand h1 {
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 0.95;
  font-style: italic;
  text-shadow: 6px 6px 0 rgba(255,91,37,0.22);
}

.brand p {
  color: var(--muted);
  margin-top: 8px;
  font-size: 15px;
}

.wallet {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 18px;
}

.sidebar,
.panel {
  background: rgba(255,255,255,0.065);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
  backdrop-filter: blur(14px);
}

.sidebar {
  padding: 18px;
  height: fit-content;
  position: sticky;
  top: 16px;
}

.runner-card {
  background:
    linear-gradient(160deg, rgba(255,91,37,0.22), rgba(255,255,255,0.045)),
    radial-gradient(circle at 80% 20%, rgba(0,183,255,0.22), transparent 40%);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
  position: relative;
}

.runner-card:after {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(120deg, transparent 0 18px, rgba(255,255,255,0.06) 18px 20px);
  opacity: 0.6;
  pointer-events: none;
}

.avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffd27b, #f08245 55%, #5c2cff 56%, #1b1556);
  border: 4px solid rgba(255,255,255,0.24);
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.runner-card h2,
.runner-card span,
.runner-card p { position: relative; z-index: 2; }

.runner-card h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.runner-card span {
  color: #9ee7ff;
  font-size: 13px;
  font-weight: 800;
}

.nav {
  display: grid;
  gap: 10px;
}

.nav button,
.primary-btn,
.secondary-btn,
.danger-btn {
  border: 0;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  border-radius: 15px;
  padding: 13px 15px;
  transition: 0.18s ease;
  letter-spacing: 0.2px;
}

.nav button {
  background: rgba(255,255,255,0.085);
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
}

.nav button.active,
.nav button:hover {
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  color: #111;
  transform: translateX(4px);
}

.primary-btn {
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  color: #101010;
  box-shadow: 0 12px 28px rgba(255, 100, 30, 0.28);
}

.secondary-btn {
  background: rgba(255,255,255,0.105);
  border: 1px solid rgba(255,255,255,0.16);
}

.danger-btn {
  background: rgba(255, 74, 74, 0.22);
  border: 1px solid rgba(255, 74, 74, 0.45);
}

button:hover { filter: brightness(1.08); }

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.panel {
  min-height: 720px;
  padding: 22px;
  overflow: hidden;
}

.screen {
  display: none;
  animation: fadeIn 0.25s ease both;
}

.screen.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-size: 30px;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-style: italic;
}

.muted {
  color: var(--muted);
  line-height: 1.6;
}

.tiny-note {
  font-size: 12px;
  color: #b4bdd1;
  line-height: 1.5;
}

.grid,
.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.stage-grid {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  padding: 16px;
}

.card h3 { margin-bottom: 8px; }

.profile-card { margin-top: 18px; }

.stat-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.stat-row {
  display: grid;
  grid-template-columns: 110px 1fr 42px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.bar {
  height: 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--blue), var(--yellow), var(--orange));
  border-radius: inherit;
  transition: 0.4s ease;
}

.form-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.runner-type-box {
  min-width: 220px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 10px 14px;
  display: grid;
  gap: 5px;
}

.runner-type-box strong {
  font-size: 15px;
}

input, select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
  min-width: 220px;
}

option { color: #111; }

/* Race screen */
.race-shell {
  margin-top: 18px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  background: #070913;
  box-shadow: inset 0 0 90px rgba(0,0,0,0.7), 0 26px 80px rgba(0,0,0,0.38);
}

.race-stage {
  height: 455px;
  position: relative;
  overflow: hidden;
  transform-origin: center;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,91,37,0.22), transparent 22%),
    linear-gradient(#161b25 0 32%, #25262a 32% 46%, #8f322b 46% 100%);
}

.race-stage.racing {
  animation: cameraPulse 0.85s ease-in-out infinite;
}

.race-stage.start-impact {
  animation: launchImpact 0.32s ease both;
}

@keyframes cameraPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes launchImpact {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.04) translateX(-8px); filter: brightness(1.45); }
  65% { transform: scale(1.02) translateX(6px); }
  100% { transform: scale(1); filter: brightness(1); }
}

.motion-bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(255,255,255,0.04) 54px 58px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 4px, transparent 4px 72px);
  opacity: 0.7;
  transform: skewX(-12deg);
}

.race-stage.racing .motion-bg {
  animation: bgRush 0.28s linear infinite;
}

@keyframes bgRush {
  from { background-position: 0 0, 0 0; }
  to { background-position: -130px 0, -180px 0; }
}

.track-close {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 255px;
  background:
    linear-gradient(180deg, #a63a30, #762823),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 12px, transparent 12px 42px);
  border-top: 5px solid rgba(255,255,255,0.14);
  transform: perspective(520px) rotateX(9deg);
  transform-origin: bottom;
  overflow: hidden;
}

.track-close:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 50px, rgba(255,255,255,0.02) 50px 95px);
  opacity: 0.35;
}

.race-stage.racing .track-close:before {
  animation: trackRush 0.18s linear infinite;
}

@keyframes trackRush {
  from { transform: translateX(0); }
  to { transform: translateX(-95px); }
}

.lane-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.9) 0 36px, transparent 36px 66px);
  z-index: 2;
}

.lane-line.one { top: 72px; }
.lane-line.two { top: 138px; opacity: 0.78; }
.lane-line.three { top: 204px; opacity: 0.58; }

.race-stage.racing .lane-line {
  animation: laneRush 0.16s linear infinite;
}

@keyframes laneRush {
  from { background-position: 0 0; }
  to { background-position: -102px 0; }
}

.speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(100deg, transparent 0 20%, rgba(255,255,255,0.18) 20% 21%, transparent 21% 100%),
    linear-gradient(100deg, transparent 0 45%, rgba(255,200,61,0.18) 45% 46%, transparent 46% 100%),
    linear-gradient(100deg, transparent 0 70%, rgba(0,183,255,0.2) 70% 71%, transparent 71% 100%);
  mix-blend-mode: screen;
  z-index: 10;
}

.race-stage.racing .speed-lines {
  opacity: 1;
  animation: speedLineRush 0.22s linear infinite;
}

@keyframes speedLineRush {
  from { transform: translateX(90px) skewX(-14deg); }
  to { transform: translateX(-140px) skewX(-14deg); }
}

.air-cut {
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  height: 220px;
  background: repeating-linear-gradient(170deg, transparent 0 30px, rgba(255,255,255,0.13) 30px 33px, transparent 33px 64px);
  opacity: 0;
  z-index: 11;
  pointer-events: none;
}

.race-stage.racing .air-cut {
  opacity: 0.75;
  animation: airRush 0.12s linear infinite;
}

@keyframes airRush {
  from { transform: translateX(0); }
  to { transform: translateX(-120px); }
}

.start-line,
.finish-line {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 255px;
  background: rgba(255,255,255,0.95);
  z-index: 6;
  box-shadow: 0 0 25px rgba(255,255,255,0.4);
}

.start-line { left: 7%; }
.finish-line { right: 8%; }

.finish-label {
  position: absolute;
  right: 5%;
  bottom: 226px;
  background: #fff;
  color: #111;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 1000;
  z-index: 8;
  transform: skewX(-12deg);
}

.lead-indicator {
  position: absolute;
  left: 22px;
  top: 18px;
  background: rgba(0,0,0,0.36);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 10px 12px;
  border-radius: 14px;
  z-index: 25;
  font-weight: 900;
}

.rush-word {
  position: absolute;
  right: 22px;
  top: 18px;
  font-size: clamp(24px, 4vw, 56px);
  font-weight: 1000;
  font-style: italic;
  opacity: 0.16;
  z-index: 3;
  letter-spacing: 2px;
}

.runner {
  position: absolute;
  left: 7%;
  width: 128px;
  height: 170px;
  z-index: 15;
  transform-origin: center bottom;
  transition: filter 0.2s ease;
}

.runner.player { bottom: 132px; }
.runner.rival {
  filter: hue-rotate(165deg) brightness(0.9);
  transform: scale(0.84);
  z-index: 14;
  opacity: 0.94;
}

.runner:before,
.runner:after {
  content: "";
  position: absolute;
  left: -70px;
  top: 48px;
  width: 84px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25));
  opacity: 0;
  transform: skewX(-18deg);
}

.runner:after {
  top: 92px;
  width: 120px;
  background: linear-gradient(90deg, transparent, rgba(255,91,37,0.35));
}

.runner.running:before,
.runner.running:after { opacity: 1; animation: bodyTrail 0.18s linear infinite; }

@keyframes bodyTrail {
  from { transform: translateX(0) skewX(-18deg); opacity: 0.9; }
  to { transform: translateX(-45px) skewX(-18deg); opacity: 0; }
}

.runner-body {
  position: absolute;
  left: 49px;
  top: 48px;
  width: 48px;
  height: 62px;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(145deg, #1482ff, #0645b9);
  transform: rotate(-17deg);
  box-shadow: inset -8px -6px 0 rgba(0,0,0,0.18);
}

.rival .runner-body { background: linear-gradient(145deg, #202836, #070b12); }

.rival:nth-child(2n) .runner-body { filter: hue-rotate(80deg); }
.rival:nth-child(3n) .runner-body { filter: hue-rotate(220deg); }
.rival:nth-child(4n) .runner-body { filter: hue-rotate(315deg); }

.bib {
  position: absolute;
  left: 56px;
  top: 65px;
  width: 32px;
  height: 20px;
  background: #fff;
  color: #111;
  border-radius: 3px;
  font-weight: 1000;
  font-size: 12px;
  display: grid;
  place-items: center;
  transform: rotate(-17deg);
  z-index: 2;
}

.head {
  position: absolute;
  left: 58px;
  top: 13px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f1bd8b;
  box-shadow: inset -7px -4px 0 rgba(0,0,0,0.12);
}

.face-strain {
  position: absolute;
  left: 83px;
  top: 28px;
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: #161616;
  transform: rotate(-8deg);
}

.hair {
  position: absolute;
  left: 48px;
  top: 3px;
  width: 55px;
  height: 29px;
  border-radius: 60% 70% 30% 20%;
  background: #121212;
  transform: rotate(-18deg);
  box-shadow: -14px 6px 0 #121212, 12px 5px 0 #121212;
  z-index: 2;
}

.arm,
.leg {
  position: absolute;
  background: #f1bd8b;
  border-radius: 999px;
  transform-origin: top center;
  box-shadow: inset -5px -4px 0 rgba(0,0,0,0.12);
}

.arm.front { left: 34px; top: 56px; width: 18px; height: 72px; transform: rotate(58deg); z-index: 4; }
.arm.back { left: 86px; top: 54px; width: 18px; height: 72px; transform: rotate(-62deg); z-index: 1; }
.leg.front { left: 53px; top: 103px; width: 20px; height: 86px; transform: rotate(46deg); z-index: 4; }
.leg.back { left: 83px; top: 103px; width: 20px; height: 86px; transform: rotate(-47deg); z-index: 1; }

.shoe {
  position: absolute;
  width: 42px;
  height: 13px;
  background: var(--yellow);
  border-radius: 999px;
  bottom: -4px;
  left: -8px;
  box-shadow: 0 0 12px rgba(255,200,61,0.45);
}

.runner.running .arm.front { animation: armFront 0.16s linear infinite; }
.runner.running .arm.back { animation: armBack 0.16s linear infinite; }
.runner.running .leg.front { animation: legFront 0.16s linear infinite; }
.runner.running .leg.back { animation: legBack 0.16s linear infinite; }
.runner.running { animation: bob 0.12s linear infinite; }
.runner.launch { animation: launchBody 0.38s ease both; }

@keyframes armFront { 0%,100% { transform: rotate(68deg); } 50% { transform: rotate(-65deg); } }
@keyframes armBack { 0%,100% { transform: rotate(-68deg); } 50% { transform: rotate(65deg); } }
@keyframes legFront { 0%,100% { transform: rotate(55deg); } 50% { transform: rotate(-52deg); } }
@keyframes legBack { 0%,100% { transform: rotate(-52deg); } 50% { transform: rotate(55deg); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes launchBody { 0% { transform: translateX(-20px) rotate(-8deg) scale(0.98); } 100% { transform: translateX(0) rotate(0) scale(1); } }

.dust {
  position: absolute;
  left: 7%;
  bottom: 112px;
  width: 160px;
  height: 90px;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
}

.dust span {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,230,190,0.58);
  animation: dustPop 0.5s ease-out both;
}

@keyframes dustPop {
  from { transform: translate(0,0) scale(0.3); opacity: 0.9; }
  to { transform: translate(var(--x), var(--y)) scale(1.8); opacity: 0; }
}

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(70px, 13vw, 150px);
  font-weight: 1000;
  font-style: italic;
  text-shadow: 8px 8px 0 rgba(255,91,37,0.35), 0 18px 38px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 40;
}

.perfect-start {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) skewX(-12deg);
  font-size: clamp(24px, 5vw, 58px);
  font-weight: 1000;
  color: var(--yellow);
  text-shadow: 4px 4px 0 rgba(0,0,0,0.45);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
}

.perfect-start.show {
  animation: startText 1s ease both;
}

@keyframes startText {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7) skewX(-12deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) skewX(-12deg); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1) skewX(-12deg); }
}

.race-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.boost-btn {
  background: linear-gradient(135deg, #00b7ff, #4cffb0);
  color: #041016;
  border: 0;
  border-radius: 16px;
  padding: 15px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 183, 255, 0.2);
}

.race-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.hud-box {
  background: rgba(0,0,0,0.23);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px;
  border-radius: 16px;
  text-align: center;
}

.hud-box small {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}

.boost-meter {
  height: 10px;
  background: rgba(255,255,255,0.13);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.boost-meter span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 0.18s ease;
}

.result-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.1);
  display: none;
  line-height: 1.6;
}

.result-box.show { display: block; }

.training-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.training-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.shop-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}

.tag {
  display: inline-block;
  width: fit-content;
  background: rgba(0, 183, 255, 0.16);
  color: #9ee7ff;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.tag.sponsor {
  background: rgba(255,200,61,0.16);
  color: #ffe083;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #10131f;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 14px 16px;
  border-radius: 16px;
  transform: translateY(120px);
  opacity: 0;
  transition: 0.25s ease;
  z-index: 1000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .nav { grid-template-columns: repeat(3, 1fr); }
  .nav button { text-align: center; }
  .grid,
  .stage-grid,
  .training-actions,
  .race-hud,
  .race-controls { grid-template-columns: 1fr; }
  .runner { transform: scale(0.72); }
  .runner.rival { transform: scale(0.66); }
}

/* Story mode and training upgrades */
.story-card-main {
  margin-top: 18px;
  background:
    linear-gradient(135deg, rgba(255,91,37,0.16), rgba(0,183,255,0.08)),
    rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.16);
}

.story-step-label {
  color: var(--yellow);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.stage-result-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,200,61,0.1);
  border: 1px solid rgba(255,200,61,0.22);
}

.training-status {
  margin-top: 18px;
}

.mini-training-track {
  min-height: 170px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(#111827 0 45%, #783229 45% 100%);
  border: 1px solid rgba(255,255,255,0.14);
  margin-top: 8px;
}

.mini-training-track.running .mini-training-bg {
  animation: miniBgRush 0.22s linear infinite;
}

.mini-training-bg {
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,0.08) 30px 34px, transparent 34px 74px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255,255,255,0.1) 58px 62px);
}

@keyframes miniBgRush {
  from { transform: translateX(0); }
  to { transform: translateX(-80px); }
}

.mini-runner {
  position: absolute;
  left: 18%;
  bottom: 34px;
  width: 70px;
  height: 90px;
  z-index: 4;
}

.mini-head {
  position: absolute;
  left: 34px;
  top: 4px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #f1bd8b;
}

.mini-body {
  position: absolute;
  left: 27px;
  top: 28px;
  width: 28px;
  height: 34px;
  background: linear-gradient(145deg, #1482ff, #0645b9);
  border-radius: 10px;
  transform: rotate(-18deg);
}

.mini-arm,
.mini-leg {
  position: absolute;
  background: #f1bd8b;
  border-radius: 999px;
  transform-origin: top center;
}

.mini-arm { width: 9px; height: 38px; top: 34px; }
.mini-arm.a1 { left: 21px; transform: rotate(50deg); }
.mini-arm.a2 { left: 49px; transform: rotate(-55deg); }
.mini-leg { width: 10px; height: 46px; top: 58px; }
.mini-leg.l1 { left: 31px; transform: rotate(45deg); }
.mini-leg.l2 { left: 49px; transform: rotate(-45deg); }

.mini-training-track.running .mini-runner {
  animation: miniRunnerBob 0.12s linear infinite;
}

.mini-training-track.running .mini-arm.a1 { animation: miniArm1 0.14s linear infinite; }
.mini-training-track.running .mini-arm.a2 { animation: miniArm2 0.14s linear infinite; }
.mini-training-track.running .mini-leg.l1 { animation: miniLeg1 0.14s linear infinite; }
.mini-training-track.running .mini-leg.l2 { animation: miniLeg2 0.14s linear infinite; }

@keyframes miniRunnerBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes miniArm1 { 0%,100% { transform: rotate(60deg); } 50% { transform: rotate(-60deg); } }
@keyframes miniArm2 { 0%,100% { transform: rotate(-60deg); } 50% { transform: rotate(60deg); } }
@keyframes miniLeg1 { 0%,100% { transform: rotate(55deg); } 50% { transform: rotate(-55deg); } }
@keyframes miniLeg2 { 0%,100% { transform: rotate(-55deg); } 50% { transform: rotate(55deg); } }

.training-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px;
}

.training-overlay strong,
.training-overlay span {
  display: block;
}

.training-overlay span {
  color: var(--muted);
  margin-top: 4px;
}

.training-progress {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
  margin-top: 8px;
}

.training-progress span {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  transition: width 0.3s ease;
}

.stage-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.bg-sky,
.bg-far,
.bg-mid,
.bg-overlay {
  position: absolute;
  left: 0;
  right: 0;
}

.bg-sky {
  top: 0;
  height: 48%;
}

.bg-far {
  top: 24%;
  height: 20%;
}

.bg-mid {
  top: 38%;
  height: 18%;
}

.bg-overlay {
  top: 10px;
  right: 18px;
  left: auto;
  width: auto;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0,0,0,0.35);
  color: #fff;
  z-index: 3;
}



.theme-school-morning .bg-sky {
  background: linear-gradient(to bottom, #8fd3ff, #dff5ff);
}

.theme-school-morning .bg-far {
  background:
    linear-gradient(to top, #6b8f5c 0 25%, transparent 25%),
    linear-gradient(to right,
      transparent 0 8%,
      #d9c6a3 8% 18%,
      #c6b08f 18% 28%,
      #b48e62 28% 29%,
      transparent 29% 100%);
}

.theme-school-morning .bg-mid {
  background:
    linear-gradient(to top, #56704a 0 18%, transparent 18%),
    repeating-linear-gradient(to right,
      #2f4f2f 0 12px,
      #476a47 12px 24px);
  opacity: 0.6;
}

.theme-school-bright .bg-sky {
  background: linear-gradient(to bottom, #6ac7ff, #eefcff);
}

.theme-school-bright .bg-far {
  background:
    linear-gradient(to right,
      transparent 0 6%,
      #d8c8ac 6% 16%,
      #f0dfc2 16% 26%,
      #c48f57 26% 27%,
      transparent 27% 100%);
}

.theme-school-bright .bg-mid {
  background:
    repeating-linear-gradient(to right,
      #d92929 0 18px,
      #ffffff 18px 36px,
      #2255cc 36px 54px);
  height: 12%;
  top: 41%;
  opacity: 0.65;
}

.theme-house-flags .bg-sky {
  background: linear-gradient(to bottom, #73c8ff, #dff6ff);
}

.theme-house-flags .bg-far {
  background:
    linear-gradient(to top, #49664a 0 22%, transparent 22%);
}

.theme-house-flags .bg-mid {
  background:
    repeating-linear-gradient(to right,
      #ff3a3a 0 18px,
      #ffd83c 18px 36px,
      #2e7eff 36px 54px,
      #2fd46e 54px 72px);
  height: 14%;
  top: 40%;
  opacity: 0.75;
}

.theme-sports-day .bg-sky {
  background: linear-gradient(to bottom, #59beff, #ddf3ff);
}

.theme-sports-day .bg-far {
  background:
    linear-gradient(to right,
      transparent 0 6%,
      #ece7d8 6% 12%,
      #d1c2a8 12% 18%,
      transparent 18% 100%);
}

.theme-sports-day .bg-mid {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0.06)),
    repeating-linear-gradient(to right, #5b2f00 0 8px, #b18a5d 8px 16px);
  height: 15%;
  top: 39%;
  opacity: 0.85;
}

.theme-local-ground .bg-sky {
  background: linear-gradient(to bottom, #ffb16d, #ffe6b3, #fff5dc);
}

.theme-local-ground .bg-far {
  background:
    linear-gradient(to right,
      transparent 0 10%,
      #8a857a 10% 18%,
      #6a675e 18% 26%,
      transparent 26% 100%);
}

.theme-local-ground .bg-mid {
  background:
    linear-gradient(to top, #4e5f46 0 20%, transparent 20%);
  opacity: 0.75;
}

.theme-taluk-ground .bg-sky {
  background: linear-gradient(to bottom, #b7d7ea, #eef7fc);
}

.theme-taluk-ground .bg-far {
  background:
    linear-gradient(to right,
      transparent 0 10%,
      #b9b9b9 10% 15%,
      #8e8e8e 15% 24%,
      transparent 24% 100%);
}

.theme-taluk-ground .bg-mid {
  background:
    repeating-linear-gradient(to right, #3e4b58 0 10px, #566575 10px 20px);
  height: 13%;
  top: 41%;
  opacity: 0.6;
}

.theme-district-stadium .bg-sky {
  background: linear-gradient(to bottom, #9fd1ff, #edf7ff);
}

.theme-district-stadium .bg-far {
  background:
    linear-gradient(to right,
      transparent 0 5%,
      #878787 5% 11%,
      #5d5d5d 11% 17%,
      #878787 17% 23%,
      transparent 23% 100%);
}

.theme-district-stadium .bg-mid {
  background:
    repeating-linear-gradient(to right,
      #5b5b5b 0 6px,
      #b0b0b0 6px 12px);
  height: 16%;
  top: 39%;
  opacity: 0.8;
}

.theme-state-trial .bg-sky {
  background: linear-gradient(to bottom, #6b7a8d, #c6d0da);
}

.theme-state-trial .bg-far {
  background:
    linear-gradient(to right,
      transparent 0 8%,
      #6a6a6a 8% 20%,
      transparent 20% 100%);
}

.theme-state-trial .bg-mid {
  background:
    repeating-linear-gradient(to right,
      #2f3d4a 0 8px,
      #415464 8px 16px);
  height: 14%;
  top: 41%;
  opacity: 0.75;
}


.theme-state-final .bg-sky {
  background: linear-gradient(to bottom, #18263f, #384e73);
}

.theme-state-final .bg-far {
  background:
    radial-gradient(circle at 15% 40%, rgba(255,255,200,0.35), transparent 8%),
    radial-gradient(circle at 85% 40%, rgba(255,255,200,0.35), transparent 8%),
    linear-gradient(to top, #3b3b3b 0 20%, transparent 20%);
}

.theme-state-final .bg-mid {
  background:
    repeating-linear-gradient(to right, #555 0 7px, #8d8d8d 7px 14px);
  height: 16%;
  top: 39%;
  opacity: 0.8;
}


.theme-national-arena .bg-sky {
  background: linear-gradient(to bottom, #10192b, #1f3558);
}

.theme-national-arena .bg-far {
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,0.3), transparent 8%),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.28), transparent 9%),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,0.3), transparent 8%),
    linear-gradient(to top, #222 0 18%, transparent 18%);
}

.theme-national-arena .bg-mid {
  background:
    repeating-linear-gradient(to right,
      #444 0 6px,
      #bbb 6px 12px);
  height: 18%;
  top: 38%;
  opacity: 0.9;
}