/* ============================================================
   SEAHOOD — living pixel harbor
   Presentation layer only. Every selector app.js touches is kept.
   Palette: operator spec. No gradient-blur SaaS, no glassmorphism,
   no floating ships, no glitch, no 3D.
   ============================================================ */

/* ---------------- fonts (self-hosted, latin subset) ---------------- */
@font-face{font-family:"SeaDisplay";src:url("/fonts/PixelDisplay.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"SeaText";src:url("/fonts/PixelText.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"SeaMono";src:url("/fonts/Mono.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"SeaMono";src:url("/fonts/MonoBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* harbor palette */
  --navy:#041A2D;
  --hnavy:#08283B;
  --ocean:#0877B9;
  --cyan:#31D7F5;
  --lime:#9BEA24;
  --cream:#F1E5C9;
  --orange:#F26A35;
  --ink:#07131D;

  --deck:#7A4E2C;
  --deck-d:#56361E;
  --deck-l:#A16A3E;

  /* type roles */
  --display:"SeaDisplay","SeaText",ui-monospace,monospace;
  --text:"SeaText",ui-monospace,monospace;
  --mono:"SeaMono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* geometry — pixel language: small hard radii only */
  --r:3px;
  --bar-h:60px;
  --edge:2px;
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --maxw:1240px;
  --pad:clamp(16px,4vw,40px);

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

img{max-width:100%;display:block;image-rendering:pixelated;}
a{color:var(--cyan);text-decoration:none;}
a:hover{color:var(--lime);}

::selection{background:var(--lime);color:var(--ink);}

/* visible focus everywhere — pixel bracket, never a soft glow */
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;}

.skip{
  position:fixed;top:14px;left:14px;z-index:90;
  background:var(--lime);color:var(--ink);font-family:var(--display);
  padding:8px 14px;border:var(--edge) solid var(--ink);border-radius:var(--r);
  transform:translateY(-260%);transition:transform .16s steps(3,end);
}
.skip:focus{transform:translateY(0);}

/* ============================================================
   LIVING HARBOR BACKGROUND (3-layer parallax, decorative)
   ============================================================ */
#seafield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

.sky-grad{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      #020F1C 0%,
      var(--navy) 34%,
      #063049 62%,
      #06456A 100%);
}

/* stars: hard 2px dots, no twinkle-spam — only a slow opacity drift */
.stars{position:absolute;inset:0 0 46% 0;}
.stars i{
  position:absolute;width:2px;height:2px;background:var(--cream);
  opacity:.5;animation:starDrift 6s steps(2,end) infinite;
}
@keyframes starDrift{0%,100%{opacity:.22}50%{opacity:.72}}

/* sun sits in the LEFT half so the hero art plate (right column) never
   clips it — measured 67-97% overlap when it was pinned to the right. */
.sun{
  position:absolute;
  top:clamp(40px,9vh,120px);
  left:clamp(20px,42vw,600px);right:auto;
  width:clamp(64px,8vw,120px);height:auto;
  filter:none;
}
@media (max-width:900px){
  /* One column has no clean sky band: the art plate owns the top band and the
     trait chips own the mid band, so the sun ends up crowding content wherever
     it lands. It is purely decorative (aria-hidden) — drop it on narrow
     viewports instead of wedging it between two content rows. */
  .sun{display:none;}
}

/* clouds drift horizontally — the harbor breathes, ships never float */
.clouds{position:absolute;inset:0 0 52% 0;}
.clouds img{
  position:absolute;
  animation:drift linear infinite;
  opacity:.85;
}
@keyframes drift{from{transform:translateX(-22vw)}to{transform:translateX(122vw)}}

/* three ocean bands, tiled, each scrolling at its own rate */
.wave{
  position:absolute;left:0;width:100%;
  background-repeat:repeat-x;
  image-rendering:pixelated;
  animation:swell linear infinite;
}
.wave-far{
  bottom:26%;height:54px;
  background-image:url("/assets/wave-far.png");
  background-size:auto 54px;
  animation-duration:46s;opacity:.72;
}
.wave-mid{
  bottom:12%;height:60px;
  background-image:url("/assets/wave-mid.png");
  background-size:auto 60px;
  animation-duration:30s;opacity:.86;
}
.wave-near{
  bottom:0;height:66px;
  background-image:url("/assets/wave-near.png");
  background-size:auto 66px;
  animation-duration:19s;
}
@keyframes swell{from{background-position-x:0}to{background-position-x:-1152px}}

/* ============================================================
   HARBOR NAV
   ============================================================ */
.bar{
  position:sticky;top:0;z-index:40;
  height:var(--bar-h);
  display:flex;align-items:center;gap:18px;
  padding:0 var(--pad);
  background:rgba(4,26,45,.94);
  border-bottom:var(--edge) solid var(--ocean);
  backdrop-filter:none;
}
.brand{
  display:flex;align-items:center;gap:10px;
  color:var(--cream);flex:0 0 auto;
  min-height:38px;   /* tap target, independent of the 28px mobile logo */
}
.brand img{width:34px;height:34px;}
.brand-word{
  font-family:var(--display);font-size:21px;letter-spacing:.02em;line-height:1;
}
.brand:hover .brand-word{color:var(--lime);}

.nav{display:flex;gap:4px;margin-left:auto;}
.nav a{
  position:relative;
  font-family:var(--display);font-size:14px;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--cream);
  padding:9px 13px;border:var(--edge) solid transparent;border-radius:var(--r);
}
.nav a:hover{color:var(--lime);border-color:rgba(155,234,36,.42);}
/* active = radar tick above the label, not a rounded pill */
.nav a[aria-current="page"]{color:var(--lime);border-color:var(--lime);}
.nav a[aria-current="page"]::before{
  content:"";position:absolute;left:50%;top:-1px;translate:-50% 0;
  width:6px;height:6px;background:var(--lime);
}

.bar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}

