/* ─── Career Domain Custom Mechanics CSS ─── */

/* Chips row */
.car-chips { display:flex; justify-content:space-between; gap:2px; padding:var(--space-sm) 0; }
.car-chip { flex:1; text-align:center; padding:6px 1px; border-radius:var(--radius-pill); font-size:0.5625rem; font-weight:600; color:var(--text-muted); background:var(--bg-card); border:1.5px solid var(--border); transition:all 0.2s ease; cursor:pointer; line-height:1.2; }
.car-chip.active { background:#D4A843; color:white; border-color:#D4A843; transform:scale(1.05); box-shadow:0 2px 8px rgba(212,168,67,0.3); }

/* Instruction */
.car-instruction { text-align:center; font-size:0.8125rem; font-weight:600; color:#D4A843; padding:var(--space-sm) var(--space-md); background:rgba(212,168,67,0.08); border-radius:var(--radius-pill); margin-bottom:var(--space-sm); }

/* Continue button */
.car-continue { margin-top:var(--space-md); }

/* Shared slider */
.car-slider { -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:5px; background:linear-gradient(90deg,#CFD8DC,#D4A843,#FF8F00); outline:none; margin:var(--space-md) 0; }
.car-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:44px; height:44px; border-radius:50%; background:white; cursor:grab; box-shadow:0 4px 16px rgba(0,0,0,0.15); border:3px solid #D4A843; }
.car-slider:active::-webkit-slider-thumb { transform:scale(1.1); cursor:grabbing; }
.car-slider-gold::-webkit-slider-thumb { border-color:#B8860B; }

/* Rocket shake */
@keyframes carShake { 0%,100%{transform:translateX(-50%) translateX(0);} 25%{transform:translateX(-50%) translateX(-2px);} 75%{transform:translateX(-50%) translateX(2px);} }

/* Power bar stripes flow */
@keyframes carStripeFlow { from{background-position:0 0;} to{background-position:40px 0;} }

/* Tunnel ring pulse */
@keyframes carPulseRing { 0%{transform:translate(-50%,-50%) scale(1);opacity:0.3;} 50%{transform:translate(-50%,-50%) scale(0.92);opacity:0.6;} 100%{transform:translate(-50%,-50%) scale(1);opacity:0.3;} }