/* =========================================================
   Trench Pals page — DARK THEME, Solana colours.
   Loads on top of style.css and only ever applies inside
   body.page-trench, so nothing here leaks to index.html,
   gpunks.html or any shared component.
   The site's light custom properties (--bg, --surface, --ink,
   --line, --green …) are redefined on body.page-trench, which
   turns every inherited style.css rule dark in one place.
   Pixel styling stays: hard corners, 3px borders, stepped
   offset shadows, banded Solana gradients, pixelated art.
   On dark a black offset shadow disappears, so the steps are
   Solana purple instead.
   ========================================================= */

/* ---------- palette ---------- */
body.page-trench {
  /* Solana accents */
  --sol-purple: #9945ff;
  --sol-purple-hi: #b071ff;         /* hover / brighter step */
  --sol-purple-ink: #c79bff;        /* purple text on dark — 8.8:1 */
  --sol-purple-soft: rgba(153, 69, 255, .17);
  --sol-green: #14f195;
  --sol-green-ink: #14f195;         /* green text on dark — 13:1 */
  --sol-green-deep: #062b1c;        /* ink on a green fill */
  --sol-green-soft: rgba(20, 241, 149, .15);

  /* pixel chrome */
  --px-line: #7e76b5;               /* 3px card borders — 3.9:1 on --surface */
  --px-line-2: #333b55;             /* dividers, dashed rules */
  --px-sh: #6d3ac2;                 /* stepped offset shadow */
  --px-sh-hi: #9945ff;              /* stepped shadow, feature blocks */

  /* dark rewrite of the shared tokens from style.css */
  --bg: #0b0d12;
  --surface: #141824;
  --surface-2: #1b2030;
  --ink: #f2f4f8;
  --ink-2: #aab3c5;                 /* 9.2:1 on --bg */
  --muted: #7b8499;                 /* 5.2:1 on --bg */
  --line: #232838;
  --line-2: #2e3448;
  --green: var(--sol-green);        /* focus rings, .dot, brand tick */
  --green-ink: var(--sol-purple-ink);
  --green-soft: var(--sol-purple-soft);
  --neon: var(--sol-green);
  --orange: var(--sol-purple-ink);
  --orange-soft: var(--sol-purple-soft);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 28px -16px rgba(0, 0, 0, .9);
  --shadow-lg: 0 2px 0 rgba(255, 255, 255, .04), 0 26px 60px -20px rgba(0, 0, 0, .95);

  background: var(--bg);
  color: var(--ink);
}
/* the canvas behind the page + native scrollbars / form controls */
html:has(body.page-trench) { background: #0b0d12; color-scheme: dark; }
body.page-trench { color-scheme: dark; }

body.page-trench ::selection { background: var(--sol-purple); color: #fff; }
body.page-trench :focus-visible { outline: 3px solid var(--sol-green); outline-offset: 3px; border-radius: 0; }
body.page-trench .skip-link { background: var(--sol-purple); color: #fff; border-radius: 0; }

body.page-trench { image-rendering: auto; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- shared chrome that hardcodes light colours ---------- */
body.page-trench .nav { background: rgba(11, 13, 18, .82); }
body.page-trench .nav.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 28px -20px #000; }
.page-trench .nav__links a { color: var(--ink-2); }
.page-trench .nav__links a:hover { background: var(--sol-purple-soft); color: var(--ink); }
.page-trench .nav__links a.is-active { color: var(--sol-purple-ink); background: var(--sol-purple-soft); }
body.page-trench .nav__menu { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
body.page-trench .nav__menu:hover { border-color: var(--px-line); }
body.page-trench .lang__btn { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
body.page-trench .lang__btn:hover { background: #222840; border-color: var(--px-line); }
body.page-trench .lang__menu { background: var(--surface); border-color: var(--px-line-2); }
body.page-trench .lang__menu li { color: var(--ink-2); }
body.page-trench .lang__menu li:hover { background: var(--sol-purple-soft); color: var(--ink); }
body.page-trench .lang__menu li.is-on { background: var(--sol-purple-soft); color: var(--sol-purple-ink); }
body.page-trench .mobile-menu { background: var(--bg); border-top-color: var(--line); }
body.page-trench .mobile-menu a { color: var(--ink); border-bottom-color: var(--line); }
body.page-trench .mobile-menu a:hover { color: var(--sol-purple-ink); }
body.page-trench .brand__word { color: var(--ink); }
body.page-trench .brand__word b { color: var(--sol-green); }

/* notice bar (hidden unless switched on in config) */
body.page-trench .notice { background: linear-gradient(90deg, #9945ff, #14f195); color: #0b0d12; border-bottom: 2px solid var(--sol-green); box-shadow: none; }
body.page-trench .notice--link:hover { background: linear-gradient(90deg, #a95cff, #3cf7a8); }
body.page-trench .notice__msg::after { color: #0b0d12; }

/* footer + toast */
body.page-trench .foot { border-top-color: var(--line); }
body.page-trench .sbtn { background: var(--surface); border: 2px solid var(--px-line); border-radius: 0; color: var(--ink); box-shadow: 3px 3px 0 var(--px-sh); }
body.page-trench .sbtn:hover { background: var(--sol-purple); border-color: var(--sol-purple); color: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--px-sh-hi); }
body.page-trench .toast { background: var(--surface); color: var(--ink); border: 2px solid var(--sol-purple); border-radius: 0; box-shadow: 4px 4px 0 var(--px-sh); }

/* page type */
.page-trench .kicker { color: var(--sol-purple-ink); }
.page-trench .kicker .dot { background: var(--sol-green); box-shadow: 0 0 0 4px var(--sol-green-soft); }
.page-trench .h2 { color: var(--ink); }
.page-trench .lede { color: var(--ink-2); }
.page-trench .fineprint { color: var(--muted); }

/* banded Solana gradient (hard stops = pixel bands) */
.sol-band { height: 8px; background: linear-gradient(90deg,
  #9945ff 0 12.5%, #8a5bff 12.5% 25%, #7a70ff 25% 37.5%, #6787ff 37.5% 50%, #52a1e9 50% 62.5%, #3dbcc9 62.5% 75%, #2ad6ad 75% 87.5%, #14f195 87.5% 100%); }

/* ---------- pixel buttons and cards ---------- */
.page-trench .btn--primary:not(.btn--px) { background: linear-gradient(180deg, #2ff7a7, #0fcf7d); color: var(--sol-green-deep); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -12px rgba(20, 241, 149, .8); }
.page-trench .btn--primary:not(.btn--px):hover { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 34px -12px rgba(20, 241, 149, .95); }
.page-trench .btn--ghost { background: var(--surface-2); border-color: var(--px-line); color: var(--ink); }
.page-trench .btn--ghost:hover { background: var(--sol-purple); border-color: var(--sol-purple); color: #fff; }

.btn--px { border-radius: 0; border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); background: var(--surface-2); color: var(--ink); transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; }
.btn--px:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--px-sh-hi); border-color: var(--sol-purple-hi); }
.btn--px:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--px-sh-hi); }
.btn--px.btn--primary { background: var(--sol-green); border-color: var(--sol-green); color: var(--sol-green-deep); box-shadow: 4px 4px 0 var(--px-sh-hi); }
.btn--px.btn--primary:hover { background: #3cf7ab; border-color: #3cf7ab; box-shadow: 2px 2px 0 var(--px-sh-hi); }
.btn--px.btn--primary:active { box-shadow: 0 0 0 var(--px-sh-hi); }
.btn--px.btn--purple { background: var(--sol-purple); border-color: var(--sol-purple); color: #fff; box-shadow: 4px 4px 0 #0f9c64; }
.btn--px.btn--purple:hover { background: var(--sol-purple-hi); border-color: var(--sol-purple-hi); box-shadow: 2px 2px 0 var(--sol-green); }
.btn--px.is-soon { opacity: .92; }

.px-card { background: var(--surface); border: 3px solid var(--px-line); border-radius: 0; box-shadow: 6px 6px 0 var(--px-sh); }
.px-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 2px solid var(--px-line); background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 700; box-shadow: 2px 2px 0 var(--px-sh); transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s; }
.px-chip:hover { border-color: var(--sol-purple-hi); box-shadow: 2px 2px 0 var(--px-sh-hi); }
.px-chip[aria-pressed="true"] { background: var(--sol-purple); border-color: var(--sol-purple); color: #fff; box-shadow: 2px 2px 0 var(--sol-green); }

/* ---------- hero ---------- */
.tp-hero { padding: clamp(24px, 5vw, 64px) 0 clamp(32px, 5vw, 64px); position: relative; overflow: hidden; }
.tp-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, #9945ff 0 25%, #6787ff 25% 50%, #2ad6ad 50% 75%, #14f195 75% 100%); z-index: 2; }
.tp-hero::after { content: ""; position: absolute; inset: -30% -10% auto; height: 620px; background: radial-gradient(ellipse at 28% 0%, rgba(153, 69, 255, .30), transparent 62%), radial-gradient(ellipse at 88% 10%, rgba(20, 241, 149, .16), transparent 60%); pointer-events: none; z-index: 0; }
.tp-hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.tp-title { display: block; width: min(100%, 520px); height: auto; margin: 10px 0 14px; }
.tp-tag { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 30px); color: var(--sol-green-ink); margin-bottom: 14px; letter-spacing: -.01em; }
.tp-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 26px; }
.tp-cta .btn { flex: 1 1 210px; max-width: 320px; }
.tp-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tp-facts li { background: var(--surface); border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); padding: 12px 8px; text-align: center; min-width: 0; }
.tp-facts b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 2.4vw, 24px); color: var(--sol-green-ink); }
.tp-facts span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tp-heroart { position: relative; }
.tp-heroart img { width: 100%; height: auto; display: block; border: 3px solid var(--px-line); box-shadow: 10px 10px 0 var(--sol-purple); }
.note--tp { position: absolute; right: -6px; top: -28px; font-family: var(--font-hand); font-size: clamp(20px, 2.4vw, 28px); color: var(--sol-purple-ink); transform: rotate(6deg); }

/* ---------- roller ---------- */
.tp-roll { display: grid; gap: clamp(22px, 4vw, 48px); align-items: center; }
.tp-roll__stage { display: grid; gap: 14px; justify-items: center; }
#rollCanvas { width: min(100%, 420px); height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 3px solid var(--px-line); box-shadow: 8px 8px 0 var(--px-sh-hi); background: #0f1320; transition: border-radius .25s; cursor: pointer; }
body.circle #rollCanvas { border-radius: 50%; box-shadow: 8px 8px 0 var(--sol-purple); }
.tp-roll__tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tp-roll__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 28px); margin-top: 4px; color: var(--ink); }
.tp-roll__sub { color: var(--sol-green-ink); margin-bottom: 14px; font-weight: 600; }
.tp-traits { display: grid; gap: 6px; }
.tp-trait { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); border: 2px solid var(--px-line-2); font-size: 14px; color: var(--ink); }
.tp-trait .k { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; width: 96px; flex: none; }
.tp-trait .v { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tp-trait .sw { width: 14px; height: 14px; border: 2px solid var(--px-line); flex: none; }

/* ---------- the drop ---------- */
.tp-stage { position: relative; background: var(--surface); border: 3px solid var(--px-line); box-shadow: 8px 8px 0 var(--sol-purple); padding: 0; margin: 26px 0 16px; overflow: hidden; }
.tp-stage__body { padding: 22px; }
.tp-stage__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tp-stage__n { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--sol-purple-ink); letter-spacing: .1em; text-transform: uppercase; }
.tp-stage__state { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border: 2px solid var(--sol-green); background: var(--sol-green-soft); color: var(--sol-green-ink); }
.tp-stage h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 4px; color: var(--ink); }
.tp-stage__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 4vw, 38px); line-height: 1.1; margin: 10px 0 2px; color: var(--ink); }
.tp-stage__price small { font-size: 14px; color: var(--muted); font-weight: 600; }
.tp-stage p { color: var(--ink-2); font-size: 14.5px; }
.tp-stage__rows { display: grid; gap: 6px; margin-top: 14px; }
.tp-stage__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-top: 2px dashed var(--px-line-2); padding-top: 6px; color: var(--ink-2); }
.tp-stage__rows b { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }

/* ---------- yearbook ---------- */
.tp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.tp-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0 0 18px; }
.tp-pal { background: var(--surface); border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); padding: 10px; display: grid; gap: 6px; justify-items: center; text-align: center; min-width: 0; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tp-pal:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--px-sh-hi); border-color: var(--sol-purple-hi); }
.tp-pal__art { width: 100%; max-width: 128px; aspect-ratio: 1; background-image: url("../img/trenchpals-pals.png"); background-size: 1000% 600%; image-rendering: pixelated; border: 2px solid var(--px-line); }
.tp-pal b { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; line-height: 1.2; overflow-wrap: anywhere; color: var(--ink); }
.tp-pal span { font-size: 11.5px; color: var(--muted); }
.tp-pal .tp-pal__n { font-size: 12px; font-weight: 800; color: var(--sol-purple-ink); border: 2px solid var(--sol-purple-ink); padding: 2px 8px; }
.tp-pal[hidden] { display: none; }
.tp-book__count { font-size: 13px; color: var(--muted); margin: -10px 0 14px; }