.wallet-pill{
  font-family:var(--display);font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--lime);background:transparent;
  border:var(--edge) solid var(--lime);border-radius:var(--r);
  padding:9px 15px;cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:translate .1s steps(2,end),box-shadow .1s steps(2,end);
}
.wallet-pill:hover{background:var(--lime);color:var(--ink);}
.wallet-pill:active{translate:3px 3px;box-shadow:0 0 0 var(--ink);}

.nav-toggle{
  display:none;
  width:42px;height:38px;padding:9px;cursor:pointer;
  background:transparent;border:var(--edge) solid var(--cyan);border-radius:var(--r);
}
.nav-toggle span{display:block;height:3px;background:var(--cyan);margin:0 0 4px;}
.nav-toggle span:last-child{margin-bottom:0;}
.nav-toggle[aria-expanded="true"]{background:var(--cyan);}
.nav-toggle[aria-expanded="true"] span{background:var(--ink);}

/* ============================================================
   LAYOUT
   ============================================================ */
#view{
  position:relative;z-index:10;
  flex:1 0 auto;
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(22px,4vw,44px) var(--pad) 64px;
}

.eyebrow{
  font-family:var(--mono);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--lime);margin:0 0 10px;
}
.lede{
  font-family:var(--text);
  font-size:clamp(15px,1.5vw,17px);
  color:rgba(241,229,201,.9);
  max-width:56ch;margin:0 0 22px;
}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0 0 14px;}
h2{font-size:clamp(24px,3.4vw,36px);letter-spacing:.01em;}
h3{font-size:clamp(16px,1.9vw,20px);color:var(--cyan);}

/* ============================================================
   HERO — art-led, near-full-screen, one column on mobile
   ============================================================ */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,52px);
  align-items:center;
  min-height:min(76vh,660px);
  padding-bottom:clamp(20px,4vw,40px);
}
.stage-copy{min-width:0;}

