/* ─────────────────────────────────────────────────────────────────────────
   TRENCHES LANDING — boot overlay shown while Unity streams in behind it.
   Everything is scoped under #trenches-landing so it can't leak into the
   shop/level-up styles. Fades out when the player clicks DEPLOY (landing.js).
   Design source of truth: the approved prototype in Downloads/trenches-landing.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --tl-ink:#0b0e10;
  --tl-line:#2a333a;
  --tl-steel:#b7c2c9;
  --tl-smoke:#7d8990;
  --tl-sand:#e8ecef;
  --tl-gold:#c6ff00;
  --tl-gold-deep:#8eb800;
  /* Landing status tokens */
  --tl-live:#74e08c;
  --tl-faint:#6e664f;
  --tl-radius:14px;
}

#trenches-landing{
  position:fixed; inset:0; z-index:50;
  background:var(--tl-ink); color:var(--tl-sand);
  font-family:"Chakra Petch",system-ui,sans-serif;
  transition:opacity 1s ease;
  /* Safety net (B): if content can't fit even after height-aware sizing,
     scroll instead of clipping behind the header. Never lose content. */
  overflow-y:auto; overflow-x:hidden;
}
#trenches-landing.done{ opacity:0; pointer-events:none; }
#trenches-landing a{ color:inherit; text-decoration:none; }
#trenches-landing :focus-visible{ outline:2px solid var(--tl-gold); outline-offset:3px; }

/* ── Backdrop: golden-hour key art, slow push-in, dark scrim on the text side ── */
#tl-stage{ position:absolute; inset:0; overflow:hidden; }
#tl-keyart{
  position:absolute; inset:0;
  background:url("loading-bg.jpg") center right / cover no-repeat;
  animation:tl-push 45s ease-out forwards;
}
@keyframes tl-push{ from{ transform:scale(1.07); } to{ transform:scale(1.0); } }
#tl-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,14,16,.92) 0%, rgba(11,14,16,.72) 34%, rgba(11,14,16,.15) 62%, rgba(11,14,16,0) 80%),
    linear-gradient(0deg, rgba(11,14,16,.95) 0%, rgba(11,14,16,.35) 18%, rgba(11,14,16,0) 40%),
    linear-gradient(180deg, rgba(11,14,16,.75) 0%, rgba(11,14,16,0) 18%);
}
#tl-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 58% 42%, transparent 55%, rgba(0,0,0,.5) 100%);
}
#tl-dust{ position:absolute; inset:0; pointer-events:none; }

/* ── Frame ── */
#tl-page{
  position:relative; z-index:2;
  /* dvh, not vh: accounts for Brave/mobile collapsing address-bar chrome.
     min-height (not height) lets the page grow + scroll when it must. */
  min-height:100dvh;
  /* border-box so the padding below lives INSIDE the 100dvh — otherwise the
     split hero overflows by the vertical padding and the page scrolls a few
     dozen px for no reason. */
  box-sizing:border-box;
  display:flex; flex-direction:column;
  /* Vertical padding shrinks on short viewports (vh), horizontal keeps vw. */
  padding:clamp(12px,2.4vh,36px) clamp(18px,4vw,56px);
}

/* ── Top bar ── */
/* Centred masthead: nav — TRENCHES — nav. Both navs are `flex:1 1 0`, so they take
   equal width whatever their links say and the wordmark lands dead centre. */
#trenches-landing header{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,40px);
  font-size:12px; font-weight:600; letter-spacing:.22em;
}
#tl-mark{
  flex:none;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(24px,3vw,38px); font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  /* The indent balances the letter-spacing, which only ever trails the last glyph. */
  padding-left:.2em;
  background:linear-gradient(180deg,#fff,var(--tl-sand) 40%,var(--tl-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
#trenches-landing nav{ flex:1 1 0; display:flex; gap:clamp(14px,2.5vw,32px); }
#trenches-landing nav.tl-nav-l{ justify-content:flex-end; }
#trenches-landing nav.tl-nav-r{ justify-content:flex-start; }
#trenches-landing nav a{ color:var(--tl-steel); padding:6px 2px; transition:color .2s; }
#trenches-landing nav a:hover{ color:var(--tl-gold); }
/* Out of flow so a widening balance can't shove the wordmark off centre. */
#trenches-landing #tl-wallet-bar{ position:absolute; right:0; top:50%; transform:translateY(-50%); }
#tl-topbar-spacer{ display:none; }
#tl-token-pill{
  font-size:11px; letter-spacing:.14em; color:var(--tl-gold);
  border:1px solid var(--tl-line); padding:8px 14px;
  background:rgba(11,14,16,.55);
}
#tl-token-pill b{ color:var(--tl-sand); font-weight:600; }

