/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  font-family: sans-serif;
  touch-action: manipulation;          /* kill 300ms tap delay */
  -webkit-user-select: none;
  user-select: none;
}

/* ===== Garage ===== */
#garage {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,240,180,0.9) 0%, rgba(255,220,100,0.4) 3%, transparent 6%),
    linear-gradient(to bottom, #4a90d9 0%, #7ab8e8 40%, #a8d8f0 65%, #d4eef8 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Clouds */
#garage::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  box-shadow:
    /* Cloud 1 — upper left */
    15vw 20vh 12px 8px rgba(255,255,255,0.5),
    18vw 19vh 10px 6px rgba(255,255,255,0.6),
    21vw 21vh 14px 10px rgba(255,255,255,0.45),
    /* Cloud 2 — mid right */
    65vw 30vh 16px 12px rgba(255,255,255,0.4),
    68vw 29vh 12px 8px rgba(255,255,255,0.5),
    72vw 31vh 14px 10px rgba(255,255,255,0.35),
    /* Cloud 3 — upper centre */
    40vw 12vh 10px 8px rgba(255,255,255,0.45),
    43vw 11vh 14px 10px rgba(255,255,255,0.5),
    46vw 13vh 12px 8px rgba(255,255,255,0.4),
    /* Wisp — low left */
    8vw 42vh 8px 6px rgba(255,255,255,0.25),
    12vw 41vh 10px 6px rgba(255,255,255,0.3);
  animation: cloud-drift 8s ease-in-out infinite alternate;
}

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(8px); }
}

/* Floor */
#garage::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: #555;
  border-top: 4px solid #777;
  z-index: 1;
}

/* ===== Garage decorations ===== */
.garage-decor {
  position: absolute;
  pointer-events: none;
}

/* Tool pegboard */
.garage-decor--pegboard {
  z-index: 3;
  left: 6%;
  bottom: 30%;
  width: 18%;
  max-width: 140px;
  aspect-ratio: 5 / 4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Crect x='0' y='0' width='140' height='100' rx='3' fill='%236b4c2a' stroke='%23553a1e' stroke-width='2'/%3E%3Crect x='4' y='4' width='132' height='92' rx='2' fill='%237a5a34'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='%23553a1e'/%3E%3Ccircle cx='128' cy='10' r='2.5' fill='%23553a1e'/%3E%3Ccircle cx='12' cy='90' r='2.5' fill='%23553a1e'/%3E%3Ccircle cx='128' cy='90' r='2.5' fill='%23553a1e'/%3E%3Cg fill='none' stroke='%23333' stroke-opacity='0.55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20,14)'%3E%3Cpath d='M3 0 L0 6 L3 8 L3 52 Q3 54 5 54 L7 54 Q9 54 9 52 L9 8 L12 6 L9 0 Z'/%3E%3Cline x1='6' y1='8' x2='6' y2='48' stroke-opacity='0.2'/%3E%3C/g%3E%3Cg transform='translate(44,14)'%3E%3Ccircle cx='5' cy='4' r='4'/%3E%3Crect x='3.5' y='8' width='3' height='46' rx='1.5'/%3E%3C/g%3E%3Cg transform='translate(64,14)'%3E%3Crect x='0' y='0' width='14' height='10' rx='2'/%3E%3Crect x='5' y='10' width='4' height='44' rx='1'/%3E%3C/g%3E%3Cg transform='translate(88,14)'%3E%3Cpath d='M1 12 Q0 6 4 0 L8 0 Q12 6 11 12'/%3E%3Cpath d='M3 12 L1 54' stroke-linecap='round'/%3E%3Cpath d='M9 12 L11 54' stroke-linecap='round'/%3E%3Cpath d='M4 18 L8 18'/%3E%3C/g%3E%3Cg transform='translate(110,14)'%3E%3Cpath d='M0 8 L4 0 L12 0 L16 8 L12 10 L10 8 L6 8 L4 10 Z'/%3E%3Crect x='6' y='10' width='4' height='44' rx='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / contain;
  transform: translateY(-4px);
}

/* Floor markings — safety chevrons + tyre tracks */
.garage-decor--floor-marks {
  z-index: 2;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(212, 160, 23, 0.7) 0px, rgba(212, 160, 23, 0.7) 8px,
      transparent 8px, transparent 18px
    ) left top / 100% 12px no-repeat,
    linear-gradient(to right,
      transparent 28%, rgba(20,20,20,0.1) 30%, rgba(20,20,20,0.06) 32%, transparent 34%,
      transparent 66%, rgba(20,20,20,0.1) 68%, rgba(20,20,20,0.06) 70%, transparent 72%
    ) left 12px / 100% calc(100% - 12px) no-repeat;
}

/* Hanging work lamp */
.garage-decor--lamp {
  z-index: 4;
  top: 0;
  left: 38%;
  width: 4px;
  height: 12%;
  background: #333;
}
.garage-decor--lamp::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 16px;
  background: #444;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 3px 3px;
}
.garage-decor--lamp::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(50vw, 300px);
  height: min(60vh, 400px);
  background: radial-gradient(ellipse at top center, rgba(255,240,180,0.18) 0%, transparent 65%);
}

/* Garage door frame (right edge — cars enter from right) */
.garage-decor--door-frame {
  z-index: 3;
  right: 0; top: 0;
  width: 14px;
  height: 70%;
  background: linear-gradient(to right, #666, #888, #777, #666);
}
.garage-decor--door-frame::before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: min(40vw, 280px);
  height: 10px;
  background: linear-gradient(to bottom, #777, #666, #555);
}
.garage-decor--door-frame::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: min(40vw, 280px);
  height: 10px;
  background: linear-gradient(to bottom, #555, #777, #666);
}

/* ===== Robot lab theme ===== */
#garage[data-theme="lab"] {
  background: linear-gradient(to bottom,
    #1a1a3a 0%, #2d1b4e 20%, #5c2d6e 40%,
    #c44e3d 60%, #e8863a 72%, #f0a848 80%);
}

/* Sunset clouds */
#garage[data-theme="lab"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255,160,80,0.5);
  box-shadow:
    /* Warm cloud 1 */
    20vw 35vh 14px 10px rgba(200,100,60,0.35),
    24vw 34vh 12px 8px rgba(220,120,70,0.4),
    28vw 36vh 16px 12px rgba(180,90,50,0.3),
    /* Warm cloud 2 */
    55vw 28vh 12px 10px rgba(180,80,60,0.3),
    59vw 27vh 16px 12px rgba(200,100,70,0.35),
    63vw 29vh 14px 8px rgba(170,80,50,0.25),
    /* Dark silhouette cloud higher up */
    35vw 18vh 10px 8px rgba(60,30,60,0.3),
    39vw 17vh 14px 10px rgba(50,25,50,0.35),
    /* Wisp near horizon */
    75vw 45vh 10px 6px rgba(240,160,80,0.3),
    80vw 44vh 12px 8px rgba(220,140,60,0.25);
  animation: none;
}

/* Metal floor */
#garage[data-theme="lab"]::after {
  background: #3a3d4a;
  border-top: 4px solid #555;
}

/* Monitor rack replaces pegboard */
#garage[data-theme="lab"] .garage-decor--pegboard {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Crect x='0' y='0' width='140' height='100' rx='3' fill='%23333' stroke='%23555' stroke-width='2'/%3E%3Crect x='8' y='8' width='56' height='38' rx='2' fill='%23111' stroke='%23444' stroke-width='1'/%3E%3Crect x='76' y='8' width='56' height='38' rx='2' fill='%23111' stroke='%23444' stroke-width='1'/%3E%3Cline x1='14' y1='20' x2='50' y2='20' stroke='%2344cc66' stroke-width='1.5' opacity='0.8'/%3E%3Cline x1='14' y1='26' x2='40' y2='26' stroke='%2344cc66' stroke-width='1.5' opacity='0.5'/%3E%3Cline x1='14' y1='32' x2='55' y2='32' stroke='%2344cc66' stroke-width='1.5' opacity='0.6'/%3E%3Ccircle cx='104' cy='22' r='8' fill='none' stroke='%234ae' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M96,22 L104,18 L112,22 L104,30 Z' fill='none' stroke='%234ae' stroke-width='1' opacity='0.5'/%3E%3Crect x='82' y='34' width='20' height='4' rx='1' fill='%234ae' opacity='0.3'/%3E%3Ccircle cx='36' cy='70' r='3' fill='%23e63946'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%232a9d8f'/%3E%3Ccircle cx='104' cy='70' r='3' fill='%23f4a261'/%3E%3Crect x='8' y='58' width='124' height='6' rx='1' fill='%23444'/%3E%3Crect x='26' y='80' width='88' height='12' rx='2' fill='%23222' stroke='%23444' stroke-width='1'/%3E%3Cline x1='34' y1='86' x2='106' y2='86' stroke='%2344cc66' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E") no-repeat bottom / contain;
}

/* Grid floor markings replace chevrons + tyre tracks */
#garage[data-theme="lab"] .garage-decor--floor-marks {
  background:
    linear-gradient(to right,
      rgba(100,120,180,0.15) 1px, transparent 1px
    ) left top / 40px 100%,
    linear-gradient(to bottom,
      rgba(100,120,180,0.15) 1px, transparent 1px
    ) left top / 100% 40px;
}

/* Cool white strip light replaces warm lamp */
#garage[data-theme="lab"] .garage-decor--lamp {
  background: #555;
}
#garage[data-theme="lab"] .garage-decor--lamp::before {
  background: #666;
}
#garage[data-theme="lab"] .garage-decor--lamp::after {
  background: radial-gradient(ellipse at top center, rgba(180,200,255,0.15) 0%, transparent 65%);
}

/* Door frame — darker metallic */
#garage[data-theme="lab"] .garage-decor--door-frame {
  background: linear-gradient(to right, #444, #666, #555, #444);
}
#garage[data-theme="lab"] .garage-decor--door-frame::before {
  background: linear-gradient(to bottom, #555, #444, #333);
}
#garage[data-theme="lab"] .garage-decor--door-frame::after {
  background: linear-gradient(to bottom, #333, #555, #444);
}