.hero-type{
  font-family:var(--display);
  font-size:clamp(52px,10.5vw,116px);
  line-height:.92;
  letter-spacing:.005em;
  color:var(--cream);
  margin:0 0 6px;
  /* one static hard offset — never a pulsing glow */
  text-shadow:5px 5px 0 var(--ocean);
}
.hero-type em{
  display:block;
  font-style:normal;
  font-family:var(--display);
  font-size:clamp(17px,2.5vw,26px);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--cyan);
  text-shadow:none;
  margin-top:14px;
}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ---------------- buttons: full state set ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 20px;
  font-family:var(--display);font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);background:var(--lime);
  border:var(--edge) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);cursor:pointer;
  transition:translate .1s steps(2,end),box-shadow .1s steps(2,end),
             background-color .1s steps(2,end);
}
.btn:hover{background:#B4F24A;}
.btn:active{translate:4px 4px;box-shadow:0 0 0 var(--ink);}
.btn[disabled],.btn:disabled{
  background:#2D4457;color:rgba(241,229,201,.55);
  border-color:#1B2E3D;box-shadow:none;cursor:not-allowed;translate:none;
}
.btn.is-loading{background:var(--cyan);cursor:progress;}
.btn.is-loading::before{
  content:"";width:11px;height:11px;background:var(--ink);
  animation:blink .7s steps(2,end) infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.btn.is-ok{background:var(--lime);}
.btn.is-err{background:var(--orange);color:var(--cream);}

.btn-ghost{
  background:var(--cream);color:var(--ink);
}
.btn-ghost:hover{background:#fff;}

/* ---------------- featured hull plate ---------------- */
.stage-art{min-width:0;display:flex;flex-direction:column;gap:12px;}
.plate{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  background:var(--hnavy);
  border:3px solid var(--ink);
  border-radius:var(--r);
  box-shadow:6px 6px 0 rgba(7,19,29,.9);
  overflow:hidden;
}
/* pixel corner brackets — a chart frame, not a rounded card */
.plate::before,.plate::after{
  content:"";position:absolute;width:22px;height:22px;
  border:3px solid var(--cyan);pointer-events:none;z-index:3;
}
.plate::before{top:7px;left:7px;border-right:0;border-bottom:0;}
.plate::after{bottom:7px;right:7px;border-left:0;border-top:0;}

#flagship{
  /* app.js sets background-image/size/position via artCrop() */
  transition:opacity .18s steps(3,end);
}
#flagship.wipe{opacity:0;}

.plate-tag{
  position:absolute;left:0;bottom:0;z-index:4;
  font-family:var(--display);font-size:14px;letter-spacing:.06em;
  color:var(--lime);background:rgba(7,19,29,.9);
  border-top:var(--edge) solid var(--cyan);
  border-right:var(--edge) solid var(--cyan);
  padding:7px 14px;
}

.rotator{
  position:absolute;right:10px;bottom:12px;z-index:4;
  display:flex;gap:5px;
}
.rot-dot{
  width:9px;height:9px;background:rgba(241,229,201,.34);
  border:1px solid var(--ink);
}
.rot-dot.on{background:var(--lime);}

/* plate control row */
.plate-ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.plate-ctl button{
  font-family:var(--display);font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;
  min-height:40px;padding:9px 14px;cursor:pointer;
  color:var(--cyan);background:var(--hnavy);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
}
.plate-ctl button:hover{color:var(--lime);border-color:var(--lime);}
.plate-ctl button:active{translate:2px 2px;}

/* hull attribute tags under the plate */
.hull-tags{display:flex;flex-wrap:wrap;gap:7px;}
.hull-tags span{
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--cream);background:rgba(8,40,59,.92);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  padding:5px 9px;
}

/* ============================================================
   STAT RAIL — one ink, ocean dividers, 2-col on mobile
   ============================================================ */
.rail{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:rgba(8,40,59,.92);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  box-shadow:var(--shadow);
  margin:0 0 clamp(28px,4vw,48px);
  overflow:hidden;
}
.rail-cell{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;
  border-right:var(--edge) solid var(--ocean);
  min-width:0;
}
.rail-cell:last-child{border-right:0;}
.rail-k{
  font-family:var(--mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--cyan);
}
.rail-v{
  font-family:var(--display);font-size:clamp(17px,2.1vw,22px);
  color:var(--cream);line-height:1.35;
  padding-bottom:2px;
  overflow-wrap:anywhere;
}
.rail-v.free,.rail-v.lime{color:var(--lime);}

/* ============================================================
   PANELS
   ============================================================ */
.panel{
  position:relative;
  background:rgba(8,40,59,.9);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:clamp(18px,2.6vw,30px);
  margin:0 0 clamp(24px,3.4vw,40px);
}
.panel > h2,.panel > h3{margin-top:0;}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,26px);}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px);}
.grid-3 p,.grid-2 p{font-family:var(--text);color:rgba(241,229,201,.86);margin:0;}
.grid-3 > div{
  padding-left:14px;
  border-left:3px solid var(--lime);
}

/* ============================================================
   FLEET STRIP / GRID — real atlas art, swipeable on mobile
   ============================================================ */
.strip{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:12px;
}
/* Home strip renders exactly 12 tiles. Explicit column counts that DIVIDE 12
   evenly kill the ragged half-row that auto-fill produced (8 + 4 at 1440). */