/* ── Hero block over the darkened key art ── */
/* Center the hero block vertically so the headline sits around mid-screen (not bottom-pinned). */
/* main stretches so the full-size hero panel (#tl-split) can fill the viewport. */
#trenches-landing main{ flex:1; display:flex; align-items:stretch; justify-content:center; min-height:0; text-align:left; }
/* #tl-brief is the FPS panel's content column — sizing lives on .tl-half-in. */
#tl-brief{ max-width:520px; margin:0; padding:0; }

/* Live-count status pill */
#tl-status{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tl-steel);
  padding:7px 14px; border:1px solid rgba(255,255,255,.14); border-radius:30px;
  background:rgba(11,14,16,.5); margin-bottom:22px;
}
#tl-status .tl-status-dot{ width:7px; height:7px; border-radius:50%; background:var(--tl-live); }
#tl-status b{ color:var(--tl-sand); font-weight:600; }

#trenches-landing h1{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:800; line-height:.9;
  /* Height-aware: capped by whichever of width/height is tighter, so the
     headline can't outgrow a short, wide window. */
  font-size:clamp(56px,min(14vw,18vh),140px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  /* Metallic fill: white → sand → gold */
  background:linear-gradient(180deg,#fff,var(--tl-sand) 45%,var(--tl-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 40px rgba(0,0,0,.55);
}

#tl-sub{
  margin:20px auto 0; max-width:32ch;
  font-size:clamp(15px,2.2vw,20px); line-height:1.4;
  color:var(--tl-steel); text-shadow:0 1px 8px rgba(0,0,0,.9);
}
#tl-sub b{ color:#fff; font-weight:600; }

/* Crate-stencil tags */
#tl-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(14px,2.4vh,30px); }
#trenches-landing .tl-tag{
  font-size:10px; font-weight:700; letter-spacing:.22em;
  color:var(--tl-steel); padding:7px 12px;
  border:1px solid var(--tl-line);
  background:rgba(11,14,16,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}

/* ── $TRENCH contract address bar — deliberately prominent, click anywhere to copy ── */
#tl-ca{
  display:flex; align-items:center; gap:14px; width:100%;
  margin:0 0 clamp(14px,2.4vh,30px); padding:12px 16px;
  background:linear-gradient(180deg,rgba(198, 255, 0,.07),rgba(11,14,16,.5));
  border:1px solid rgba(198, 255, 0,.45); border-radius:12px;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:border-color .15s ease,box-shadow .2s ease,transform .12s ease;
  animation:tl-ca-glow 3.2s ease-in-out infinite;
}
#tl-ca:hover{ animation:none; border-color:var(--tl-gold);
  box-shadow:0 0 0 1px rgba(198, 255, 0,.22),0 0 34px rgba(198, 255, 0,.3); transform:translateY(-1px); }
@keyframes tl-ca-glow{
  0%,100%{ box-shadow:0 0 0 1px rgba(198, 255, 0,.08),0 0 20px rgba(198, 255, 0,.12); }
  50%{ box-shadow:0 0 0 1px rgba(198, 255, 0,.16),0 0 30px rgba(198, 255, 0,.22); }
}
#tl-ca-label{ flex:none; font-family:"Big Shoulders Stencil Text","Chakra Petch",sans-serif;
  font-weight:800; font-size:13px; letter-spacing:.16em; color:var(--tl-gold); white-space:nowrap; }
#tl-ca-addr{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:"Consolas",ui-monospace,monospace; font-size:clamp(12px,1.35vw,17px);
  letter-spacing:.02em; color:var(--tl-sand); }
