/* ─────────────────────────────────────────────────────────────────────────
   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:#f2c14e;
  --tl-gold-deep:#dda52f;
  /* Arena tokens (match trenches-arena/src/arena/arena.css) */
  --tl-panel:#141a1e;
  --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, bottom-left over the dark side of the art ── */
/* Center the hero block vertically so the headline sits around mid-screen (not bottom-pinned). */
/* main stretches so the two hero panels (#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 now the LEFT panel's content column — sizing lives on .tl-half-in. */
#tl-brief{ max-width:520px; margin:0; padding:0; }

/* Live-count status pill (arena) */
#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;
  /* Arena 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(242,193,78,.07),rgba(11,14,16,.5));
  border:1px solid rgba(242,193,78,.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(242,193,78,.22),0 0 34px rgba(242,193,78,.3); transform:translateY(-1px); }
@keyframes tl-ca-glow{
  0%,100%{ box-shadow:0 0 0 1px rgba(242,193,78,.08),0 0 20px rgba(242,193,78,.12); }
  50%{ box-shadow:0 0 0 1px rgba(242,193,78,.16),0 0 30px rgba(242,193,78,.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; }

/* ── Arena 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(242,193,78,.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 arena 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(242,193,78,.6); }
  100%{ box-shadow:0 14px 40px -10px rgba(242,193,78,.4), 0 0 0 22px rgba(242,193,78,0); }
}
@keyframes tl-play-pulse{
  0%,100%{ box-shadow:0 14px 40px -10px rgba(242,193,78,.4); }
  50%{ box-shadow:0 16px 54px -6px rgba(242,193,78,.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:#ffe9a6; }
#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; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPLIT HERO — two full-height panels side by side (index.html #tl-split).
   LEFT  = the FPS  (gold): "FPS TRENCHES" + the #tl-deploy PLAY NOW button.
   RIGHT = the arena (live green): stake on the games you already play.

   The two panels replace the old scroll-down "tl-arenas" section, so the whole
   offer is on one screen. Below 900px they stack and the overlay scrolls again.
   ══════════════════════════════════════════════════════════════════════════ */
/* The panels carry their own art now, so the page backdrop drops back to a
   near-black bed — otherwise the key art reads twice, once behind the panels
   and once inside the left one. The stage scrim is also flattened: its
   left-to-right falloff was built for a left-aligned hero and leaves a bright
   strip down the right margin once the content is two symmetrical panels. */
#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 1fr;
  gap:clamp(12px,1.6vw,22px);
  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 two halves reading as a
   pair of lit crates rather than two grey web cards. */
.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; }

/* Per-panel accent — everything inside reads from these two vars. */
.tl-half-fps  { --tl-half-key:var(--tl-gold); --tl-half-tint:rgba(242,193,78,.16); }
.tl-half-arena{ --tl-half-key:var(--tl-live); --tl-half-tint:rgba(116,224,140,.14); }

.tl-half-fps:hover  { border-color:rgba(242,193,78,.5); box-shadow:0 0 70px -18px rgba(242,193,78,.45); }
.tl-half-arena:hover{ border-color:rgba(116,224,140,.42); box-shadow:0 0 70px -18px rgba(116,224,140,.35); }

/* 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 arena panel runs on the Clash Royale key art — the game that is actually
   live over there. It's a 760px square asset filling a ~930px panel, so it gets
   a slight blur: that hides the upscale, and pushes the very saturated red/blue
   art far enough back that the lobby list on top stays the thing you read. */
.tl-arena-art{
  background:url("cr.jpg") center / cover no-repeat;
  /* Hard knock-back. The CR art is a bright, fully saturated red/blue key art —
     at anything near full strength the kings' faces fight the lobby list sitting
     on top of them. Blur also hides the 760px asset being upscaled to ~930px. */
  filter:saturate(.62) brightness(.55) blur(6px);
  transform:scale(1.12);
}
.tl-half-arena:hover .tl-half-art{ transform:scale(1.16); }
/* The wash is centred, not side-weighted: the content sits in the middle of the
   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%);
}
/* Heavier than the FPS side: the CR key art is far brighter than the photograph
   opposite, and a whole lobby list has to stay legible on top of it. */
.tl-half-arena .tl-half-wash{
  background:
    radial-gradient(76% 60% at 50% 50%, rgba(7,10,11,.94) 0%, rgba(7,10,11,.88) 54%, rgba(7,10,11,.66) 100%),
    linear-gradient(0deg, rgba(7,10,11,.72) 0%, rgba(7,10,11,.2) 46%);
}
/* 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, so a half-width panel can
   still carry a headline without shrinking it to nothing. */