/* Parts shelf — car version by default, robot version in lab mode */
.garage-decor--parts-shelf {
  z-index: 2;
  left: 25%;
  bottom: 30%;
  transform: translateY(-4px);
  width: 14%;
  max-width: 110px;
  aspect-ratio: 5 / 7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3C!-- Back panel (wood) --%3E%3Crect x='0' y='0' width='100' height='140' rx='2' fill='%236b4c2a' stroke='%23553a1e' stroke-width='2'/%3E%3Crect x='3' y='3' width='94' height='134' rx='1' fill='%237a5a34'/%3E%3C!-- Top shelf --%3E%3Crect x='6' y='28' width='88' height='4' rx='1' fill='%23553a1e'/%3E%3Crect x='8' y='24' width='3' height='8' fill='%23493219'/%3E%3Crect x='89' y='24' width='3' height='8' fill='%23493219'/%3E%3C!-- Tyre on top shelf --%3E%3Ccircle cx='35' cy='16' r='10' fill='%23222' stroke='%23333' stroke-width='1.5' opacity='0.8'/%3E%3Ccircle cx='35' cy='16' r='5' fill='%23444' stroke='%23555' stroke-width='1' opacity='0.8'/%3E%3Ccircle cx='35' cy='16' r='1.5' fill='%23333' opacity='0.8'/%3E%3C!-- Hubcap on top shelf --%3E%3Ccircle cx='72' cy='18' r='7' fill='%23ccc' stroke='%23999' stroke-width='1' opacity='0.7'/%3E%3Cline x1='72' y1='12' x2='72' y2='24' stroke='%23aaa' stroke-width='0.8' opacity='0.5'/%3E%3Cline x1='66' y1='18' x2='78' y2='18' stroke='%23aaa' stroke-width='0.8' opacity='0.5'/%3E%3Ccircle cx='72' cy='18' r='2' fill='%23bbb' opacity='0.7'/%3E%3C!-- Middle shelf --%3E%3Crect x='6' y='68' width='88' height='4' rx='1' fill='%23553a1e'/%3E%3Crect x='8' y='64' width='3' height='8' fill='%23493219'/%3E%3Crect x='89' y='64' width='3' height='8' fill='%23493219'/%3E%3C!-- Oil can on middle shelf --%3E%3Crect x='18' y='48' width='16' height='18' rx='2' fill='%23e8c84a' stroke='%23c4a530' stroke-width='1' opacity='0.7'/%3E%3Crect x='22' y='44' width='8' height='6' rx='1' fill='%23d4b440' stroke='%23c4a530' stroke-width='0.8' opacity='0.7'/%3E%3Cpath d='M28,44 L32,38' stroke='%23c4a530' stroke-width='1.5' stroke-linecap='round' opacity='0.7'/%3E%3C!-- Spark plug on middle shelf --%3E%3Crect x='58' y='50' width='6' height='16' rx='1' fill='%23ddd' stroke='%23aaa' stroke-width='0.8' opacity='0.6'/%3E%3Crect x='56' y='46' width='10' height='6' rx='1.5' fill='%23fff' stroke='%23ccc' stroke-width='0.8' opacity='0.6'/%3E%3Cline x1='61' y1='40' x2='61' y2='46' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round' opacity='0.6'/%3E%3C!-- Funnel on middle shelf --%3E%3Cpath d='M76,66 L76,56 L72,48 L84,48 L80,56 L80,66' fill='%23e65' stroke='%23c44' stroke-width='1' opacity='0.6'/%3E%3C!-- Bottom shelf --%3E%3Crect x='6' y='108' width='88' height='4' rx='1' fill='%23553a1e'/%3E%3Crect x='8' y='104' width='3' height='8' fill='%23493219'/%3E%3Crect x='89' y='104' width='3' height='8' fill='%23493219'/%3E%3C!-- Tyre on bottom shelf --%3E%3Ccircle cx='35' cy='96' r='10' fill='%23222' stroke='%23333' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='35' cy='96' r='5' fill='%23555' stroke='%23666' stroke-width='1' opacity='0.7'/%3E%3Ccircle cx='35' cy='96' r='1.5' fill='%23444' opacity='0.7'/%3E%3C!-- Spray can on bottom shelf --%3E%3Crect x='62' y='86' width='14' height='20' rx='3' fill='%234a9' stroke='%23387' stroke-width='1' opacity='0.6'/%3E%3Crect x='65' y='82' width='8' height='6' rx='1' fill='%23ccc' stroke='%23aaa' stroke-width='0.8' opacity='0.6'/%3E%3Crect x='67' y='78' width='4' height='5' rx='1' fill='%23aaa' opacity='0.5'/%3E%3C/svg%3E") no-repeat bottom / contain;
}
#garage[data-theme="lab"] .garage-decor--parts-shelf {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3C!-- Back panel --%3E%3Crect x='2' y='2' width='96' height='136' rx='2' fill='%23383b48' stroke='%23555' stroke-width='1.5'/%3E%3C!-- Top shelf --%3E%3Crect x='6' y='28' width='88' height='4' rx='1' fill='%23666'/%3E%3Crect x='8' y='24' width='3' height='8' fill='%23555'/%3E%3Crect x='89' y='24' width='3' height='8' fill='%23555'/%3E%3C!-- Arm on top shelf (zigzag accordion) --%3E%3Cg stroke='%23aaa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7'%3E%3Cpath d='M22,27 L22,23 L28,19 L22,15 L28,11 L22,7'/%3E%3Ccircle cx='22' cy='27' r='3' fill='%23888' stroke='%23777' stroke-width='1'/%3E%3Crect x='19' y='5' width='6' height='4' rx='1' fill='%23999' stroke='none'/%3E%3C/g%3E%3C!-- Gear/cog on top shelf --%3E%3Ccircle cx='55' cy='18' r='6' fill='%23666' stroke='%23888' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='55' cy='18' r='2.5' fill='%23444' opacity='0.7'/%3E%3C!-- Small bolt on top shelf --%3E%3Ccircle cx='78' cy='22' r='4' fill='%23999' stroke='%23777' stroke-width='1' opacity='0.6'/%3E%3Cline x1='76' y1='22' x2='80' y2='22' stroke='%23555' stroke-width='1.5' opacity='0.6'/%3E%3Cline x1='78' y1='20' x2='78' y2='24' stroke='%23555' stroke-width='1.5' opacity='0.6'/%3E%3C!-- Middle shelf --%3E%3Crect x='6' y='68' width='88' height='4' rx='1' fill='%23666'/%3E%3Crect x='8' y='64' width='3' height='8' fill='%23555'/%3E%3Crect x='89' y='64' width='3' height='8' fill='%23555'/%3E%3C!-- Leg on middle shelf --%3E%3Crect x='20' y='46' width='10' height='20' rx='2' fill='%23999' stroke='%23888' stroke-width='1' opacity='0.7'/%3E%3Crect x='18' y='42' width='14' height='6' rx='1' fill='%23888' stroke='%23777' stroke-width='1' opacity='0.7'/%3E%3C!-- Boot on middle shelf --%3E%3Cpath d='M55,68 L55,54 L58,52 L68,52 L70,54 L70,68' fill='%23888' stroke='%23666' stroke-width='1' opacity='0.7'/%3E%3Crect x='53' y='64' width='20' height='4' rx='1' fill='%23777' opacity='0.6'/%3E%3C!-- Bottom shelf --%3E%3Crect x='6' y='108' width='88' height='4' rx='1' fill='%23666'/%3E%3Crect x='8' y='104' width='3' height='8' fill='%23555'/%3E%3Crect x='89' y='104' width='3' height='8' fill='%23555'/%3E%3C!-- Power core on bottom shelf --%3E%3Crect x='20' y='90' width='24' height='14' rx='3' fill='%2366ccff' stroke='%2344aadd' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='32' cy='97' r='3' fill='%2344aadd' opacity='0.5'/%3E%3C!-- Antenna on bottom shelf --%3E%3Cline x1='70' y1='108' x2='70' y2='88' stroke='%23aaa' stroke-width='2' opacity='0.6'/%3E%3Ccircle cx='70' cy='86' r='3' fill='%23e63946' stroke='%23c33' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E") no-repeat bottom / contain;
}

/* ===== Splash screen ===== */
.splash {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.4s;
}
.splash--hidden {
  opacity: 0;
  pointer-events: none;
}
.splash__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.splash__icon {
  font-size: min(25vw, 150px);
  animation: pulse 1.5s ease-in-out infinite;
}
.splash__title {
  font-family: 'Bungee Shade', sans-serif;
  font-size: min(12vw, 72px);
  color: #ffe066;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}

/* ===== Reset button ===== */
#reset-btn {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 50;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#reset-btn:active { transform: scale(0.9); }
.reset-btn--flash {
  animation: reset-flash 0.4s ease-out;
}
@keyframes reset-flash {
  0%   { background: rgba(230,57,70,0.8); }
  100% { background: rgba(0,0,0,0.35); }
}

/* ===== Hint toggle ===== */
#hint-btn {
  position: fixed;
  top: 12px; right: 68px;
  z-index: 50;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}
#hint-btn:active { transform: scale(0.9); }
#hint-btn.hint-btn--off { opacity: 0.35; }

/* ===== Sound toggle ===== */
#sound-btn {
  position: fixed;
  top: 12px; right: 124px;
  z-index: 50;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}
#sound-btn:active { transform: scale(0.9); }
#sound-btn.sound-btn--off { opacity: 0.35; }

/* ===== Ultimate mode — hide fault dashboard ===== */
.garage--dashboard-off .car__dashboard {
  opacity: 0;
  pointer-events: none;
}

/* ===== Coin jar ===== */
#coin-jar {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 50;
  width: 48px;
  height: 56px;
  border: 3px solid #d4a44c;
  border-radius: 0 0 10px 10px;
  background: rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#coin-jar::before {
  content: '🪙';
  position: absolute;
  top: -10px;
  font-size: 16px;
  z-index: 2;
}
#coin-jar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(to top, #d4a44c, #e9c46a);
  transition: height 0.4s ease-out;
  border-radius: 0 0 7px 7px;
}
#coin-jar-count {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  padding-bottom: 4px;
}
.coin-jar--pop {
  animation: jar-pop 0.3s ease-out;
}
@keyframes jar-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ===== Unlock preview (below coin jar) ===== */
#unlock-preview {
  position: fixed;
  top: 74px; left: 12px;
  z-index: 50;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.unlock-preview__icon {
  font-size: 20px;
  line-height: 1;
}
.unlock-preview__bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
}
.unlock-preview__fill {
  height: 100%;
  background: linear-gradient(to right, #e9c46a, #f4a261);
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.unlock-preview__target {
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  font-weight: bold;
}

/* ===== Unlock fanfare overlay ===== */
#unlock-fanfare {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
#unlock-fanfare.unlock-fanfare--active {
  opacity: 1;
  pointer-events: auto;
}
.unlock-fanfare__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.unlock-fanfare__icon {
  font-size: 120px;
  line-height: 1;
  transform: scale(0);
}
.unlock-fanfare--active .unlock-fanfare__icon {
  animation: fanfare-bounce 0.5s ease-out forwards;
}
.unlock-fanfare__label {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  opacity: 0;
}
.unlock-fanfare--active .unlock-fanfare__label {
  animation: fanfare-label 0.4s 0.3s ease-out forwards;
}
.unlock-fanfare__fireworks {
  position: absolute;
  top: 50%;
  left: 50%;
}
.unlock-fanfare__particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
}
.unlock-fanfare--active .unlock-fanfare__particle {
  animation: firework-burst 0.8s 0.2s ease-out forwards;
}

@keyframes fanfare-bounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes fanfare-label {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes firework-burst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.3); }
}

/* ===== Toolbox ===== */
#toolbox {
  position: fixed;
  bottom: 4%;
  right: 12px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(60, 50, 40, 0.9);
  border-radius: 12px;
  border: 2px solid #8b7355;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#toolbox.toolbox--active {
  opacity: 1;
  pointer-events: auto;
  animation: toolbox-slide-up 0.3s ease-out;
}
@keyframes toolbox-slide-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.toolbox__tool {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, border-color 0.2s;
}
.toolbox__tool:active {
  transform: scale(0.85);
}

/* Hint glow on the correct tool */
.toolbox__tool--hint {
  border-color: rgba(255, 255, 100, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 255, 100, 0.4),
              0 0 12px rgba(255, 255, 100, 0.3);
  animation: glow-pulse 1s ease-in-out infinite;
}

/* Selected tool */
.toolbox__tool--selected {
  border-color: #2a9d8f;
  background: rgba(42, 157, 143, 0.3);
  box-shadow: 0 0 8px rgba(42, 157, 143, 0.5);
}

/* Wrong tool — shake */
.toolbox__tool--wrong {
  animation: tool-shake 0.4s ease-out;
  border-color: #e63946;
}

@keyframes tool-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* ===== Warehouse / parts shelf ===== */
#warehouse {
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(60, 50, 40, 0.85);
  border-radius: 12px;
  border: 2px solid #8b7355;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#warehouse.warehouse--active {
  opacity: 1;
  pointer-events: auto;
  animation: shelf-slide-up 0.3s ease-out;
}

.warehouse__part {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: part-appear 0.3s ease-out;
  transition: transform 0.2s;
}
.warehouse__part:active {
  transform: scale(0.85);
}

/* Grabbed — flies toward the car */
.warehouse__part--grabbed {
  animation: part-fly 0.25s ease-in forwards;
}

@keyframes shelf-slide-up {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes part-appear {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes part-fly {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5) translateY(-80px); opacity: 0; }
}

/* ===== Car container ===== */
.car {
  position: absolute;
  bottom: 28%;
  width: 70vw;
  max-width: 400px;
  aspect-ratio: 400 / 182;
  z-index: 10;
  overflow: visible;
  transition: transform 0.5s ease-out;
}
.car--robot {
  aspect-ratio: 400 / 282;
}

