/* Engineering Lab brand palette and the brand marks drawn by lib/brand.js.
   The palette is locked: sand, Nile blue, steel grey, one green for GO, one red for danger.
   Use these tokens for brand surfaces (logos, plates, icons); the game HUD keeps its own look for now. */
:root{
  --lab-sand:#f2dcb1;      --lab-sand-lt:#fff4df;  --lab-sand-dk:#d6a660;
  --lab-nile:#1c5a86;      --lab-nile-dk:#0f3653;  --lab-nile-lt:#3f7fae;
  --lab-steel:#7b8a96;     --lab-steel-lt:#c4ced6; --lab-steel-dk:#46535e;
  --lab-go:#2e9e55;        --lab-danger:#d2422f;
}
.lb{display:block;overflow:visible;max-width:100%;width:auto;height:calc(var(--lb-h,30) * var(--lb-unit,2px))}
/* letters */
.lb .lb-stroke{fill:none;stroke:var(--lab-sand-lt);stroke-width:2.4;stroke-linejoin:miter;stroke-miterlimit:1.5;stroke-linecap:butt}
.lb .lb-conn{stroke-linecap:square}
.lb .lb-ltr{fill:var(--lab-sand-lt)}
/* nameplate */
.lb .lb-plate{fill:var(--lab-nile)}
.lb .lb-plate-edge{fill:var(--lab-nile-dk)}
.lb .lb-plate-hi{fill:none;stroke:var(--lab-nile-lt);stroke-width:.7;opacity:.85}
.lb .lb-rivet{fill:var(--lab-nile-dk);stroke:var(--lab-nile-lt);stroke-width:.5}
/* emblem */
.lb .lb-gear{fill:var(--lab-nile-dk)}
.lb .lb-face{fill:var(--lab-sand)}
.lb .lb-truss,.lb .lb-deck{fill:none;stroke:var(--lab-nile);stroke-linejoin:round;stroke-linecap:round}
.lb .lb-bolt{fill:var(--lab-sand-dk);stroke:var(--lab-nile-dk);stroke-width:.7}
.lb-bridge .lb-truss{stroke:var(--lab-nile-dk)}
.lb-bridge .lb-bolt{fill:var(--lab-sand-lt);stroke:var(--lab-nile-dk);stroke-width:.6}
.lb .lb-gear-b{fill:var(--lab-sand-dk)}
.lb .lb-gear-ring{fill:none;stroke:var(--lab-nile-dk);stroke-width:1.1;opacity:.35}
.lb .lb-gear-s{fill:var(--lab-steel-lt)}
/* a short build-up when a home screen opens; switched off for reduced motion.
   The Gear Works pinion (.lb-spin2, 8 teeth) meshes with the drive gear (.lb-spin, 16 teeth): same easing and length,
   twice the angle, the other way, so the teeth stay engaged all the way in. Keep 150 = 75 x 16/8 if either changes. */
@media (prefers-reduced-motion:no-preference){
  .lb-intro .lb-spin{animation:lbSpin 1.1s cubic-bezier(.2,.9,.25,1) both}
  .lb-intro .lb-spin2{animation:lbSpin2 1.1s cubic-bezier(.2,.9,.25,1) both}
  .lb-intro .lb-word{animation:lbWord .7s .15s ease-out both}
  .lb-intro .lb-plate,.lb-intro .lb-plate-hi,.lb-intro .lb-rivet{animation:lbFade .45s ease-out both}
  .lb-intro .lb-truss,.lb-intro .lb-bridge .lb-bolt{animation:lbFade .6s .2s ease-out both}
}
@keyframes lbSpin{from{transform:rotate(-75deg);opacity:0}40%{opacity:1}to{transform:none}}
@keyframes lbSpin2{from{transform:rotate(150deg);opacity:0}40%{opacity:1}to{transform:none}}
@keyframes lbWord{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}}