#trenches-landing .tl-half-in h1,
#trenches-landing .tl-arena-h{
  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,
.tl-arena-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);
}
.tl-arena-sub b{ color:#fff; font-weight:600; }

/* The status / "same wallet" pills sit above each headline. */
#trenches-landing .tl-half-in #tl-status,
.tl-arena-pill{
  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);
}
.tl-arena-pill .tl-status-dot{ width:7px; height:7px; border-radius:50%; background:var(--tl-live); }

/* LEFT: 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; }

/* RIGHT: the lobby preview — a static mock of the arena's match list (see the
   markup comment in index.html). Deliberately shaped like the real MatchRow so
   the click-through lands somewhere recognisable: art · host · state · count ·
   stake (USD over SOL) · action. The arena renders these as a borderless table
   at desktop width, so this does the same — hairline separators, no card fill. */
.tl-lobby{
  width:100%; margin-top:clamp(16px,2.4vh,24px);
  border:1px solid var(--tl-line); border-radius:14px;
  background:rgba(9,13,15,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  overflow:hidden; text-align:left;
}
.tl-lobby-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--tl-line);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tl-faint);
}

.tl-lob-row{
  display:flex; align-items:center; gap:11px;
  padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .16s ease;
}
.tl-lob-row:last-child{ border-bottom:0; }
.tl-lob-row:hover{ background:rgba(255,255,255,.035); }

/* Every room on this board is Clash Royale, so the art lives in CSS rather than
   being stamped onto each row — landing.js builds these rows from scratch. */
.tl-lob-art{
  flex:none; width:34px; height:34px; border-radius:8px;
  background:#0b0e10 url("cr.jpg") center / cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
}
.tl-lob-who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tl-lob-who b{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--tl-sand);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Stand-in for the arena's hash-coloured host avatar; colour is set per row. */
.tl-lob-av{
  flex:none; display:grid; place-items:center;
  width:17px; height:17px; border-radius:5px;
  font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0;
}
.tl-lob-who b em{ font-style:normal; font-weight:600; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tl-smoke); }
.tl-lob-who i{
  display:flex; align-items:center; gap:6px;
  font-style:normal; font-size:11px; color:var(--tl-smoke);
}
.tl-lob-dot{ width:6px; height:6px; border-radius:50%; background:var(--tl-live);
  animation:tl-pd-pulse 2.2s ease-out infinite; }
.tl-lob-dot.busy{ background:rgba(255,255,255,.42); animation:none; }

.tl-lob-count{ flex:none; margin-right:6px; font-size:11px; color:var(--tl-smoke); }