/* Entry / parked states */
.car--entering { transform: translateX(120vw); }
.car--parked   { transform: translateX(0); }

/* Entry animation for cars and robots — animationend is more reliable than
   transitionend when starting off-screen (e.g. on mobile/iOS Safari). */
@keyframes car-drive-in {
  from { transform: translateX(120vw); }
  to   { transform: translateX(0); }
}
.car--parked:not(.car--spaceship):not(.car--planet) {
  animation: car-drive-in 0.5s ease-out forwards;
}

/* ===== Inline SVG ===== */
.car__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ===== Dashboard indicators (DOM, above SVG) ===== */
.car__dashboard {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.car__dashboard--visible {
  opacity: 1;
}

.car__indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0;
  border: 2px solid rgba(0,0,0,0.3);
  transition: background 0.3s, box-shadow 0.3s;
}

/* Category colours — structural red, wash blue, paint orange, sticker green.
   --ind-colour is used by the shared pulse animation. */
.car__indicator--fault {
  --ind-colour: 230, 57, 70;
  background: #e63946;
  box-shadow: 0 0 4px rgba(var(--ind-colour), 0.4);
}
.car__indicator--wash.car__indicator--fault {
  --ind-colour: 69, 123, 157;
  background: #457b9d;
}
.car__indicator--paint.car__indicator--fault {
  --ind-colour: 244, 162, 97;
  background: #f4a261;
}
/* Cosmetic planet fault — orange (same as paint tier) */
.car__indicator--forest.car__indicator--fault {
  --ind-colour: 244, 162, 97;
  background: #f4a261;
}
/* Upgrade planet fault — teal (same as sticker/jetpack tier) */
.car__indicator--city.car__indicator--fault {
  --ind-colour: 42, 157, 143;
  background: #2a9d8f;
}
/* Upgrade faults — teal (same as sticker) */
.car__indicator--jetpack.car__indicator--fault,
.car__indicator--laser.car__indicator--fault,
.car__indicator--shield.car__indicator--fault,
.car__indicator--antenna.car__indicator--fault {
  --ind-colour: 42, 157, 143;
  background: #2a9d8f;
}
.car__indicator--sticker.car__indicator--fault {
  --ind-colour: 42, 157, 143;
  background: #2a9d8f;
}

/* Active fault — pulsing the category colour */
.car__indicator--active {
  animation: indicator-pulse 0.8s ease-in-out infinite;
  transform: scale(1.15);
}

/* Fixed — dimmed grey */
.car__indicator--ok {
  background: #888;
  box-shadow: none;
  opacity: 0.5;
}

@keyframes indicator-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(var(--ind-colour), 0.6); transform: scale(1.15); }
  50%      { box-shadow: 0 0 14px rgba(var(--ind-colour), 0.9); transform: scale(1.3); }
}

/* ===== SVG car paint — fill via CSS variable ===== */
.svg-paint {
  fill: var(--vehicle-colour, var(--car-colour, #e63946));
}

/* ===== SVG state rules ===== */

/* Common SVG transform setup */
.car__tyre, .car__screw, .car__engine, .car__jack-arm, .car__bonnet-lid {
  transform-box: fill-box;
  transform-origin: center center;
}

/* Jacked up — lift upper group, wheels/jack stay */
.car--jacked .car__upper {
  transform: translateY(-12px);
  transition: transform 0.3s ease-out;
}
.car__upper {
  transition: transform 0.3s ease-out;
}

/* ===== Tyre colours (fallbacks — inline fills from WHEEL_STYLES take precedence) ===== */
.car__tyre-rubber { stroke: #333; stroke-width: 2; }
.car__tyre-rim    { stroke-width: 1; }
.car__tyre-hub    { stroke-width: 1; }

/* ===== Tyre states ===== */
.car__tyre {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s, opacity 0.3s;
}

/* Flat — squashed */
.car__tyre--flat {
  transform: scaleY(0.75);
  transform-origin: center bottom;
}

/* Removed — faded */
.car__tyre--removed {
  opacity: 0.15;
  transform: scale(0.6);
}

/* New tyre */
.car__tyre--new {
  animation: svg-bounce 0.3s ease-out;
}

/* Fixing feedback */
.car__tyre--fixing {
  animation: svg-bounce 0.4s ease-out;
}

/* ===== Wheel roll — entry (CW) and exit (CCW) ===== */

@keyframes wheel-roll-ccw { to { transform: rotate(-360deg); } }

.car--rolling-in .car__tyre:not(.car__tyre--flat) {
  animation: wheel-roll-ccw 0.5s linear;
}

.car--rolling-out .car__tyre:not(.car__tyre--flat) {
  animation: wheel-roll-ccw 0.5s linear infinite;
}

/* ===== Screw states ===== */
.car__screw {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, opacity 0.2s;
}

/* Loosened — rotates and pops */
.car__screw--loose {
  animation: svg-screw-untwist 0.3s ease-out forwards;
}

/* Tightened feedback */
.car__screw--tight {
  animation: svg-screw-twist 0.3s ease-out;
}

/* Hidden when tyre removed */
.car__screw--hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== Smoke puffs (engine fault indicator) ===== */
.car__smoke--hidden { display: none; }

.car__smoke-puff {
  fill: rgba(90, 90, 90, 0.8);
  animation: smoke-rise 1.8s ease-out infinite;
}
.car__smoke-puff--2 { animation-delay: 0.4s; }
.car__smoke-puff--3 { animation-delay: 0.9s; }
.car__smoke-puff--4 { animation-delay: 1.3s; }

.car__smoke--clearing .car__smoke-puff {
  animation: smoke-clear 0.5s ease-out forwards;
}

@keyframes smoke-rise {
  0%   { opacity: 0.85; transform: translateY(0) scale(1); }
  50%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-30px) scale(2); }
}

@keyframes smoke-clear {
  to { opacity: 0; transform: translateY(-20px) scale(2); }
}

/* ===== Bonnet states ===== */
.car__bonnet {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.car__bonnet--hidden { display: none; }

.car__bonnet-lid {
  transform-origin: left bottom;
  transition: transform 0.4s ease-out;
}
.car__bonnet--open .car__bonnet-lid {
  transform: rotate(-45deg);
}
.car__bonnet--open {
  pointer-events: none;
}
.car__bonnet--open .car__bonnet-lid {
  pointer-events: auto;
}

/* ===== Engine bay states ===== */
.car__engine-bay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.car__engine-bay--hidden { display: none; }
.car__engine-bay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Engine block */
.car__engine {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s, opacity 0.3s;
}
.car__engine--broken {
  animation: engine-smoke 1s ease-in-out infinite;
}
.car__engine--removed {
  opacity: 0.15;
  transform: scale(0.6);
}
.car__engine--new {
  animation: svg-bounce 0.3s ease-out;
}

@keyframes engine-smoke {
  0%, 100% { filter: drop-shadow(0 -3px 4px rgba(100,100,80,0.4)); }
  50%      { filter: drop-shadow(0 -6px 8px rgba(100,100,80,0.6)); }
}

/* ===== Paint damage states ===== */
.car__paint-damage {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s;
}
.car__paint-damage--hidden { display: none; }


/* Body needs to be tappable for paint steps */
.car__body {
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Fresh paint flash */
.car__body--fresh-paint {
  animation: paint-shine 0.6s ease-out;
}
.car__roof--fresh-paint {
  animation: paint-shine 0.6s ease-out;
}

@keyframes paint-shine {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* ===== Mud overlay states (car wash) ===== */
.car__mud {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.8s;
}
.car__mud--hidden { display: none; }

/* Washing — mud fades out with a blur */
.car__mud--washing {
  opacity: 0;
  filter: blur(4px);
}

/* Sparkle after wash */
.car__body--sparkle {
  animation: wash-sparkle 0.8s ease-out;
}
.car__roof--sparkle {
  animation: wash-sparkle 0.8s ease-out;
}

@keyframes wash-sparkle {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.6) saturate(1.3); }
  60%  { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

/* ===== Sticker zone states ===== */
.car__sticker-zone {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.car__sticker-zone--hidden { display: none; }

.car__sticker-zone.hint-glow rect[stroke] {
  fill: rgba(255, 255, 50, 0.3);
  stroke: rgba(255, 255, 50, 0.8);
  stroke-dasharray: none;
}


@keyframes sticker-slap {
  0%   { transform: scale(2) rotate(-10deg); opacity: 0.5; }
  60%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Sticker picker options */
.sticker-picker__option {
  width: 48px;
  height: 48px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: transform 0.15s;
}
.sticker-picker__option:active {
  transform: scale(0.85);
}

/* ===== Picker row (shared container for colour / sticker / part pickers) ===== */
.picker-row {
  position: fixed;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  z-index: 30;
  padding: 12px 16px;
  max-width: 90vw;
  background: rgba(0,0,0,0.6);
  border-radius: 20px;
  animation: picker-slide-up 0.3s ease-out;
}

.colour-picker__swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}
.colour-picker__swatch:active {
  transform: scale(0.85);
}
.colour-picker__swatch--current {
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.55), inset 0 0 0 5px rgba(0,0,0,0.18);
}

@keyframes picker-slide-up {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Part picker item styles (container uses .picker-row) */
.part-picker__option {
  --blade-sweep: 14px;
  --blade-speed: 0.16s;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.part-picker__option:active {
  transform: scale(0.85);
}
.part-picker__option--selected {
  border-color: #2a9d8f;
  background: rgba(42,157,143,0.25);
  transform: scale(1.1);
}

/* ===== Jack states ===== */
.car__jack {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease-in-out;
}
.car__jack--hidden {
  opacity: 0;
  pointer-events: none;
}

.car__jack-arm {
  transition: transform 0.3s ease-out;
  transform-origin: center bottom;
}

/* Raised — arm extends upward */
.car__jack--raised .car__jack-arm {
  transform: scaleY(1.8);
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes arrow-bounce-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ===== Shared data-role styles ===== */

/* Lift-arrow text — hidden by default, shown via .lift-arrow--visible */
[data-role="lift-arrow"] text {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.lift-arrow--visible text { opacity: 0; }
.lift-arrow--visible[data-direction="up"] text:first-of-type {
  opacity: 1;
  animation: arrow-bounce 0.8s ease-in-out infinite;
}
.lift-arrow--visible[data-direction="down"] text:last-of-type {
  opacity: 1;
  animation: arrow-bounce-down 0.8s ease-in-out infinite;
}

/* Generic sticker-zone applied — font size set per-zone via --sticker-fs CSS variable */
.sticker-zone--applied text {
  font-size: var(--sticker-fs, 36px);
}
/* Planet city zones have a fixed layout not tied to --sticker-fs */
.planet__city-zone.sticker-zone--applied text {
  font-size: 32px;
}
.sticker-zone--applied rect[stroke] {
  display: none;
}
.sticker-zone--applied {
  animation: sticker-slap 0.4s ease-out;
}

/* ===== Drag feedback ===== */
.dragging {
  opacity: 0.7;
  transition: none !important;
}

/* ===== Hint glow (works on both SVG and DOM elements) ===== */
.hint-glow {
  filter: drop-shadow(0 0 6px rgba(255, 255, 50, 0.9))
          drop-shadow(0 0 14px rgba(255, 255, 50, 0.6))
          drop-shadow(0 0 24px rgba(255, 255, 50, 0.3));
}

/* Engine — bright outline when highlighted inside dark engine bay */
.car__engine.hint-glow > rect:nth-child(2) {
  stroke: rgba(255, 255, 50, 0.8) !important;
  stroke-width: 3 !important;
}

/* Screws — light up the touch-target halo when highlighted */
.car__screw.hint-glow .car__screw-halo {
  fill: rgba(255, 255, 50, 0.55) !important;
}

/* ===== Rocket flame (DOM element appended to car) ===== */
.car__flame {
  position: absolute;
  right: -8%;
  top: 40%;
  width: 0;
  height: 0;
  z-index: 15;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 30px solid #ff6600;
  filter: blur(2px);
  animation: flame-flicker 0.1s ease-in-out infinite alternate,
             flame-grow 0.3s ease-out forwards;
}
.car__flame::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -30px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 22px solid #ffcc00;
  filter: blur(1px);
}
.car__flame::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -30px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 14px solid #fff5cc;
}

@keyframes flame-flicker {
  0%   { transform: scaleY(0.85) scaleX(1); opacity: 0.9; }
  100% { transform: scaleY(1.15) scaleX(1.1); opacity: 1; }
}

@keyframes flame-grow {
  0%   { transform: scaleX(0.3) scaleY(0.5); opacity: 0; }
  100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}

/* Hide shadow during exit so it doesn't fly away with the vehicle */
[class*="car--exit-"] .car__shadow { display: none; }

/* ===== Exit animations ===== */
.car--exit-wheelie {
  animation: exit-wheelie 1.2s ease-in forwards;
}
.car--exit-rocket {
  overflow: visible;
  animation: exit-rocket 1.8s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.car--exit-confetti {
  animation: exit-confetti 1.2s ease-in forwards;
}
.car--exit-honk {
  animation: exit-honk 1.2s ease-in forwards;
}
.car--exit-jetpack {
  overflow: visible;
  animation: exit-jetpack 1.6s cubic-bezier(0.3, 0, 0.7, 1) forwards;
}
.car--exit-rocket-boost {
  overflow: visible;
  animation: exit-rocket-boost 1.2s cubic-bezier(0.2, 0, 1, 1) forwards;
}
.car--exit-propeller {
  overflow: visible;
  animation: exit-propeller 2.2s ease-in-out forwards;
}
.car--exit-balloon {
  overflow: visible;
  animation: exit-balloon 2.8s cubic-bezier(0.1, 0.4, 0.3, 1) forwards;
}

/* ===== Keyframes ===== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@keyframes svg-bounce {
  0%   { transform: scale(0.5); transform-box: fill-box; }
  60%  { transform: scale(1.15); transform-box: fill-box; }
  100% { transform: scale(1); transform-box: fill-box; }
}

@keyframes svg-screw-untwist {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.4); }
  100% { transform: rotate(360deg) scale(1.2); }
}

@keyframes svg-screw-twist {
  0%   { transform: rotate(0deg) scale(1.2); }
  50%  { transform: rotate(-180deg) scale(0.85); }
  100% { transform: rotate(-360deg) scale(1); }
}

/* Robot bolt keyframes — more exaggerated scale for visibility */
@keyframes bolt-untwist {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(2); }
  100% { transform: rotate(360deg) scale(1.7); }
}
@keyframes bolt-twist {
  0%   { transform: rotate(0deg) scale(1.7); }
  50%  { transform: rotate(-180deg) scale(0.7); }
  100% { transform: rotate(-360deg) scale(1); }
}

/* Toolbox hint still uses box-shadow */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,100,0.6), 0 0 16px rgba(255,255,100,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,255,100,0.3), 0 0 24px rgba(255,255,100,0.2); }
}

@keyframes exit-wheelie {
  0%   { transform: translateX(0) rotate(0); }
  30%  { transform: translateX(0) rotate(-8deg); }
  100% { transform: translateX(-120vw) rotate(-8deg); }
}

@keyframes exit-rocket {
  0%   { transform: translateX(0) scale(1); }
  15%  { transform: translateX(8px) scale(1.05); }
  30%  { transform: translateX(5px) scale(1.05); }
  100% { transform: translateX(-130vw) scale(1.05); }
}

@keyframes exit-confetti {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-120vw); }
}

@keyframes exit-honk {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(8px); }
  20%  { transform: translateX(-5px); }
  100% { transform: translateX(-120vw); }
}

