:root {
  --ink: #162033;
  --navy: #17233a;
  --cream: #fff8df;
  --pink: #ff3c47;
  --yellow: #ffd928;
  --mint: #36d47b;
  --blue: #168ff2;
  --kart-red: #ef3340;
  --kart-blue: #087ce6;
  --kart-yellow: #ffd21f;
  --kart-green: #35b957;
  --asphalt: #262c35;
}

/* Bright arcade-kart presentation layered over the original game UI. */
.race-stage {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(4, 34, 75, .05) 0 36%, rgba(16, 23, 34, .3) 72%, rgba(5, 10, 18, .62) 100%),
    url("assets/arcade-kart-circuit.png") center / cover no-repeat;
}

.race-stage::before {
  z-index: -1;
  inset: 0;
  height: auto;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 49, 61, .92) 0 25%, rgba(255, 211, 31, .92) 25% 50%, rgba(16, 128, 234, .92) 50% 75%, rgba(54, 190, 90, .92) 75%) top / 100% 7px no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 18%);
}

.race-header {
  height: 22%;
  padding: 2.2vh 3.2vw;
  background: linear-gradient(180deg, rgba(8, 19, 39, .62), rgba(8, 19, 39, .08));
}

.eyebrow {
  color: var(--kart-yellow);
  letter-spacing: .19em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.race-header h1,
.focus-header h1 {
  color: #fff;
  font-style: italic;
  letter-spacing: -.035em;
  text-shadow:
    4px 4px 0 var(--kart-red),
    7px 7px 0 #10223f,
    0 10px 24px rgba(0, 0, 0, .45);
}

.race-status {
  position: relative;
  overflow: hidden;
  border: 4px solid #fff;
  color: #fff;
  background: var(--asphalt);
  box-shadow: 0 0 0 5px var(--kart-red), 0 9px 0 rgba(0, 0, 0, .28);
  text-transform: uppercase;
}

.race-status::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 / 16px 16px;
}

.race-status.live {
  color: var(--kart-yellow);
  background: var(--kart-red);
}

.sign-dock::before {
  border: 3px solid #fff;
  color: #fff;
  background: var(--kart-red);
  box-shadow: 0 4px 0 #941c27, 0 7px 18px rgba(0, 0, 0, .3);
}

.sign-card {
  border: 5px solid #fff;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--kart-yellow), var(--kart-red));
  box-shadow: 0 0 0 3px #152239, 0 8px 0 rgba(0, 0, 0, .45), 0 13px 30px rgba(0, 0, 0, .35);
}