/* Stake is the headline figure: fixed rung label over the exact SOL that moves. */
.tl-lob-stake{ flex:none; min-width:64px; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.tl-lob-stake b{ font-size:14px; font-weight:800; color:var(--tl-sand); line-height:1; }
.tl-lob-stake i{ font-style:normal; font-size:10px; color:var(--tl-faint); }

.tl-lob-act{
  flex:none; min-width:62px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:7px 12px; border-radius:8px;
  color:var(--tl-live); border:1px solid rgba(116,224,140,.4);
  background:rgba(116,224,140,.08);
}
/* An in-game row isn't actionable, but keeps the box so the column stays aligned. */
.tl-lob-act.ghost{ color:var(--tl-smoke); border-color:var(--tl-line); background:transparent; }

@keyframes tl-pd-pulse{
  0%{ box-shadow:0 0 0 0 rgba(116,224,140,.55); }
  70%,100%{ box-shadow:0 0 0 7px rgba(116,224,140,0); }
}

.tl-arena-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(16px,2.4vh,24px);
  font-family:"Chakra Petch",system-ui,sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-size:14px;
  color:#0a1310; padding:14px 26px; border-radius:12px;
  background:linear-gradient(150deg,var(--tl-live),#3fae60);
  box-shadow:0 12px 34px -12px rgba(116,224,140,.5);
  transition:filter .15s ease, transform .12s ease;
}
.tl-arena-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.tl-arena-foot{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; font-size:12px; color:var(--tl-faint);
}
/* Rocket League's Coming Soon hook, demoted to a footnote now the panel leads
   with the live Clash Royale lobby. Keeps the [data-soon] binding alive. */
.tl-arena-next{
  font:inherit; color:var(--tl-steel); cursor:pointer;
  padding:5px 11px; border-radius:20px;
  border:1px solid var(--tl-line); background:rgba(9,13,15,.7);
  transition:color .16s, border-color .16s;
}
.tl-arena-next:hover{ color:var(--tl-gold); border-color:rgba(242,193,78,.45); }

/* Stacked below 900px: the panels become two near-full screens you scroll. */
@media (max-width:900px){
  #tl-split{ grid-template-columns:1fr; gap:14px; }
  .tl-half{ min-height:86vh; }
  .tl-half-in{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  /* Kill the hover push-in, but KEEP each panel's base scale. The arena art is
     blurred, and the overscale is what holds its soft edges outside the panel —
     dropping to scale(1) would pull a feathered border into view. */
  .tl-half-art{ transition:none; }
  .tl-half-fps:hover .tl-half-art{ transform:scale(1.04); }
  .tl-half-arena:hover .tl-half-art{ transform:scale(1.12); }
  .tl-lob-dot{ animation:none; }
}

/* Coming Soon modal — blurred backdrop, click off to dismiss. */
.tl-soon-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:22px; }
.tl-soon-modal[hidden]{ display:none; }
.tl-soon-bk{ position:absolute; inset:0; background:rgba(4,6,7,.74); backdrop-filter:blur(6px); }
.tl-soon-card{ position:relative; z-index:2; width:min(440px,100%); background:linear-gradient(180deg,#12171b,#0b0e10); border:1px solid rgba(242,193,78,.32); border-radius:20px; padding:28px; box-shadow:0 40px 100px -24px rgba(0,0,0,.85); text-align:left; }
.tl-soon-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:9px; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#c3ccd1; font-size:14px; }
.tl-soon-eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--tl-gold); }
.tl-soon-card h2{ margin:12px 0 4px; font-family:"Chakra Petch",system-ui,sans-serif; font-weight:800; text-transform:uppercase; font-size:22px; color:var(--tl-sand); }
.tl-soon-card p{ color:var(--tl-steel); font-size:13px; line-height:1.55; margin:0 0 18px; }
.tl-soon-card p b{ color:var(--tl-sand); }
.tl-soon-ok{ width:100%; cursor:pointer; border:0; border-radius:11px; padding:14px; font-family:"Chakra Petch",system-ui,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:15px; color:#12100a; background:linear-gradient(150deg,var(--tl-gold),var(--tl-gold-deep)); }

/* ══════════════════════════════════════════════════════════════════════════
   "TOO SLOW" SHEET — the popup a demo/bot room produces on Join.
   Values lifted from the arena's Sheet + PressButton (C:\Trench-arena,
   src/components/arena/Sheet.tsx, PressButton.tsx, styles.css) so the landing
   page's version of this moment is the same object the player meets one screen
   later: bottom sheet on mobile, centred modal from 640px up.
   ══════════════════════════════════════════════════════════════════════════ */
.tl-sheet{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
}
.tl-sheet[hidden]{ display:none; }
@media (min-width:640px){ .tl-sheet{ align-items:center; } }

.tl-sheet-bk{
  position:absolute; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:tl-sheet-bk-in .22s ease-out both;
}
@keyframes tl-sheet-bk-in{ from{ opacity:0; } to{ opacity:1; } }

.tl-sheet-card{
  position:relative; z-index:2;
  width:100%; max-height:92vh; overflow-y:auto;
  box-sizing:border-box;
  padding:20px 20px 32px;
  background:var(--tl-panel);              /* #141a1e — arena --surface */
  border:1px solid var(--tl-line);         /* #2a333a — arena --border  */
  border-radius:12px 12px 0 0;             /* --radius-2xl on mobile    */
  text-align:left;
  /* Spring-ish slide up, matching the arena's {stiffness:340,damping:30}. */
  animation:tl-sheet-in .34s cubic-bezier(.16,1.02,.3,1) both;
}
@media (min-width:640px){
  .tl-sheet-card{ max-width:448px; border-radius:8px; padding-bottom:20px; }
}
@keyframes tl-sheet-in{
  from{ transform:translateY(100%); opacity:.6; }
  to{ transform:translateY(0); opacity:1; }
}

/* Grab handle: mobile affordance only, exactly as the arena hides it at sm. */
.tl-sheet-grab{
  display:block; width:40px; height:4px; margin:0 auto 16px;
  border-radius:999px; background:#3a4650;
}
@media (min-width:640px){ .tl-sheet-grab{ display:none; } }

.tl-sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.tl-sheet-head h2{
  margin:0; font-family:"Chakra Petch",system-ui,sans-serif;
  /* Sentence case, NOT the uppercase this page uses elsewhere — the arena's
     wording is a spoken apology and shouting it changes the tone. */
  font-size:18px; line-height:1.55; font-weight:700; letter-spacing:-.025em;
  text-transform:none; color:var(--tl-sand);
}
.tl-sheet-x{
  flex:none; width:48px; height:48px; display:grid; place-items:center;
  border-radius:8px; border:1px solid var(--tl-line); background:transparent;
  color:var(--tl-steel); font-size:14px; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.tl-sheet-x:hover{ color:var(--tl-sand); border-color:#3a4650; }

.tl-sheet-body{ margin:0; font-size:14px; line-height:1.625; color:var(--tl-steel); }

.tl-sheet-acts{ display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.tl-sheet-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box; min-height:48px; padding:0 20px;
  border:0; border-radius:999px; cursor:pointer;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-.025em; text-transform:none;
  transition:filter .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.tl-sheet-btn:active{ transform:scale(.96); }
/* Gold is the arena's single primary — same gradient, same shadow. */
.tl-sheet-btn.primary{
  min-height:52px; color:#0b0e10;
  background:linear-gradient(180deg,#ffd97a,#f2c14e 55%,#e0ad35);
  box-shadow:0 14px 34px -12px rgba(242,193,78,.85);
}
.tl-sheet-btn.primary:hover{ filter:brightness(1.04); }
.tl-sheet-btn.muted{
  border:1px solid rgba(255,255,255,.10); background:transparent; color:rgba(255,255,255,.55);
}
.tl-sheet-btn.muted:hover{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.85); }

@media (prefers-reduced-motion:reduce){
  .tl-sheet-card{ animation:tl-sheet-bk-in .2s ease-out both; }
  .tl-sheet-btn:active{ transform:none; }
}

/* The Join control is a real button now that it opens the sheet. */
button.tl-lob-act{ font-family:inherit; cursor:pointer; }
button.tl-lob-act:hover{ background:rgba(116,224,140,.16); border-color:rgba(116,224,140,.6); }

/* ── Live board sizing ─────────────────────────────────────────────────────
   Rows are a fixed height and the viewport clips to exactly four of them, so
   the panel never resizes as the simulation churns — otherwise every spawn
   would re-centre the whole column under it. It also lets landing.js do its
   reorder animation without measuring: a row that moved up k slots starts at
   translateY(k x row-height) and transitions home. */
.tl-lobby{ --tl-lob-h:53px; }
.tl-lobby-rows{ height:calc(var(--tl-lob-h) * 4); overflow:hidden; }
.tl-lob-row{ height:var(--tl-lob-h); box-sizing:border-box; }

/* A room being posted: slides in, then a gold edge fades out over 1.6s. That
   flash is the arena's own isNew treatment (MatchRow), wired up here because a
   new room arriving at the top is the board's most watchable moment. */
/* Animations, not transitions, and every one of them fill:both — a transition
   needs a second frame to run toward, and requestAnimationFrame is frozen in a
   background tab, which would leave a row parked on its start state. */
.tl-lob-row.tl-lob-enter{ animation:tl-lob-in .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes tl-lob-in{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:none; }
}
.tl-lob-row.tl-lob-move{ animation:tl-lob-move .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes tl-lob-move{
  from{ transform:translateY(var(--tl-shift,0)); }
  to{ transform:none; }
}
.tl-lob-row.tl-lob-new{ position:relative; }
.tl-lob-row.tl-lob-new::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--tl-gold); animation:tl-lob-flash 1.6s ease-out forwards;
}
@keyframes tl-lob-flash{ from{ opacity:1; } to{ opacity:0; } }

/* Honest about the truncation: the header counts the whole board, the panel
   only has room for four of it. */
.tl-lobby-more{
  padding:7px 14px; border-top:1px solid rgba(255,255,255,.05);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tl-faint);
  text-align:center;
}
.tl-lobby-more[hidden]{ display:none; }

/* Tabular figures so the live count and pot total don't jitter in width as
   they change — the arena uses the same trick on its header numbers. */
.tl-arena-pill b{
  font-weight:700; color:var(--tl-sand);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}

@media (prefers-reduced-motion:reduce){
  .tl-lob-row.tl-lob-enter,
  .tl-lob-row.tl-lob-move{ animation:none; }
  .tl-lob-row.tl-lob-new::before{ animation:none; opacity:0; }
}