/* ============================================================
   ONE LIGHT MODEL
   Every lit surface on this page obeys a single implied source:
   the moon, high and right of frame. The custom-property system
   below is the physics; nothing may cast a shadow in another
   direction, glow in place, or highlight from the wrong side.
     --light-x / --light-y  where the source sits over any surface
     --sheen                the moonlight a surface catches from it
     --sx / --sy            the shadow unit vector (down-left, away
                            from the light); all elevations scale it
     --elev-1..3            depth = multiples of that same vector
     --edge-lit             the 1px catch on top + right edges,
                            the sides that face the moon
     --rule                 a thin luminous rule: wet line in moonlight
   ============================================================ */
:root{
  --light-x:82%; --light-y:-8%;
  --sx:-1px; --sy:2px;
  --sheen:radial-gradient(140% 110% at var(--light-x) var(--light-y), rgba(150,198,255,.09), rgba(150,198,255,0) 58%);
  --sheen-strong:radial-gradient(120% 100% at var(--light-x) var(--light-y), rgba(170,210,255,.16), rgba(170,210,255,0) 55%);
  --elev-1:calc(var(--sx)*5) calc(var(--sy)*5) 22px rgba(1,4,9,.55);
  --elev-2:calc(var(--sx)*9) calc(var(--sy)*9) 40px rgba(1,4,9,.62);
  --elev-3:calc(var(--sx)*14) calc(var(--sy)*14) 70px rgba(0,2,6,.72);
  --edge-lit:inset 0 1px 0 rgba(203,227,255,.16), inset -1px 0 0 rgba(203,227,255,.07);
  --rule:linear-gradient(90deg, rgba(143,195,255,0), rgba(143,195,255,.5) 30%, rgba(143,195,255,.5) 70%, rgba(143,195,255,0));

  --abyss:#03070d;
  --deep:#071120;
  --panel:#0a1524;
  --panel-2:#0d1a2c;
  --hairline:rgba(140,180,230,.14);
  --ink:#eaf2fc;
  --ink-dim:#9db2ca;
  --beam:#8fc3ff;        /* moonlight on water */
  --beam-core:#d6e8ff;   /* the moon itself */
  --blue:#2f8bff;        /* heritage electric blue, used only as light */
  --blue-deep:#15529f;
  /* The heritage blue is a LIGHT colour: it may edge, rule, tint and glow, but
     it cannot carry white text (#2f8bff is 3.0:1 against #fff). Any blue plate
     a white label sits on uses the pair below instead — the same hue driven
     down into shadow until the type reads. Verified WCAG AA:
       --blue-ink      #1668cc  →  5.41:1 on #ffffff
       --blue-ink-deep #0f4f9e  →  7.98:1 on #ffffff
     Bright blue stays bright everywhere it is light rather than surface. */
  --blue-ink:#1668cc;
  --blue-ink-deep:#0f4f9e;
  --amber:#ffb454;       /* strike flash */
  --danger:#ff6a5e;
  --ok:#5fd39a;
  --font-display:'Archivo Black', sans-serif;
  --font-body:'Barlow', sans-serif;
  --nav-h:66px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* No overflow clip on html/body. The only boxes that reach past the viewport
   edge are position:fixed (the cart drawer parked at translateX(102%)) or are
   already clipped by their own frame (.ch-media inside .carousel's
   overflow:hidden) — neither extends the document's scrollable area, so a
   page-level clip bought nothing and cost the drawer its right to exist
   outside the fold. Horizontal scroll is prevented structurally instead and
   asserted at 360/390/768/1024/1440/1920 in verify_va.js. */
body{
  font-family:var(--font-body);
  background:var(--abyss);
  color:var(--ink);
  line-height:1.6;
  caret-color:var(--beam);
}
::selection{background:rgba(47,139,255,.38);color:var(--beam-core)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:2px}
html{scrollbar-width:thin;scrollbar-color:#1c3a5e var(--abyss)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--abyss)}
::-webkit-scrollbar-thumb{background:#16304f;border:2px solid var(--abyss);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#22436b}
a{text-underline-offset:3px}
img{max-width:100%}
button{font-family:inherit}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:300;
  background:var(--panel-2);color:var(--ink);padding:12px 18px;
  font-weight:600;letter-spacing:.04em;text-decoration:none;
  border:1px solid var(--hairline);transition:top .2s ease-out;
}
.skip-link:focus-visible{top:12px}

/* ============ FILM GRAIN (static, no animation) ============ */
.grain{
  position:fixed;inset:0;z-index:210;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ============ BACKGROUND LAYERS ============ */
.bg-layer{
  position:fixed;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .8s ease-out;
}
.bg-layer.active{opacity:1}
/* Owner-set featured background (admin → Background): the artwork's centerpiece
   (the Tactical logo) sits in the TOP half of the poster, so anchor the image to
   the top and start the layer below the sticky header — otherwise the header
   hides the top of the logo on phones and short screens. --header-h is kept in
   sync by applyBackground(). Bottom of the artwork crops instead. */
#bgCustom{top:var(--header-h,0px);background-position:center top}
/* generated art first; brand poster loads beneath it as the live fallback */
.bg-squall{background-image:url('/assets___generated/gen_storm_hero.jpg'),url('/photos/1000018946.png')}
.bg-scrim{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(2,5,10,.86) 0%,rgba(2,5,10,.72) 45%,rgba(2,5,10,.9) 100%);
}

/* ============ ANNOUNCE + NAV ============ */
.announce{
  background:linear-gradient(200deg,#1a5cb0,#123f7d);
  text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.08em;
  padding:9px 16px;color:#eaf3ff;text-transform:uppercase;
}
/* Thin shipping-policy strip (carried over from the original site).
   Lives INSIDE the sticky header so it floats with the nav while scrolling;
   dismissible per visit (the ✕ hides it until the next page load). */
.announce-ship{
  position:relative;
  background:linear-gradient(200deg,#123f7d,#0b2a56);
  border-top:1px solid rgba(143,195,255,.22);
  text-align:center;padding:7px 52px;color:#e6f1ff;
}
.announce-ship b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.announce-ship i{display:block;font-size:.7rem;font-style:italic;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#c2daff;margin-top:2px}
.ship-x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#c2daff;cursor:pointer;
  width:38px;height:38px;font-size:.95rem;line-height:1;opacity:.7;
  transition:opacity .18s ease-out;
}
.ship-x:hover{opacity:1}
header{
  position:sticky;top:0;z-index:120;
  background:rgba(3,7,13,.94);
  border-bottom:1px solid var(--hairline);
}
.nav{
  max-width:1280px;margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;gap:20px;
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-height:44px}
.logo svg{width:30px;height:30px;color:var(--beam);flex-shrink:0}
.logo .mark{height:34px;width:auto;flex-shrink:0;display:block}
.logo .word{display:flex;flex-direction:column;line-height:1.05}
.logo b{font-family:var(--font-display);font-weight:400;font-size:1.02rem;letter-spacing:.1em}
.logo small{font-weight:600;font-size:.72rem;letter-spacing:.3em;color:var(--ink-dim);text-transform:uppercase}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{
  display:inline-block;color:var(--ink-dim);text-decoration:none;
  font-weight:600;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  padding:12px 12px;transition:color .18s ease-out;
}
.nav-links a:hover{color:var(--beam-core)}
.nav-right{display:flex;align-items:center;gap:10px}
.cart-btn{
  position:relative;display:flex;align-items:center;gap:9px;
  background:transparent;border:1px solid var(--hairline);color:var(--ink);
  font-weight:700;font-size:.8rem;letter-spacing:.12em;
  min-height:44px;padding:10px 16px;cursor:pointer;text-transform:uppercase;
  transition:border-color .18s ease-out;
}
.cart-btn:hover{border-color:rgba(143,195,255,.55)}
.cart-count{
  background:linear-gradient(200deg,#1668cc,#0f4f9e);color:#fff; /* 5.41:1 / 7.98:1 */
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;padding:0 5px;
}
.sub-btn{
  display:flex;align-items:center;
  background:linear-gradient(200deg,rgba(47,139,255,.24),rgba(21,82,159,.14));
  border:1px solid rgba(143,195,255,.5);color:var(--beam-core);
  font-weight:700;font-size:.8rem;letter-spacing:.12em;
  min-height:44px;padding:10px 16px;cursor:pointer;text-transform:uppercase;
  transition:border-color .18s ease-out,color .18s ease-out;
}
.sub-btn:hover{border-color:rgba(143,195,255,.85);color:#fff}
@media(max-width:840px){.sub-btn{display:none}}
/* subscribe modal: short form, so center it vertically (tall checkout/invoice
   modals keep the top-aligned scroll layout) */
#subVeil.open{align-items:center}
/* footer signup */
.foot-sub{display:flex;gap:8px;margin-top:10px}
.foot-sub input{
  flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--hairline);
  color:var(--ink);padding:10px 12px;font-size:.85rem;
}
.foot-sub input::placeholder{color:var(--ink-dim)}
.foot-sub button{
  background:linear-gradient(200deg,#1668cc,#0f4f9e);border:0;color:#fff;
  font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 14px;cursor:pointer;
}
.foot-sub-note{font-size:.74rem;color:var(--ink-dim);margin-top:8px}
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--hairline);color:var(--ink);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .bars{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}

/* full-screen mobile nav */
.mobile-nav{
  position:fixed;inset:0;z-index:110;
  background:linear-gradient(200deg,#0a1830 0%,#030710 70%);
  display:flex;flex-direction:column;justify-content:center;padding:96px 28px 40px;
  opacity:0;visibility:hidden;transition:opacity .28s ease-out,visibility .28s ease-out;
}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{
  font-family:var(--font-display);color:var(--ink);text-decoration:none;
  font-size:clamp(1.7rem,7.4vw,2.6rem);letter-spacing:.02em;text-transform:uppercase;
  padding:10px 0;line-height:1.15;border-bottom:1px solid rgba(140,180,230,.1);
  transition:color .18s ease-out,padding-left .18s ease-out;
}
.mobile-nav a:hover{color:var(--beam);padding-left:8px}
.mobile-nav .mn-meta{margin-top:26px;color:var(--ink-dim);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}

/* ============ HERO · NIGHT CHAPTERS ============ */
.carousel{
  position:relative;height:min(100svh,940px);min-height:560px;
  overflow:hidden;border-bottom:1px solid var(--hairline);
  background:var(--abyss);
}
.chapter{position:absolute;inset:0;visibility:hidden;z-index:1}
.chapter.active{visibility:visible;z-index:3}
.chapter.under{visibility:visible;z-index:2}
.ch-media{
  position:absolute;inset:-4% 0;
  background-size:cover;background-position:center;
  transform:scale(1.06);
  will-change:transform;
}
.js .chapter.active .ch-media{animation:cutIn .42s ease-out both}
@keyframes cutIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.ch-shade{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(2,5,10,.88) 0%,rgba(2,5,10,.55) 46%,rgba(2,5,10,.08) 100%),
    linear-gradient(180deg,rgba(2,5,10,.25) 0%,rgba(2,5,10,0) 30%,rgba(2,5,10,.82) 100%);
}
.ch-inner{
  position:relative;z-index:4;height:100%;
  max-width:1280px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;
}
.ch-copy{max-width:660px;padding-bottom:72px}
.js .chapter.active .ch-copy>*{animation:riseIn .38s ease-out both}
.js .chapter.active .ch-copy>*:nth-child(2){animation-delay:.08s}
.js .chapter.active .ch-copy>*:nth-child(3){animation-delay:.15s}
.js .chapter.active .ch-copy>*:nth-child(4){animation-delay:.22s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.ch-copy h1,.ch-copy h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.35rem,7vw,5.6rem);line-height:.98;letter-spacing:-.015em;
  text-wrap:balance;margin-bottom:18px;
}
/* The lit word is lit by being brighter, not by radiating. Its cast shadow
   obeys the one light model — the same down-left --sx/--sy vector every other
   elevation on the page uses — so the type sits in the moonlight instead of
   glowing at the reader. */
.ch-copy .lit{color:var(--beam-core);text-shadow:calc(var(--sx)*2) calc(var(--sy)*2) 12px rgba(1,4,9,.62)}
.ch-copy p{
  color:var(--ink-dim);font-size:clamp(.98rem,1.4vw,1.12rem);max-width:52ch;margin-bottom:26px;
}
.ch-copy p strong{color:var(--ink);font-weight:600}
.ch-price{
  font-family:var(--font-display);font-size:1.6rem;letter-spacing:.01em;margin-bottom:22px;
}
.ch-price s{color:var(--ink-dim);font-family:var(--font-body);font-weight:500;font-size:1rem;margin-left:12px}
.ch-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;min-height:48px;padding:13px 30px;
  border:1px solid transparent;
  transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out,background .18s ease-out;
}
.btn-primary{
  background:linear-gradient(200deg,#1668cc 0%,#0f4f9e 100%);color:#fff; /* 5.41:1 / 7.98:1 */
  box-shadow:var(--elev-1), inset 0 1px 0 rgba(214,232,255,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--elev-2), inset 0 1px 0 rgba(214,232,255,.45)}
.btn-quiet{
  background:rgba(3,7,13,.4);color:var(--ink);border-color:rgba(160,195,235,.32);
}
.btn-quiet:hover{transform:translateY(-2px);border-color:rgba(160,195,235,.6)}
.hero-video{
  position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity 1s ease-out;
}
.hero-video.live{opacity:1}
.ch-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* film-timeline ticks */
.ch-rail{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  border-top:1px solid rgba(140,180,230,.16);
  background:linear-gradient(180deg,rgba(2,5,10,.55),rgba(2,5,10,.85));
}
.ch-rail-in{max-width:1280px;margin:0 auto;padding:0 22px;display:flex;align-items:stretch;gap:0}
/* the rail keeps an inset off the carousel's bottom rule so the ticks read as
   sitting on the timeline rather than falling off it */
.ch-rail{padding-bottom:10px}
.tick{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;
  background:transparent;border:0;border-right:1px solid rgba(140,180,230,.1);
  min-height:52px;padding:9px 14px;cursor:pointer;text-align:left;
}
.tick:last-of-type{border-right:0}
.tick .tick-name{
  font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .18s ease-out;white-space:nowrap;
}
.tick.active .tick-name{color:var(--beam-core)}
.tick .tick-bar{height:2px;background:rgba(140,180,230,.18);overflow:hidden}
.tick .tick-fill{
  display:block;height:100%;background:var(--beam);
  transform:scaleX(0);transform-origin:left;
}
.carousel.auto .tick.active .tick-fill{animation:tickFill var(--auto-ms,7000ms) linear forwards}
.carousel.paused .tick.active .tick-fill{animation-play-state:paused}
.carousel:not(.auto) .tick.active .tick-fill{transform:scaleX(1)}
@keyframes tickFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.car-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:48px;height:48px;border:1px solid rgba(160,195,235,.3);
  background:rgba(3,7,13,.55);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease-out,background .18s ease-out;
}
.car-nav svg{width:18px;height:18px}
.car-nav:hover{border-color:rgba(160,195,235,.7);background:rgba(10,22,40,.75)}
.car-prev{left:18px}.car-next{right:18px}

/* ============ SECTION CHROME ============ */
section{padding:96px 22px;position:relative}
.wrap{max-width:1280px;margin:0 auto}
.sec-head{margin-bottom:48px;max-width:820px}
.sec-head h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,3.1rem);letter-spacing:-.01em;line-height:1.02;
  text-wrap:balance;
}
.sec-head p{color:var(--ink-dim);max-width:64ch;margin-top:14px}
.sec-rule{height:1px;background:var(--rule);border:0;margin:0 auto;max-width:1280px}

/* ============ SHOP ============ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filter-btn{
  border:1px solid var(--hairline);background:rgba(4,9,16,.5);color:var(--ink-dim);
  font-weight:600;font-size:.78rem;letter-spacing:.14em;
  min-height:44px;padding:10px 20px;cursor:pointer;text-transform:uppercase;
  transition:color .18s ease-out,border-color .18s ease-out,background .18s ease-out;
}
.filter-btn:hover{color:var(--ink);border-color:rgba(143,195,255,.45)}
.filter-btn.active{
  background:linear-gradient(200deg,rgba(47,139,255,.24),rgba(21,82,159,.14));
  border-color:rgba(143,195,255,.5);color:var(--beam-core);
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
.card{
  position:relative;
  background:var(--sheen), linear-gradient(200deg,var(--panel-2),var(--panel));
  border:1px solid var(--hairline);
  box-shadow:var(--elev-1), var(--edge-lit);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--elev-2), var(--edge-lit);border-color:rgba(143,195,255,.4)}
@media(min-width:700px){.card--wide{grid-column:span 2}}
.card-img{position:relative;aspect-ratio:4/3;background:#050c17;overflow:hidden}
/* Wide cards: image fully visible up top (no fade overlay), text on the solid panel below */
.card--wide .card-img{aspect-ratio:21/9}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-img.contain img{object-fit:contain}
.badge{
  position:absolute;top:0;left:0;z-index:2;
  font-weight:700;font-size:.72rem;letter-spacing:.2em;
  padding:6px 12px;text-transform:uppercase;color:#fff;
}
.badge.sale{background:linear-gradient(200deg,#e05a3a,#a63a22)}
.badge.new{background:linear-gradient(200deg,#1668cc,#0f4f9e)} /* 5.41:1 / 7.98:1 on #fff */

/* ---- stock banners (Low Stock / Sold Out) ---- */
.stock-band{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 8px;backdrop-filter:blur(2px)}
.stock-band.low{background:rgba(122,84,10,.88);color:#ffe0a8}
.stock-band.out{background:rgba(122,26,26,.9);color:#ffc9c2}
/* ---- product photo gallery (cards + product modal) ---- */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(3,10,20,.62);color:#dce9fa;border:1px solid rgba(140,180,230,.28);
  font-size:1.05rem;line-height:1;cursor:pointer;padding:0;
  opacity:0;transition:opacity .18s ease-out,background .18s ease-out}
.gal-nav.prev{left:8px}
.gal-nav.next{right:8px}
.card-img:hover .gal-nav,.card-img:focus-within .gal-nav,.pm-media .gal-nav{opacity:1}
.gal-nav:hover{background:rgba(21,82,159,.85)}
.gal-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center;z-index:3;pointer-events:none}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(214,232,255,.38);transition:background .18s ease-out}
.gal-dots i.on{background:#d6e8ff}
.has-band .gal-dots{bottom:32px}
@media (hover:none){.card-img .gal-nav{opacity:1}}
.card.soldout .card-img img{filter:grayscale(.7) brightness(.75)}
.add-btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---- product detail modal ----
   .co-modal.pm-modal beats the base .co-modal max-width (460px) regardless of
   source order — without it the modal renders squeezed and the buttons overflow. */
.co-modal.pm-modal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;max-width:840px;width:min(840px,94vw);
  max-height:92vh;overflow-y:auto}   /* long descriptions scroll inside the pop-up */
@media(max-width:720px){.co-modal.pm-modal{grid-template-columns:1fr}}
.pm-modal .co-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:12px}
.pm-modal .co-actions .btn{padding:13px 20px;white-space:nowrap;flex:0 1 auto;min-width:0}
/* The media box is top-anchored (align-self:start) instead of stretching to the
   height of the text column — a long description used to stretch it tall and
   object-fit:cover then cropped the photo's sides. The whole image now always
   shows at its natural ratio, letterboxed on the dark background, capped so a
   very tall photo can't push the buttons off screen. */
.pm-media{position:relative;border-radius:10px;overflow:hidden;background:var(--deep);min-height:240px;align-self:start}
.pm-media img{width:100%;height:auto;min-height:240px;max-height:min(62vh,560px);object-fit:contain;display:block}
.pm-media.contain img{object-fit:contain}
.pm-cat{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--beam)}
.pm-body h3{font-size:1.25rem;margin:6px 0 10px}
.pm-body .pm-desc{color:var(--ink-dim);font-size:.92rem;margin-bottom:14px}
.pm-fulllink{display:inline-block;margin:-6px 0 14px;font-size:.88rem;color:var(--beam)}
.pm-fulllink[hidden]{display:none}
.card-pagelink{color:inherit;text-decoration:none}
.pm-price{font-size:1.3rem;font-weight:800;margin-bottom:14px}
.pm-price s{color:var(--ink-dim);font-weight:400;font-size:1rem;margin-left:8px}
.pm-opt{margin-bottom:12px}
.pm-opt label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);margin-bottom:5px}
.pm-opt select{width:100%;font:inherit;color:var(--ink);background:var(--deep);
  border:1px solid var(--hairline);border-radius:7px;padding:9px 10px}