#tl-ca-copy{ flex:none; font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--tl-ink);
  background:linear-gradient(180deg,var(--tl-gold),var(--tl-gold-deep));
  border-radius:7px; padding:8px 16px; white-space:nowrap; }
#tl-ca.copied{ animation:none; border-color:#3f9e57;
  box-shadow:0 0 0 1px rgba(63,158,87,.3),0 0 30px rgba(63,158,87,.25); }
#tl-ca.copied #tl-ca-copy{ background:#2f7d43; color:#fff; }

/* ── Signature: the DEPLOY control — a rifle magazine that fills with rounds
      as Unity preloads; arms gold when the instance is ready. ── */
#tl-cta-row{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:34px; }

/* ── FPS Play button — the same #tl-deploy the Unity boot arms via TRENCHES_LANDING.
      A single gold pill; #tl-mag + #tl-deploy-meta stay in the DOM for the boot
      contract but are hidden, and #tl-deploy-label carries "LOADING… %" → "▶ PLAY NOW". ── */
#tl-deploy{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Chakra Petch",system-ui,sans-serif; text-align:center; cursor:progress;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(18px,2.6vw,24px); color:#12100a;
  padding:20px 52px; border:0; border-radius:16px;
  background:linear-gradient(150deg,var(--tl-gold),var(--tl-gold-deep));
  box-shadow:0 14px 40px -10px rgba(198, 255, 0,.4);
  opacity:.78; filter:saturate(.85); transition:opacity .3s,filter .3s;
}
#tl-deploy-label{ font:inherit; letter-spacing:inherit; color:inherit; }
/* Boot-contract elements — hidden in the FPS button (label carries the state) */
#tl-mag, #tl-deploy-meta{ display:none !important; }

#tl-deploy.armed{
  cursor:pointer; opacity:1; filter:none;
  animation:tl-arm .5s ease-out, tl-play-pulse 2.3s ease-in-out .5s infinite;
}
#tl-deploy.armed:hover{ filter:brightness(1.05); }
@keyframes tl-arm{
  0%{ box-shadow:0 0 0 0 rgba(198, 255, 0,.6); }
  100%{ box-shadow:0 14px 40px -10px rgba(198, 255, 0,.4), 0 0 0 22px rgba(198, 255, 0,0); }
}
@keyframes tl-play-pulse{
  0%,100%{ box-shadow:0 14px 40px -10px rgba(198, 255, 0,.4); }
  50%{ box-shadow:0 16px 54px -6px rgba(198, 255, 0,.72); }
}
#tl-deploy.failed{ cursor:default; opacity:1; filter:none;
  background:linear-gradient(150deg,#8f3b3b,#6f2a2a); color:#ffd9cf; box-shadow:none; }

#tl-subcta{ margin-top:12px; font-size:12.5px; letter-spacing:.02em; color:var(--tl-faint); }

#trenches-landing .tl-ghost{
  display:flex; align-items:center; padding:0 26px;
  font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--tl-sand);
  border:1px solid var(--tl-line); background:rgba(11,14,16,.5);
  transition:border-color .2s,color .2s;
}
#trenches-landing .tl-ghost:hover{ border-color:var(--tl-gold); color:var(--tl-gold); }

/* ── Bottom readout: thin single-line field-report strip (LIVE leads, stats inline) ── */
#trenches-landing footer{
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.6vw,18px);
  border-top:1px solid rgba(42,51,58,.8);
  padding-top:16px; margin-top:6px;
  font-size:12px; letter-spacing:.08em; color:var(--tl-smoke);
}
#trenches-landing .tl-fr b{ color:var(--tl-gold); font-weight:700; font-variant-numeric:tabular-nums; }
#trenches-landing .tl-fr-sep{ color:var(--tl-line); }
#tl-live{ display:flex; align-items:center; gap:9px;
  font-size:10px; font-weight:700; letter-spacing:.26em; color:var(--tl-steel); }
#tl-live i{ width:7px; height:7px; border-radius:50%; background:#74e08c;
  box-shadow:0 0 8px rgba(116,224,140,.8); animation:tl-blink 2.2s infinite; }