@keyframes exit-jetpack {
  0%   { transform: translateY(0) scale(1); }
  10%  { transform: translateY(4px) scale(1); }
  25%  { transform: translateY(0) scale(1.02); }
  100% { transform: translateY(-120vh) scale(0.8); }
}

@keyframes exit-rocket-boost {
  0%   { transform: translateY(0) scale(1); }
  8%   { transform: translateY(6px) scale(1.05); }
  20%  { transform: translateY(0) scale(1.05); }
  100% { transform: translateY(-130vh) scale(0.85); }
}

@keyframes exit-propeller {
  0%   { transform: translateY(0) rotate(0); }
  15%  { transform: translateY(-2px) rotate(1deg); }
  30%  { transform: translateY(-15px) rotate(-1.5deg); }
  50%  { transform: translateY(-40px) rotate(1deg); }
  70%  { transform: translateY(-80px) rotate(-1deg); }
  100% { transform: translateY(-120vh) rotate(0.5deg); }
}

/* Propeller blade spin — horizontal sweep simulates side-view rotor */
.robot__propeller-blade--front {
  animation: propeller-sweep var(--blade-speed, 0.14s) linear infinite alternate;
}
.robot__propeller-blade--back {
  animation: propeller-sweep var(--blade-speed, 0.14s) linear infinite alternate-reverse;
}
/* Idle speed before test fires */
.robot__jetpack-flames--idle .robot__propeller-blade { --blade-speed: 0.6s; }
/* Attach-step tap target — set dynamically per booster style */
.robot__jetpack--tap-target {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@keyframes propeller-sweep {
  0%   { translate: calc(-1 * var(--blade-sweep, 56px)); }
  100% { translate: var(--blade-sweep, 56px); }
}

@keyframes exit-balloon {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(-2vh) scale(1); }
  30%  { transform: translateY(-8vh) translateX(8px) scale(0.98); }
  50%  { transform: translateY(-20vh) translateX(-5px) scale(0.95); }
  70%  { transform: translateY(-45vh) translateX(6px) scale(0.9); }
  100% { transform: translateY(-120vh) translateX(0) scale(0.8); }
}

/* ===== Robot SVG paint — fill via CSS variable ===== */
.svg-robot-paint {
  fill: var(--vehicle-colour, var(--robot-colour, #7c8a96));
}

/* ===== Robot base states ===== */

/* Boot (tyre equivalent) */
.robot__boot {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s, opacity 0.3s;
  transform-box: fill-box;
  transform-origin: center top;
}
.robot__boot--flat {
  transform: scaleY(0.82) scaleX(1.1) rotate(8deg);
}
.robot__boot--removed {
  opacity: 0.15;
  transform: scale(0.6);
}
.robot__boot--new {
  animation: svg-bounce 0.3s ease-out;
}
.robot__boot--fixing {
  animation: svg-bounce 0.4s ease-out;
}

/* Bolt screws (lug nut equivalent) */
.robot__bolt {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, opacity 0.2s;
}
.robot__bolt--loose {
  animation: bolt-untwist 0.35s ease-out forwards;
}
.robot__bolt--tight {
  animation: bolt-twist 0.35s ease-out;
}
.robot__bolt--hidden {
  opacity: 0;
  pointer-events: none;
}
.robot__bolt.hint-glow .robot__bolt-halo {
  fill: rgba(255, 255, 50, 0.55) !important;
}

/* Lift pad (jack equivalent) */
.robot__lift-pad {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease-in-out;
}
.robot__lift-pad--hidden {
  opacity: 0;
  pointer-events: none;
}
.robot__lift-pad-arm {
  transition: transform 0.3s ease-out;
  transform-origin: center top;
  transform-box: fill-box;
}
.robot__lift-pad--raised .robot__lift-pad-arm {
  transform: scaleY(0.3);
}

/* Jacked up — lift upper group */
.car--robot.car--jacked .robot__upper {
  transform: translateY(-12px);
  transition: transform 0.3s ease-out;
}
.robot__upper {
  transition: transform 0.3s ease-out;
}

/* Sparks (smoke equivalent) */
.robot__sparks--hidden { display: none; }
.robot__spark {
  animation: spark-flash 0.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center center;
}
.robot__spark--2 { animation-delay: 0.15s; }
.robot__spark--3 { animation-delay: 0.3s; }
.robot__spark--4 { animation-delay: 0.45s; }
.robot__sparks--clearing .robot__spark {
  animation: spark-clear 0.3s ease-out forwards;
}

@keyframes spark-flash {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.3); }
}
@keyframes spark-clear {
  to { opacity: 0; transform: scale(0); }
}

/* Chest panel (bonnet equivalent) */
.robot__chest-panel {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.robot__chest-panel--hidden { display: none; }
.robot__chest-panel-lid {
  transform-box: fill-box;
  transform-origin: left bottom;
  transition: transform 0.4s ease-out;
}
.robot__chest-panel--open .robot__chest-panel-lid {
  transform: rotate(-45deg);
}
.robot__chest-panel--open {
  pointer-events: none;
}
.robot__chest-panel--open .robot__chest-panel-lid {
  pointer-events: auto;
}

/* Power core bay (engine bay equivalent) */
.robot__power-core-bay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.robot__power-core-bay--hidden { display: none; }
.robot__power-core-bay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Power core */
.robot__power-core {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 0.3s, opacity 0.3s;
}
.robot__power-core--broken {
  animation: core-pulse 1s ease-in-out infinite;
}
.robot__power-core--removed {
  opacity: 0.15;
  transform: scale(0.6);
}
.robot__power-core--new {
  animation: svg-bounce 0.3s ease-out;
}

@keyframes core-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(100,200,255,0.4)); }
  50%      { filter: drop-shadow(0 0 10px rgba(100,200,255,0.8)); }
}

/* Plating damage (paint equivalent) */
.robot__plating-damage {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s;
}
.robot__plating-damage--hidden { display: none; }
.robot__plating-damage.hint-glow line {
  stroke: rgba(255, 255, 50, 0.8) !important;
}