.pm-qty{display:flex;align-items:center;gap:10px;margin:14px 0 18px}
.pm-qty span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim)}
.pm-qty .qty-ctrl{display:flex;align-items:center;gap:0;border:1px solid var(--hairline);border-radius:7px;overflow:hidden}
.pm-qty .qty-ctrl button{width:36px;height:36px;background:var(--panel-2);border:none;color:var(--ink);font-size:1.1rem;cursor:pointer}
.pm-qty .qty-ctrl b{width:44px;text-align:center}
.pm-stock-note{font-size:.78rem;margin:-8px 0 14px}
.pm-stock-note.low{color:#ffd489}
.pm-stock-note.out{color:#ffb4b4}
.cart-opts{display:block;font-size:.72rem;color:var(--ink-dim);margin-top:1px}

/* ---- instagram strip ---- */
#instagram .ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
#instagram .ig-head p{color:var(--ink-dim);font-size:.92rem;margin-top:6px}
.ig-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ig-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  border:1px solid var(--hairline);background:var(--deep)}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ig-tile:hover img{transform:scale(1.05)}
.ig-tile .ig-cap{position:absolute;inset:auto 0 0 0;padding:22px 12px 10px;font-size:.78rem;color:#eaf2fc;
  background:linear-gradient(transparent,rgba(2,6,12,.85));opacity:0;transition:opacity .25s}
.ig-tile:hover .ig-cap{opacity:1}
.ig-tile .ig-glyph{position:absolute;top:8px;right:8px;width:22px;height:22px;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));opacity:.9}
.spec-plate{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--sheen-strong), linear-gradient(200deg,#0c1a2e,#050c17);
}
.spec-plate svg{width:56px;height:56px;color:var(--beam);opacity:.85}
.spec-plate span{
  font-weight:600;font-size:.72rem;letter-spacing:.24em;color:var(--ink-dim);text-transform:uppercase;
}
.card-body{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-cat{font-weight:600;font-size:.72rem;letter-spacing:.26em;color:var(--beam);text-transform:uppercase}
.card-body h3{
  font-family:var(--font-display);font-weight:400;font-size:1.02rem;letter-spacing:.01em;
  text-transform:uppercase;line-height:1.3;
}
/* brief summary on the card: clamp to 2 lines; the full text lives in the
   product pop-up (click the description to open it) */
.card-body>p{color:var(--ink-dim);font-size:.86rem;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;cursor:pointer;transition:color .18s ease-out}
.card-body>p:hover{color:var(--ink)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.price{font-family:var(--font-display);font-size:1.12rem;letter-spacing:.01em}
.price s{color:var(--ink-dim);font-family:var(--font-body);font-weight:500;font-size:.86rem;margin-left:8px}
.add-btn{
  background:rgba(47,139,255,.08);border:1px solid rgba(143,195,255,.4);color:var(--beam-core);
  font-weight:700;font-size:.76rem;letter-spacing:.14em;
  min-height:44px;padding:10px 20px;cursor:pointer;text-transform:uppercase;
  transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
.add-btn:hover{background:linear-gradient(200deg,#1668cc,#0f4f9e);border-color:transparent;color:#fff} /* 5.41:1 / 7.98:1 */
.add-btn.added{background:linear-gradient(200deg,#2fae76,#177a4d);border-color:transparent;color:#fff}

/* ============ INTERLUDE (film break) ============ */
.interlude{
  position:relative;min-height:52vh;display:flex;align-items:center;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  overflow:hidden;padding:96px 22px;
}
.interlude img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.interlude::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(2,5,10,.9) 0%,rgba(2,5,10,.5) 55%,rgba(2,5,10,.12) 100%);
}
.interlude .wrap{position:relative;z-index:2}
.interlude h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.01em;max-width:16ch;
  text-wrap:balance;
}
.interlude h2 .lit{color:var(--beam-core)}
.interlude p{color:var(--ink-dim);max-width:52ch;margin-top:16px}

/* ============ ABOUT ============ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split-img{
  position:relative;border:1px solid var(--hairline);overflow:hidden;
  box-shadow:var(--elev-3), var(--edge-lit);
}
.split-img img{width:100%;display:block}
.split-img figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(180deg,rgba(2,5,10,0),rgba(2,5,10,.85) 60%);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
}
.about-points{list-style:none;margin-top:26px;display:grid;gap:13px}
.about-points li{display:flex;gap:14px;color:var(--ink-dim);align-items:baseline}
.about-points li::before{
  content:'';flex-shrink:0;width:18px;height:1px;align-self:center;
  background:linear-gradient(90deg,var(--beam),rgba(143,195,255,.1));
}
.about-points b{color:var(--ink);font-weight:600}

/* ============ WARRANTY LEDGER ============ */
.ledger{border:1px solid var(--hairline);box-shadow:var(--elev-2), var(--edge-lit);background:linear-gradient(200deg,var(--panel-2),var(--panel))}
.tier{
  /* third column widened 190 -> 214 so the legible-size term line still sets
     on one line ("then 1 yr manufacturer" is the longest) */
  display:grid;grid-template-columns:290px 1fr 214px;gap:26px;align-items:center;
  padding:28px 30px;border-bottom:1px solid var(--hairline);
  background:var(--sheen);
}
.tier:last-child{border-bottom:0}
.tier h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:.01em;text-transform:uppercase;line-height:1.25}
.tier .term{font-weight:600;font-size:.74rem;letter-spacing:.22em;color:var(--beam);text-transform:uppercase;margin-top:6px}
.tier ul{list-style:none;display:grid;gap:8px}
.tier li{color:var(--ink-dim);font-size:.92rem;display:flex;gap:12px;align-items:baseline}
.tier li::before{content:'';flex-shrink:0;width:14px;height:1px;align-self:center;background:linear-gradient(90deg,var(--beam),rgba(143,195,255,.1))}
.tier-mark{
  justify-self:end;text-align:right;font-family:var(--font-display);
  font-size:1.9rem;line-height:1;color:rgba(143,195,255,.6);
}
.tier-mark small{display:block;font-family:var(--font-body);font-weight:600;font-size:.74rem;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;margin-top:6px}
.tier--elite{
  background:var(--sheen-strong), linear-gradient(200deg,rgba(47,139,255,.14),rgba(10,21,36,.2));
  box-shadow:inset 0 1px 0 rgba(203,227,255,.22), inset -1px 0 0 rgba(203,227,255,.1);
}
.tier--elite .tier-mark{color:var(--beam-core)}
/* Accidental-replacement rider inside a coverage tier (the standalone
   "Accidental Replacement Program" band was folded into the rod tiers at the
   owner's request — Tactical $59.99, Premium Elite $99.99). */
.tier-accident{
  grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  border-top:1px solid rgba(255,180,84,.28);margin-top:6px;padding-top:16px;
}
.tier-accident p{color:var(--ink-dim);font-size:.88rem;max-width:70ch}
.tier-accident p b{color:var(--amber)}
.ta-price{font-family:var(--font-display);font-size:1.5rem;color:var(--amber);line-height:1;text-align:right;white-space:nowrap}
.ta-price small{display:block;font-family:var(--font-body);font-weight:600;font-size:.68rem;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;margin-top:5px}

/* ============ FIELD REPORTS ============ */
.reports{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.report{
  background:var(--sheen), linear-gradient(200deg,var(--panel-2),var(--panel));
  border:1px solid var(--hairline);box-shadow:var(--elev-1), var(--edge-lit);
  padding:28px;display:flex;flex-direction:column;gap:16px;
}
.report--lead{grid-row:span 2;justify-content:space-between}
.report--lead blockquote{font-size:1.22rem;line-height:1.55}
.report header{
  position:static;background:none;border:0;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
}
.report header b{color:var(--beam)}
.report blockquote{color:var(--ink);font-size:.98rem;line-height:1.65;flex:1}
.report footer{display:flex;align-items:center;gap:14px;background:none;border:0;padding:0}
.r-plate{
  width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(200deg,#12305c,#0a1c38);
  box-shadow:inset 0 1px 0 rgba(203,227,255,.2);
  font-family:var(--font-display);font-size:.8rem;color:var(--beam-core);
}
.report footer b{font-size:.92rem;display:block;line-height:1.3}
.report footer span{color:var(--ink-dim);font-size:.76rem}

/* ============ GAME ============ */
.game-shell{
  background:var(--sheen), linear-gradient(200deg,var(--panel-2),var(--panel));
  border:1px solid var(--hairline);box-shadow:var(--elev-2), var(--edge-lit);
  padding:20px;display:grid;gap:16px;
}
.gear-bar{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between}
.gear-group{display:grid;gap:9px}
.gear-group>span{font-weight:600;font-size:.74rem;letter-spacing:.26em;color:var(--ink-dim);text-transform:uppercase}
.gear-opts{display:flex;flex-wrap:wrap;gap:8px}
.gear-btn{
  border:1px solid var(--hairline);background:rgba(4,9,16,.5);color:var(--ink-dim);
  font-weight:600;font-size:.78rem;letter-spacing:.05em;
  min-height:48px;padding:8px 14px;cursor:pointer;text-transform:uppercase;text-align:left;
  transition:color .18s ease-out,border-color .18s ease-out,background .18s ease-out;
}
.gear-btn:hover{color:var(--ink);border-color:rgba(143,195,255,.45)}
.gear-btn.active{
  background:linear-gradient(200deg,rgba(47,139,255,.26),rgba(21,82,159,.14));
  border-color:rgba(143,195,255,.55);color:var(--beam-core);
}
.gear-btn small{display:block;font-size:.72rem;opacity:.8;letter-spacing:.1em}
.gear-side{display:grid;gap:10px;justify-items:end}
.gear-total{font-family:var(--font-display);font-size:.95rem;letter-spacing:.02em;color:var(--beam);text-transform:uppercase}
.game-stage{position:relative;border:1px solid var(--hairline);overflow:hidden;background:#04101f;box-shadow:var(--edge-lit)}
.game-stage canvas{display:block;width:100%;height:auto}
.game-hud{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;flex-wrap:wrap}
.hud-chip{
  background:rgba(3,8,16,.8);border:1px solid var(--hairline);
  padding:5px 12px;font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.hud-chip b{color:var(--beam)}
.game-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:rgba(2,5,10,.8);text-align:center;padding:24px;
}
.game-overlay.hidden{display:none}
.game-overlay h3{font-family:var(--font-display);font-weight:400;font-size:1.6rem;letter-spacing:.01em;text-transform:uppercase}
.game-overlay p{color:var(--ink-dim);max-width:54ch;font-size:.92rem}
.game-overlay p strong{color:var(--ink)}
.game-overlay .final{font-family:var(--font-display);font-size:2.6rem;color:var(--beam-core)}
.game-help{display:flex;flex-wrap:wrap;gap:14px 20px;color:var(--ink-dim);font-size:.8rem;align-items:center}
.game-help kbd{
  display:inline-block;border:1px solid var(--hairline);border-bottom-width:2px;
  background:rgba(4,9,16,.8);padding:1px 8px;font-family:var(--font-body);font-weight:600;font-size:.76rem;color:var(--ink);
}
/* on-screen touch controls: shown for coarse pointers, wired to the same key-state */
.touch-pad{display:none;position:absolute;inset:auto 0 0 0;z-index:5;justify-content:space-between;align-items:flex-end;padding:12px;pointer-events:none}
.pad-cluster{display:flex;gap:10px;pointer-events:auto}
.pad-cluster--depth{flex-direction:column}
.pad-btn{
  width:56px;height:56px;border:1px solid rgba(160,195,235,.4);
  background:rgba(3,8,16,.66);color:var(--beam-core);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.pad-btn svg{width:20px;height:20px;pointer-events:none}
.pad-btn.on{background:linear-gradient(200deg,rgba(47,139,255,.5),rgba(21,82,159,.35));border-color:rgba(143,195,255,.7)}
@media(pointer:coarse){.touch-pad{display:flex}}
.touch-on .touch-pad{display:flex}
@media(max-width:960px){.gear-side{justify-items:start}}

/* ============ RETAILERS ============ */
.retail-band{
  position:relative;border:1px solid var(--hairline);overflow:hidden;
  box-shadow:var(--elev-2), var(--edge-lit);
  background:var(--sheen-strong), linear-gradient(200deg,rgba(21,82,159,.3),rgba(4,9,16,.85));
  padding:56px 46px;display:grid;grid-template-columns:1.2fr .8fr;gap:38px;align-items:center;
}
.retail-band h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.4rem);text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.05;margin-bottom:12px;text-wrap:balance;
}
.retail-band p{color:var(--ink-dim);max-width:54ch}
.retail-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-self:end;min-width:260px}
.retail-cta .btn{width:100%}

/* ============ FOOTER ============ */
/* the 92px foot is the other half of the conditions control's safe-area: at
   the bottom of the document the fixed pill has its own air and never lands on
   the colophon line */
footer{border-top:1px solid var(--hairline);background:rgba(2,5,10,.92);padding:60px 22px 92px}
.foot-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-grid h3{font-weight:700;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px;color:var(--ink)}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid a{color:var(--ink-dim);text-decoration:none;font-size:.9rem;transition:color .18s ease-out;display:inline-block;padding:3px 0}
.foot-grid a:hover{color:var(--beam);text-decoration:underline}
.foot-brand p{color:var(--ink-dim);font-size:.88rem;max-width:34ch;margin-top:14px}
.foot-base{
  max-width:1280px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-dim);font-size:.78rem;
}

/* ============ CART DRAWER ============ */
.cart-overlay{position:fixed;inset:0;background:rgba(1,3,7,.66);z-index:130;opacity:0;visibility:hidden;transition:opacity .28s ease-out,visibility .28s ease-out}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:140;
  background:linear-gradient(200deg,#0d1a2c,#071120);
  border-left:1px solid var(--hairline);box-shadow:var(--elev-3);
  transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.25,1);
  display:flex;flex-direction:column;
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--hairline)}
.cart-head h3{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;text-transform:uppercase;font-size:1rem}
.cart-close{background:none;border:1px solid transparent;color:var(--ink-dim);font-size:1.5rem;cursor:pointer;line-height:1;width:44px;height:44px}
.cart-close:hover{color:var(--ink)}
.cart-items{flex:1;overflow-y:auto;padding:12px 24px}
.cart-empty{color:var(--ink-dim);text-align:center;padding:60px 20px;font-size:.95rem}
.cart-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.cart-thumb{width:62px;height:62px;overflow:hidden;background:#050c17;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--edge-lit)}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-thumb.contain img{object-fit:contain}
.cart-thumb svg{width:26px;height:26px;color:var(--beam)}
.cart-info{flex:1;min-width:0}
.cart-info b{font-weight:700;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;display:block;line-height:1.35}
.cart-info .unit{color:var(--ink-dim);font-size:.82rem}
.qty-ctrl{display:inline-flex;align-items:center;gap:4px;margin-top:8px;border:1px solid var(--hairline)}
.qty-ctrl button{background:none;border:0;color:var(--ink);cursor:pointer;font-size:1rem;min-width:34px;min-height:34px}
.qty-ctrl button:hover{color:var(--beam);background:rgba(47,139,255,.12)}
.qty-ctrl span{min-width:22px;text-align:center;font-weight:600}
.cart-line-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.cart-line-right .line-total{font-family:var(--font-display);font-size:.92rem}
.rm-btn{background:none;border:0;color:var(--ink-dim);font-size:.76rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.rm-btn:hover{color:var(--danger)}
.cart-foot{border-top:1px solid var(--hairline);padding:20px 24px;display:grid;gap:12px}
.cart-sub{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.cart-foot small{color:var(--ink-dim)}
.checkout-btn{width:100%}
.checkout-msg{display:none;background:rgba(47,174,118,.12);border:1px solid rgba(47,174,118,.55);color:#8ee6ba;padding:12px;text-align:center;font-size:.9rem}
.checkout-msg.show{display:block}
/* ---- checkout + invoice modals ---- */
.co-veil{position:fixed;inset:0;background:rgba(1,4,9,.78);display:none;z-index:130} /* above the z-120 sticky header */
.co-veil.open{display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.co-modal{background:var(--panel);border:1px solid var(--hairline);border-radius:12px;width:100%;max-width:460px;
  padding:28px;box-shadow:var(--elev-3)}
.co-modal--wide{max-width:640px}
.co-modal h3{font-size:1.15rem;margin-bottom:6px}
.co-note{color:var(--ink-dim);font-size:.85rem;margin-bottom:16px}
.co-err{display:none;background:rgba(224,82,82,.12);border:1px solid rgba(224,82,82,.5);color:#ffb4b4;
  border-radius:7px;padding:10px 12px;font-size:.85rem;margin-bottom:14px}
.co-err.show{display:block}
.co-field{margin-bottom:13px}
.co-field label{display:block;font-size:.72rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.co-field input,.co-field textarea,.co-field select{width:100%;background:var(--deep);border:1px solid var(--hairline);
  border-radius:6px;color:var(--ink);font:inherit;padding:9px 11px}
.co-field select{appearance:none;cursor:pointer;padding-right:30px;
  background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239db2ca'/%3E%3C/svg%3E") no-repeat right 11px center}
.co-field select option{background:var(--panel);color:var(--ink)}
.co-field input:focus,.co-field textarea:focus,.co-field select:focus{outline:2px solid var(--blue-deep);border-color:var(--blue)}
.co-field.bad input,.co-field.bad select{border-color:rgba(224,82,82,.8)}
.co-field label .opt{text-transform:none;letter-spacing:0;opacity:.75}
/* shipping address — one field per part, so the invoice + shipping labels get clean data */
.co-ship{border:1px solid var(--hairline);border-radius:9px;padding:14px 14px 2px;margin:4px 0 13px}
.co-ship legend{font-size:.72rem;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;padding:0 6px;margin-left:-6px;font-weight:700}
.co-ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.co-ship-grid .co-full{grid-column:1/-1}
@media(max-width:400px){.co-ship-grid{grid-template-columns:1fr}}
.co-sum{border-top:1px solid var(--hairline);margin-top:6px;padding-top:12px;font-size:.86rem;color:var(--ink-dim)}
.co-sum b{color:var(--ink)}
.co-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.inv-no{color:var(--beam);font-weight:700;margin-left:6px}
.inv-ship{display:flex;gap:14px;background:var(--deep);border:1px solid var(--hairline);border-radius:8px;padding:10px 12px;margin:10px 0 4px;font-size:.86rem;line-height:1.5}
.inv-ship>span{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);min-width:56px;padding-top:2px}
.inv-body table{width:100%;border-collapse:collapse;font-size:.86rem;margin:8px 0 4px}
.inv-body th{color:var(--ink-dim);text-transform:uppercase;font-size:.66rem;letter-spacing:.1em;text-align:left;
  padding:6px 8px;border-bottom:1px solid var(--hairline)}
.inv-body td{padding:7px 8px;border-bottom:1px solid var(--hairline)}
.inv-body td.n,.inv-body th.n{text-align:right;white-space:nowrap}
.inv-body .inv-tot td{border-bottom:none;padding:4px 8px}
.inv-body .inv-tot .lbl{text-align:right;color:var(--ink-dim)}
.inv-body .inv-tot .grand td{font-weight:800;font-size:1rem;border-top:1px solid var(--hairline);padding-top:10px}
/* ---- on-page forms (warranty claim, dealer inquiry) ---- */
.siteform{background:var(--panel);border:1px solid var(--hairline);border-radius:12px;padding:28px;margin-top:26px;box-shadow:var(--elev-1)}
.siteform h3{font-size:1.05rem;margin-bottom:4px}
.siteform .sf-sub{color:var(--ink-dim);font-size:.85rem;margin-bottom:18px}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sf-grid .co-field.sf-full{grid-column:1/-1}
.co-field input[type="file"]{padding:7px;font-size:.82rem;color:var(--ink-dim)}
.co-field input[type="file"]::file-selector-button{background:var(--panel-2);border:1px solid var(--hairline);
  color:var(--ink);border-radius:6px;padding:6px 12px;margin-right:10px;font:inherit;font-size:.8rem;cursor:pointer}
.sf-foot{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:6px}
.sf-ok{display:none;background:rgba(47,174,118,.12);border:1px solid rgba(47,174,118,.55);color:#8ee6ba;
  border-radius:8px;padding:14px 16px;font-size:.9rem;margin-top:14px}
.sf-ok.show{display:block}
.sf-ok b{color:#c8f5de}
@media(max-width:700px){.sf-grid{grid-template-columns:1fr}}
/* ---- cart coupons ---- */
.cart-coupons{border-top:1px solid var(--hairline);padding:12px 0 4px;margin-top:10px}
.cart-coupons h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);margin-bottom:8px}
.coupon-row{display:flex;align-items:center;gap:8px;font-size:.82rem;padding:4px 0}
.coupon-row code{color:var(--beam);font-weight:700;letter-spacing:.04em}
.coupon-row .cpn-pct{color:#8ee6ba;font-weight:700}
.coupon-row .cpn-x{margin-left:auto;color:var(--ink-dim);cursor:pointer;background:none;border:none;font-size:.9rem}
.coupon-row .cpn-x:hover{color:#ffb4b4}
.coupon-add{display:flex;gap:8px;margin-top:8px}
.coupon-add input{flex:1;background:var(--deep);border:1px solid var(--hairline);border-radius:6px;color:var(--ink);
  font:inherit;font-size:.82rem;padding:7px 10px;text-transform:uppercase}
.coupon-add button{background:var(--panel-2);border:1px solid var(--hairline);border-radius:6px;color:var(--ink);
  font:inherit;font-size:.8rem;font-weight:700;padding:7px 12px;cursor:pointer}
.coupon-add button:hover{border-color:var(--blue)}
.cpn-note{font-size:.72rem;color:var(--ink-dim);margin-top:6px}

/* toast */
.toast{
  position:fixed;top:84px;right:20px;z-index:125;
  background:linear-gradient(200deg,#0d1a2c,#071120);border:1px solid rgba(143,195,255,.5);
  padding:12px 18px;font-size:.88rem;box-shadow:var(--elev-2);
  transform:translateX(130%);transition:transform .28s cubic-bezier(.2,.8,.25,1);
  max-width:min(340px,calc(100vw - 40px));
}
.toast.show{transform:translateX(0)}

/* reveal on scroll: hidden only when JS is present; run-once */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .reveal.in{opacity:1;transform:translateY(0)}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .ch-media{transform:none}
  .js .chapter.active .ch-media,.js .chapter.active .ch-copy>*{animation:none}
  .carousel.auto .tick.active .tick-fill{animation:none;transform:scaleX(1)}
  .hero-video{display:none}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1060px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:960px){
  .split{grid-template-columns:1fr;gap:32px}
  .retail-band{grid-template-columns:1fr;padding:40px 28px}
  .retail-cta{justify-self:stretch;min-width:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tier{grid-template-columns:1fr;gap:14px;padding:24px 22px}
  .tier-mark{justify-self:start;text-align:left}
  .reports{grid-template-columns:1fr}
  .report--lead{grid-row:auto}
  .tier-accident{grid-template-columns:1fr}
  .ta-price{text-align:left}
}
@media(max-width:640px){
  section{padding:64px 18px}
  /* bottom breathing room keeps the hero copy clear of the phone's UI chrome */
  .ch-copy{padding-bottom:132px}
  .car-nav{display:none}
  .tick .tick-name{display:none}
  .tick{min-height:44px;padding:9px 10px}
  .foot-grid{grid-template-columns:1fr}
}

  /* --- Mobile game fold fix (LHNJ) -------------------------------------
     On phones the gear-selection panel filled the entire first screen, so a
     visitor who tapped GAME landed on a heading and controls with the canvas
     0% visible (measured: canvas top 872-969px against an 844px viewport).
     Reordering visually (not in the DOM) puts the playfield first, so the
     game is on screen the moment you arrive; gear selection sits right under
     it. DOM order is untouched so tab order and any external graft that
     replaces the whole game section still behave. */
  @media (max-width: 760px){
    .game-shell{ display:flex; flex-direction:column; }
    .game-shell > *{ order:3; }
    .game-shell > .game-stage{ order:1; }
    .game-shell > .gear-bar{ order:2; }
    #game{ scroll-margin-top:64px; }
  }

  /* --- Touch-target sizing on small screens (LHNJ) ----------------------
     Footer/nav link lists rendered 16-29px tall at 390px. WCAG 2.5.8 (AA)
     wants >=24px for non-inline targets and 2.5.5 (AAA) wants 44px; these
     are standalone list links, not inline-in-a-sentence, so the exception
     does not apply. Growing the hit box only (line-height/appearance keep
     the same visual rhythm) and removing the list gap so the block height
     stays close to what it was. */
  @media (max-width: 900px){
    footer li > a, footer ul a, .foot-grid a, .foot-links a{
      display:flex; align-items:center; min-height:44px;
    }
    footer ul{ gap:0; }
  }



/* ===== TACTICAL CATCH v3 =====
   Graft payload. Every declaration is scoped under #game and every class carries the
   tc- prefix, so nothing here can leak into a host page's styles. No bare element
   selectors, no :root writes, no global resets. */
#game{
  /* Host pages carry a STICKY header, so an anchor jump to #game lands the section
     heading underneath it. Reserve the offset here rather than in each host, so the
     graft is self-sufficient; harmless standalone, where there is nothing sticky.
     Tokenized because the reserve is per-host: a variant that stacks a second sticky
     bar under its nav needs more, and 92px there clips the kicker off the top. */
  --tc-scroll-offset:92px;
  scroll-margin-top:var(--tc-scroll-offset);

  /* ============================ THEME CONTRACT ============================
     The module is a GUEST. Everything a host could reasonably want to restate
     is a custom property, and every one of them falls back to the standalone
     value — so this file rendered on its own is byte-identical to before.

     Two palettes, deliberately separate:

     A. CHROME  (--tc-ink / --tc-panel / --tc-accent / --tc-line …)
        The section around the water: heading, rig summary, gear bar, buttons,
        key legend. This FOLLOWS THE HOST — it is page furniture, and page
        furniture that ignores the page is what "pasted in" looks like. Each
        token prefers the host's own variable and falls back to the module's.

     B. STAGE   (--tc-stage-* )
        Everything riding the canvas: HUD chips, tension bar, coach ticker,
        overlays, trophy journal, touch deck. The canvas is a night lake in
        every host, so this palette is DELIBERATELY NOT host-derived — a light
        page must not push light-on-light text onto dark water. Themes may
        retune it, but the defaults are safe on every host, including cream.

     --tc-on-fill is the one that used to be hardcoded `#fff`. Any text riding
     a filled accent surface reads it. On an amber-accented host white would be
     ~1.9:1; the host's own dark ink goes there instead.
     ======================================================================== */

  /* --- A. CHROME: follows the host page ------------------------------- */
  /* --tc-accent      : glow / stroke / hover edge / LARGE display type only
     --tc-accent-text : the accent as SMALL text on the chrome surface (AA)
     --tc-accent-fill : text-bearing surfaces. #fff on #1560cf = 5.82:1 (AA)
     --tc-accent-fill-hi : hover fill. #fff on #1a6fe0 = 4.78:1 (AA). Hover DARKENS. */
  --tc-accent:var(--blue,#2f8bff);
  --tc-accent-text:var(--tc-accent);
  --tc-accent-fill:#1560cf;
  --tc-accent-fill-hi:#1a6fe0;
  --tc-on-fill:#fff;
  /* Pure white, NOT a pale tint. A tint that clears AA on OUR fill can fail on a host's:
     #dbe9ff is 4.75:1 on our #1560cf but only 4.40:1 on stormfront's #1668cc, and this is
     11.52px text so the bar is 4.5. The fill is host-controlled, the tint's safety is not
     portable, and the size/weight step already carries the hierarchy. */
  --tc-on-fill-dim:#fff;
  --tc-panel:#0c1622;
  --tc-panel-bw:1px;
  --tc-field:rgba(255,255,255,.02);
  --tc-chip-fill:linear-gradient(180deg,rgba(47,139,255,.12),rgba(47,139,255,.03));
  --tc-ink:var(--ink,#eef3fa);
  --tc-ink-dim:var(--ink-dim,#b9c9dc);
  --tc-ink-quiet:var(--ink-dim,#8fa3ba);
  --tc-ink-faint:#8296ad;
  --tc-line:rgba(120,160,220,.2);
  --tc-line-soft:rgba(120,160,220,.12);
  --tc-kbd-bg:rgba(8,12,20,.8);
  --tc-kbd-shadow:0 2px 0 rgba(0,0,0,.55);
  --tc-scrim:rgba(3,6,12,.74);
  /* --- B. STAGE: the night lake, in every host ------------------------- */
  --tc-stage-bg:#061020;
  --tc-stage-deck:linear-gradient(180deg,#061223 0%,#040a13 100%);
  --tc-frame:var(--tc-line);
  --tc-frame-bw:1px;
  --tc-stage-line:rgba(160,200,255,.18);      /* chips, tension bar, ticker, stat tiles */
  --tc-stage-rule:rgba(120,160,220,.2);       /* journal card + a ghost button on the scrim */
  --tc-deck-line:rgba(120,160,220,.16);       /* the deck's top edge under the water */
  --tc-stage-line-soft:rgba(120,160,220,.14); /* debrief list rows */
  --tc-stage-line-hair:rgba(120,160,220,.12); /* trophy journal rows */
  --tc-stage-ink:#eef3fa;
  --tc-stage-dim:#b9c9dc;
  --tc-stage-quiet:#8fa3ba;
  --tc-stage-hi:#fff;
  --tc-stage-accent:#2f8bff;
  --tc-stage-accent-soft:rgba(47,139,255,.5);
  --tc-stage-panel:rgba(10,18,30,.78);
  --tc-stage-card:#0c1622;
  --tc-press:rgba(21,96,207,.85);
  /* --- shared --- */
  --tc-danger:#ff5d5d;
  --tc-amber:#ffb454;
  --tc-ok:#7ee2ae;
  --tc-r:6px;
  --tc-fd:'Rajdhani',sans-serif;   /* UI chrome + HUD */
  --tc-fb:'Inter',sans-serif;      /* prose */
  --tc-fh:var(--tc-fd);            /* section heading + kicker (hosts have their own display face) */
  display:block;
  padding:10px 10px 18px;
  font-family:var(--tc-fb);
  color:var(--tc-ink);
}
#game *{box-sizing:border-box}
/* ---------- MOBILE-FIRST ORDER: the water is the first thing on screen ---------- */
#game .tc-wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
#game .tc-shell{order:1;background:var(--tc-panel);border:var(--tc-panel-bw) solid var(--tc-line);border-radius:var(--tc-r);padding:8px;display:flex;flex-direction:column;gap:8px}
#game .tc-sec-head{order:2;display:grid;gap:5px}
#game .tc-rigline{order:1;display:flex;gap:8px;align-items:stretch}
#game .tc-stage{order:2}
#game .tc-actions{order:3;display:flex;gap:8px;flex-wrap:wrap}
#game .tc-help{order:4}
#game .tc-gearsheet{order:5}
/* ---------- copy ---------- */
#game .tc-kicker{font-family:var(--tc-fh);font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tc-accent-text)}
#game .tc-title{font-family:var(--tc-fh);font-weight:700;font-size:clamp(1.45rem,5.4vw,2.3rem);text-transform:uppercase;letter-spacing:.04em;line-height:1.08;color:var(--tc-ink)}
#game .tc-blurb{color:var(--tc-ink-quiet);max-width:70ch;font-size:.9rem;line-height:1.6}
/* ---------- compact RIG SUMMARY (mobile) ---------- */
#game .tc-rig-chip{
  flex:1 1 auto;min-width:0;min-height:46px;display:flex;align-items:center;gap:8px;text-align:left;
  background:var(--tc-chip-fill);
  border:1px solid var(--tc-line);border-radius:var(--tc-r);color:var(--tc-ink);
  font-family:var(--tc-fd);font-weight:700;font-size:.9rem;
  padding:7px 10px;cursor:pointer;text-align:left;
}
#game .tc-rig-chip:hover{border-color:var(--tc-accent)}
#game .tc-rig-tag{flex:0 0 auto;font-size:.72rem;letter-spacing:.2em;color:var(--tc-ink-quiet);text-transform:uppercase}
#game .tc-rig-txt{flex:1 1 auto;min-width:0;letter-spacing:.03em;text-transform:uppercase;line-height:1.18;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#game .tc-rig-change{flex:0 0 auto;min-width:104px;padding:10px 10px;font-size:.72rem;letter-spacing:.08em}
/* ---------- STAGE: screen + control deck ----------
   Everything from here to the end of the journal block rides the canvas, so it reads
   the STAGE palette, not the chrome palette. The `color` on .tc-stage is the safety
   net: anything inside that does not name a colour inherits stage ink, never page ink. */
#game .tc-stage{
  position:relative;display:flex;flex-direction:column;border:var(--tc-frame-bw) solid var(--tc-frame);
  border-radius:var(--tc-r);overflow:hidden;background:var(--tc-stage-bg);color:var(--tc-stage-ink);
  user-select:none;-webkit-user-select:none;touch-action:none;
  min-height:min(54vh,520px);
}
#game .tc-screen{position:relative;width:100%;flex:0 0 auto}
#game .tc-canvas{display:block;width:100%;height:auto}
#game .tc-deck{flex:1 1 auto;min-height:0;background:var(--tc-stage-deck);border-top:1px solid var(--tc-deck-line);padding:10px 10px 0}
/* ---------- HUD ---------- */
#game .tc-hud{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;pointer-events:none;flex-wrap:wrap;z-index:4;align-items:flex-start}
#game .tc-chip{
  background:rgba(6,12,22,.62);border:1px solid var(--tc-stage-line);border-radius:5px;padding:4px 9px;
  font-family:var(--tc-fd);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tc-stage-dim);-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);white-space:nowrap;
}
#game .tc-chip b{color:var(--tc-stage-ink);font-weight:700}
#game .tc-chip-gear{display:none;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
#game .tc-chip-high{display:none}
#game .tc-hud-right{margin-left:auto;display:flex;gap:6px}
#game .tc-hud-icon{
  pointer-events:auto;cursor:pointer;background:rgba(6,12,22,.38);border:1px solid rgba(160,200,255,.13);
  border-radius:5px;color:var(--tc-stage-dim);width:44px;height:44px;font-size:.9rem;line-height:1;
  font-family:var(--tc-fd);font-weight:700;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  display:flex;align-items:center;justify-content:center;
}
#game .tc-hud-icon:hover{color:var(--tc-stage-ink);border-color:var(--tc-stage-accent)}
/* ---------- TENSION BAR (trembles in the red) ---------- */
#game .tc-tension{width:100%;z-index:4;display:none;pointer-events:none}
#game .tc-tension.tc-show{display:block}
#game .tc-tension-inner{
  background:rgba(6,12,22,.6);border:1px solid var(--tc-stage-line);border-radius:6px;padding:5px 8px 7px;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);will-change:transform;
}
#game .tc-tension-label{font-family:var(--tc-fd);font-weight:600;font-size:.72rem;letter-spacing:.22em;color:var(--tc-stage-dim);text-transform:uppercase;display:flex;justify-content:space-between;gap:8px}
#game .tc-tension-label b{color:var(--tc-stage-ink)}
#game .tc-tension-track{position:relative;height:9px;border-radius:4px;margin-top:4px;overflow:hidden;
  background:linear-gradient(90deg,rgba(31,157,85,.42) 0 60%,rgba(255,180,84,.42) 60% 85%,rgba(255,93,93,.42) 85% 100%)}
#game .tc-tension-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#1f9d55 0 60%,#ffb454 60% 85%,#ff5d5d 85% 100%)}
#game .tc-tension.tc-red .tc-tension-inner{animation:tcTremble .09s steps(2,end) infinite;border-color:rgba(255,93,93,.6)}
@keyframes tcTremble{
  0%{transform:translate3d(-2px,0,0)}
  50%{transform:translate3d(2px,-1px,0)}
  100%{transform:translate3d(-1px,1px,0)}
}
/* ---------- JUICE: strike beat, streak chip, landing title card ---------- */
#game .tc-strike{
  position:absolute;left:50%;top:52%;z-index:5;pointer-events:none;
  transform:translate(-50%,-50%) scale(.78);opacity:0;
  font-family:var(--tc-fd);font-weight:700;font-size:clamp(1.5rem,7vw,3rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--tc-stage-hi);text-shadow:0 2px 10px rgba(2,5,10,.92);white-space:nowrap;
  transition:opacity .15s ease-out,transform .22s cubic-bezier(.16,1,.3,1);
}
#game .tc-strike.tc-show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#game .tc-combo{
  position:absolute;right:8px;top:58px;z-index:4;pointer-events:none;
  font-family:var(--tc-fd);font-weight:700;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
  color:#ffd08a;background:rgba(6,12,22,.66);border:1px solid rgba(255,180,84,.5);border-radius:5px;padding:5px 10px;
  opacity:0;transform:translateY(-8px);transition:opacity .18s ease-out,transform .18s ease-out;white-space:nowrap;
}
#game .tc-combo.tc-show{opacity:1;transform:translateY(0)}
#game .tc-titlecard{
  position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;width:min(520px,90%);
  transform:translate(-50%,-50%) scale(.92);opacity:0;
  transition:opacity .18s ease-out,transform .24s cubic-bezier(.16,1,.3,1);
  text-align:center;background:rgba(6,12,22,.74);border:1px solid var(--tc-stage-accent-soft);border-radius:8px;
  padding:10px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
#game .tc-titlecard.tc-show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#game .tc-tc-sp{font-family:var(--tc-fd);font-weight:700;font-size:clamp(1.1rem,4.6vw,1.7rem);letter-spacing:.16em;text-transform:uppercase;color:var(--tc-stage-hi)}
#game .tc-tc-line{font-family:var(--tc-fd);font-weight:600;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:#8fd0e8;margin-top:2px}
#game .tc-tc-wt{font-family:var(--tc-fd);font-weight:700;font-size:clamp(1.7rem,7.4vw,2.6rem);letter-spacing:.04em;color:var(--tc-stage-accent);margin-top:3px;line-height:1.05}
#game .tc-tc-pts{font-family:var(--tc-fd);font-weight:700;font-size:.9rem;letter-spacing:.18em;color:var(--tc-ok);text-transform:uppercase}
/* ---------- TICKER ---------- */
#game .tc-ticker{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-family:var(--tc-fd);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tc-stage-ink);background:rgba(6,12,22,.66);border:1px solid var(--tc-stage-line);border-radius:5px;padding:5px 12px;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);opacity:0;transition:opacity .22s ease-out;
  white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;
}
#game .tc-ticker.tc-show{opacity:1}
/* ---------- OVERLAY + MISSION DEBRIEF BOARD ---------- */
#game .tc-overlay{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;background:rgba(4,7,13,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  text-align:center;padding:14px;overflow-y:auto;color:var(--tc-stage-ink);
}
#game .tc-overlay.tc-hidden{display:none}
#game .tc-ov-h{font-family:var(--tc-fd);font-weight:700;font-size:clamp(1.15rem,4.6vw,1.8rem);letter-spacing:.16em;text-transform:uppercase}
#game .tc-ov-p{color:var(--tc-stage-dim);max-width:56ch;font-size:.9rem;line-height:1.55}
#game .tc-ov-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#game .tc-final{font-family:var(--tc-fd);font-weight:700;font-size:clamp(1.7rem,6vw,2.6rem);color:var(--tc-stage-accent);letter-spacing:.06em}
#game .tc-debrief{width:min(560px,100%);display:grid;gap:7px;text-align:left}
#game .tc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
#game .tc-stat{background:var(--tc-stage-panel);border:1px solid var(--tc-stage-line);border-radius:var(--tc-r);padding:6px 9px}
#game .tc-stat span{display:block;font-family:var(--tc-fd);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tc-stage-quiet)}
#game .tc-stat b{font-family:var(--tc-fd);font-weight:700;font-size:1.125rem;color:var(--tc-stage-ink)}
#game .tc-sub{font-family:var(--tc-fd);font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tc-stage-quiet);margin-top:2px}
#game .tc-debrief-list{list-style:none;display:grid;gap:3px;max-height:24vh;overflow-y:auto;
  font-family:var(--tc-fd);font-weight:600;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