@keyframes tl-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ── Dossier panels (Arsenal / Leaderboard / How It Pays) ── */
#trenches-landing .tl-backdrop{
  position:fixed; inset:0; z-index:10; display:none;
  align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(5,7,8,.74); backdrop-filter:blur(5px);
}
#trenches-landing .tl-backdrop.open{ display:flex; }
#trenches-landing .tl-panel{
  width:min(1060px,96vw); max-height:88dvh;
  display:flex; flex-direction:column;
  background:rgba(16,20,24,.97); border:1px solid var(--tl-line);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
#trenches-landing .tl-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; border-bottom:1px solid var(--tl-line); flex:none;
}
#trenches-landing .tl-panel-title{
  font-family:"Big Shoulders Stencil Text","Chakra Petch",sans-serif;
  font-size:30px; font-weight:800; letter-spacing:.12em; color:var(--tl-gold);
}
#trenches-landing .tl-panel-title::before{
  content:""; display:inline-block; vertical-align:4px;
  width:26px; height:3px; background:var(--tl-gold); margin-right:14px;
}
#trenches-landing .tl-panel-close{
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.18em;
  color:var(--tl-steel); background:none; border:1px solid var(--tl-line);
  padding:8px 14px; cursor:pointer; transition:color .2s,border-color .2s;
}
#trenches-landing .tl-panel-close:hover{ color:var(--tl-gold); border-color:var(--tl-gold); }
#trenches-landing .tl-panel-body{ overflow-y:auto; padding:22px 26px 30px; }

#trenches-landing .tl-sec{
  display:flex; align-items:center; gap:12px;
  font-size:11px; font-weight:700; letter-spacing:.3em; color:var(--tl-smoke);
  margin:26px 0 14px;
}
#trenches-landing .tl-sec:first-child{ margin-top:0; }
#trenches-landing .tl-sec::after{ content:""; flex:1; height:1px; background:var(--tl-line); }

#trenches-landing .tl-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
#trenches-landing .tl-card{
  border:1px solid var(--tl-line); background:#14181c;
  display:flex; flex-direction:column; overflow:hidden;
}
#trenches-landing .tl-card .tl-hero{
  aspect-ratio:16/10; background:#0c0f12; position:relative;
  display:flex; align-items:center; justify-content:center;
}
#trenches-landing .tl-card .tl-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
#trenches-landing .tl-card .tl-hero img.contain{ object-fit:contain; background:#1a1b1d; }
#trenches-landing .tl-card .tl-hero svg.tl-op{ width:56%; height:auto; color:#39444d; }
#trenches-landing .tl-card-info{ padding:12px 14px 14px; }
#trenches-landing .tl-card h3{ font-size:13px; font-weight:700; letter-spacing:.08em; }
#trenches-landing .tl-card .tl-card-sub{ font-size:10px; color:var(--tl-smoke); letter-spacing:.12em; margin-top:3px; }
#trenches-landing .tl-card .tl-card-price{ font-size:12px; color:var(--tl-gold); margin-top:8px; font-variant-numeric:tabular-nums; }
#trenches-landing .tl-chip{
  position:absolute; top:10px; left:10px;
  font-size:9px; font-weight:700; letter-spacing:.14em; padding:4px 8px;
}
#trenches-landing .tl-chip.rare      { background:#26526b; color:#bfe3ff; }
#trenches-landing .tl-chip.epic      { background:#4b2b6e; color:#dcc2ff; }
#trenches-landing .tl-chip.legendary { background:#6e5a1c; color:#eaffb0; }
#trenches-landing .tl-chip.godly     { background:linear-gradient(90deg,#7a2b8f,#b02f6b); color:#ffd7f4; }
#trenches-landing .tl-chip.equipped  { background:#1f6e3c; color:#d7ffe3; }
#trenches-landing .tl-card.gold-line { border-color:#6e5a1c; }

#trenches-landing .tl-card.locked .tl-hero svg.tl-op{ color:#232b31; }
#trenches-landing .tl-lock-veil{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:rgba(8,10,12,.55);
}
#trenches-landing .tl-lock-veil svg{ width:22px; color:var(--tl-gold); }
#trenches-landing .tl-lock-veil span{ font-size:9px; font-weight:700; letter-spacing:.3em; color:var(--tl-steel); }