/* Badge zone (sticker equivalent) */
.robot__badge-zone {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.robot__badge-zone--hidden { display: none; }

/* Oil grime (wash equivalent) */
.robot__grime {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.8s;
}
.robot__grime--hidden { display: none; }
.robot__grime--washing {
  opacity: 0;
  filter: blur(4px);
}
.robot__grime.hint-glow ellipse,
.robot__grime.hint-glow circle {
  filter: drop-shadow(0 0 4px rgba(255, 255, 50, 0.8));
}

/* Arm and leg interactivity */
.robot__arm, .robot__leg {
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Arm states */
.robot__arm--loose {
  animation: arm-hang 1.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center top;
}
.robot__arm-damage--hidden { display: none; }

@keyframes arm-hang {
  0%, 100% { transform: rotate(8deg); }
  50%      { transform: rotate(12deg); }
}
.robot__arm--test {
  animation: arm-test-wave 0.8s ease-in-out;
  transform-box: fill-box;
  transform-origin: center top;
}
@keyframes arm-test-wave {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Leg states */
.robot__leg--bent {
  transform-box: fill-box;
  transform-origin: center top;
  transform: rotate(10deg) translateX(-4px);
}
.robot__leg--fixed {
  animation: svg-bounce 0.4s ease-out;
  transform-box: fill-box;
  transform-origin: center center;
}
.robot__leg-damage--hidden { display: none; }

/* Voice module */
.robot__voice-slot--hidden { display: none; }
.robot__voice-slot--installed {
  animation: svg-bounce 0.3s ease-out;
  transform-box: fill-box;
  transform-origin: center center;
}
.robot__speech-bubble--hidden { display: none; }
.robot__speech-bubble--visible {
  animation: speech-appear 0.5s ease-out;
}

@keyframes speech-appear {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Voice fault indicator */
.robot__voice-fault--hidden { display: none; }

/* Jetpack */
.robot__jetpack-mount--hidden { display: none; }
.robot__jetpack--hidden { display: none; }
.robot__jetpack--visible {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: svg-bounce 0.3s ease-out;
}
.robot__jetpack-flames--hidden { display: none; }
.robot__jetpack-flames--active ellipse:not(.robot__propeller-blade) {
  animation: jetpack-flame 0.15s ease-in-out infinite alternate;
}

@keyframes jetpack-flame {
  0%   { transform: scaleY(0.8); opacity: 0.7; transform-origin: center top; }
  100% { transform: scaleY(1.3); opacity: 1; transform-origin: center top; }
}

/* Fresh plating (paint shine equivalent for robots) */
.robot__torso-box.robot__torso--fresh {
  animation: paint-shine 0.6s ease-out;
}
.robot__head-box.robot__head--fresh {
  animation: paint-shine 0.6s ease-out;
}

/* Sparkle after oil wash (robot) */
.robot__torso-box.robot__torso--sparkle {
  animation: wash-sparkle 0.8s ease-out;
}
.robot__head-box.robot__head--sparkle {
  animation: wash-sparkle 0.8s ease-out;
}

/* ===== Space hangar theme ===== */
#garage[data-theme="hangar"] {
  background: linear-gradient(to bottom, #08081a 0%, #111128 35%, #1a1a2e 60%, #22223a 75%);
}

/* Starfield */
#garage[data-theme="hangar"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  box-shadow:
    /* White stars — scattered */
    10vw  5vh 0 0 rgba(255,255,255,0.8),
    25vw 12vh 0 0 rgba(255,255,255,0.6),
    40vw  3vh 0 0 rgba(255,255,255,0.7),
    55vw 18vh 0 0 rgba(255,255,255,0.5),
    70vw  8vh 0 0 rgba(255,255,255,0.9),
    85vw 15vh 0 0 rgba(255,255,255,0.6),
    15vw 22vh 0 0 rgba(255,255,255,0.7),
    48vw 28vh 0 0 rgba(255,255,255,0.5),
    78vw 25vh 0 0 rgba(255,255,255,0.8),
    33vw 35vh 0 0 rgba(255,255,255,0.6),
    62vw 40vh 0 0 rgba(255,255,255,0.7),
    90vw 32vh 0 0 rgba(255,255,255,0.5),
    5vw  45vh 0 0 rgba(255,255,255,0.6),
    50vw 50vh 0 0 rgba(255,255,255,0.8),
    3vw   1vh 0 0 rgba(255,255,255,0.4),
    97vw 10vh 0 0 rgba(255,255,255,0.5),
    44vw 15vh 0 0 rgba(255,255,255,0.6),
    58vw 45vh 0 0 rgba(255,255,255,0.4),
    20vw 55vh 0 0 rgba(255,255,255,0.5),
    72vw 48vh 0 0 rgba(255,255,255,0.6),
    /* Warm gold stars */
    18vw  7vh 0 0 rgba(255,224,102,0.7),
    42vw 20vh 0 0 rgba(255,224,102,0.6),
    68vw 30vh 0 0 rgba(255,224,102,0.8),
    30vw 48vh 0 0 rgba(255,224,102,0.5),
    82vw 42vh 0 0 rgba(255,224,102,0.7),
    56vw  2vh 0 0 rgba(255,224,102,0.5),
    12vw 33vh 0 0 rgba(255,224,102,0.4),
    /* Cyan blue stars */
    8vw  14vh 0 0 rgba(68,170,238,0.7),
    52vw 10vh 0 0 rgba(68,170,238,0.6),
    75vw 22vh 0 0 rgba(68,170,238,0.8),
    22vw 38vh 0 0 rgba(68,170,238,0.5),
    60vw 52vh 0 0 rgba(68,170,238,0.7),
    95vw  2vh 0 0 rgba(68,170,238,0.6),
    38vw 42vh 0 0 rgba(68,170,238,0.4),
    /* Galaxy cluster — upper right (blurred glow) */
    78vw  6vh 3px 1px rgba(180,160,255,0.15),
    80vw  8vh 4px 2px rgba(140,160,255,0.12),
    76vw  9vh 3px 1px rgba(200,180,255,0.10),
    82vw  5vh 2px 1px rgba(255,255,255,0.5),
    79vw  7vh 2px 1px rgba(255,224,102,0.4),
    77vw  8vh 1px 0   rgba(255,255,255,0.6),
    81vw  9vh 1px 0   rgba(68,170,238,0.5),
    /* Galaxy cluster — mid left (blurred glow) */
    12vw 28vh 4px 2px rgba(160,140,220,0.12),
    14vw 30vh 3px 1px rgba(180,160,255,0.15),
    10vw 29vh 3px 1px rgba(140,160,255,0.10),
    13vw 29vh 2px 1px rgba(255,255,255,0.5),
    11vw 31vh 1px 0   rgba(255,224,102,0.4),
    15vw 28vh 1px 0   rgba(255,255,255,0.6),
    /* Galaxy cluster — upper centre (subtle) */
    45vw  8vh 4px 2px rgba(160,180,255,0.10),
    47vw 10vh 3px 1px rgba(180,160,240,0.12),
    43vw  9vh 2px 1px rgba(255,255,255,0.4),
    46vw  9vh 1px 0   rgba(68,170,238,0.5);
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* Metallic floor with blue accent */
#garage[data-theme="hangar"]::after {
  background: #252540;
  border-top: 4px solid #4a4a8a;
}

/* Star chart replaces pegboard */
#garage[data-theme="hangar"] .garage-decor--pegboard {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Crect x='0' y='0' width='140' height='100' rx='3' fill='%231a1a30' stroke='%23444480' stroke-width='2'/%3E%3Crect x='4' y='4' width='132' height='92' rx='2' fill='%230d0d20'/%3E%3Ccircle cx='30' cy='25' r='1.5' fill='%23ffe066' opacity='0.8'/%3E%3Ccircle cx='65' cy='18' r='1' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='95' cy='30' r='1.5' fill='%234ae' opacity='0.7'/%3E%3Ccircle cx='110' cy='15' r='1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='45' cy='50' r='1.5' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='80' cy='55' r='1' fill='%23ffe066' opacity='0.6'/%3E%3Ccircle cx='120' cy='60' r='1.5' fill='%234ae' opacity='0.5'/%3E%3Ccircle cx='25' cy='75' r='1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='70' cy='80' r='1.5' fill='%23ffe066' opacity='0.6'/%3E%3Ccircle cx='105' cy='78' r='1' fill='%23fff' opacity='0.4'/%3E%3Cline x1='30' y1='25' x2='65' y2='18' stroke='%23446' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='65' y1='18' x2='95' y2='30' stroke='%23446' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='45' y1='50' x2='80' y2='55' stroke='%23446' stroke-width='0.5' opacity='0.3'/%3E%3Ccircle cx='55' cy='42' r='12' fill='none' stroke='%23446' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E") no-repeat bottom / contain;
}

/* Landing pad markings replace floor chevrons */
#garage[data-theme="hangar"] .garage-decor--floor-marks {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(100,100,180,0.2) 0px, rgba(100,100,180,0.2) 2px,
      transparent 2px, transparent 40px
    ) left top / 100% 100%,
    radial-gradient(ellipse at 50% 50%, rgba(100,120,200,0.12) 0%, transparent 60%);
}

/* Blue/purple overhead glow */
#garage[data-theme="hangar"] .garage-decor--lamp {
  background: #444;
}
#garage[data-theme="hangar"] .garage-decor--lamp::before {
  background: #555;
}
#garage[data-theme="hangar"] .garage-decor--lamp::after {
  background: radial-gradient(ellipse at top center, rgba(100,120,220,0.18) 0%, transparent 65%);
}

/* Airlock-style door frame */
#garage[data-theme="hangar"] .garage-decor--door-frame {
  background: linear-gradient(to right, #333, #556, #445, #333);
}
#garage[data-theme="hangar"] .garage-decor--door-frame::before {
  background: linear-gradient(to bottom, #445, #334, #223);
}
#garage[data-theme="hangar"] .garage-decor--door-frame::after {
  background: linear-gradient(to bottom, #223, #445, #334);
}

/* Space parts shelf (spare wings, fuel cells, antenna) */
#garage[data-theme="hangar"] .garage-decor--parts-shelf {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Crect x='2' y='2' width='96' height='136' rx='2' fill='%231a1a30' stroke='%23444480' stroke-width='1.5'/%3E%3C!-- Top shelf --%3E%3Crect x='6' y='28' width='88' height='4' rx='1' fill='%23556'/%3E%3Crect x='8' y='24' width='3' height='8' fill='%23445'/%3E%3Crect x='89' y='24' width='3' height='8' fill='%23445'/%3E%3C!-- Wing on top shelf --%3E%3Cpath d='M20,26 L50,12 L20,8 Z' fill='%236a7fdb' stroke='%235a6fbb' stroke-width='1' opacity='0.6'/%3E%3C!-- Antenna on top shelf --%3E%3Cline x1='75' y1='27' x2='75' y2='12' stroke='%23aaa' stroke-width='1.5' opacity='0.6'/%3E%3Ccircle cx='75' cy='10' r='3' fill='%234ae' stroke='%233ad' stroke-width='1' opacity='0.6'/%3E%3C!-- Middle shelf --%3E%3Crect x='6' y='68' width='88' height='4' rx='1' fill='%23556'/%3E%3Crect x='8' y='64' width='3' height='8' fill='%23445'/%3E%3Crect x='89' y='64' width='3' height='8' fill='%23445'/%3E%3C!-- Fuel cell on middle shelf --%3E%3Crect x='20' y='48' width='24' height='18' rx='3' fill='%2366ccff' stroke='%2344aadd' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='32' cy='57' r='3' fill='%2344aadd' opacity='0.5'/%3E%3C!-- Bolt on middle shelf --%3E%3Ccircle cx='70' cy='58' r='5' fill='%23999' stroke='%23777' stroke-width='1' opacity='0.5'/%3E%3Cline x1='67' y1='58' x2='73' y2='58' stroke='%23555' stroke-width='1.5' opacity='0.5'/%3E%3Cline x1='70' y1='55' x2='70' y2='61' stroke='%23555' stroke-width='1.5' opacity='0.5'/%3E%3C!-- Bottom shelf --%3E%3Crect x='6' y='108' width='88' height='4' rx='1' fill='%23556'/%3E%3Crect x='8' y='104' width='3' height='8' fill='%23445'/%3E%3Crect x='89' y='104' width='3' height='8' fill='%23445'/%3E%3C!-- Nozzle on bottom shelf --%3E%3Crect x='20' y='88' width='14' height='18' rx='2' fill='%23666' stroke='%23555' stroke-width='1' opacity='0.6'/%3E%3Crect x='23' y='92' width='8' height='4' rx='1' fill='%23888' opacity='0.5'/%3E%3C!-- Spray can on bottom shelf --%3E%3Crect x='60' y='88' width='14' height='18' rx='3' fill='%236a7fdb' stroke='%235a6fbb' stroke-width='1' opacity='0.5'/%3E%3Crect x='63' y='84' width='8' height='6' rx='1' fill='%23ccc' opacity='0.5'/%3E%3C/svg%3E") no-repeat bottom / contain;
}