#game .tc-debrief-list li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--tc-stage-line-soft);padding:4px 2px;color:var(--tc-stage-dim)}
#game .tc-debrief-list li b{color:var(--tc-stage-ink)}
#game .tc-pb{color:var(--tc-amber)}
/* ---------- BUTTONS (WCAG-AA fills) ---------- */
#game .tc-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  border:1px solid var(--tc-accent-fill);background:var(--tc-accent-fill);color:var(--tc-on-fill);
  font-family:var(--tc-fd);font-weight:700;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 22px;border-radius:var(--tc-r);cursor:pointer;
  transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
#game .tc-btn:hover{background:var(--tc-accent-fill-hi);border-color:var(--tc-accent-fill-hi);color:var(--tc-on-fill)}
#game .tc-btn-ghost{background:transparent;color:var(--tc-ink-dim);border-color:var(--tc-line);font-size:.9rem}
#game .tc-btn-ghost:hover{color:var(--tc-ink);border-color:var(--tc-accent);background:transparent}
/* A ghost button INSIDE the stage sits on the dark scrim, not on the page, so it takes
   the stage palette. Without this a cream host paints dark-on-dark here. */
#game .tc-stage .tc-btn-ghost{color:var(--tc-stage-dim);border-color:var(--tc-stage-rule)}
#game .tc-stage .tc-btn-ghost:hover{color:var(--tc-stage-ink);border-color:var(--tc-stage-accent)}
#game .tc-actions .tc-btn{flex:1 1 auto}
/* ---------- GEAR SHEET (mobile drawer over the stage / static bar on desktop) ---------- */
#game .tc-gearsheet{
  position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;
  background:var(--tc-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#game .tc-gearsheet.tc-open{display:flex}
#game .tc-sheet-card{display:flex;flex-direction:column;gap:10px}
@media(max-width:899px){
  #game .tc-sheet-card{
    width:100%;max-height:88vh;overflow-y:auto;background:var(--tc-panel);color:var(--tc-ink);
    border-radius:12px 12px 0 0;padding:14px 12px 20px;gap:12px;
  }
}
#game .tc-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--tc-fd);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:1.125rem}
#game .tc-sheet-close{
  width:46px;height:46px;flex:0 0 auto;border:1px solid var(--tc-line);border-radius:var(--tc-r);
  background:transparent;color:var(--tc-ink-dim);font-size:1.5rem;line-height:1;cursor:pointer;font-family:var(--tc-fd);
}
#game .tc-sheet-close:hover{color:var(--tc-ink);border-color:var(--tc-accent)}
#game .tc-gear-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
#game .tc-gear-group{display:grid;gap:6px;flex:1 1 250px;min-width:0}
#game .tc-gear-label{font-family:var(--tc-fd);font-weight:600;font-size:.72rem;letter-spacing:.24em;color:var(--tc-ink-quiet);text-transform:uppercase}
#game .tc-gear-opts{display:flex;flex-wrap:wrap;gap:6px}
#game .tc-gear-btn{
  flex:1 1 150px;min-height:48px;border:1px solid var(--tc-line);background:var(--tc-field);
  color:var(--tc-ink-dim);font-family:var(--tc-fd);font-weight:600;font-size:.9rem;letter-spacing:.05em;
  padding:7px 11px;border-radius:var(--tc-r);cursor:pointer;text-align:left;
  transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