#homeStrip{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:1024px){ #homeStrip{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:768px){ #homeStrip{grid-template-columns:repeat(3,minmax(0,1fr));} }
.strip button{
  aspect-ratio:1/1;width:100%;padding:0;cursor:pointer;
  background-color:var(--hnavy);
  background-repeat:no-repeat;
  image-rendering:pixelated;
  border:var(--edge) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:translate .1s steps(2,end),border-color .1s steps(2,end);
}
.strip button:hover{border-color:var(--lime);translate:0 -3px;}
.strip button:active{translate:0 0;}

/* dock shelf: the fleet sits ON something */
.dock-shelf{
  position:relative;
  margin-top:clamp(16px,2.4vw,26px);
  height:42px;
  background:url("/assets/dock.png") repeat-x center/auto 42px;
  border-top:var(--edge) solid var(--deck-l);
  border-radius:0 0 var(--r) var(--r);
}
.dock-shelf::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:22px;
  background:url("/assets/wave-near.png") repeat-x center/auto 22px;
  opacity:.55;
}

.harbor-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.harbor-head .lh{
  display:flex;align-items:center;gap:12px;min-width:0;
}
.harbor-head img{width:30px;height:auto;}

/* text CTA that still meets the tap-target floor */
.link-cta{
  display:inline-flex;align-items:center;
  min-height:38px;padding:8px 12px;
  font-family:var(--display);font-size:14px;letter-spacing:.04em;
  color:var(--cyan);
  border:var(--edge) solid transparent;border-radius:var(--r);
}
.link-cta:hover{color:var(--lime);border-color:rgba(155,234,36,.42);}

/* ============================================================
   CONTRACT CHIP
   ============================================================ */
.ca-chip{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:8px 12px;
  font-family:var(--mono);font-size:12px;
  color:rgba(241,229,201,.92);
  background:rgba(7,19,29,.72);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  max-width:100%;
}
.ca-chip code{overflow-wrap:anywhere;font-family:var(--mono);}
.ca-chip button{
  flex:0 0 auto;
  font-family:var(--display);font-size:11px;letter-spacing:.05em;
  color:var(--ink);background:var(--cyan);cursor:pointer;
  border:var(--edge) solid var(--ink);border-radius:var(--r);
  padding:6px 10px;min-height:34px;
}
.ca-chip button:hover{background:var(--lime);}
.ca-chip button.is-ok{background:var(--lime);}

/* ============================================================
   BADGES (sale gate — tri-state)
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;
  padding:6px 12px;border-radius:var(--r);
  border:var(--edge) solid currentColor;
}
.badge .dot{width:8px;height:8px;background:currentColor;flex:0 0 auto;}
.badge.unknown{color:var(--cyan);}
.badge.unknown .dot{animation:blink 1s steps(2,end) infinite;}
.badge.closed{color:var(--orange);}
.badge.open{color:var(--lime);}

/* ============================================================
   PROGRESS
   ============================================================ */
.progress{
  height:22px;margin:0 0 8px;
  background:rgba(7,19,29,.8);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  overflow:hidden;
}
.progress i{
  display:block;height:100%;
  background:repeating-linear-gradient(90deg,
    var(--lime) 0 8px, #86CE1E 8px 16px);
  transition:width .3s steps(6,end);
}
.fineprint{
  font-family:var(--mono);font-size:11.5px;
  color:rgba(241,229,201,.72);margin:0;
}

/* ============================================================
   MINT CONSOLE
   ============================================================ */
.qty{display:flex;align-items:center;gap:0;margin:18px 0;width:max-content;}
.qty button{
  width:46px;height:46px;cursor:pointer;
  font-family:var(--display);font-size:22px;line-height:1;
  color:var(--ink);background:var(--cream);
  border:var(--edge) solid var(--ink);
}
.qty button:first-child{border-radius:var(--r) 0 0 var(--r);}
.qty button:last-child{border-radius:0 var(--r) var(--r) 0;}
.qty button:hover{background:var(--lime);}
.qty input{
  width:84px;height:46px;text-align:center;
  font-family:var(--display);font-size:19px;
  color:var(--cream);background:var(--hnavy);
  border:var(--edge) solid var(--ink);border-left:0;border-right:0;
  -moz-appearance:textfield;appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.note{
  font-family:var(--text);font-size:14px;
  margin:14px 0 6px;padding:11px 14px;
  border-left:4px solid var(--ocean);
  background:rgba(7,19,29,.55);
  color:rgba(241,229,201,.94);
  overflow-wrap:anywhere;
}
.note.ok{border-left-color:var(--lime);color:var(--lime);}
.note.err{border-left-color:var(--orange);color:#FFB694;}

/* ============================================================
   CHART / MAP
   ============================================================ */
.map-shell{
  position:relative;
  border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);
  background:var(--hnavy);
  overflow:hidden;
  margin:0 auto clamp(14px,2vw,20px);
  aspect-ratio:1/1;
  width:100%;max-width:820px;
}
#worldmap{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;cursor:crosshair;touch-action:none;
}
.map-hud{
  position:absolute;top:10px;left:10px;z-index:3;
  display:flex;flex-wrap:wrap;gap:7px;pointer-events:none;
}
.map-chip{
  font-family:var(--mono);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--cyan);background:rgba(7,19,29,.86);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  padding:5px 10px;
}
.map-tools{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 16px;
}
.map-tools .btn{min-height:44px;}

