.crew-robot{cursor:pointer;outline:none;color:var(--robot-color)}
.crew-robot .crew-focus{fill:none;stroke:#c9f6ff;stroke-width:2;opacity:0}
.crew-robot:hover .crew-focus,.crew-robot:focus-visible .crew-focus{opacity:1}
.crew-bob{transform-origin:0 -10px}
.crew-robot[data-state=walk] .crew-bob{animation:crew-roll .32s steps(2,end) infinite}
.crew-robot[data-state=walk] .crew-tread{animation:crew-tread .32s steps(2,end) infinite}
.crew-arm-right{transform-origin:25px -48px}
.crew-robot[data-state=work] .crew-arm-right{animation:crew-work .85s steps(4,end) infinite alternate}
.crew-robot[data-state=work] .crew-eye{animation:crew-look 2.6s steps(2,end) infinite}
.crew-sparks{opacity:0}
.crew-robot[data-state=work] .crew-sparks{animation:crew-spark 1.8s steps(1,end) infinite}
.crew-robot[data-state=still] *{animation-play-state:paused!important}
.crew-sprite-facing{transition:none}
.crew-tools{pointer-events:none}
.crew-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 3.5%;border-block:1px solid #334456;background:#121e2c}
.crew-toolbar p{margin:0;font:10px/1.7 monospace;color:#a7bece}.crew-toolbar b{color:#f0c774;letter-spacing:1px}.crew-toolbar p span{display:block}
.crew-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}.crew-toolbar button{padding:11px 13px;background:#0c1724;border:1px solid #4a6075;color:#c8e3ed;font:9px monospace;min-height:38px}.crew-toolbar button:hover,.crew-toolbar button[aria-pressed=true]{border-color:#ffd782;color:#ffd782}
.crew-bubble{position:absolute;width:280px;max-width:calc(100vw - 24px);z-index:6;background:#fff5d6;border:3px solid #172032;border-radius:16px 19px 17px 4px;color:#172032;padding:14px 16px 15px;box-shadow:5px 5px 0 #081020;pointer-events:none}
.crew-bubble:before{content:"";position:absolute;top:100%;left:var(--tail-x,34px);border-style:solid;border-width:22px 16px 0 0;border-color:#172032 transparent transparent transparent}
.crew-bubble:after{content:"";position:absolute;top:calc(100% - 2px);left:calc(var(--tail-x,34px) + 3px);border-style:solid;border-width:17px 10px 0 0;border-color:#fff5d6 transparent transparent transparent}
.crew-bubble header{display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;padding:0;border:0}.crew-bubble b{font:900 12px monospace;letter-spacing:1px}.crew-bubble small{display:block;font:8px/1.4 monospace;letter-spacing:.5px;color:#526274;margin:4px 24px 0 0}.crew-bubble p{font:700 15px/1.4 'Trebuchet MS',Arial,sans-serif;margin:11px 0 0}.crew-bubble button{pointer-events:auto;background:none;border:0;color:#172032;font:bold 19px monospace;min-width:24px;min-height:24px;padding:0}
.crew-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes crew-roll{50%{transform:translateY(-1.5px)}}
@keyframes crew-tread{50%{transform:translateX(3px)}}
@keyframes crew-work{from{transform:rotate(-12deg)}to{transform:rotate(11deg)}}
@keyframes crew-look{50%{transform:translateX(2px)}}
@keyframes crew-spark{0%,70%,100%{opacity:0}35%,55%{opacity:.8}}
@media(max-width:650px){.crew-toolbar{align-items:flex-start;flex-direction:column;gap:12px;padding:15px 5%}.crew-toolbar button{font-size:8px;padding:10px}.crew-bubble{width:250px;padding:12px 13px}.crew-bubble p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.crew-robot *{animation:none!important;transition:none!important}}

/* Only a docked welder extends the torch. Sparks originate at the truck seam. */
.crew-weld-rig{opacity:0;pointer-events:none}
.crew-robot[data-state=weld] .crew-weld-rig{opacity:1}
.crew-robot[data-state=weld] .crew-arm-right{visibility:hidden}
.crew-robot[data-state=weld] .crew-eye{animation:crew-look 3s steps(2,end) infinite}
.crew-robot[data-state=weld] .weld-glow{animation:weld-glow 1.8s ease-in-out infinite}
.crew-robot[data-state=weld] .weld-core,.crew-robot[data-state=weld] .weld-burst{animation:weld-arc 1.2s steps(2,end) infinite}
.weld-particle{opacity:0}
.crew-robot[data-state=weld] .weld-particle{animation:weld-particle .95s ease-out var(--spark-delay) infinite}
@keyframes weld-glow{0%,100%{opacity:.25}40%,65%{opacity:.85}}
@keyframes weld-arc{0%,100%{opacity:.25}35%,65%{opacity:1}}
@keyframes weld-particle{0%{opacity:1;transform:translate(0,0)}70%{opacity:.9}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y))}}
@media(prefers-reduced-motion:reduce){.crew-weld-rig{display:none}}
.crew-welding-mask{display:none}
.crew-robot[data-state=weld] .crew-welding-mask{display:inline}

/* Entrance panic stays within each robot's checked body envelope. */
.crew-alarm-marks{display:none}
.crew-robot[data-state=panic] .crew-alarm-marks{display:inline}
.crew-robot[data-state=panic] .crew-bob{animation:crew-panic .28s steps(2,end) var(--panic-delay,0s) infinite}
.crew-robot[data-state=panic] .crew-arm-right{animation:crew-flail .34s steps(3,end) var(--panic-delay,0s) infinite alternate}
.crew-robot[data-state=panic] .crew-eye{transform:scaleY(1.2);transform-origin:0 -66px}
.garage-world[data-arrival=scramble] .crew-robot[data-state=walk] .crew-bob,.garage-world[data-arrival=scramble] .crew-robot[data-state=walk] .crew-tread{animation-duration:.20s}
.garage-world[data-arrival=scramble] .crew-robot[data-state=work] .crew-arm-right{animation-duration:.42s}
.crew-bubble[data-tone=shout]{background:#fff0b6;border-radius:4px 15px 3px 13px;border-width:4px;box-shadow:6px 6px 0 #101a2c}
.crew-bubble[data-tone=shout]:after{border-top-color:#fff0b6}
.crew-bubble[data-tone=shout] p{font-size:19px;line-height:1.15;font-weight:900;font-style:italic;letter-spacing:.2px}
@keyframes crew-panic{0%,100%{transform:translate(-1px,0)}50%{transform:translate(1px,-1px)}}
@keyframes crew-flail{from{transform:rotate(-18deg)}to{transform:rotate(14deg)}}
@media(max-width:650px){.crew-bubble[data-tone=shout] p{font-size:17px}}
@media(prefers-reduced-motion:reduce){.crew-robot[data-state=panic] *{animation:none!important;transform:none}.crew-alarm-marks{display:none!important}}