#game .tc-gear-btn:hover{color:var(--tc-ink);border-color:var(--tc-accent)}
#game .tc-gear-btn.tc-active{background:var(--tc-accent-fill);border-color:var(--tc-accent-fill);color:var(--tc-on-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
#game .tc-gear-name{display:block;text-transform:uppercase;letter-spacing:.05em}
#game .tc-spec{display:block;font-size:.72rem;color:var(--tc-ink-faint);letter-spacing:.02em;font-weight:500;text-transform:none;margin-top:2px}
#game .tc-gear-btn.tc-active .tc-spec{color:var(--tc-on-fill-dim)}
#game .tc-gear-readout{font-family:var(--tc-fd);font-weight:700;font-size:.9rem;letter-spacing:.08em;color:var(--tc-accent-text);text-transform:uppercase}
/* ---------- TROPHY JOURNAL (a modal over the stage — stage palette) ---------- */
#game .tc-journal{
  position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:10px;
  background:rgba(4,7,13,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#game .tc-journal.tc-hidden{display:none}
#game .tc-journal-card{background:var(--tc-stage-card);border:1px solid var(--tc-stage-rule);border-radius:var(--tc-r);
  color:var(--tc-stage-ink);padding:12px;width:min(560px,100%);max-height:94%;overflow-y:auto;display:grid;gap:8px}
