/* The Dark Tides Treasury — claim pages and the Treasury itself.
   Own `trs-` namespace, matching the house convention (soc-, adm-, brick-).
   Tokens inherit the site palette; rarity only ever sets --accent, so a new
   rarity is a database row and never a stylesheet edit. */

.trs-body{
  --ink:#050709; --ink-2:#07121C; --panel:#0B1B27;
  --gold:#C89B3C; --gold-lt:#E3BE72; --parch:#D7B77A; --cream:#E8DEC9;
  --dim:#9DA7AE; --hair:rgba(200,155,60,.28); --hair-soft:rgba(255,255,255,.09);
  --display:'Cinzel',Georgia,'Times New Roman',serif;
  --pad:clamp(18px,5vw,56px);
  margin:0;background:var(--ink);color:var(--cream);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
.trs-body *,.trs-body *::before,.trs-body *::after{box-sizing:border-box}
.trs-body h1,.trs-body h2,.trs-body h3{
  margin:0;font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:.012em}
.trs-body img{max-width:100%;display:block}

.trs-skip{position:absolute;left:-9999px;top:0;z-index:80;
  padding:12px 18px;background:var(--gold);color:#0b0b0b;font-weight:600}
.trs-skip:focus{left:0}
.trs-body :where(a,button,input):focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:2px}

/* ── chrome ─────────────────────────────────────────────────────────── */
.trs-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px var(--pad);border-bottom:1px solid var(--hair-soft);
  background:rgba(5,7,9,.96)}
