/* Cylinder Racing modal + track / fence / sky scenery */

.racing-modal {
  width: 94vw;
  max-width: 1300px;
  height: 88vh;
  max-height: 900px;
  background: #0d0818;
  border: 1.5px solid #6030b0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 28px rgba(140, 70, 210, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: fadeInScale 0.25s ease;
  font-family: inherit;
}

.racing-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, #160a28 0%, #0d0818 100%);
  border-bottom: 1px solid #3a1860;
  flex: 0 0 auto;
}
.racing-title {
  font-size: 20px;
  font-weight: 800;
  color: #e0b0ff;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(170, 90, 240, 0.4);
}
/* ── Stage: sky + fence + tracks + fence + footer ──────────────────────── */
.racing-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.racing-sky {
  flex: 0 0 18%;
  position: relative;
  background:
    linear-gradient(180deg, #5ab8ff 0%, #a8d8ff 70%, #c8e4ff 100%);
  overflow: hidden;
}
.racing-clouds {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 480px 100%;
  background-position: 0 0;
  /* 8-bit blocky clouds: pixel-art SVG rendered with crisp edges + nearest-neighbour scaling. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32' shape-rendering='crispEdges' preserveAspectRatio='xMidYMid meet'>\
<g fill='%23b8c8e0'>\
<rect x='10' y='9'  width='13' height='1'/>\
<rect x='8'  y='10' width='17' height='1'/>\
<rect x='7'  y='11' width='19' height='1'/>\
<rect x='7'  y='12' width='19' height='1'/>\
<rect x='7'  y='13' width='19' height='1'/>\
<rect x='8'  y='14' width='17' height='1'/>\
<rect x='10' y='15' width='13' height='1'/>\
</g>\
<g fill='%23ffffff'>\
<rect x='11' y='9'  width='11' height='1'/>\
<rect x='9'  y='10' width='15' height='1'/>\
<rect x='8'  y='11' width='17' height='1'/>\
<rect x='8'  y='12' width='17' height='1'/>\
<rect x='8'  y='13' width='17' height='1'/>\
<rect x='9'  y='14' width='15' height='1'/>\
<rect x='11' y='15' width='11' height='1'/>\
</g>\
<g fill='%23b8c8e0'>\
<rect x='56' y='4' width='9'  height='1'/>\
<rect x='54' y='5' width='13' height='1'/>\
<rect x='53' y='6' width='15' height='1'/>\
<rect x='53' y='7' width='15' height='1'/>\
<rect x='54' y='8' width='13' height='1'/>\
<rect x='56' y='9' width='9'  height='1'/>\
</g>\
<g fill='%23ffffff'>\
<rect x='57' y='4' width='7'  height='1'/>\
<rect x='55' y='5' width='11' height='1'/>\
<rect x='54' y='6' width='13' height='1'/>\
<rect x='54' y='7' width='13' height='1'/>\
<rect x='55' y='8' width='11' height='1'/>\
<rect x='57' y='9' width='7'  height='1'/>\
</g>\
<g fill='%23b8c8e0'>\
<rect x='90'  y='13' width='15' height='1'/>\
<rect x='88'  y='14' width='19' height='1'/>\
<rect x='87'  y='15' width='21' height='1'/>\
<rect x='87'  y='16' width='21' height='1'/>\
<rect x='87'  y='17' width='21' height='1'/>\
<rect x='88'  y='18' width='19' height='1'/>\
<rect x='90'  y='19' width='15' height='1'/>\
</g>\
<g fill='%23ffffff'>\
<rect x='91'  y='13' width='13' height='1'/>\
<rect x='89'  y='14' width='17' height='1'/>\
<rect x='88'  y='15' width='19' height='1'/>\
<rect x='88'  y='16' width='19' height='1'/>\
<rect x='88'  y='17' width='19' height='1'/>\
<rect x='89'  y='18' width='17' height='1'/>\
<rect x='91'  y='19' width='13' height='1'/>\
</g>\
</svg>");
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.98;
}

.racing-fence {
  flex: 0 0 26px;
  position: relative;
  background-repeat: repeat-x;
  background-size: 56px 26px;
  /* Wooden post + horizontal rail pattern */
  background-image:
    /* vertical posts */
    linear-gradient(90deg, transparent 0 5px, #7a4620 5px 10px, transparent 10px 33px, #7a4620 33px 38px, transparent 38px 56px),
    /* upper rail */
    linear-gradient(#a07040, #a07040);
  background-position: 0 0, 0 7px;
  background-size: 56px 26px, 56px 5px;
  background-repeat: repeat-x, repeat-x;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.25);
}
.racing-fence-top    { border-bottom: 2px solid #3a2210; }
.racing-fence-bottom { border-top:    2px solid #3a2210; }

/* ── Track area (5 lanes) ──────────────────────────────────────────────── */
.racing-tracks {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.racing-bg-grass {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 24px 16px;
  background-position: 0 0;
  /* Layered: base green + dark blade tufts */
  background-image:
    radial-gradient(circle 1.5px at 4px 10px,  #2d6a2d 55%, transparent 60%),
    radial-gradient(circle 1.5px at 12px 6px,  #1f5c1f 55%, transparent 60%),
    radial-gradient(circle 1.2px at 20px 12px, #3e8044 55%, transparent 60%),
    linear-gradient(180deg, #4aa054 0%, #3e8a44 100%);
  opacity: 1;
  z-index: 0;
}
.racing-track {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s;
}
.racing-track:last-child { border-bottom: none; }
.racing-track:hover      { background: rgba(255, 255, 255, 0.08); }
.racing-track-selected   { background: rgba(255, 235, 120, 0.18); }
.racing-track-selected::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 225, 80, 0.8);
  pointer-events: none;
  z-index: 4;
}

.racing-track-pick {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: auto;
}
.racing-track-pick input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.racing-track-pick label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 20, 10, 0.7);
  color: #fff;
  padding: 3px 9px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.racing-track-pick label:hover { border-color: #ffe060; }
.racing-track-pick input:checked + label {
  background: rgba(255, 225, 80, 0.95);
  color: #2a1a05;
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 225, 80, 0.7);
}
.racing-lane-num {
  display: inline-block;
  width: 18px; height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 11px;
}
.racing-track-pick input:checked + label .racing-lane-num {
  background: #2a1a05;
  color: #ffe060;
}

.racing-lane {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Finish line ───────────────────────────────────────────────────────── */
.racing-finish {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  /* 14px checker — crisp black/white squares */
  background:
    repeating-conic-gradient(#000 0deg 90deg, #fff 90deg 180deg) 0 0 / 14px 14px;
  box-shadow:
    inset 3px 0 0 rgba(255,255,255,0.15),
    inset -3px 0 0 rgba(0,0,0,0.4),
    -3px 0 8px rgba(0,0,0,0.45);
  image-rendering: pixelated;
}
.racing-finish-banner {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #d02828;
  color: #ffe060;
  border: 2px solid #1a0000;
  border-radius: 2px;
  padding: 2px 7px 3px;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #6a0000;
  box-shadow: 0 2px 0 #1a0000;
  image-rendering: pixelated;
}

/* ── Runner (cylinder sprite) ──────────────────────────────────────────── */
.racing-runner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(0);
  width: 22px;
  height: 60px;
  margin-top: -30px;
  will-change: transform;
  z-index: 3;
  pointer-events: none;
}
.racing-runner-cyl {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 8px;
  border-radius: 10px 10px 8px 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.55),
    inset -2px -3px 5px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.2s;
}
.racing-runner-shadow {
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 75%);
  transform-origin: center;
}
.racing-runner-running .racing-runner-cyl {
  animation: racing-bounce 0.28s ease-in-out infinite;
}
.racing-runner-running .racing-runner-shadow {
  animation: racing-shadow 0.28s ease-in-out infinite;
}
.racing-runner-celebrating .racing-runner-cyl {
  animation: racing-celebrate 0.6s ease-in-out infinite;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.55),
    inset -2px -3px 5px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 16px 4px rgba(255, 224, 96, 0.75),
    0 0 28px 8px rgba(255, 180, 60, 0.35);
}
.racing-runner-celebrating .racing-runner-shadow {
  animation: racing-celebrate-shadow 0.6s ease-in-out infinite;
}
@keyframes racing-celebrate {
  0%   { transform: translateY(0)    rotate(-10deg) scale(1); }
  25%  { transform: translateY(-22px) rotate(12deg)  scale(1.1); }
  50%  { transform: translateY(0)    rotate(-10deg) scale(1); }
  75%  { transform: translateY(-16px) rotate(14deg)  scale(1.06); }
  100% { transform: translateY(0)    rotate(-10deg) scale(1); }
}
@keyframes racing-celebrate-shadow {
  0%   { transform: scaleX(1);    opacity: 0.85; }
  25%  { transform: scaleX(0.4);  opacity: 0.25; }
  50%  { transform: scaleX(1);    opacity: 0.85; }
  75%  { transform: scaleX(0.5);  opacity: 0.35; }
  100% { transform: scaleX(1);    opacity: 0.85; }
}
@keyframes racing-bounce {
  0%, 100% { transform: translateY(0)    scaleY(1); }
  30%      { transform: translateY(-14px) scaleY(1.06); }
  55%      { transform: translateY(-10px) scaleY(1.04); }
  80%      { transform: translateY(0)    scaleY(0.95); }
}
@keyframes racing-shadow {
  0%, 100% { transform: scaleX(1);   opacity: 0.85; }
  30%      { transform: scaleX(0.55); opacity: 0.35; }
  55%      { transform: scaleX(0.65); opacity: 0.45; }
  80%      { transform: scaleX(1.05); opacity: 0.9;  }
}

/* ── Stumble / fall states ─────────────────────────────────────────────── */
.racing-runner-stumbling .racing-runner-cyl,
.racing-runner-fallen    .racing-runner-cyl {
  animation: racing-tumble 0.55s cubic-bezier(0.3, 0.9, 0.5, 1.2) forwards !important;
}
.racing-runner-getting-up .racing-runner-cyl {
  animation: racing-getup 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) forwards !important;
}
@keyframes racing-tumble {
  0%   { transform: translateY(0)    rotate(0deg); }
  18%  { transform: translateY(-6px) rotate(-14deg); }   /* trip, arms flail back */
  55%  { transform: translateY(4px)  rotate(110deg); }   /* overshoot past horizontal */
  78%  { transform: translateY(10px) rotate(82deg); }
  100% { transform: translateY(8px)  rotate(90deg); }    /* settle flat on side */
}
@keyframes racing-getup {
  0%   { transform: translateY(8px)  rotate(90deg); }
  25%  { transform: translateY(6px)  rotate(55deg); }
  55%  { transform: translateY(-8px) rotate(-12deg); }   /* overshoot upright */
  80%  { transform: translateY(2px)  rotate(6deg); }
  100% { transform: translateY(0)    rotate(0); }
}
.racing-runner-fallen .racing-runner-cyl {
  filter: grayscale(0.35) brightness(0.8);
}
.racing-runner-stumbling .racing-runner-shadow,
.racing-runner-fallen    .racing-runner-shadow,
.racing-runner-getting-up .racing-runner-shadow {
  animation: none !important;
  transform: scaleX(1.4);
  opacity: 0.55;
  transition: transform 0.3s, opacity 0.3s;
}
.racing-runner-fallen::after {
  content: '💫';
  position: absolute;
  top: -8px;
  left: 50%;
  font-size: 14px;
  pointer-events: none;
  transform-origin: center;
  animation: racing-dizzy 1.4s linear infinite;
}
/* ── Winner celebration droplet spray ──────────────────────────────────── */
.racing-droplet {
  position: absolute;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(200,235,255,0.85) 45%, rgba(120,200,255,0.7) 100%);
  box-shadow: inset -1px -1px 2px rgba(80, 150, 220, 0.45), 0 0 6px rgba(140, 210, 255, 0.5);
  pointer-events: none;
  z-index: 5;
  animation: racing-droplet-fly 1.3s cubic-bezier(0.2, 0.65, 0.55, 1) forwards;
}
@keyframes racing-droplet-fly {
  0%   { transform: translate(0, 0)                  scale(0.6);  opacity: 0;   }
  10%  { transform: translate(0, -4px)               scale(1);    opacity: 1;   }
  70%  { transform: translate(calc(var(--rdx) * 0.75), calc(var(--rdy) * 0.9)) scale(1); opacity: 0.9; }
  100% { transform: translate(var(--rdx), var(--rdy)) scale(0.5); opacity: 0;   }
}

@keyframes racing-dizzy {
  0%   { transform: translateX(-50%) rotate(0deg)   translateY(0);   opacity: 0.55; }
  50%  { transform: translateX(-50%) rotate(180deg) translateY(-2px); opacity: 1;    }
  100% { transform: translateX(-50%) rotate(360deg) translateY(0);   opacity: 0.55; }
}

/* ── Footer (bet + start) ──────────────────────────────────────────────── */
.racing-footer {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: linear-gradient(180deg, #0d0818 0%, #160a28 100%);
  border-top: 1px solid #3a1860;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 52px;
}
.racing-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.racing-bet-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a0f2a;
  border: 1.5px solid #5a2080;
  border-radius: 8px;
  padding: 5px 10px;
  color: #e0c0ff;
  font-weight: 700;
}
.racing-bet-label { font-size: 14px; }
.racing-bet-currency {
  display: inline-flex;
  gap: 2px;
  background: #0d0818;
  border: 1px solid #5a2080;
  border-radius: 6px;
  padding: 2px;
}
.racing-currency-btn {
  background: transparent;
  color: #a080c0;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.racing-currency-btn:hover:not(:disabled):not(.racing-currency-active) {
  background: rgba(170, 90, 240, 0.18);
}
.racing-currency-btn.racing-currency-active {
  background: linear-gradient(135deg, #5a2080, #3a1460);
  color: #fff;
  box-shadow: 0 0 8px rgba(170, 90, 240, 0.5);
}
.racing-currency-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.racing-bet-box input[type="number"] {
  width: 80px;
  background: #0d0818;
  color: #fff;
  border: 1px solid #5a2080;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.racing-bet-box input:disabled { opacity: 0.55; }
.racing-bet-max {
  font-size: 12px;
  color: #a080c0;
}

.racing-start-btn {
  background: linear-gradient(135deg, #2c5a2c, #1a3a1a);
  color: #c8ffc8;
  border: 1.5px solid #4a8a4a;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px rgba(80, 200, 80, 0.35), 0 0 18px rgba(80, 200, 80, 0.15);
  transition: background 0.15s, transform 0.12s, box-shadow 0.2s;
}
.racing-start-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3c7a3c, #225222);
  box-shadow: 0 0 14px rgba(110, 240, 110, 0.55), 0 0 26px rgba(80, 200, 80, 0.28);
  transform: translateY(-1px);
}
.racing-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Result banner ─────────────────────────────────────────────────────── */
.racing-result {
  width: 100%;
  padding-top: 6px;
}
.racing-result-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.racing-result-winner {
  color: #ffe060;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 224, 96, 0.5);
}
.racing-result-win {
  color: #a8ffa8;
  font-size: 15px;
  font-weight: 700;
}
.racing-result-lose {
  color: #ff9090;
  font-size: 14px;
  font-weight: 700;
}
.racing-again-btn {
  background: linear-gradient(135deg, #2a1040, #1a0828);
  color: #e0b0ff;
  border: 1.5px solid #7040a0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.2s;
  box-shadow: 0 0 10px rgba(140, 70, 210, 0.35);
}
.racing-again-btn:hover {
  background: linear-gradient(135deg, #3a1860, #240a3c);
  box-shadow: 0 0 14px rgba(170, 90, 240, 0.55);
}

/* ── Racing header button (row: Training / Manage / Racing / Expedition) ─ */
#racing-btn {
  background: linear-gradient(135deg, #143a2a, #082a18);
  border: 1.5px solid #2a8a5a;
  border-radius: 8px;
  color: #a0ffd0;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s;
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px 2px rgba(70, 210, 140, 0.35), 0 0 20px 4px rgba(70, 210, 140, 0.18);
}
#racing-btn:hover {
  background: linear-gradient(135deg, #1c5a3e, #103a24);
  border-color: #40c080;
  color: #c8ffdc;
  box-shadow: 0 0 14px 3px rgba(100, 240, 160, 0.55), 0 0 28px 6px rgba(70, 210, 140, 0.3);
}