#game .tc-journal-h{font-family:var(--tc-fd);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:1.125rem;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
#game .tc-journal-close{
  width:46px;height:46px;flex:0 0 auto;background:transparent;border:1px solid var(--tc-stage-rule);border-radius:var(--tc-r);
  color:var(--tc-stage-dim);font-size:1.5rem;cursor:pointer;line-height:1;font-family:var(--tc-fd);
}
#game .tc-journal-close:hover{color:var(--tc-stage-ink);border-color:var(--tc-stage-accent)}
#game .tc-journal-grid{display:grid;gap:3px}
#game .tc-j-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--tc-stage-line-hair);padding:5px 2px}
#game .tc-j-sil{flex:0 0 74px;width:74px;height:30px}
#game .tc-j-name{flex:1 1 auto;min-width:0;font-family:var(--tc-fd);font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase}
#game .tc-j-sub{display:block;color:var(--tc-stage-quiet);font-size:.72rem;letter-spacing:.05em;text-transform:none;font-family:var(--tc-fb);font-weight:400}
#game .tc-j-best{flex:0 0 auto;font-family:var(--tc-fd);font-weight:700;font-size:.9rem;color:var(--tc-stage-accent);white-space:nowrap}
#game .tc-j-best.tc-none{color:#7d8ea3;font-size:.72rem}
/* ---------- TOUCH CONTROL DECK (>=56px targets) ---------- */
#game .tc-touch{position:absolute;inset:0;z-index:5;pointer-events:none;display:none}
#game .tc-touch.tc-on{display:block}
#game .tc-t-btn{
  position:absolute;pointer-events:auto;border:1px solid rgba(160,200,255,.3);border-radius:10px;
  background:rgba(9,18,32,.72);color:var(--tc-stage-ink);font-family:var(--tc-fd);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  min-width:56px;min-height:56px;font-size:1.125rem;cursor:pointer;touch-action:none;
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;
  transition:background .12s ease-out,border-color .12s ease-out;
}
#game .tc-t-btn:active,#game .tc-t-btn.tc-held{background:var(--tc-press);border-color:var(--tc-accent);color:var(--tc-on-fill)}
#game .tc-tl{left:10px;bottom:12px}
#game .tc-tr{left:72px;bottom:12px}
#game .tc-tu{left:10px;bottom:74px}
#game .tc-td{left:72px;bottom:74px}
#game .tc-tcast{right:10px;bottom:78px;min-width:100px;min-height:62px;font-size:1.125rem}
#game .tc-treel{right:10px;bottom:12px;min-width:100px;min-height:62px;font-size:1.125rem}
/* ---------- KEY LEGEND ---------- */
#game .tc-help{display:flex;flex-wrap:wrap;gap:7px 16px;color:var(--tc-ink-quiet);font-size:.9rem;align-items:center}
#game .tc-kbd{
  display:inline-block;border:1px solid var(--tc-line);border-radius:4px;
  box-shadow:var(--tc-kbd-shadow);
  background:var(--tc-kbd-bg);padding:2px 7px;font-family:var(--tc-fd);font-weight:600;font-size:.72rem;color:var(--tc-ink);
}
#game .tc-touch-hints{display:none}
#game .tc-help.tc-touch-mode .tc-key-hints{display:none}
#game .tc-help.tc-touch-mode .tc-touch-hints{display:inline}
/* ---------- DESKTOP: full three-row selector returns, deck retires ---------- */
@media(min-width:900px){
  #game{padding:26px 18px 40px}
  #game .tc-wrap{gap:14px}
  #game .tc-shell{
    order:2;padding:14px;gap:12px;
    display:grid;align-items:end;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"gear actions" "stage stage" "help help";
  }
  #game .tc-sec-head{order:1}
  #game .tc-rigline{display:none}
  #game .tc-gearsheet{
    grid-area:gear;position:static;display:block;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;z-index:auto;
  }
  #game .tc-sheet-head{display:none}
  #game .tc-gear-group{flex:1 1 200px}
  #game .tc-gear-btn{flex:1 1 104px;padding:6px 9px}
  #game .tc-actions{grid-area:actions;justify-content:flex-end;align-items:flex-end}
  #game .tc-actions .tc-btn{flex:0 0 auto}
  #game .tc-stage{grid-area:stage;min-height:0}
  #game .tc-help{grid-area:help}
  #game .tc-deck{position:absolute;inset:0;flex:none;padding:0;background:none;border-top:0;pointer-events:none;z-index:4}
  #game .tc-tension{position:absolute;top:56px;left:50%;transform:translateX(-50%);width:min(420px,72%)}
  #game .tc-strike{top:30%}
  #game .tc-titlecard{top:38%}
  #game .tc-chip-gear{display:inline-block}
  #game .tc-chip-high{display:inline-block}
  #game .tc-gear-readout{text-align:left}
}
/* Wide but SHORT viewports (tablet landscape, 1024x768 laptops): the water leads. */
@media(min-width:900px) and (max-height:840px){
  #game{padding:12px 18px 20px}
  #game .tc-wrap{gap:8px}
  #game .tc-shell{order:1}
  #game .tc-sec-head{order:2}
  #game .tc-blurb{display:none}
}
/* Wide and MID-height (1024x900 tablet-landscape / small-laptop shapes, up through
   1440x900). Tall enough that the rule above does not fire, but at 1024 the gear bar
   wraps to THREE rows instead of two (276px vs 231px) and the full header on top of that
   pushed the canvas to 59% of the viewport — past the fold on the exact shape a visitor
   is most likely to arrive on. The desktop reading order is worth keeping here, so trim
   the header rather than reorder it: same fix as above, one notch gentler. */
