/* =============================================================================
   hangar-ships.css — HANGAR ▸ SHIPS, grouped by hull class
   ---------------------------------------------------------------------------
   Three problems this solves, in order of severity:

   1. NO STRUCTURE. 42 hulls sat in one flat 3-up grid, so a starter Frigate and
      the Titan Sina read as the same kind of purchase. Now every hull sits under
      its real class with a hero band that says what the class is FOR — including
      the escort weapon it fires, which the game never stated anywhere.
   2. TOO FEW SHIPS PER SCREEN. Tiles used a square (aspect-ratio:1) thumb, so a
      third of the tab was empty space around small sprites. The thumb is now a
      fixed 46px band — roughly half the height — and the grid goes 4-up then 5-up
      as width allows, which more than doubles the hulls visible per scroll.
   3. THE CARRIER WALL. 24 of the 42 hulls are Carriers. That class is sub-divided
      by how the hull is acquired, and a sticky jump bar skips between classes, so
      the list is navigable instead of endless.

   Class accents match SHIP_ACCENT in render.js, so a hull's colour here is the
   same colour it carries in combat.
   ============================================================================= */

/* ---- sticky class jump bar ------------------------------------------------- */
.sc-jump{ position:sticky; top:0; z-index:6; display:flex; gap:6px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 1px 9px; margin:0 0 4px;
  background:linear-gradient(180deg,#0e1420 72%,rgba(14,20,32,0)); }
.sc-jump::-webkit-scrollbar{ display:none; }
.scj{ flex:none; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:60px;
  padding:6px 9px; border-radius:10px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ca) 34%, transparent);
  background:color-mix(in srgb, var(--ca) 9%, #101725); }
.scj b{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:9px; letter-spacing:.06em;
  color:var(--ca); white-space:nowrap; }
.scj span{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:10px; color:#7f8ea6;
  font-variant-numeric:tabular-nums; }
.scj.on,.scj:hover{ border-color:var(--ca); background:color-mix(in srgb, var(--ca) 20%, #101725); }
.scj.on span,.scj:hover span{ color:#c3cede; }
.scj.flying::after{ content:'●'; position:absolute; }
.scj.flying{ position:relative; box-shadow:0 0 0 1px color-mix(in srgb, var(--ca) 55%, transparent); }
.scj.flying::after{ top:2px; right:4px; font-size:6px; color:var(--ca); }

/* ---- class section + hero band -------------------------------------------- */
.sc-class{ scroll-margin-top:8px; margin:0 0 16px; }
.sc-hero{ position:relative; overflow:hidden; border-radius:14px; padding:11px 13px 12px; margin:0 0 9px;
  border:1px solid color-mix(in srgb, var(--ca) 30%, transparent);
  background:linear-gradient(120deg, color-mix(in srgb, var(--ca) 13%, #121a28) 0%, #0e1420 62%); }
.sc-hero::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ca);
  box-shadow:0 0 14px -1px var(--ca); }
.sc-h-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sc-h-name{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:14px; letter-spacing:.05em;
  color:#fff; min-width:0; }
.sc-h-name em{ font-style:normal; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ca); margin-left:6px; }
.sc-h-count{ flex:none; font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; color:#7f8ea6;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.sc-h-count b{ font-family:'Orbitron',sans-serif; font-size:15px; color:var(--ca); }
.sc-h-count i{ font-style:normal; font-size:9px; font-weight:800; letter-spacing:.08em; color:var(--ca);
  margin-left:6px; }
.sc-h-role{ font-size:12px; font-weight:700; color:#c3cede; margin-top:5px; line-height:1.4; text-wrap:pretty; }
.sc-h-benefit{ font-size:11.5px; color:#8fa3bd; margin-top:4px; line-height:1.5; text-wrap:pretty; }
.sc-h-benefit b{ color:var(--ca); font-weight:700; }
.sc-h-bar{ height:3px; border-radius:2px; margin-top:9px; background:rgba(255,255,255,.07); overflow:hidden; }
.sc-h-bar i{ display:block; height:100%; border-radius:2px; background:var(--ca); box-shadow:0 0 8px var(--ca); }


/* ---- denser tiles --------------------------------------------------------- */
/* The base tile is built around a SQUARE (aspect-ratio:1) thumb. Overriding just
   the height left the two rules fighting: sprites with very different intrinsic
   aspect ratios either collapsed to a sliver or overflowed the band and dropped
   below the name. So the geometry is redeclared here in full — explicit row
   order, an art box that cannot change size, and an <img> constrained ONLY by
   max-width/max-height so every sprite keeps its own aspect ratio and simply
   fits. Nothing here depends on the base rules any more. */
.sc-class .ship-grid{ gap:7px; margin-top:0; align-items:stretch; }
.sc-class .ship-tile{ display:flex !important; flex-direction:column !important;
  align-items:center; justify-content:flex-start; gap:4px;
  padding:8px 6px 8px; border-radius:11px; overflow:hidden; }
.sc-class .ship-tile .st-thumb{ order:0; flex:0 0 auto;
  aspect-ratio:auto !important; width:100%; height:48px;
  display:flex; align-items:center; justify-content:center; }
.sc-class .ship-tile .st-thumb img{ width:auto !important; height:auto !important;
  max-width:100%; max-height:48px; object-fit:contain; }
.sc-class .ship-tile .st-name{ order:1; width:100%; font-size:10.5px; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-class .ship-tile .st-cls{ display:none; }   /* redundant under a class heading */
.sc-class .ship-tile .st-stats{ order:2; font-size:9px; gap:4px; }
.sc-class .ship-tile .st-badge{ order:3; margin-top:1px; }
.sc-class .ship-tile .st-flag{ top:3px; font-size:6.5px; z-index:5; }
.sc-class .ship-tile .st-lvl{ font-size:8px; z-index:5; }
/* class-tinted border so a tile always reads as part of its section */
.sc-class .ship-tile.owned{ border-color:color-mix(in srgb, var(--ca) 40%, transparent); }
.sc-class .ship-tile.active{ border-color:var(--ca); box-shadow:0 0 0 1px var(--ca), 0 4px 18px -6px var(--ca); }
.sc-class .ship-tile.active .st-thumb img,.sc-class .ship-tile.owned .st-thumb img{
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--ca) 55%, transparent)) drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

@media (min-width:420px){ .sc-class .ship-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:700px){ .sc-class .ship-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .sc-class .ship-tile .st-thumb{ height:56px; }
  .sc-class .ship-tile .st-thumb img{ max-height:56px; } }
@media (min-width:1024px){ .sc-class .ship-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

/* The apex hero tiles (Titan Sina / Aeternum) keep their full-size art — they are
   the one place in the tab where scale is the point, so they opt OUT of the
   fixed art box entirely rather than inheriting a cap that would crop them. */
.sc-class .ship-tile.st-sina{ grid-column:1 / -1; padding:9px 10px; }
.sc-class .ship-tile.st-sina .st-thumb,
.sc-class .ship-tile.st-sina .sts-art{ height:auto; max-height:none; }
.sc-class .ship-tile.st-sina .st-thumb img,
.sc-class .ship-tile.st-sina .sts-art img{ max-height:none; }

@media (prefers-reduced-motion:reduce){ .sc-jump{ scroll-behavior:auto; } }