/* ---------- traits ---------- */
.tp-trgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 22px 0 8px; }
.tp-tr { background: var(--surface); border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); padding: 16px; }
.tp-tr b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-bottom: 6px; color: var(--sol-green-ink); }
.tp-tr span { font-size: 13.5px; color: var(--ink-2); }
.tp-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tp-swatches i { width: 18px; height: 18px; border: 2px solid var(--px-line); display: block; }

/* ---------- faq ---------- */
.tp-faqgrid { display: grid; gap: 10px; margin-top: 18px; }
.tp-faqgrid details { background: var(--surface); border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); padding: 0 18px; }
.tp-faqgrid details[open] { border-color: var(--sol-purple-hi); box-shadow: 4px 4px 0 var(--px-sh-hi); }
.tp-faqgrid summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-family: var(--font-display); font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.tp-faqgrid summary::-webkit-details-marker { display: none; }
.tp-faqgrid summary:hover { color: var(--sol-purple-ink); }
.tp-faqgrid summary::after { content: "+"; color: var(--sol-green-ink); font-weight: 900; }
.tp-faqgrid details[open] summary::after { content: "–"; color: var(--sol-purple-ink); }
.tp-faqgrid p { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; }

@media (min-width: 900px) {
  .tp-hero__grid { grid-template-columns: 1.1fr .9fr; }
  .tp-roll { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-trait .k { width: 80px; }
  .px-card { box-shadow: 5px 5px 0 var(--px-sh); }
  .tp-stage { box-shadow: 5px 5px 0 var(--sol-purple); }
  .tp-heroart img { box-shadow: 6px 6px 0 var(--sol-purple); }
  #rollCanvas { box-shadow: 6px 6px 0 var(--px-sh-hi); }
  body.circle #rollCanvas { box-shadow: 6px 6px 0 var(--sol-purple); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--px, .px-chip, .tp-pal { transition: none; }
  .btn--px:hover, .btn--px:active, .tp-pal:hover { transform: none; }
}

/* ---------- rarity tiers + trait tables (added with the layered traits) ---------- */
.page-trench .h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 2vw, 21px); margin: 34px 0 14px; color: var(--ink); }