/* How It Pays — numbered briefing steps */
#trenches-landing .tl-steps{ display:flex; flex-direction:column; gap:14px; }
#trenches-landing .tl-step{
  display:grid; grid-template-columns:74px 1fr; gap:18px; align-items:start;
  border:1px solid var(--tl-line); background:#14181c; padding:20px 22px;
}
#trenches-landing .tl-step-num{
  font-family:"Big Shoulders Stencil Text","Chakra Petch",sans-serif;
  font-size:44px; font-weight:800; line-height:1; color:#39444d;
}
#trenches-landing .tl-step h3{ font-size:14px; font-weight:700; letter-spacing:.14em; margin-bottom:7px; }
#trenches-landing .tl-step p{ font-size:13px; line-height:1.65; color:var(--tl-steel); max-width:70ch; }
#trenches-landing .tl-step p b{ color:var(--tl-sand); font-weight:600; }
#trenches-landing .tl-step.key{ border-color:var(--tl-gold); background:#171612; }
#trenches-landing .tl-step.key .tl-step-num{ color:var(--tl-gold); }
#trenches-landing .tl-step.key h3{ color:var(--tl-gold); }

#trenches-landing .tl-rails{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
#trenches-landing .tl-fineprint{ margin-top:16px; font-size:11px; line-height:1.7; color:var(--tl-smoke); letter-spacing:.04em; }
#trenches-landing .tl-armory-note{
  margin-top:22px; display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--tl-line); border-left:3px solid var(--tl-gold);
  background:#14181c; padding:16px 20px;
}
#trenches-landing .tl-armory-note .tl-an-coin{
  font-family:"Big Shoulders Stencil Text","Chakra Petch",sans-serif;
  font-size:20px; font-weight:800; color:var(--tl-gold); white-space:nowrap;
}
#trenches-landing .tl-armory-note p{ font-size:12.5px; line-height:1.65; color:var(--tl-steel); }
#trenches-landing .tl-armory-note p b{ color:var(--tl-sand); font-weight:600; }

/* Leaderboard */
#trenches-landing .tl-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
#trenches-landing .tl-tabs + .tl-tabs{ margin-top:10px; }
#trenches-landing .tl-tab{
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.2em;
  color:var(--tl-steel); background:none; border:1px solid var(--tl-line);
  padding:9px 16px; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; gap:8px;
}
#trenches-landing .tl-tab:hover{ border-color:var(--tl-gold); color:var(--tl-gold); }
#trenches-landing .tl-tab.active{ background:linear-gradient(180deg,var(--tl-gold),var(--tl-gold-deep)); color:var(--tl-ink); border-color:var(--tl-gold); }
#trenches-landing .tl-tab.soon{ opacity:.55; cursor:not-allowed; }
#trenches-landing .tl-tab.soon:hover{ border-color:var(--tl-line); color:var(--tl-steel); }
#trenches-landing .tl-tab.soon svg{ width:11px; color:var(--tl-gold); }

#tl-lb-table{ margin-top:20px; }
#trenches-landing .tl-lb-row{
  display:grid; grid-template-columns:52px 1fr 140px;
  align-items:center; gap:12px;
  padding:11px 14px; border-bottom:1px solid rgba(42,51,58,.6);
  font-size:13px;
}
#trenches-landing .tl-lb-row.head{
  font-size:9px; font-weight:700; letter-spacing:.26em; color:var(--tl-smoke);
  border-bottom:1px solid var(--tl-line);
}
#trenches-landing .tl-lb-rank{ font-family:"Big Shoulders Stencil Text","Chakra Petch",sans-serif; font-size:17px; font-weight:700; color:var(--tl-smoke); }
#trenches-landing .tl-lb-row.top .tl-lb-rank{ color:var(--tl-gold); }
#trenches-landing .tl-lb-name{ font-weight:600; letter-spacing:.06em; }
#trenches-landing .tl-lb-val{ text-align:right; color:var(--tl-gold); font-weight:700; font-variant-numeric:tabular-nums; }

/* ── CLIPPING CAMPAIGN ─────────────────────────────────────────────────────
   Hero callout strip only — clicking it (or the nav item) opens the
   standalone clipper console (golden-clip-view) in a new tab. */