.sign-card:nth-child(4n + 2) { background: linear-gradient(145deg, #58d8ff, var(--kart-blue)); }
.sign-card:nth-child(4n + 3) { background: linear-gradient(145deg, #8ef08f, var(--kart-green)); }
.sign-card:nth-child(4n) { background: linear-gradient(145deg, #fff26a, #ff8b21); }

.sign-card-info {
  background: linear-gradient(transparent, rgba(10, 17, 31, .96) 30%);
}

.get-stamp {
  background: rgba(239, 51, 64, .95);
}

.dock-empty {
  border: 4px dashed #fff;
  color: #fff;
  background: rgba(12, 24, 42, .65);
  text-shadow: 0 2px 2px #000;
}

.race-course {
  height: 78%;
  border-top: 7px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, rgba(25, 31, 41, .12), rgba(18, 23, 31, .42));
  box-shadow: inset 0 6px 0 var(--kart-red);
}

.race-lane {
  border-bottom: 3px dashed rgba(255, 255, 255, .48);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .13));
}

.race-lane:nth-child(even) {
  background: linear-gradient(180deg, rgba(22, 143, 242, .06), rgba(0, 0, 0, .18));
}

.lane-water {
  bottom: 1%;
  height: 24%;
  opacity: .38;
  background: repeating-linear-gradient(100deg, transparent 0 34px, rgba(255, 218, 38, .75) 35px 43px, transparent 44px 78px);
  animation: track-streak 1.1s linear infinite;
}

.start-line,
.finish-line {
  width: 30px;
  background: repeating-conic-gradient(#fff 0 25%, #111722 0 50%) 0 / 30px 30px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 0 18px rgba(0, 0, 0, .4);
}

.start-line { left: 6%; }
.finish-line { right: 3.5%; }

.racer img {
  filter: drop-shadow(0 10px 4px rgba(0, 0, 0, .48)) drop-shadow(0 0 2px #fff);
}

.racer-wake {
  background: repeating-radial-gradient(ellipse at right, transparent 0 8px, rgba(255, 225, 50, .88) 10px 13px, transparent 15px 22px);
}

.name-bubble {
  border: 4px solid #fff;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #17233a, #2c3d5b);
  box-shadow: 0 0 0 3px var(--kart-blue), 0 6px 0 rgba(0, 0, 0, .35);
  transform: translate(-50%, -28%) skewX(-5deg);
}

.name-bubble small { color: var(--kart-yellow); }

.place-badge {
  color: #17233a;
  background: var(--kart-yellow);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--kart-red), 0 5px 0 rgba(0, 0, 0, .35);
}

.move-toast {
  border: 5px solid #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--kart-red), #ff7526);
  box-shadow: 0 0 0 5px var(--kart-yellow), 0 10px 0 #7d1c28, 0 18px 38px rgba(0, 0, 0, .42);
  font-style: italic;
}

.winner-banner {
  border: 8px solid #fff;
  border-radius: 20px;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, .13) 0 25%, transparent 0 50%) 0 / 34px 34px,
    linear-gradient(135deg, var(--kart-yellow), #ff8d20 45%, var(--kart-red));
  box-shadow: 0 0 0 7px #17233a, 0 15px 0 #8e202a, 0 28px 65px rgba(0, 0, 0, .5);
}

/* Compact boost-camera scene. */
.focus-stage {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(4, 34, 75, .08), rgba(7, 13, 22, .5)),
    url("assets/arcade-kart-circuit.png") center 44% / cover no-repeat;
  border-bottom: 7px solid var(--kart-red);
}

.focus-stage::before {
  z-index: -1;
  opacity: 1;
  background: linear-gradient(90deg, var(--kart-red) 0 25%, var(--kart-yellow) 25% 50%, var(--kart-blue) 50% 75%, var(--kart-green) 75%) top / 100% 7px no-repeat;
}

.focus-header { background: linear-gradient(90deg, rgba(8, 19, 39, .68), transparent 70%); }
.focus-course { border-top-color: rgba(255, 255, 255, .85); }

/* Pit-control dashboard. */
.control-page {
  background:
    linear-gradient(rgba(248, 251, 255, .94), rgba(239, 245, 251, .97)),
    repeating-conic-gradient(#fff 0 25%, #1d2635 0 50%) 0 / 42px 42px;
}

.control-wrap { width: min(1280px, calc(100% - 32px)); }

.control-header {
  padding: 23px 26px;
  border: 5px solid #17233a;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--kart-red), #ff7b25 58%, var(--kart-yellow));
  box-shadow: 0 9px 0 #17233a;
}

.control-header .eyebrow { color: #fff; }
.control-header h1 { color: #fff; text-shadow: 3px 3px 0 #17233a; }

.panel {
  border: 3px solid #dce3ec;
  border-radius: 18px;
  box-shadow: 0 7px 0 #cad3df, 0 14px 30px rgba(23, 35, 58, .1);
}

.hero-panel { border-top: 8px solid var(--kart-blue); }
.sign-setup-panel { border-top: 8px solid var(--kart-yellow); }
.control-grid > section:first-child { border-top: 8px solid var(--kart-red); }
.control-grid > section:last-child { border-top: 8px solid var(--kart-green); }

.field input,
.test-row input,
.test-fields input {
  border-color: #bfcbd9;
  background: #f8fbff;
}

.field input:focus,
.test-row input:focus,
.test-fields input:focus { border-color: var(--kart-blue); }

.button {
  border: 2px solid #fff;
  border-radius: 10px;
  background: #17233a;
  box-shadow: 0 4px 0 #07101f;
}

.button.start { background: var(--kart-green); box-shadow: 0 4px 0 #187834; }
.button.danger { background: var(--kart-red); box-shadow: 0 4px 0 #971e29; }
.button.focus-link { background: var(--kart-blue); }
.button.drift-link { color: #17233a; background: var(--kart-yellow); box-shadow: 0 4px 0 #b78200; }
.button.ghost { border-color: #17233a; box-shadow: 0 4px 0 #17233a; }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #07101f; }

.racer-card {
  border-color: #cbd7e4;
  background: linear-gradient(135deg, #fff, #f0f7ff);
}

.racer-card img { background: linear-gradient(#49c9ff, #c8f2ff 57%, #61bc52 58%); }
.status-line { background: #edf3f9; }
.signature-summary { background: #e7f8ed; color: #16763a; }
.global-status { border: 3px solid #fff; box-shadow: 0 0 0 3px var(--kart-blue), 0 7px 20px #0003; }

@keyframes track-streak {
  to { transform: translateX(78px); }
}

@media (max-width: 800px) {
  .control-header { padding: 18px; }
  .race-header { padding-inline: 18px; }
  .race-status { border-width: 3px; }
}