.legend{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.09em;
  color:rgba(241,229,201,.82);
}
.legend span{display:inline-flex;align-items:center;gap:8px;}
.legend i{
  width:13px;height:13px;display:inline-block;
  border:var(--edge) solid var(--ink);
}

/* ============================================================
   LOGBOOK / TIERS — pixel bars from real trait percentages
   ============================================================ */
.tier{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px;
  border-bottom:var(--edge) solid rgba(8,119,185,.5);
  font-family:var(--mono);font-size:13px;
  overflow:hidden;
}
.tier:last-child{border-bottom:0;}
/* the bar is the row background, quantised to 2% pixel steps */
.tier::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:var(--w,0%);
  background:rgba(8,119,185,.34);
  z-index:0;
}
.tier b,.tier .pct{position:relative;z-index:1;}
.tier b{
  font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--cream);letter-spacing:.02em;
}
.tier .pct{
  font-family:var(--mono);font-weight:600;font-size:11.5px;
  color:var(--cyan);white-space:nowrap;
}
.tier.mythic::before{background:rgba(242,106,53,.4);}
.tier.mythic b{color:var(--orange);}
.tier.legendary::before{background:rgba(155,234,36,.28);}
.tier.legendary b{color:var(--lime);}
.tier.rare::before{background:rgba(49,215,245,.24);}
.tier.uncommon::before{background:rgba(8,119,185,.4);}

/* ============================================================
   FILTER / CONTROL BAR (fleet explorer)
   ============================================================ */
.controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:18px;
}
.controls input[type="search"],.controls select{
  font-family:var(--mono);font-size:13px;
  min-height:42px;padding:9px 12px;
  color:var(--cream);background:var(--hnavy);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
}
.controls input[type="search"]{width:min(220px,100%);}
.controls select{cursor:pointer;}
.controls input:focus-visible,.controls select:focus-visible{border-color:var(--lime);}
.count-tag{
  font-family:var(--mono);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--cyan);margin-left:auto;
}

/* ============================================================
   SKELETON (loading state — pixel shimmer, no soft blur)
   ============================================================ */