/* ===== Spaceship container ===== */
.car--spaceship {
  aspect-ratio: 400 / 222;
}
.ship__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ===== Spaceship SVG paint — fill via CSS variable ===== */
.svg-ship-paint {
  fill: var(--vehicle-colour, var(--ship-colour, #6a7fdb));
}

/* ===== Spaceship entry animation — wobbly spiral descent ===== */
.car--spaceship.car--entering {
  transform: translate(60vw, -80vh) rotate(-20deg);
}
.car--spaceship.car--parked {
  animation: ship-land 1.2s ease-out forwards;
}

@keyframes ship-land {
  0%   { transform: translate(60vw, -80vh) rotate(-20deg); }
  15%  { transform: translate(40vw, -50vh) rotate(12deg); }
  30%  { transform: translate(20vw, -30vh) rotate(-10deg); }
  50%  { transform: translate(8vw, -12vh) rotate(6deg); }
  70%  { transform: translate(2vw, -4vh) rotate(-3deg); }
  85%  { transform: translate(-1vw, 0) rotate(1.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ===== Spaceship exit animation — rise then arc left ===== */
.car--exit-ship-launch {
  overflow: visible;
  animation: exit-ship-launch 1.5s cubic-bezier(0.3, 0, 0.8, 1) forwards;
}

@keyframes exit-ship-launch {
  0%   { transform: translateY(0) translateX(0) scale(1); }
  10%  { transform: translateY(4px) translateX(0) scale(1.02); }
  40%  { transform: translateY(-50vh) translateX(0) scale(0.95); }
  100% { transform: translateY(-60vh) translateX(-100vw) scale(0.7); }
}

/* ===== Spaceship wing states ===== */
.ship__wing {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease-out, opacity 0.3s;
  transform-box: fill-box;
  transform-origin: left center;
}
.ship__wing--right {
  transform-origin: left center;
}
.ship__wing--broken {
  transform: rotate(25deg) scaleX(0.8);
  animation: wing-wobble 2s ease-in-out infinite;
}
@keyframes wing-wobble {
  0%, 100% { transform: rotate(25deg) scaleX(0.8); }
  50%      { transform: rotate(20deg) scaleX(0.8); }
}
/* Stop wobble once unbolted and lifted */
.car--spaceship.car--jacked .ship__wing--broken {
  animation: none;
}
/* Crack lines — only visible when broken */
.ship__wing-crack { display: none; }
.ship__wing--broken .ship__wing-crack { display: block; }

.ship__wing--removed {
  opacity: 0.15;
  transform: scale(0.6);
}
.ship__wing--new {
  animation: svg-bounce 0.3s ease-out;
}
.ship__wing--fixing {
  animation: svg-bounce 0.4s ease-out;
}

/* ===== Ship bolt states (reuse robot bolt keyframes) ===== */
.ship__bolt {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, opacity 0.2s;
}
.ship__bolt--loose {
  animation: bolt-untwist 0.35s ease-out forwards;
}
.ship__bolt--tight {
  animation: bolt-twist 0.35s ease-out;
}
.ship__bolt--hidden {
  opacity: 0;
  pointer-events: none;
}
.ship__bolt.hint-glow .ship__bolt-halo {
  fill: rgba(255, 255, 50, 0.55) !important;
}

/* ===== Ship platform lift ===== */
.ship__lift-pad {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease-in-out;
}
.ship__lift-pad--hidden {
  opacity: 0;
  pointer-events: none;
}
.ship__lift-pad-arm {
  transition: transform 0.3s ease-out;
  transform-origin: center top;
  transform-box: fill-box;
}
.ship__lift-pad--raised .ship__lift-pad-arm {
  transform: scaleY(2);
}
/* Jacked up — hull + struts + pad rise; good wing follows, broken wing stays */
.car--spaceship.car--jacked .ship__upper {
  transform: translateY(-12px);
  transition: transform 0.3s ease-out;
}
.car--spaceship.car--jacked .ship__platform-pad {
  transform: translateY(-12px);
  transition: transform 0.3s ease-out;
}
/* Lift the good wing (opposite of broken side) and any repaired wing with the hull */
.car--spaceship.car--jacked[data-broken-wing="left"] .ship__wing--right,
.car--spaceship.car--jacked[data-broken-wing="right"] .ship__wing--left,
.car--spaceship.car--jacked .ship__wing--new {
  transform: translateY(-12px);
  transition: transform 0.3s ease-out;
}
.ship__upper {
  transition: transform 0.3s ease-out;
}
.ship__platform-pad {
  transition: transform 0.3s ease-out;
}

/* ===== Smoke (booster fault indicator — reuses car smoke keyframes) ===== */
.ship__smoke--hidden { display: none; }
.ship__smoke-puff {
  fill: rgba(90, 90, 90, 0.8);
  transform-box: fill-box;
  transform-origin: center;
  animation: ship-smoke-rise 1.8s ease-out infinite;
}
@keyframes ship-smoke-rise {
  0%   { opacity: 0.85; transform: translate(0, 0) scale(1); }
  50%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-25px, -30px) scale(2); }
}
.ship__smoke-puff--2 { animation-delay: 0.4s; }
.ship__smoke-puff--3 { animation-delay: 0.9s; }
.ship__smoke-puff--4 { animation-delay: 1.3s; }
.ship__smoke--clearing .ship__smoke-puff {
  animation: smoke-clear 0.5s ease-out forwards;
}

/* ===== Hatch (bonnet equivalent) ===== */
.ship__hatch {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ship__hatch--hidden { display: none; }
.ship__hatch-lid {
  /* transform-origin pinned to the lid's left-bottom corner (248,98 in viewBox units)
     so that adding the padded touch-target rect doesn't shift the rotation pivot. */
  transform-box: view-box;
  transform-origin: 248px 98px;
  transition: transform 0.4s ease-out;
}
.ship__hatch--open .ship__hatch-lid {
  transform: rotate(-45deg);
}
.ship__hatch--open {
  pointer-events: none;
}
.ship__hatch--open .ship__hatch-lid {
  pointer-events: auto;
}

/* ===== Booster bay (engine bay equivalent) ===== */
.ship__booster-bay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.ship__booster-bay--hidden { display: none; }
.ship__booster-bay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Booster core */
.ship__booster {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 0.3s, opacity 0.3s;
}
.ship__booster--broken {
  animation: core-pulse 1s ease-in-out infinite;
}
.ship__booster--removed {
  opacity: 0.15;
  transform: scale(0.6);
}
.ship__booster--new {
  animation: svg-bounce 0.3s ease-out;
}

/* ===== Exhaust flames ===== */
.ship__exhaust--hidden { display: none; }
.ship__exhaust--active ellipse {
  animation: jetpack-flame 0.15s ease-in-out infinite alternate;
}

/* ===== Hull damage (paint equivalent) ===== */
.ship__hull-damage {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s;
}
.ship__hull-damage--hidden { display: none; }
.ship__hull-damage.hint-glow line {
  stroke: rgba(255, 255, 50, 0.8) !important;
}

/* Fresh hull (paint shine) */
.ship__hull-body.ship__hull--fresh {
  animation: paint-shine 0.6s ease-out;
}
.ship__cockpit.ship__cockpit--fresh {
  animation: paint-shine 0.6s ease-out;
}

/* ===== Emblem zone (sticker equivalent) ===== */
.ship__emblem-zone {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ship__emblem-zone--hidden { display: none; }

/* ===== Space dust (wash equivalent) ===== */
.ship__dust {
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.8s;
}
.ship__dust--hidden { display: none; }
.ship__dust--washing {
  opacity: 0;
  filter: blur(4px);
}
.ship__dust.hint-glow ellipse,
.ship__dust.hint-glow circle {
  filter: drop-shadow(0 0 4px rgba(255, 255, 50, 0.8));
}

/* Sparkle after dust wash */
.ship__hull-body.ship__hull--sparkle {
  animation: wash-sparkle 0.8s ease-out;
}
.ship__cockpit.ship__cockpit--sparkle {
  animation: wash-sparkle 0.8s ease-out;
}

/* ===== Spaceship upgrade hints ===== */
.ship__laser.hint-glow .ship__laser-tip {
  opacity: 1;
  fill: #ffcc00;
  filter: drop-shadow(0 0 4px rgba(255, 255, 50, 0.8));
}
.ship__shield-panel.hint-glow .ship__shield-panel-lid {
  filter: drop-shadow(0 0 6px rgba(255, 255, 50, 0.9));
}
.ship__crystal-bay.hint-glow .ship__crystal {
  filter: drop-shadow(0 0 6px rgba(255, 255, 50, 0.9));
}
.ship__shield-bubble.hint-glow {
  opacity: 0.6;
  stroke: rgba(255, 255, 50, 0.8) !important;
  stroke-width: 3 !important;
}
.ship__antenna-mast.hint-glow .ship__antenna-mast-bar {
  fill: #ffcc00 !important;
  stroke: rgba(255, 255, 50, 0.8) !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 50, 0.9));
}
.ship__antenna-dish.hint-glow path,
.ship__antenna-dish.hint-glow circle {
  stroke: rgba(255, 255, 50, 0.8);
  filter: drop-shadow(0 0 4px rgba(255, 255, 50, 0.8));
}

/* ===== Laser cannons (tier 55 upgrade) ===== */
.ship__laser {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ship__laser--broken .ship__laser-tip {
  opacity: 0.3;
}
.ship__laser--installed .ship__laser-tip {
  opacity: 0.6;
}
.ship__laser--aligned .ship__laser-tip {
  opacity: 0.8;
}
.ship__laser--active .ship__laser-tip {
  opacity: 1;
  filter: drop-shadow(0 0 4px currentColor);
}
.ship__laser-beam {
  opacity: 0;
  pointer-events: none;
}
.ship__laser-beam--firing {
  animation: laser-pulse 1.2s ease-in-out forwards;
}
@keyframes laser-pulse {
  0%, 100% { opacity: 0; }
  10%, 20% { opacity: 0.9; }
  25%, 35% { opacity: 0; }
  40%, 50% { opacity: 0.9; }
  55%, 65% { opacity: 0; }
  70%, 80% { opacity: 0.9; }
  85%      { opacity: 0; }
}

/* ===== Shield generator (tier 60 upgrade) ===== */
.ship__shield-group--hidden { display: none; }
.ship__shield-panel {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ship__shield-panel-lid {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.4s ease-out;
}
.ship__shield-panel--open .ship__shield-panel-lid {
  transform: translateY(-14px);
}
.ship__shield-fault--hidden { display: none; }
.ship__crystal-bay--hidden { display: none; }
.ship__crystal-bay--installed .ship__crystal {
  filter: drop-shadow(0 0 4px currentColor);
}
.ship__shield-bubble--broken {
  stroke-dasharray: 8 4;
  opacity: 0.25;
}
.ship__shield-bubble--active {
  stroke-dasharray: none;
  opacity: 0.5;
  stroke-width: 3;
  animation: shield-glow 2s ease-in-out infinite;
}
@keyframes shield-glow {
  0%, 100% { opacity: 0.35; stroke-width: 2.5; }
  50%      { opacity: 0.6; stroke-width: 4; }
}

/* ===== Antenna array (tier 65 upgrade) ===== */
.ship__antenna-upgrade--hidden { display: none; }
.ship__antenna-damage--hidden { display: none; }
.ship__antenna-mast-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.4s ease-out;
}
.ship__antenna-mast-bar--collapsed {
  transform: scaleY(0.4);
}
.ship__antenna-mast-bar--extended {
  transform: scaleY(1);
}
.ship__antenna-dish,
.ship__antenna-mast {
  -webkit-tap-highlight-color: transparent;
}
.ship__antenna-dish {
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 0.4s ease-out;
}
.ship__antenna-dish--misaligned {
  transform: rotate(15deg);
}
.ship__antenna-dish--aligned {
  transform: rotate(0deg);
}
.ship__antenna-signal--dead circle {
  opacity: 0;
}
.ship__antenna-signal--active circle {
  transform-box: fill-box;
  transform-origin: center center;
  animation: sonar-arc 2s ease-out infinite;
}
.ship__antenna-signal--active circle:nth-child(1) { animation-delay: 0s; }
.ship__antenna-signal--active circle:nth-child(2) { animation-delay: 0.4s; }
.ship__antenna-signal--active circle:nth-child(3) { animation-delay: 0.8s; }
@keyframes sonar-arc {
  0%   { opacity: 0; transform: scale(0.5); }
  15%  { opacity: 0.9; }
  60%  { opacity: 0.3; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ================================================================
   PLANET — deep space theme, planet container, animations, faults
   ================================================================ */

/* ===== Deep space theme ===== */
#garage[data-theme="space"] {
  background: linear-gradient(to bottom, #040412 0%, #0a0a24 30%, #111136 60%, #181840 80%);
}

/* Dense starfield */
#garage[data-theme="space"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  box-shadow:
    /* White stars */
    5vw   3vh 0 0 rgba(255,255,255,0.8),
    12vw 10vh 0 0 rgba(255,255,255,0.6),
    20vw  5vh 0 0 rgba(255,255,255,0.7),
    28vw 16vh 0 0 rgba(255,255,255,0.5),
    35vw  8vh 0 0 rgba(255,255,255,0.9),
    42vw 22vh 0 0 rgba(255,255,255,0.6),
    50vw  4vh 0 0 rgba(255,255,255,0.7),
    58vw 14vh 0 0 rgba(255,255,255,0.5),
    65vw  7vh 0 0 rgba(255,255,255,0.8),
    72vw 20vh 0 0 rgba(255,255,255,0.6),
    80vw 12vh 0 0 rgba(255,255,255,0.7),
    88vw  3vh 0 0 rgba(255,255,255,0.5),
    95vw 18vh 0 0 rgba(255,255,255,0.6),
    3vw  28vh 0 0 rgba(255,255,255,0.8),
    15vw 35vh 0 0 rgba(255,255,255,0.5),
    30vw 40vh 0 0 rgba(255,255,255,0.6),
    45vw 32vh 0 0 rgba(255,255,255,0.7),
    60vw 45vh 0 0 rgba(255,255,255,0.4),
    75vw 38vh 0 0 rgba(255,255,255,0.6),
    90vw 42vh 0 0 rgba(255,255,255,0.5),
    8vw  50vh 0 0 rgba(255,255,255,0.4),
    25vw 55vh 0 0 rgba(255,255,255,0.5),
    55vw 48vh 0 0 rgba(255,255,255,0.6),
    /* Warm gold stars */
    18vw  6vh 0 0 rgba(255,224,102,0.7),
    38vw 25vh 0 0 rgba(255,224,102,0.6),
    62vw 35vh 0 0 rgba(255,224,102,0.8),
    82vw 28vh 0 0 rgba(255,224,102,0.5),
    48vw 52vh 0 0 rgba(255,224,102,0.6),
    /* Cyan blue stars */
    10vw 18vh 0 0 rgba(68,170,238,0.7),
    33vw 12vh 0 0 rgba(68,170,238,0.6),
    52vw 30vh 0 0 rgba(68,170,238,0.8),
    70vw 15vh 0 0 rgba(68,170,238,0.5),
    85vw 45vh 0 0 rgba(68,170,238,0.7),
    /* Galaxy cluster — centre */
    48vw 10vh 4px 2px rgba(180,160,255,0.12),
    50vw 12vh 3px 1px rgba(140,160,255,0.15),
    46vw 11vh 3px 1px rgba(200,180,255,0.10),
    49vw 11vh 2px 1px rgba(255,255,255,0.4);
  animation: twinkle 4s ease-in-out infinite alternate;
}

/* No visible floor */
#garage[data-theme="space"]::after {
  background: transparent;
  border-top: none;
}

/* Pegboard → glowing sun (upper-right radial gradient) */
#garage[data-theme="space"] .garage-decor--pegboard {
  left: auto;
  right: 15%;
  top: 5%;
  bottom: auto;
  width: min(18vw, 120px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: none;
  background:
    radial-gradient(circle, rgba(255,240,180,1) 10%, rgba(255,200,60,0.8) 30%, rgba(255,160,40,0.3) 60%, transparent 80%);
  box-shadow: 0 0 40px 15px rgba(255,200,80,0.15);
}

/* Parts shelf → small satellite silhouette */
#garage[data-theme="space"] .garage-decor--parts-shelf {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Crect x='35' y='55' width='30' height='20' rx='3' fill='%23556' stroke='%23778' stroke-width='1'/%3E%3Crect x='10' y='60' width='25' height='10' rx='1' fill='%23448' stroke='%23669' stroke-width='0.8'/%3E%3Crect x='65' y='60' width='25' height='10' rx='1' fill='%23448' stroke='%23669' stroke-width='0.8'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23e44' opacity='0.7'/%3E%3Cline x1='50' y1='45' x2='50' y2='38' stroke='%23999' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='36' r='2' fill='%23999' opacity='0.6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.4;
}

/* Hide door-frame, floor-marks */
#garage[data-theme="space"] .garage-decor--door-frame,
#garage[data-theme="space"] .garage-decor--floor-marks {
  display: none;
}

/* Lamp → background mini spaceship crossing the screen diagonally */
#garage[data-theme="space"] .garage-decor--lamp {
  top: 0;
  left: 0;
  bottom: auto;
  width: 24px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3C!-- Fuselage --%3E%3Cpolygon points='4,10 10,7 30,6 36,9 36,11 30,14 10,13' fill='%236a7fdb' stroke='%235a6fbb' stroke-width='0.8' opacity='0.8'/%3E%3C!-- Upper wing --%3E%3Cpolygon points='18,6 28,6 30,2 16,2' fill='%235a6fbb' opacity='0.7'/%3E%3C!-- Lower wing --%3E%3Cpolygon points='18,14 28,14 30,18 16,18' fill='%235a6fbb' opacity='0.7'/%3E%3C!-- Cockpit --%3E%3Cellipse cx='12' cy='10' rx='4' ry='3' fill='%23335' stroke='%23446' stroke-width='0.5' opacity='0.8'/%3E%3C!-- Engine glow --%3E%3Ccircle cx='36' cy='10' r='2' fill='%23f80' opacity='0.6'/%3E%3C/svg%3E") no-repeat center / contain;
  clip-path: none;
  border-radius: 0;
  pointer-events: none;
  animation: spaceship-flyby var(--ship-duration, 20s) linear infinite;
  transform: scaleX(-1) rotate(var(--ship-angle, -15deg));
}
#garage[data-theme="space"] .garage-decor--lamp::before {
  display: none;
}
#garage[data-theme="space"] .garage-decor--lamp::after {
  display: none;
}
@keyframes spaceship-flyby {
  0%   { translate: var(--ship-sx, -30px) var(--ship-sy, 40vh); }
  100% { translate: var(--ship-ex, 110vw) var(--ship-ey, 20vh); }
}