#tl-clip-callout{
  margin-top:22px; display:flex; align-items:center; gap:14px;
  max-width:640px; padding:12px 16px;
  font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--tl-steel);
  border:1px solid var(--tl-line); border-left:3px solid var(--tl-gold);
  background:rgba(11,14,16,.55);
  transition:border-color .2s;
}
#tl-clip-callout svg{ width:20px; flex:none; color:var(--tl-gold); }
#tl-clip-callout b{ color:var(--tl-sand); font-weight:700; }
#tl-clip-callout .tl-cc-go{ margin-left:auto; color:var(--tl-gold); font-weight:700; white-space:nowrap; }
#tl-clip-callout:hover{ border-color:var(--tl-gold); }

/* $TRENCH buy links — inherit their context's color, underline on hover */
#trenches-landing a.tl-buy{ color:inherit; }
#trenches-landing a.tl-buy:hover,
#trenches-landing a[data-buy]:hover{ text-decoration:underline; }
#trenches-landing .tl-armory-note p a[data-buy]{ color:var(--tl-gold); }

/* ── ARSENAL: $TRENCH buy block now lives at the top of the panel ── */
#trenches-landing .tl-panel-body > .tl-armory-note:first-child{ margin-top:0; }
#trenches-landing .tl-arsenal-buy{ margin:2px 0 8px; }
#trenches-landing .tl-arsenal-buy .tl-ghost{ display:inline-flex; padding:12px 26px; }

/* ── EARN panel cards (clipping + refer-and-earn) ── */
#trenches-landing .tl-earn-card{
  display:flex; gap:16px; align-items:flex-start; width:100%; text-align:left;
  border:1px solid var(--tl-line); border-left:3px solid var(--tl-gold);
  background:#14181c; padding:20px 22px; margin-bottom:14px;
  color:inherit; font:inherit; cursor:pointer; transition:border-color .2s;
}
#trenches-landing .tl-earn-card:hover{ border-color:var(--tl-gold); }
#trenches-landing .tl-earn-card svg{ width:26px; height:26px; flex:none; color:var(--tl-gold); margin-top:2px; }
#trenches-landing .tl-earn-card h3{ font-size:14px; font-weight:700; letter-spacing:.12em; margin-bottom:6px; }
#trenches-landing .tl-earn-card p{ font-size:12.5px; line-height:1.6; color:var(--tl-steel); margin-bottom:12px; }
#trenches-landing .tl-earn-go{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--tl-gold); white-space:nowrap; }

@media (max-width:760px){
  #trenches-landing{ overflow-y:auto; }
  #tl-page{ min-height:100%; height:auto; }
  #trenches-landing nav{ display:none; }
  #trenches-landing footer{ flex-wrap:wrap; gap:18px 28px; }
  #tl-live{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #tl-keyart{ animation:none; }
  #tl-deploy.armed{ animation:none; }
  #tl-live i{ animation:none; }
  #tl-ca{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FULL-SIZE HERO — the FPS panel fills the landing-page hero area.

   The panel carries its own art, so the page backdrop stays restrained behind
   the header and the panel frame. The stage scrim is flattened to keep the
   full-width panel visually even from edge to edge.
   ══════════════════════════════════════════════════════════════════════════ */
#trenches-landing #tl-keyart{ opacity:.2; filter:saturate(.55); }
#trenches-landing #tl-scrim{
  background:linear-gradient(180deg, rgba(11,14,16,.86), rgba(11,14,16,.94));
}

#tl-split{
  flex:1; width:100%; min-height:0;
  display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr);
  gap:0;
  margin-top:clamp(10px,1.8vh,22px);
}

.tl-half{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--tl-line); border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,3.4vh,44px) clamp(20px,3vw,48px);
  transition:border-color .3s ease, box-shadow .3s ease;
}
/* Corner bloom in the panel's own accent keeps the hero reading as a lit crate
   rather than a flat web card. */
.tl-half::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(200deg,transparent 62%,var(--tl-half-tint) 100%);
  opacity:.5; transition:opacity .3s ease;
}
.tl-half:hover::after{ opacity:.85; }

