/*
  www/css/units.css
  Unit roster. Desktop: the section is pinned by main.js and .units__pin
  (header + cards in one row) slides left as you scroll. Mobile: header on
  top, cards in a swipeable snap row. Each sprite stands on a CSS-only
  isometric grass tile and bobs; paint swatches re-skin the sprites.
*/

/* Fallback (reduced motion / no JS): the row scrolls sideways natively.
   main.js adds .is-pinned when GSAP takes over the horizontal motion. */
.units { background: linear-gradient(180deg, var(--noturno) 0%, var(--noturno-2) 100%); overflow-x: auto; scroll-snap-type: x proximity; }
.units.is-pinned { overflow: hidden; }
.unit-card { scroll-snap-align: center; }
.units__pin { display: flex; align-items: center; gap: clamp(24px, 3vw, 40px); width: max-content; padding-right: var(--gutter); }
.units__head { flex: 0 0 min(440px, 34vw); margin: 0; }

.paints { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.paint {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--noturno); background: var(--sw); box-shadow: 0 0 0 2px rgba(232, 235, 247, .35);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.paint:hover { transform: scale(1.1); }
.paint[aria-checked="true"] { box-shadow: 0 0 0 3px var(--limao); transform: scale(1.12); }
.paints__label { flex-basis: 100%; font: 400 13px/1 var(--f-stencil); letter-spacing: .14em; text-transform: uppercase; color: var(--limao); }

.roster { display: flex; gap: clamp(18px, 2vw, 28px); }
.unit-card {
  position: relative; flex: 0 0 clamp(300px, 25vw, 370px);
  padding: 20px 22px 24px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(12, 70, 81, .55), rgba(0, 22, 33, .9));
  border: 2px solid rgba(232, 235, 247, .12);
  transition: transform .4s var(--ease-out), border-color .3s;
}
.unit-card:hover { transform: translateY(-8px) rotate(-.6deg); border-color: var(--limao); }
.unit-card__num { position: absolute; top: 16px; right: 20px; font: 400 44px/1 var(--f-stencil); color: rgba(232, 235, 247, .1); }

.unit-card__stage { position: relative; height: 250px; display: grid; place-items: end center; margin-bottom: 16px; }
/* Isometric grass tile: rotated square + stacked shadows for the dirt side. */
.tile {
  position: absolute; left: 50%; bottom: 34px; width: 150px; aspect-ratio: 1; translate: -50% 0;
  transform: rotateX(60deg) rotateZ(45deg);
  background: conic-gradient(#7CCB3A 25%, #8FD84A 0 50%, #7CCB3A 0 75%, #8FD84A 0) 0 0 / 50% 50%;
  box-shadow: 1px 1px 0 #5E9E2A, 2px 2px 0 #5E9E2A, 3px 3px 0 #7A5230, 4px 4px 0 #7A5230, 5px 5px 0 #6E4A2B,
    6px 6px 0 #6E4A2B, 7px 7px 0 #63422A, 8px 8px 0 #63422A, 9px 9px 0 #583A25, 10px 10px 0 #583A25,
    11px 11px 0 #4D3321, 12px 12px 0 #4D3321, 26px 26px 30px rgba(0, 0, 0, .5);
}
.unit-card__sprite {
  position: relative; z-index: 1; width: auto; max-width: 92%; max-height: 210px; margin-bottom: 44px;
  filter: var(--paint, saturate(1)) drop-shadow(0 10px 8px rgba(0, 0, 0, .35));
  transition: filter .5s var(--ease-out);
}
.unit-card__role { font: 400 12px/1 var(--f-stencil); letter-spacing: .2em; text-transform: uppercase; color: var(--limao); }
.unit-card__name { margin: 6px 0 10px; font: 400 32px/1 var(--f-display); text-transform: lowercase; }
.unit-card__blurb { min-height: 4.4em; font-size: 15px; line-height: 1.45; opacity: .85; }

.stats { display: grid; gap: 7px; margin: 18px 0 0; }
.stats div { display: grid; grid-template-columns: 62px 1fr; align-items: center; }
.stats dt { font: 400 11px/1 var(--f-stencil); letter-spacing: .16em; opacity: .75; }
.stats dd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; }
.pip { height: 9px; border-radius: 2px; background: rgba(232, 235, 247, .14); transform-origin: left; }
.pip.on { background: var(--limao); transform: scaleX(0); transition: transform .45s var(--ease-out) calc(var(--i) * 60ms); }
.unit-card.is-in .pip.on, .no-js .pip.on { transform: none; }

@media (max-width: 860px) {
  .units__pin { display: block; width: auto; padding: 0; }
  .units__head { margin-bottom: 36px; }
  .roster {
    margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .roster::-webkit-scrollbar { display: none; }
  .unit-card { flex-basis: 80%; scroll-snap-align: center; }
}
@media (min-width: 861px) {
  /* Fill the viewport while pinned so the row is vertically centred. */
  .units { min-height: 100svh; display: flex; align-items: center; padding-block: 72px; }
}
@media (prefers-reduced-motion: reduce) { .pip.on { transform: none; } }