/* ===== Planet container ===== */
.car--planet {
  aspect-ratio: 400 / 240;
}
.planet__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  /* Promote to GPU compositor layer — SVG mutations repaint the GPU texture in isolation,
     preventing subpixel shifts of terraform/city zone text on Chrome mobile. */
  transform: translateZ(0);
}

/* ===== Planet SVG paint — fill via CSS variable ===== */
.svg-planet-paint {
  fill: var(--vehicle-colour, var(--planet-colour, #c2956b));
}

/* ===== Planet entry animation — orbital arc from near the sun =====
   Sun sits at upper-right (~85vw, ~8vh from garage origin).
   Path: start near sun → arc left through upper space → settle into
   centre with the same upper-left diagonal approach vector. */
.car--planet.car--entering {
  transform: translate(0vw, -35vh) scale(0.05);
  opacity: 0;
}
.car--planet.car--parked {
  animation: planet-approach 1.8s ease-out forwards;
}

@keyframes planet-approach {
  0%   { transform: translate(0vw,   -35vh) scale(0.05); opacity: 0; }
  8%   { transform: translate(-4vw,  -30vh) scale(0.08); opacity: 0.6; }
  20%  { transform: translate(-12vw, -24vh) scale(0.2);  opacity: 1; }
  35%  { transform: translate(-14vw, -18vh) scale(0.35); opacity: 1; }
  50%  { transform: translate(-12vw, -13vh) scale(0.55); opacity: 1; }
  65%  { transform: translate(-8vw,  -8vh)  scale(0.7);  opacity: 1; }
  80%  { transform: translate(-3vw,  -3vh)  scale(0.88); opacity: 1; }
  100% { transform: translate(0, 0)         scale(1);    opacity: 1; }
}

/* ===== Planet exit animation — orbital slingshot around the sun =====
   Sun sits at upper-right (~85vw, ~8vh from garage origin).
   Path: centre → sweep right → curve up near sun → exit off-screen right. */
.car--exit-planet-orbit {
  overflow: visible;
  animation: exit-planet-orbit 1.8s ease-in forwards;
}

@keyframes exit-planet-orbit {
  0%   { transform: translate(0, 0)          scale(1);    opacity: 1; }
  20%  { transform: translate(12vw,  2vh)    scale(0.8);  opacity: 1; }
  40%  { transform: translate(28vw, -2vh)    scale(0.55); opacity: 0.9; }
  60%  { transform: translate(38vw, -10vh)   scale(0.35); opacity: 0.7; }
  80%  { transform: translate(44vw, -20vh)   scale(0.18); opacity: 0.4; }
  100% { transform: translate(48vw, -32vh)   scale(0.05); opacity: 0; }
}

/* ===== Planet atmosphere ===== */
.planet__atmosphere {
  animation: atmosphere-pulse 3s ease-in-out infinite;
}
.planet__atmosphere--outer {
  animation: atmosphere-pulse-outer 4s ease-in-out infinite;
}
@keyframes atmosphere-pulse {
  0%, 100% { stroke-opacity: 0.12; stroke-width: 8; }
  50%      { stroke-opacity: 0.22; stroke-width: 10; }
}
@keyframes atmosphere-pulse-outer {
  0%, 100% { stroke-opacity: 0.06; stroke-width: 4; }
  50%      { stroke-opacity: 0.1; stroke-width: 5; }
}

/* ===== Planet environmental details ===== */
.planet__ocean-shimmer,
.planet__continents,
.planet__ice-caps,
.planet__terminator,
.planet__construction-band {
  pointer-events: none;
}

/* ===== Planet highlight ===== */
.planet__highlight {
  pointer-events: none;
}

/* ===== Planet ring (ringed geometry) ===== */
.planet__ring {
  pointer-events: none;
}

/* Inactive fault zones must not intercept clicks meant for the active zone.
   picker.js sets pointer-events: auto on the active step's target. */
.planet__fires,
.planet__forests,
.planet__cities,
.planet__ocean-spill,
.planet__asteroid-zone,
.planet__satellite-zone,
.planet__tectonic-zone {
  pointer-events: none;
}

/* ===== Fire fault zone ===== */
.planet__fires { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.planet__fires--hidden { display: none; }
.planet__fires--washing .planet__fire-patch,
.planet__fires--washing .planet__ember-glow,
.planet__fires--washing .planet__flame-tongue,
.planet__fires--washing .planet__smoke-plume,
.planet__fires--washing .planet__heat-ring,
.planet__fires--washing .planet__scorch-mark {
  transition: opacity 0.6s;
  opacity: 0;
}
.planet__fires--washing .planet__flame-flicker {
  transition: opacity 0.4s;
  opacity: 0;
}
.planet__fire-patch {
  animation: fire-flicker 0.8s ease-in-out infinite alternate;
}
@keyframes fire-flicker {
  0%   { opacity: 0.5; }
  100% { opacity: 0.85; }
}
.planet__flame-flicker {
  animation: flame-dance 0.5s ease-in-out infinite alternate;
}
@keyframes flame-dance {
  0%   { transform: translateY(0) scale(1); opacity: 0.5; transform-box: fill-box; transform-origin: center bottom; }
  100% { transform: translateY(-3px) scale(1.2); opacity: 0.8; transform-box: fill-box; transform-origin: center bottom; }
}

/* Flame tongues — teardrop shapes with staggered flicker */
.planet__flame-tongue {
  animation: flame-tongue-flicker 0.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes flame-tongue-flicker {
  0%   { transform: scaleY(0.7) scaleX(0.9); opacity: 0.35; }
  50%  { transform: scaleY(1.1) scaleX(1.05); opacity: 0.55; }
  100% { transform: scaleY(0.9) scaleX(0.95); opacity: 0.45; }
}

/* Smoke plumes — slow upward drift */
.planet__smoke-plume {
  animation: smoke-drift 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center center;
}
@keyframes smoke-drift {
  0%   { transform: translateY(0) scale(1); opacity: 0.3; }
  50%  { transform: translateY(-4px) scale(1.15); opacity: 0.18; }
  100% { transform: translateY(-1px) scale(1.05); opacity: 0.25; }
}

/* Ember glow — pulsing bright core */
.planet__ember-glow {
  animation: ember-pulse 1s ease-in-out infinite alternate;
}
@keyframes ember-pulse {
  0%   { opacity: 0.5; }
  100% { opacity: 0.8; }
}

/* Heat distortion ring */
.planet__heat-ring {
  animation: heat-shimmer 1.5s ease-in-out infinite alternate;
}
@keyframes heat-shimmer {
  0%   { stroke-opacity: 0.15; stroke-dashoffset: 0; }
  100% { stroke-opacity: 0.3; stroke-dashoffset: 7; }
}

/* Scorch marks — static, no animation */
.planet__scorch-mark {
  pointer-events: none;
}

/* Body sparkle after extinguishing */
.planet__body--sparkle {
  filter: brightness(1.15);
  transition: filter 0.4s;
}

/* Colour flash after terraform colour selection */
.planet__body--colour-flash {
  animation: paint-shine 0.6s ease-out;
}

/* ===== Sparks ===== */

@keyframes spark-fly {
  0%   { transform: translate(0, 0) scale(1);    opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

@keyframes splash-arc {
  0%   { transform: translate(0, 0) scale(1);                                    opacity: 1; }
  40%  { transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) - 12px)) scale(0.85); opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 24px)) scale(0);       opacity: 0; }
}

.spark {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: spark-fly 0.48s ease-out forwards;
}

.splash-drop {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: splash-arc 0.65s ease-in forwards;
}

/* ===== Character reactions ===== */

@keyframes blink {
  0%, 100% { transform: scaleY(1); }
  45%       { transform: scaleY(0.05); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}

@keyframes wiggle-large {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-18deg); }
  40%      { transform: rotate(14deg); }
  60%      { transform: rotate(-10deg); }
  80%      { transform: rotate(6deg); }
}

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