/* Hero accent — everything inside reads from these two vars. */
.tl-half-fps  { --tl-half-key:var(--tl-gold); --tl-half-tint:rgba(198, 255, 0,.16); }

.tl-half-fps:hover  { border-color:rgba(198, 255, 0,.5); box-shadow:0 0 70px -18px rgba(198, 255, 0,.45); }

/* Panel art + wash. The art sits behind a heavy wash so the type always wins. */
.tl-half-art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transform:scale(1.04); transition:transform 1.2s ease;
  filter:saturate(.85);
}
.tl-half:hover .tl-half-art{ transform:scale(1.09); }

/* Gameplay loop on the FPS panel — sits ON TOP of the key-art photo rather than
   replacing it, so the photo is the poster and the fallback in one. Starts
   transparent and fades in on `.playing` (landing.js sets it at canplay), which
   means nothing flashes if the file never loads or autoplay is refused.
   object-fit:cover matches the photo's background-size:cover at every window
   size — the source is square (1024×1024) because the panel is roughly square,
   so the crop stays shallow whether the window is wide or tall. */
.tl-half-art > video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity .9s ease;
  pointer-events:none;
}
.tl-half-art > video.playing{ opacity:1; }
/* The wash is centred, not side-weighted: the content sits in the middle of the
   full-size panel, so the darkest part of the art has to sit there too. */
.tl-half-wash{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(78% 62% at 50% 50%, rgba(7,10,11,.96) 0%, rgba(7,10,11,.86) 52%, rgba(7,10,11,.5) 100%),
    linear-gradient(0deg, rgba(7,10,11,.88) 0%, rgba(7,10,11,.1) 40%),
    linear-gradient(180deg, rgba(7,10,11,.7) 0%, rgba(7,10,11,0) 26%);
}
/* Faint tactical grid — texture, not noise. */
.tl-half-grid{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(95% 85% at 50% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(95% 85% at 50% 50%,#000,transparent 80%);
}

.tl-half-in{
  position:relative; z-index:2; width:100%; max-width:520px;
  text-align:center; margin:0 auto; padding:0;
}

.tl-half-kicker{
  margin:18px 0 0; font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--tl-half-key);
}

/* Two-weight stack: a small line over the big one keeps the headline legible
   across viewport sizes. */
#trenches-landing .tl-half-in h1{
  display:flex; flex-direction:column; align-items:center; margin:8px 0 0;
  font-family:"Chakra Petch",system-ui,sans-serif; font-weight:800;
  line-height:.88; letter-spacing:-.01em; text-transform:uppercase;
  background:linear-gradient(180deg,#fff,var(--tl-sand) 45%,var(--tl-half-key));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 40px rgba(0,0,0,.55);
  font-size:clamp(34px,min(4.6vw,8.4vh),68px);
}
#trenches-landing .tl-h1-sm{ font-size:.46em; letter-spacing:.06em; opacity:.9; }
#trenches-landing .tl-h1-lg{ font-size:1em; }

#trenches-landing .tl-half-in #tl-sub{
  margin:16px auto 0; max-width:40ch;
  font-size:clamp(13.5px,1.15vw,16px); line-height:1.5;
  color:var(--tl-steel); text-shadow:0 1px 8px rgba(0,0,0,.9);
}
/* The status / "same wallet" pills sit above each headline. */
#trenches-landing .tl-half-in #tl-status{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tl-steel);
  padding:7px 14px; border:1px solid rgba(255,255,255,.14); border-radius:30px;
  background:rgba(7,10,11,.6);
}
/* The play button keeps its boot-contract ids, centred in the panel. */
#trenches-landing .tl-half-in #tl-cta-row{ justify-content:center; margin-top:clamp(18px,3vh,30px); }
#trenches-landing .tl-half-in #tl-deploy{ font-size:clamp(17px,1.7vw,22px); padding:18px 44px; }
#trenches-landing .tl-half-in #tl-subcta{ margin-top:14px; }

/* The single FPS panel already fills the grid at every breakpoint. */
@media (prefers-reduced-motion:reduce){
  .tl-half-art{ transition:none; }
  .tl-half-fps:hover .tl-half-art{ transform:scale(1.04); }
}