.trs-brand{text-decoration:none;display:block}
.trs-brand__name{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(13px,2.4vw,17px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);white-space:nowrap}
.trs-brand__tag{display:block;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.trs-nav__link{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--dim);white-space:nowrap}
.trs-nav__link:hover{color:var(--gold-lt)}
.trs-foot{padding:40px var(--pad);border-top:1px solid var(--hair-soft);
  text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.trs-foot a{color:var(--parch);text-decoration:none}
.trs-foot span{display:block;margin-top:6px;font-style:italic;
  text-transform:none;letter-spacing:.04em;color:var(--dim)}

.trs-kicker{margin:0 0 10px;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.trs-dim{color:var(--dim)}
.trs-lead{margin:14px auto 0;max-width:52ch;font-size:clamp(15px,2.2vw,17px);color:#CFC7B6}

/* ── buttons: 44px floor everywhere, this is a phone-first page ──────── */
.trs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 clamp(20px,4vw,30px);border-radius:2px;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid var(--gold);transition:transform .2s,box-shadow .2s,background-color .2s}
.trs-btn--lg{min-height:56px;font-size:14px}
.trs-btn--wide{width:100%}
.trs-btn--gold{color:#120d05;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 52%,#A97D28);
  box-shadow:0 2px 20px rgba(200,155,60,.2),inset 0 1px 0 rgba(255,240,205,.55)}
.trs-btn--gold:hover:not(:disabled){transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(200,155,60,.38)}
.trs-btn--ghost{color:var(--cream);background:rgba(6,10,14,.6);border-color:var(--hair)}
.trs-btn--ghost:hover{border-color:var(--gold);color:#fff}
.trs-btn:disabled{opacity:.6;cursor:default}
.trs-linkbtn{background:none;border:0;padding:0;color:var(--parch);
  font:inherit;text-decoration:underline;cursor:pointer}
.trs-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* ── the coin ────────────────────────────────────────────────────────── */
.trs-token{margin:0 auto;text-align:center}
.trs-token__disc{display:grid;place-items:center;margin:0 auto;
  width:clamp(180px,52vw,260px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 38% 32%,#1A222B,#080C11 70%);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.65),
             0 0 46px color-mix(in srgb,var(--accent) 22%,transparent)}
.trs-token__disc img,.trs-token__disc svg{width:100%;height:100%;object-fit:cover;border-radius:50%}
.trs-token__placeholder{display:block;width:100%;height:100%}
.trs-token__serial{margin-top:14px;font-family:var(--display);font-size:15px;
  letter-spacing:.2em;color:var(--parch)}

.trs-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 10px}
.trs-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:2px;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 82%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.trs-chip--quiet{color:var(--dim);border-color:var(--hair-soft);background:none}

/* ── claim page ──────────────────────────────────────────────────────── */
.trs-claim{padding:clamp(28px,6vw,60px) var(--pad) 64px}
.trs-loading,.trs-state,.trs-offer,.trs-success{max-width:640px;margin:0 auto;text-align:center}
.trs-offer h1,.trs-success h1,.trs-state h1{margin-top:6px;
  font-size:clamp(28px,7vw,46px);text-transform:uppercase}
.trs-series{margin:10px 0 0;font-family:var(--display);font-size:14px;
  letter-spacing:.08em;color:var(--parch)}
.trs-edition{margin:18px 0 0;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.trs-edition b{color:var(--cream)}
.trs-edition em{color:var(--gold-lt);font-style:normal}
.trs-serial-line{margin:14px 0 0;font-family:var(--display);
  font-size:clamp(17px,4vw,22px);letter-spacing:.16em;color:var(--gold-lt)}
.trs-fine{margin:14px 0 0;font-size:12px;color:var(--dim)}

.trs-form{margin:30px auto 0;max-width:420px;text-align:left;
  padding:clamp(20px,4vw,28px);border:1px solid var(--hair);border-radius:3px;
  background:linear-gradient(180deg,rgba(11,27,39,.9),rgba(7,18,28,.9))}
.trs-form__head{font-size:clamp(17px,3.4vw,21px);margin-bottom:6px}
.trs-field{margin:18px 0 16px}
.trs-field label{display:block;margin-bottom:7px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--parch)}
.trs-field input{width:100%;min-height:50px;padding:0 14px;
  border:1px solid var(--hair-soft);border-radius:2px;
  background:#060A0E;color:var(--cream);font:inherit;font-size:16px}
.trs-field input:focus{border-color:var(--gold);outline:none}
.trs-field input[aria-invalid="true"]{border-color:#A95747}
.trs-err{margin:8px 0 0;font-size:12.5px;color:#E08D7A}
.trs-err--block{margin-top:18px}

.trs-facts{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;
  margin:26px 0 0;padding:20px 0;border-top:1px solid var(--hair-soft);
  border-bottom:1px solid var(--hair-soft)}
.trs-facts div{text-align:center}
.trs-facts dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.trs-facts dd{margin:4px 0 0;font-family:var(--display);font-size:14px;color:var(--cream)}

/* ── treasury page ───────────────────────────────────────────────────── */
.trs-page{padding:clamp(28px,6vw,56px) var(--pad) 72px}
.trs-page__in{max-width:1180px;margin:0 auto}
.trs-hero{text-align:center;margin-bottom:clamp(34px,6vw,56px)}
.trs-hero h1{font-size:clamp(32px,8vw,58px);text-transform:uppercase}
.trs-section{margin-top:clamp(36px,6vw,60px)}
.trs-section__head{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--hair-soft)}
.trs-section__head h2{font-size:clamp(20px,4vw,28px);text-transform:uppercase;letter-spacing:.06em}
.trs-section__head p{margin:6px 0 0;font-size:13.5px}

.trs-tally{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.trs-tally div{flex:1 1 96px;padding:12px 14px;border:1px solid var(--hair-soft);
  border-radius:2px;background:rgba(11,27,39,.55);text-align:center}
.trs-tally__total{border-color:var(--hair)!important}
.trs-tally dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.trs-tally dd{margin:5px 0 0;font-family:var(--display);font-size:21px;color:var(--cream)}

.trs-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.4vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.trs-card{padding:20px 16px 22px;border:1px solid var(--hair-soft);border-radius:3px;
  background:linear-gradient(180deg,rgba(11,27,39,.8),rgba(7,12,17,.8));text-align:center}
.trs-card.is-owned{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.trs-card.is-locked{opacity:.62}
.trs-card__disc{display:grid;place-items:center;margin:0 auto 14px;
  width:clamp(110px,26vw,140px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 38% 32%,#18202A,#070B10 70%);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.trs-card__disc img,.trs-card__disc svg{width:100%;height:100%;object-fit:cover;border-radius:50%}
.trs-card__disc.is-locked{filter:grayscale(.7) brightness(.6)}
.trs-card h3{margin:8px 0 0;font-size:16px}
.trs-card__series{margin:5px 0 0;font-size:11px;letter-spacing:.1em;color:var(--dim)}
.trs-card__serial{margin:9px 0 0;font-family:var(--display);font-size:14px;
  letter-spacing:.14em;color:var(--gold-lt)}
.trs-card__meta,.trs-card__state{margin:7px 0 0;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.trs-card__state{color:var(--parch)}

.trs-empty{padding:38px 20px;border:1px dashed var(--hair-soft);border-radius:3px;
  text-align:center;background:rgba(11,27,39,.4)}
.trs-empty p{margin:0 0 8px}
.trs-empty .trs-btn{margin-top:16px}

@media(max-width:560px){
  .trs-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .trs-actions .trs-btn{flex:1 1 100%}
  .trs-brand__tag{display:none}
}

@media(prefers-reduced-motion:reduce){
  .trs-body *{animation:none!important;transition:none!important}
  .trs-btn:hover{transform:none!important}
}

/* ── the two-sided coin ───────────────────────────────────────────────
   A real coin has two faces. The flip is a rotation, not a fade, because
   that is what a coin does — but under prefers-reduced-motion it becomes a
   cross-fade, since a spinning object is exactly what that setting is for. */
.trs-token--2up{perspective:1200px}
.trs-coin{display:block;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;
  width:clamp(180px,52vw,260px);aspect-ratio:1;border-radius:50%}
.trs-coin:focus-visible{outline:2px solid var(--gold-lt);outline-offset:8px}
.trs-coin__inner{position:relative;display:block;width:100%;height:100%;
  transition:transform .7s cubic-bezier(.4,.16,.2,1);transform-style:preserve-3d}
/* Click and keyboard only. An earlier version also flipped on hover, which
   fought the pressed state — after a click the pointer is still over the coin,
   so it landed on rotateY(360deg) and showed the front again. It also meant a
   mouse crossing the page spun the coin by accident. */
.trs-coin[aria-pressed="true"] .trs-coin__inner{transform:rotateY(180deg)}
.trs-coin:hover .trs-coin__inner{transform:rotateY(6deg)}
.trs-coin[aria-pressed="true"]:hover .trs-coin__inner{transform:rotateY(174deg)}
.trs-coin__side{position:absolute;inset:0;display:block;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:50%;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.7))
         drop-shadow(0 0 34px color-mix(in srgb,var(--accent) 26%,transparent))}
.trs-coin__side--back{transform:rotateY(180deg)}
.trs-coin__side img{width:100%;height:100%;object-fit:contain}
.trs-token__hint{margin:10px 0 0;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-align:center}

/* The artwork carries its own rim and shadow, so the plain disc frame that
   the SVG placeholder needs would only box it in. */
.trs-token__disc:has(img){background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
.trs-token__disc:has(img) img{object-fit:contain;border-radius:0;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.7))
         drop-shadow(0 0 34px color-mix(in srgb,var(--accent) 26%,transparent))}
.trs-card__disc:has(img){background:none;border:0;overflow:visible}
.trs-card__disc:has(img) img{object-fit:contain;border-radius:0;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}

@media(hover:none){
  .trs-coin:hover .trs-coin__inner{transform:none}
  .trs-coin[aria-pressed="true"]:hover .trs-coin__inner{transform:rotateY(180deg)}
  .trs-coin[aria-pressed="true"] .trs-coin__inner{transform:rotateY(180deg)}
}
@media(prefers-reduced-motion:reduce){
  .trs-coin__inner{transition:none}
  .trs-coin[aria-pressed="true"] .trs-coin__inner,
  .trs-coin:hover .trs-coin__inner,
  .trs-coin[aria-pressed="true"]:hover .trs-coin__inner{transform:none}
  .trs-coin__side{backface-visibility:visible;transition:opacity .2s}
  .trs-coin__side--back{transform:none;opacity:0}
  .trs-coin[aria-pressed="true"] .trs-coin__side--front{opacity:0}
  .trs-coin[aria-pressed="true"] .trs-coin__side--back{opacity:1}
}