.skel{
  background:repeating-linear-gradient(90deg,
    #0B2E44 0 10px,#0F3A54 10px 20px);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
  animation:skelShift 1s steps(4,end) infinite;
}
@keyframes skelShift{from{background-position-x:0}to{background-position-x:20px}}
.skel-tile{aspect-ratio:1/1;width:100%;}

/* ============================================================
   INSPECTOR MODAL
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:80;
  display:none;place-items:center;
  padding:18px;
  background:rgba(2,12,22,.9);
}
.lb.on{display:grid;}
.lb-card{
  width:min(760px,100%);max-height:90vh;overflow:auto;
  background:var(--navy);
  border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:8px 8px 0 rgba(7,19,29,.9);
}
.lb-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;
  border-bottom:var(--edge) solid var(--ocean);
  background:var(--hnavy);
}
.lb-id{font-family:var(--display);font-size:22px;color:var(--cream);}
.lb-x{
  margin-left:auto;cursor:pointer;
  font-family:var(--display);font-size:12px;letter-spacing:.06em;
  color:var(--ink);background:var(--cream);
  border:var(--edge) solid var(--ink);border-radius:var(--r);
  padding:7px 12px;min-height:34px;
}
.lb-x:hover{background:var(--orange);color:var(--cream);}
.lb-body{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:18px;padding:18px;
}
.lb-art{
  aspect-ratio:1/1;width:100%;
  background-repeat:no-repeat;image-rendering:pixelated;
  border:var(--edge) solid var(--ink);border-radius:var(--r);
}
.traits{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;}
.trait{
  padding:9px 11px;min-width:0;
  background:rgba(8,40,59,.9);
  border:var(--edge) solid var(--ocean);border-radius:var(--r);
}
.trait b{
  display:block;
  font-family:var(--mono);font-weight:600;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--cyan);margin-bottom:3px;
}
.trait span{
  font-family:var(--text);font-size:13.5px;color:var(--cream);
  overflow-wrap:anywhere;
}
.lb-foot{
  padding:14px 18px;
  border-top:var(--edge) solid var(--ocean);
  background:var(--hnavy);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative;z-index:10;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:16px var(--pad);
  background:var(--ink);
  border-top:3px solid var(--deck);
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(241,229,201,.76);
}
.foot-brand{display:inline-flex;align-items:center;gap:9px;}
.foot-mid{color:var(--cyan);}
.foot-ca a{color:var(--lime);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stage{min-height:0;gap:32px;}
  .hero-type{font-size:clamp(48px,9vw,86px);}
}

@media (max-width:900px){
  /* one column, artwork stays BIG and comes first visually */
  .stage{grid-template-columns:minmax(0,1fr);}
  .stage-art{order:-1;max-width:520px;margin:0 auto;width:100%;}
  /* Measured: .wave-near/.wave-mid crests overlap the lede box 11,070px² @390
     and 21,648px² @360, and the copy block has no opaque backdrop — the light
     foam pixels run light-on-light through the last line. Lay a navy scrim
     behind the hero copy so the ocean motif stays but the text always wins. */
  .stage-copy{
    position:relative;
    background:var(--navy);
    box-shadow:0 0 0 8px var(--navy);
    border-radius:2px;
  }
  .lede{max-width:none;}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rail-cell{border-bottom:var(--edge) solid var(--ocean);}
  .rail-cell:nth-child(2n){border-right:0;}
  .rail-cell:last-child{grid-column:1/-1;border-bottom:0;}
}

@media (max-width:768px){
  :root{--bar-h:56px;}
  .nav{
    position:fixed;top:var(--bar-h);left:0;right:0;z-index:39;
    display:none;flex-direction:column;gap:0;margin:0;
    background:var(--navy);
    border-bottom:3px solid var(--ocean);
    padding:8px var(--pad) 14px;
  }
  .nav.open{display:flex;}
  .nav a{
    padding:14px 12px;border-radius:0;
    border:0;border-bottom:var(--edge) solid rgba(8,119,185,.42);
    font-size:16px;
  }
  .nav a[aria-current="page"]{border-color:var(--lime);}
  .nav a[aria-current="page"]::before{left:0;top:50%;translate:0 -50%;}
  .nav-toggle{display:block;}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr);}
  .lb-body{grid-template-columns:minmax(0,1fr);}
  .lb-art{max-width:320px;margin:0 auto;}
  .map-tools .btn{flex:1 1 auto;}
}

@media (max-width:640px){
  /* fleet becomes a swipeable rail — no cramped 4-up grid */
  .strip{
    display:flex;gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    scrollbar-width:thin;
  }
  .strip button{
    flex:0 0 42%;max-width:170px;scroll-snap-align:start;
  }
  .btn-row .btn{flex:1 1 100%;}
  .plate-ctl button{flex:1 1 auto;}
  .count-tag{margin-left:0;width:100%;}
  .controls input[type="search"],.controls select{flex:1 1 100%;width:auto;}
}

@media (max-width:420px){
  body{font-size:14px;}
  .hero-type{font-size:clamp(40px,13vw,58px);text-shadow:4px 4px 0 var(--ocean);}
  .hero-type em{font-size:15px;letter-spacing:.06em;}
  .brand-word{font-size:18px;}
  .brand img{width:28px;height:28px;}
  .wallet-pill{font-size:12px;padding:8px 11px;}
  .rail-v{font-size:17px;}
  .strip button{flex:0 0 62%;}
  .foot{font-size:10px;justify-content:flex-start;}
}

/* ============================================================
   MOTION / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0s !important;animation-iteration-count:1 !important;
    transition-duration:0s !important;
  }
  .wave,.clouds img,.stars i{animation:none !important;}
}