@media(min-width:900px) and (min-height:841px) and (max-height:1040px){
  #game{padding:14px 18px 30px}
  #game .tc-wrap{gap:9px}
  #game .tc-shell{gap:9px}
  #game .tc-blurb{display:none}
}
@media (prefers-reduced-motion:reduce){
  #game .tc-gear-btn,#game .tc-btn,#game .tc-ticker,#game .tc-titlecard,
  #game .tc-strike,#game .tc-combo,#game .tc-t-btn,#game .tc-rig-chip{transition:none}
  #game .tc-tension.tc-red .tc-tension-inner{animation:none}
}



/* ==TC-THEME:blue== injected by graft_game.mjs — token-only override of the
   Tactical Catch module, so it adopts this host's world. Scoped to #game; nothing
   here can reach the host's own styles. */
#game{
  /* stormfront: dark hull, moonlight, heritage electric blue */
  --tc-accent:var(--blue,#2f8bff);
  --tc-accent-text:var(--blue,#2f8bff);
  --tc-accent-fill:var(--blue-ink,#1560cf);            /* host's own AA-rated text fill */
  --tc-accent-fill-hi:var(--blue-ink-deep,#1a6fe0);    /* hover darkens */
  --tc-on-fill:#fff;
  --tc-on-fill-dim:#fff;            /* NOT a tint: #dbe9ff is only 4.40:1 on the host's #1668cc */
  --tc-panel:var(--panel,#0c1622);
  --tc-ink:var(--ink,#eef3fa);
  --tc-ink-dim:var(--ink-dim,#b9c9dc);
  --tc-ink-quiet:#8fa3ba;
  --tc-line:var(--hairline,rgba(120,160,220,.2));
  --tc-line-soft:var(--hairline,rgba(120,160,220,.12));
  --tc-fh:var(--font-display,'Rajdhani',sans-serif);
  --tc-fd:var(--font-body,'Rajdhani',sans-serif);
  --tc-fb:var(--font-body,'Inter',sans-serif);
}


/* Boot splash + veil — flash-of-default fix. The owner's carousel slides,
   text and featured background arrive from the database a beat after first
   paint, so without this the baked-in storm/boat hero (video AND copy)
   flashed briefly. A full-screen Tactical-branded splash now covers the page
   for a ~2s branded buffer while the owner content applies underneath, then
   fades out. The media veil below is a second line of defense under the
   splash. Hard 3.5s cap so the page can never stay hidden; with scripts off
   the splash markup is removed by the noscript rule and the page renders
   normally. */
#bootSplash{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 90% at 50% 22%,#0a1524 0%,#050b14 55%,#02050a 100%);
  opacity:1;transition:opacity .55s ease-out;
}
#bootSplash.done{opacity:0;pointer-events:none}
#bootSplash .bs-mark{height:86px;width:auto;filter:drop-shadow(0 0 22px rgba(47,139,255,.35))}
#bootSplash .bs-word{
  display:flex;flex-direction:column;align-items:center;line-height:1.15;
  font-family:var(--font-display,'Oswald','Arial Narrow',sans-serif);color:#e8f1fb;
  letter-spacing:.34em;text-transform:uppercase;text-indent:.34em;
}
#bootSplash .bs-word b{font-size:1.35rem;font-weight:600}
#bootSplash .bs-word small{font-size:.62rem;color:#9db2ca;letter-spacing:.42em;text-indent:.42em;margin-top:6px}
#bootSplash .bs-loader{width:26px;height:26px;color:rgba(143,195,255,.55);margin-top:6px}
#bootSplash .bs-loader svg{width:100%;height:100%;display:block}
html:not(.tfg-boot-js) #bootSplash{display:none}
html.tfg-boot .carousel .ch-media{opacity:0}
.carousel .ch-media{transition:opacity .4s ease-out}
html.tfg-boot .bg-layer.active{opacity:0}