/* Blink — eye group scaleY */
.car__driver-eyes.reacting--blink,
.robot__eyes.reacting--blink,
.ship__eyes.reacting--blink {
  animation: blink 0.2s ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}

/* Wiggle — head group and planet flag rotate */
.robot__head.reacting--wiggle {
  animation: wiggle 1s ease-in-out;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.car__driver.reacting--wiggle,
.ship__pilot.reacting--wiggle,
.planet__flag.reacting--wiggle {
  animation: wiggle-large 1s ease-in-out;
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* Surprise — iris scale */
.car__eye-iris.reacting--surprise,
.robot__eye-iris.reacting--surprise,
.ship__eye-iris.reacting--surprise {
  animation: surprise 0.4s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}

/* Planet flag — hidden until all faults resolved */
.planet__flag--hidden {
  display: none;
}

/* ===== Tectonic volcanic fault zone ===== */
.planet__svg--tremor {
  animation: planet-tremor 0.15s ease-in-out infinite;
}
@keyframes planet-tremor {
  0%   { transform: translate(-1px, 1px); }
  25%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, -1px); }
  75%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

.planet__magma-crack {
  animation: magma-glow 1.2s ease-in-out infinite alternate;
  fill: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.planet__eruption {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@keyframes magma-glow {
  0%   { stroke-opacity: 0.6; }
  100% { stroke-opacity: 1; }
}
.planet__magma-crack--sealed {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.planet__lava-particle {
  animation: lava-scatter 0.8s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes lava-scatter {
  0%   { transform: translateY(0) scale(1); opacity: 0.8; }
  60%  { transform: translateY(-8px) scale(0.7); opacity: 0.5; }
  100% { transform: translateY(-12px) scale(0.3); opacity: 0; }
}

.planet__eruption--capped .planet__lava-particle {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.planet__eruption--capped .planet__volcano {
  fill: rgba(60,60,60,0.6);
  transition: fill 0.5s;
}

.planet__tectonic-zone--hidden { display: none; }

/* ===== Ocean cleanup fault zone ===== */
.planet__ocean-spill { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.planet__ocean-spill--hidden { display: none; }
.planet__ocean-spill--washing .planet__oil-slick,
.planet__ocean-spill--washing .planet__oil-edge,
.planet__ocean-spill--washing .planet__oil-sheen,
.planet__ocean-spill--washing .planet__oil-tendril {
  transition: opacity 0.6s;
  opacity: 0;
}
/* Main slick — slow throb */
.planet__oil-slick {
  animation: oil-pulse 2s ease-in-out infinite alternate;
  transform-box: view-box; transform-origin: center;
}
@keyframes oil-pulse {
  0%   { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.05); }
}
/* Spreading edge — expands outward */
.planet__oil-edge {
  animation: oil-spread 3s ease-in-out infinite alternate;
  transform-box: view-box; transform-origin: center;
}
@keyframes oil-spread {
  0%   { opacity: 0.2; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(1.15); }
}
/* Iridescent sheen — colour-shifting highlight */
.planet__oil-sheen {
  animation: oil-sheen 2.5s ease-in-out infinite alternate;
  transform-box: view-box; transform-origin: center;
  mix-blend-mode: screen;
}
@keyframes oil-sheen {
  /* translate in SVG user units (not px) to avoid subpixel snapping on mobile */
  0%   { opacity: 0.15; transform: translate(-1.5, 0) scale(0.9); }
  50%  { opacity: 0.35; }
  100% { opacity: 0.2;  transform: translate(1.5, 0)  scale(1.1); }
}
/* Tendrils — grow and recede */
.planet__oil-tendril {
  animation: oil-tendril 3.5s ease-in-out infinite alternate;
  transform-box: view-box; transform-origin: 0% 50%;
}
@keyframes oil-tendril {
  0%   { stroke-dasharray: 0 40; opacity: 0.3; }
  100% { stroke-dasharray: 40 0; opacity: 0.6; }
}
.planet__body--ocean-clean {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.4s;
}

/* ===== Forest fault zone ===== */
.planet__forests { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.planet__terraform-zone { cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform; }
.planet__barren-patch {
  transition: opacity 0.6s, fill 0.6s;
}
.planet__barren-patch--planted {
  fill: rgba(60,140,60,0.5);
}
.planet__tree {
  transition: opacity 0.5s ease-out;
}
.planet__tree--grown {
  opacity: 1 !important;
  animation: tree-sprout 0.5s ease-out;
}
@keyframes tree-sprout {
  0%   { transform: scale(0); opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
  60%  { transform: scale(1.3); opacity: 1; transform-box: fill-box; transform-origin: center bottom; }
  100% { transform: scale(1); opacity: 1; transform-box: fill-box; transform-origin: center bottom; }
}

/* ===== Asteroid defence fault zone ===== */
.planet__meteor-group {
  opacity: 0;
  pointer-events: none;
}
/* pointer-events: none by default — enabled only on the --active zone (below),
   so inactive/paused meteors never intercept taps meant for other fault zones. */
.planet__asteroid-zone .planet__meteor-group {
  opacity: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: meteor-approach 4s linear both;
  /* Paused until game.js adds --active; animation is unpaused and the JS timeout
     are started on the same tick so they stay in sync. */
  animation-play-state: paused;
  /* view-box resolves % translate values against SVG user units,
     keeping positions correct regardless of the SVG's CSS display size. */
  transform-box: view-box;
  transform-origin: center;
}
.planet__asteroid-zone--active .planet__meteor-group {
  animation-play-state: running;
  pointer-events: auto;
}
.planet__meteor-group--destroyed,
.planet__meteor-group--impact {
  pointer-events: none;
}
@keyframes meteor-approach {
  /* 0% opacity:0 keeps meteors invisible while paused (before fault activates) */
  0%   { transform: translate(var(--spawn-x), var(--spawn-y)); opacity: 0; }
  8%   { opacity: 0.9; }
  100% { transform: translate(var(--meteor-dx), var(--meteor-dy)); opacity: 1; }
}
.planet__meteor-group--destroyed {
  animation: meteor-explode 0.4s ease-out forwards !important;
}
@keyframes meteor-explode {
  /* No transform — position is frozen in JS by capturing the computed transform
     before cancelling the approach animation. Only opacity+filter animate here. */
  0%   { opacity: 1; filter: brightness(5); }
  40%  { opacity: 1; filter: brightness(2); }
  100% { opacity: 0; filter: none; }
}
.planet__meteor-tail {
  animation: tail-flicker 0.3s ease-in-out infinite alternate;
}
@keyframes tail-flicker {
  0%   { opacity: 0.3; }
  100% { opacity: 0.6; }
}
/* Hide meteors + lasers when zone resolves, but keep impact-site craters visible */
.planet__asteroid-zone--hidden .planet__meteor-group,
.planet__asteroid-zone--hidden .planet__laser { display: none; }

/* Laser zap — planet fires a beam to destroy the meteor */
.planet__laser {
  opacity: 0;
  stroke: rgba(100,220,255,0.9);
  stroke-width: 2;
  pointer-events: none;
}
.planet__laser--active {
  animation: laser-zap 0.35s ease-out forwards;
}
@keyframes laser-zap {
  0%   { opacity: 0;   stroke-width: 1; filter: none; }
  10%  { opacity: 1;   stroke-width: 5; filter: brightness(3) drop-shadow(0 0 4px #6df); }
  100% { opacity: 0;   stroke-width: 1; filter: none; }
}

/* Meteor impact — lands on surface, flares, then vanishes (no scale — see explode comment) */
@keyframes meteor-impact {
  0%   { transform: translate(var(--meteor-dx), var(--meteor-dy)); opacity: 1; filter: brightness(5); }
  30%  { opacity: 1; filter: brightness(3); }
  100% { transform: translate(var(--meteor-dx), var(--meteor-dy)); opacity: 0; }
}
.planet__meteor-group--impact {
  animation: meteor-impact 0.7s ease-out forwards !important;
  pointer-events: none;
}

/* Impact site — hidden until a meteor is missed, then revealed with flash */
.planet__impact-site {
  opacity: 0;
  pointer-events: none;
}
.planet__impact-site--active {
  opacity: 1;
  animation: impact-site-appear 0.8s ease-out;
}
@keyframes impact-site-appear {
  /* No scale — impact sites sit at absolute SVG coords; scale would misplace them */
  0%   { opacity: 0; filter: brightness(4) saturate(2); }
  30%  { opacity: 1; filter: brightness(2); }
  100% { opacity: 1; filter: none; }
}

/* ===== City fault zone ===== */
.planet__cities { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* will-change: transform isolates city zones from compositing-layer changes elsewhere
   in the SVG (e.g. hint-glow drop-shadows), preventing subpixel text jitter. */
.planet__city-zone { cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform; }

/* ===== Satellite network fault zone ===== */
.planet__satellite--broken {
  filter: grayscale(1) brightness(0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.planet__sat-spark {
  animation: sat-spark 0.5s ease-in-out infinite alternate;
}
@keyframes sat-spark {
  0%   { opacity: 0.3; r: 2; }
  100% { opacity: 0.9; r: 4; }
}
.planet__satellite--fixed {
  filter: none;
  transition: filter 0.4s;
}
.planet__sat-orbit--complete {
  stroke: rgba(100,180,255,0.2);
  animation: orbit-glow 2s ease-in-out infinite alternate;
}
@keyframes orbit-glow {
  0%   { stroke-opacity: 0.15; }
  100% { stroke-opacity: 0.3; }
}
.planet__satellite--broken.hint-glow {
  filter: grayscale(0.5) brightness(0.8)
          drop-shadow(0 0 6px rgba(255, 255, 50, 0.9))
          drop-shadow(0 0 14px rgba(255, 255, 50, 0.6));
}
.planet__satellite-zone--hidden { display: none; }

/* ===== Planet hint glows (extend generic .hint-glow) ===== */
/* Fire: glow on individual ellipses/circles via wash-target path — generic .hint-glow applies */
/* Forest: glow on the group via interactive path — generic .hint-glow applies */
/* City: yellow fill on first rect via sticker-zone path — handled by picker.js */