.tp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin: 22px 0 26px; }
.tp-tier { background: var(--surface); border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); padding: 14px 12px; text-align: center; min-width: 0; }
.tp-tier b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.1; }
.tp-tier__name { display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-top: 4px; }
.tp-tier__pct { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tp-tier.Legendary { border-color: #ffd25e; box-shadow: 4px 4px 0 #8a6a12; } .tp-tier.Legendary .tp-tier__name { color: #ffd25e; }
.tp-tier.Epic      { border-color: #c9a6ff; box-shadow: 4px 4px 0 #5b3a9c; } .tp-tier.Epic .tp-tier__name { color: #c9a6ff; }
.tp-tier.Rare      { border-color: #8ec5ff; box-shadow: 4px 4px 0 #2f5ea0; } .tp-tier.Rare .tp-tier__name { color: #8ec5ff; }
.tp-tier.Uncommon  { border-color: #8ae57f; box-shadow: 4px 4px 0 #2f7a2a; } .tp-tier.Uncommon .tp-tier__name { color: #8ae57f; }
.tp-tier.Common    { border-color: #6a7488; box-shadow: 4px 4px 0 #333b4a; } .tp-tier.Common .tp-tier__name { color: #98a1b4; }

.tp-tierpill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border: 2px solid currentColor; margin-right: 6px; vertical-align: 2px; }
.tp-tierpill.Legendary { color: #ffd25e; } .tp-tierpill.Epic { color: #c9a6ff; } .tp-tierpill.Rare { color: #8ec5ff; }
.tp-tierpill.Uncommon { color: #8ae57f; } .tp-tierpill.Common { color: #98a1b4; }

.tp-tr__n { display: block; font-size: 12px; color: var(--sol-green); font-weight: 700; margin-bottom: 8px; }
.tp-tr__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.tp-tr__list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 3px; }
.tp-tr__list li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tp-tr__none { display: block; font-size: 11.5px; color: var(--muted); margin-top: 8px; }

.tp-rarest { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.tp-rare { background: var(--surface); border: 3px solid var(--px-line); box-shadow: 4px 4px 0 var(--px-sh); padding: 12px; min-width: 0; }
.tp-rare b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.tp-rare span { display: block; font-size: 11.5px; color: var(--muted); }
.tp-rare__n { color: var(--sol-purple-ink) !important; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .tp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-tier, .tp-rare { box-shadow: 3px 3px 0 var(--px-sh); }
}

/* ---------- mint progress bar (dark) ---------- */
.page-trench .mintbar { margin: 18px 0 4px; padding: 15px 17px; background: var(--surface-2); border: 3px solid var(--px-line); border-radius: 0; box-shadow: 4px 4px 0 var(--px-sh); max-width: 560px; }
.page-trench .mintbar[hidden] { display: none; }
.page-trench .mintbar__label { color: var(--sol-green); }
.page-trench .mintbar__pct { color: var(--ink); }
.page-trench .mintbar__track { height: 14px; border-radius: 0; background: #0d1018; border: 2px solid var(--px-line-2); overflow: hidden; }
.page-trench .mintbar__track i { border-radius: 0; background: linear-gradient(90deg, var(--sol-purple), var(--sol-green)); }
.page-trench .mintbar__foot { color: var(--muted); }
.page-trench .mintbar__foot b { color: var(--ink); }
.page-trench .mintbar.is-done .mintbar__label { color: var(--sol-purple-ink); }
.page-trench .mintbar.is-done .mintbar__track i { background: linear-gradient(90deg, var(--sol-green), var(--sol-purple)); }

/* the stage pill changes colour with the state */
.tp-stage__state.is-live { background: var(--sol-green); color: var(--sol-green-deep); border-color: var(--sol-green); }
.tp-stage__state.is-done { background: var(--sol-purple); color: #fff; border-color: var(--sol-purple); }