/* TOKEN CLUB v0.4 — standalone collectible page. Loaded after style.css; everything is scoped under body.tc
   so the older GoodCase-template rules stay as a fallback but lose on specificity. */
/* Ticket Tear type: Plus Jakarta Sans + JetBrains Mono, self-hosted Latin subsets (SIL OFL, licences in /fonts); Chinese falls back to PingFang */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/jetbrains-mono-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body.tc{
  --paper:#f2f0e9;--ink:#16150f;--muted:#76736a;--line:#d9d5c9;--accent:#e4572e;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sun:hsl(2,100%,73%),hsl(53,100%,69%) 6%,hsl(93,100%,69%) 12%,hsl(176,100%,76%) 18%,hsl(228,100%,74%) 24%,hsl(283,100%,73%) 30%,hsl(2,100%,73%) 36%;
  background:var(--paper) radial-gradient(#cfcabc 1px,transparent 1.3px) 0 0/18px 18px;color:var(--ink);
}
body.tc main{max-width:1320px;margin:0 auto;padding:0 28px}

/* ---------- top bar: floating pills like a ticket console ---------- */
body.tc .topbar{position:sticky;top:12px;z-index:20;height:auto;margin:12px auto 0;max-width:1320px;padding:8px 10px 8px 14px;border:1px solid var(--line);border-radius:999px;background:#fbfaf6e6;backdrop-filter:blur(10px);box-shadow:0 6px 20px -14px #0006}
body.tc .brand{gap:12px}
body.tc .brand .back{font:11px var(--mono);letter-spacing:.6px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff}
body.tc .brand .back:hover{color:var(--ink);border-color:var(--ink)}
body.tc .brand .wordmark{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;letter-spacing:.5px}
body.tc .brand .wordmark i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #e4572e2b;animation:tk-pulse 2.4s ease-in-out infinite}
body.tc .topbar nav button,body.tc .topbar>.text-button{border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 14px;font-size:12px}
body.tc .topbar nav button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- hero ---------- */
body.tc .hero{border:0;padding:46px 0 30px;min-height:470px}
body.tc .hero .eyebrow{font:11px var(--mono);letter-spacing:1.4px;color:var(--muted)}
body.tc .hero h1{font-weight:900;letter-spacing:-1px}
body.tc .hero h1>span:not(.hero-star):before{background:linear-gradient(90deg,#ffb3a6,#ffe58f,#b8f5c8,#a8e6ff);opacity:.75}
body.tc .hero-caption{font:10px var(--mono);letter-spacing:1px}
body.tc .hero-cards{height:430px}
body.tc .hero-card{width:236px;height:auto;aspect-ratio:.63;box-shadow:none;border-radius:14px;background:none}
body.tc .hero-card-0{transform:translateX(-104%) rotate(-11deg);top:40px}
body.tc .hero-card-1{transform:translateX(-50%) translateY(-6px);top:10px;z-index:3}
body.tc .hero-card-2{transform:translateX(4%) rotate(11deg);top:44px}
body.tc .hero-card:hover{z-index:4}
body.tc .summary-bar,body.tc .collection-bar{background:#fbfaf6;border:1px solid var(--line);border-radius:18px;padding:16px 22px;margin:14px 0}
body.tc .catalog{--paper:#fbfaf6;background:#fbfaf6;border:1px solid var(--line);border-radius:22px;padding:26px 26px 30px;margin:18px 0 30px}
body.tc .type-row button,body.tc .category-row button,body.tc .filters button,body.tc [data-layout]{border-radius:999px}

/* ---------- grid: smaller cards, more per row ---------- */
body.tc .card-grid{grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:24px 16px}
/* height follows content (see grid cards below); a fixed ratio sized for the densest card left most tickets with a tall empty emblem */
body.tc .card-flip{aspect-ratio:auto;border-radius:14px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
body.tc .card-flip:hover{transition-duration:.08s}
body.tc .card-front,body.tc .card-back{border:0;outline:0;border-radius:14px;box-shadow:0 1px 0 #fff inset,0 14px 24px -16px #0007,0 2px 5px -2px #0003;background:none;padding:0}
body.tc .card-caption{font:10px var(--mono);color:var(--muted);margin:9px 2px 6px}
body.tc .action-pair .collect-button{padding:7px 4px;font-size:10.5px}
/* actions read as ticket-console pills, not the old green blocks */
body.tc .collect-button{display:block;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);padding:8px 10px;min-height:0;font-size:11px;font-weight:600;text-align:center;text-decoration:none}
body.tc .collect-button:hover{background:#16150f0f}
body.tc .collect-button.record{background:var(--ink);color:#fbfaf6}
body.tc .collect-button.go-use{border-color:var(--ink)!important;color:var(--ink)!important}
body.tc .collect-button.record:hover{background:#34322a}
body.tc .collect-button:disabled{opacity:.4;cursor:not-allowed}
body.tc .claim-stamp{border:1.5px dashed var(--accent);border-radius:999px;color:var(--accent);background:#e4572e0d;transform:rotate(-1.5deg);min-height:34px}
body.tc .claim-stamp:hover{background:#e4572e1a}

/* ---------- the ticket ---------- */
.tk{--stock:linear-gradient(160deg,#fffefb 0%,#f7f5ef 55%,#efece4 100%);--tk-ink:#17160f;--tk-sub:#6d6a60;--tk-rule:#1716101f;--foil-op:0;--glare-op:0;--emblem-stroke:url(#tk-laser);
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:var(--stock);color:var(--tk-ink);
  border:1px solid #0000001a;font-family:'Plus Jakarta Sans','PingFang SC','Helvetica Neue',sans-serif;isolation:isolate}
.tk:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background:conic-gradient(from calc(var(--seed,0) * 1deg) at 70% 20%,#ffd1dc,#fff3c4,#d2ffe6,#cfeeff,#ffd1dc)}
.tk>*{position:relative;z-index:1}
.tk-strip{display:flex;justify-content:space-between;gap:6px;padding:5px 10px;font:7.5px/1.2 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:#1b1a14;
  background:repeating-linear-gradient(100deg,var(--sun));background-size:240% 100%;background-position:var(--mx,40%) 0;white-space:nowrap;overflow:hidden}
.tk-strip span{overflow:hidden;text-overflow:ellipsis}
.tk-strip.bottom{padding:0;height:6px;margin-top:auto}
/* content keeps its natural height; only the emblem gives way, so dense cards never clip text */
.tk>*{flex-shrink:0}
.tk-emblem{flex:1 1 0;min-height:28px;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;margin:6px 10px 0;border-bottom:1px dashed var(--tk-rule)}
/* platform name centred under the logo; wraps instead of truncating */
.tk-name{max-width:100%;padding:1px 14px 5px;font-size:11px;line-height:1.25;font-weight:800;letter-spacing:.2px;text-align:center;text-wrap:balance;color:var(--tk-ink)}
/* security-paper guilloche behind the seal, tinted per provider so every card has its own ink */
.tk-emblem:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle,hsl(calc(var(--seed,0) * 1deg) 80% 52% / .2) 0 .7px,transparent 1px 4.5px);
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent)}
.tk-emblem .mark{position:absolute;font-size:8px;color:var(--tk-sub);opacity:.75}
.tk-emblem .m1{left:2px;top:4px}.tk-emblem .m2{right:2px;top:4px}.tk-emblem .m3{left:2px;bottom:4px}.tk-emblem .m4{right:2px;bottom:4px}
.tk-seal{position:relative;height:88%;min-height:0;max-height:150px;aspect-ratio:1;display:grid;place-items:center;container-type:inline-size}
.tk-seal:before{content:'';position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffe7a8aa 30%,#a8f0ff55 55%,transparent 70%);
  animation:tk-breathe 4.2s ease-in-out infinite;animation-delay:calc(var(--seed,0) * -12ms)}
.tk-seal svg{position:relative;width:100%;height:100%;overflow:visible;animation:tk-spin 80s linear infinite;animation-delay:calc(var(--seed,0) * -220ms)}
.tk-seal svg .rose,.tk-seal svg .ticks,.tk-seal svg .ring{fill:none;stroke:var(--emblem-stroke)}
.tk-seal svg .core{fill:#fffdf8;stroke:var(--emblem-stroke);stroke-width:1.2}
/* real platform logo in the white core (r=27 → 54% of the seal); a square tile at 38% still fits inside that circle */
/* floor of 22px: on the densest cards the seal shrinks to ~36px and the logo takes over the core instead of vanishing */
.tk-seal .logo{position:absolute;width:clamp(22px,38%,64px);height:clamp(22px,38%,64px);object-fit:contain;border-radius:22%;background:#fffdf8;
  animation:tk-breathe-text 4.2s ease-in-out infinite;animation-delay:calc(var(--seed,0) * -12ms)}
.tk-seal:has(.logo) svg .core{stroke-width:2.4}
.tk-seal .mono{position:absolute;font-weight:900;font-size:clamp(13px,8cqi,22px);letter-spacing:-.5px;color:#17160f;
  animation:tk-breathe-text 4.2s ease-in-out infinite;animation-delay:calc(var(--seed,0) * -12ms)}
/* laser sweep across the seal */
.tk-seal:after{content:'';position:absolute;inset:4%;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 35%,#fffffff2 48%,#ffffff00 60%) 0 0/260% 100%;animation:tk-sweep 5.5s ease-in-out infinite;animation-delay:calc(var(--seed,0) * -15ms)}
.tk-eyebrow{margin:7px 10px 0;font:7.5px var(--mono);letter-spacing:.9px;color:var(--tk-sub);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-amount{margin:1px 10px 0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tk-amount strong{font-size:21px;line-height:1.05;font-weight:900;letter-spacing:-.4px}
.tk-amount.pending strong{font-size:15px;color:var(--tk-sub)}
.tk-amount em{font:normal 9px var(--mono);padding:1px 5px;border:1px solid var(--tk-rule);border-radius:999px;background:#fff8}
.tk-title{margin:3px 10px 0;font-size:10.5px;line-height:1.35;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;margin:7px 10px 0;border:1px solid var(--tk-rule);border-radius:6px;overflow:hidden}
.tk-grid>div{padding:4px 6px 5px;min-width:0}
.tk-grid>div.wide{grid-column:1/-1;border-bottom:1px solid var(--tk-rule)}
.tk-grid>div.half.l{border-right:1px solid var(--tk-rule)}
.tk-grid dt{font:6.5px var(--mono);letter-spacing:.6px;color:var(--tk-sub);text-transform:uppercase;white-space:nowrap}
.tk-grid dd{margin:2px 0 0;font-size:9px;line-height:1.3;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-grid>div.wide dd{-webkit-line-clamp:unset;display:block;font-weight:500}
.tk-grid>div.half dd{-webkit-line-clamp:unset;display:block}
.tk-grid dd.urgent{color:var(--tk-accent,var(--accent))}
.tk-grid dd.muted{color:var(--tk-sub);font-weight:500}
.tk-chips{display:flex;flex-wrap:wrap;gap:3px;margin:6px 10px 0;padding:0;list-style:none}
/* every condition stays on the front (acceptance: no flipping); extra rows take space from the emblem */
.tk-chips li{font-size:8px;line-height:1.15;padding:2px 5px;border:1px solid var(--tk-rule);border-radius:4px;background:#ffffff8c;max-width:100%}
.tk-chips li.more{font-family:var(--mono);background:var(--tk-ink);color:var(--stock-ink-inverse,#fff);border-color:var(--tk-ink)}
.tk-perf{height:12px;margin:auto 0 0;position:relative;background:radial-gradient(circle,var(--tk-rule) 1.1px,transparent 1.5px) 5px 50%/8px 100% repeat-x}
.tk-perf:before,.tk-perf:after{content:'';position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--paper,#f2f0e9);transform:translateY(-50%);box-shadow:inset 0 0 0 1px #0000001a;z-index:3}
.tk-perf:before{left:-7px}.tk-perf:after{right:-7px}
.tk-stub{display:flex;gap:8px;align-items:center;padding:6px 10px 7px}
.tk-stub div{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
/* serial number in place of a code block: big mono digits behind a dashed rule, like a ticket stub */
.tk-no{flex:none;align-self:stretch;display:grid;place-items:center;padding-left:9px;border-left:1px dashed var(--tk-rule);font:800 22px/1 var(--mono);letter-spacing:-1.5px;color:var(--tk-ink);opacity:.85}
.tk-stub small{font:6.5px var(--mono);letter-spacing:.5px;color:var(--tk-sub);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-stub b{font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-stub b.go{color:var(--tk-accent,var(--accent))}

/* foil sits between the stock and the content so type never gets washed out; glare rides on top */
.tk-foil,.tk-glare{position:absolute!important;inset:0;pointer-events:none;border-radius:inherit}
.tk-foil{z-index:0!important;opacity:var(--foil-op);
  background:repeating-linear-gradient(45deg,#ffffff38 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,#ffffff38 0 1px,transparent 1px 4px),
    radial-gradient(circle at 23% 31%,#fff 0 .8px,transparent 1.3px) 0 0/9px 11px,radial-gradient(circle at 70% 64%,#fff 0 .7px,transparent 1.2px) 0 0/13px 7px,
    repeating-linear-gradient(112deg,var(--sun));
  background-size:auto,auto,9px 11px,13px 7px,420% 420%;background-position:0 0,0 0,0 0,0 0,var(--mx,50%) var(--my,50%);transition:opacity .3s}
.tk-glare{z-index:3!important;opacity:var(--glare-op);mix-blend-mode:soft-light;background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,30%),#fffffff2 6%,#ffffff55 26%,#0000002e 90%);transition:opacity .25s}
.card-flip:hover .tk,.hero-card:hover .tk{--glare-op:.7}

/* three editions, Ticket Tear style: the whole stock changes, and ink / rules / accent follow it.
   none + info = silver (not claimed yet, or not collectible); prism = claimed once (cobalt); gold = claimed more than once. */
.tk.tier-none,.tk.tier-info{--stock:linear-gradient(160deg,#fdfdfc 0%,#eef0f2 48%,#e2e5e9 100%);--tk-ink:#15171b;--tk-sub:#575d67;--tk-rule:#1b22301f;--tk-accent:#a8330e;--foil-op:.12}
.tk.tier-none .tk-foil,.tk.tier-info .tk-foil{background-image:repeating-linear-gradient(112deg,#ffffff 0%,#d9dde3 6%,#f6f7f9 12%,#cfd4dc 18%,#ffffff 24%,#e4d9f2 30%,#d6eef2 36%)}
.tk.tier-info{--emblem-stroke:url(#tk-silver)}
/* silver edition: chrome strips top and bottom; the laser seal is the only colour left on an unclaimed card */
.tk.tier-none .tk-strip,.tk.tier-info .tk-strip{background:linear-gradient(100deg,#e9e8e3,#c9c8c2 20%,#f7f6f1 38%,#bdbcb5 56%,#ecebe6 74%,#d0cfc8);background-size:300% 100%;background-position:var(--mx,40%) 0}
.tk.tier-info .tk-seal:before{background:radial-gradient(circle,#ffffff 0,#e9e7df99 40%,transparent 70%)}
.tk.tier-info .tk-emblem:before{background:repeating-radial-gradient(circle,#8a887f33 0 .7px,transparent 1px 4.5px)}
/* prism: midnight-navy stock (matches the reference UV ticket), magenta-cyan dichroic foil screened on top so it glows without washing out the white type */
.tk.tier-prism{--stock:radial-gradient(120% 70% at 18% 0%,#1d2852 0%,transparent 62%),linear-gradient(160deg,#151d3c 0%,#10152f 46%,#0a0d1e 100%);
  --tk-ink:#f5f7ff;--tk-sub:#b9c3f3;--stock-ink-inverse:#10152f;--tk-rule:#ffffff2e;--tk-accent:#ffa184;--foil-op:.1;--glare-op:.05}
.tk.tier-prism:before{opacity:.08}
.tk.tier-prism .tk-foil{mix-blend-mode:screen;background-image:repeating-linear-gradient(45deg,#ffffff1f 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,#ffffff1f 0 1px,transparent 1px 4px),radial-gradient(circle at 23% 31%,#fff 0 .7px,transparent 1.2px),radial-gradient(circle at 70% 64%,#fff 0 .6px,transparent 1.1px),
  repeating-linear-gradient(112deg,#2fd9ff 0%,#2a6bff 9%,#7fe9ff 17%,#2a50e8 25%,#ff5fd0 31%,#2fd9ff 36%)}
.tk.tier-prism .tk-strip{background:linear-gradient(100deg,#ff6fd6,#a77bff 25%,#5fe6ff 50%,#b86bff 75%,#ff6fd6);background-size:300% 100%;background-position:var(--mx,40%) 0;color:#0f1240}
.tk.tier-prism .tk-strip .type-dot{background:#0f1240}
.tk.tier-prism .tk-emblem:before{background:repeating-radial-gradient(circle,#9fb4ff38 0 .7px,transparent 1px 4.5px)}
.tk.tier-prism .tk-seal:before{background:radial-gradient(circle,#ffffffe6 0,#ff8ae866 30%,#5fe6ff44 54%,transparent 70%)}
.tk.tier-prism .tk-chips li,.tk.tier-prism .tk-amount em{background:#ffffff14;border-color:#ffffff38}
.tk.tier-prism .tk-grid{background:#0a134833}
/* gold: champagne gold-leaf stock (no black-and-gold), darker brown ink so small labels stay readable on the deepest gold stop */
.tk.tier-gold{--stock:linear-gradient(135deg,#fdf4d6 0%,#ecd28a 26%,#fff6d8 48%,#d9b45f 72%,#f7e8b8 100%);--tk-ink:#2a1d05;--tk-sub:#523d12;--tk-rule:#5a42103a;--tk-accent:#7a220a;--foil-op:.46;--glare-op:.12}
.tk.tier-gold .tk-foil{background-image:repeating-linear-gradient(45deg,#fff6 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,#fff6 0 1px,transparent 1px 4px),radial-gradient(circle at 23% 31%,#fff 0 .9px,transparent 1.4px),radial-gradient(circle at 70% 64%,#fff 0 .8px,transparent 1.3px),
  repeating-linear-gradient(112deg,#ffd29a 0%,#fff1a0 7%,#ffb9c0 14%,#cdf7b8 21%,#ffeaa6 28%,#ffd29a 35%)}
.tk.tier-gold .tk-strip{background:linear-gradient(100deg,#b8892c,#ffe9a6 22%,#c89a3a 44%,#fff4c9 66%,#a87a24 88%);background-size:300% 100%;background-position:var(--mx,40%) 0;color:#2a1d05}
.tk.tier-gold .tk-seal svg .core{fill:#fff6dc}
.tk.tier-gold .tk-chips li,.tk.tier-gold .tk-amount em{background:#fff8e080}
.tk.archived>*:not(.retired-stamp){filter:grayscale(.9) contrast(.92)}
/* style.css still carries the old flat-card tier rules (grayscale + fade on tier-none, stacked shadows,
   square border-image on holo); they match .tk too, so switch them off here */
body.tc .tk[class*=tier-]{filter:none;opacity:1;outline:0;box-shadow:none;border:1px solid #0000001a}
body.tc .tk[class*=tier-]:after{content:none}

/* type marks on the top strip so free/auto cards read differently at a glance */
.tk .type-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:0;background:#1b1a14}
.tk.type-auto_refresh .type-dot{background:#1f8a70}.tk.type-free_use .type-dot{background:#2c6fd1}
.tk.type-conditional .type-dot{background:#c98a14}.tk.type-paid_reward .type-dot{background:#9b9b9b}.tk.type-needs_review .type-dot{background:transparent;box-shadow:inset 0 0 0 1px #1b1a14}

/* stamps */
body.tc .stack-count{z-index:4;right:8px;bottom:auto;top:26px;background:#16150f;color:#fff;border:0;font:9px var(--mono)}
body.tc .retired-stamp{z-index:5;top:38%}
/* right/bottom:auto — style.css pins this badge bottom-right; with our left/top it stretched over the whole card */
body.tc .tk .stale-badge{position:absolute;left:8px;top:26px;right:auto;bottom:auto;z-index:4;font:7px var(--mono);border-radius:3px;white-space:nowrap}

/* ---------- back of the ticket: full facts ---------- */
body.tc .card-back{background:linear-gradient(160deg,#1a1913,#262419);color:#efece2;padding:0;display:flex;flex-direction:column}
.tk-back{display:flex;flex-direction:column;height:100%;padding:12px 12px 10px;gap:6px;overflow:auto;scrollbar-width:thin}
.tk-back .eyebrow{font:7px var(--mono);letter-spacing:1px;color:#b9b4a4;margin:0}
.tk-back h3{margin:0;font-size:15px}
.tk-back .scope{font-size:9.5px;line-height:1.45;margin:0;color:#e2ded2}
.tk-back ul{display:flex;flex-wrap:wrap;gap:3px;list-style:none;margin:0;padding:0}
.tk-back li{font-size:8px;padding:3px 5px;border:1px solid #ffffff2e;border-radius:4px}
.tk-back dl{margin:0;font-size:8.5px;line-height:1.5;display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
.tk-back dt{font:7px var(--mono);color:#b9b4a4;text-transform:uppercase;padding-top:1px;margin:0}
.tk-back dd{margin:0}
.tk-back .back-hint{margin-top:auto;font:7px var(--mono);color:#9f9a8b}

/* ---------- detail dialog: same paper + ink as the page, not the old green template ---------- */
body.tc dialog{border:1px solid var(--line);border-radius:22px;background:#fbfaf6}
body.tc dialog::backdrop{background:#16150fd0}
body.tc #detail-content{grid-template-columns:280px minmax(0,1fr)}
body.tc .detail-card{height:auto;aspect-ratio:.6}
body.tc .detail-info .eyebrow{font:11px var(--mono);letter-spacing:1.2px;color:var(--muted)}
body.tc .detail-amount{font:900 26px/1.1 'PingFang SC',sans-serif!important;color:var(--ink)!important;letter-spacing:-.4px}
body.tc .detail-info>p{color:var(--muted)}
body.tc .detail-info dt{font:10px var(--mono);letter-spacing:.6px;color:var(--muted)}
body.tc .condition-list span{border-color:var(--line);border-radius:999px;background:#fff;padding:4px 9px}
body.tc .level-hint{color:var(--ink)!important;background:#fff;border:1px dashed var(--accent);border-radius:12px}
body.tc .detail-actions .collect-button,body.tc .detail-actions a{border-radius:999px}

/* ---------- motion ---------- */
@keyframes tk-breathe{0%,100%{transform:scale(.9);opacity:.45}50%{transform:scale(1.06);opacity:1}}
@keyframes tk-breathe-text{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes tk-spin{to{transform:rotate(360deg)}}
@keyframes tk-sweep{0%,20%{background-position:120% 0}70%,100%{background-position:-60% 0}}
@keyframes tk-pulse{0%,100%{box-shadow:0 0 0 3px #e4572e2b}50%{box-shadow:0 0 0 6px #e4572e10}}
@keyframes tk-drift{0%,100%{background-position:0 0,0 0,0 0,0 0,10% 20%}50%{background-position:0 0,0 0,0 0,0 0,90% 80%}}
/* no pointer to chase the light on touch screens: let rare foils drift on their own */
@media (hover:none){.tk.tier-gold .tk-foil,.tk.tier-prism .tk-foil{animation:tk-drift 7s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){.tk *,.tk *:before,.tk *:after,.tk-seal:before,.tk-seal:after{animation:none!important}body.tc .card-flip{transform:none!important}}

/* centre the nav and keep the Token Ocean link beside the about button */
body.tc .topbar nav{margin:0 auto}

/* ---------- responsive ---------- */
@media (max-width:1100px){body.tc main{padding:0 18px}body.tc .card-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media (max-width:760px){
  /* not sticky on phones: a three-row bar would cover a fifth of the screen */
  body.tc .topbar{position:relative;top:0;border-radius:18px;margin:8px 10px 0;padding:10px 12px;gap:10px}
  body.tc .topbar nav{height:auto;gap:6px;justify-content:flex-start}
  body.tc .topbar nav button{padding:6px 12px}
  body.tc .topbar nav button.active:after{display:none}
  /* brand gets its own row so the two right-side links wrap together instead of leaving one alone */
  body.tc .topbar .brand{width:100%}
  body.tc main{padding:0 14px}
  body.tc .catalog{padding:18px 14px 22px;border-radius:18px}
  body.tc .detail-card{width:240px;height:auto}
  /* keep the desktop ticket and zoom it, so text scales with the card instead of overflowing it */
  body.tc .hero-cards{zoom:.72;height:440px}
}
@media (max-width:520px){
  body.tc .brand{gap:8px}
  body.tc .brand .back{font-size:10px;padding:5px 8px}
  body.tc .brand .wordmark{font-size:14px}
  body.tc .topbar>.text-button{padding:6px 10px;font-size:11px}
  /* one ticket per row on phones: two 165px tickets make 7px text */
  body.tc .card-grid{grid-template-columns:minmax(0,300px);justify-content:center;gap:22px}
}
/* grid cards: the front's content sets the height, cards in a row share the tallest one, and the spare goes round a fixed-size seal */
/* subgrid: ticket, caption and buttons line up across a row even when one card has a single button */
body.tc .card-item{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
body.tc .card-item .card-flip{min-height:auto}
body.tc .card-item .card-inner{height:auto;min-height:100%}
body.tc .card-item .tk{position:relative;inset:auto;min-height:100%}
/* seal and name stay together as one block, centred in whatever height the row gives the emblem */
body.tc .card-item .tk-emblem{flex:1 0 auto;grid-template-rows:auto auto;align-content:center}
body.tc .card-item .tk-seal{height:86px}
/* the back overlays the front and scrolls, so a long fact sheet never stretches the ticket */
body.tc .card-item .card-back{position:absolute;inset:0}
/* WebGL foil prototype (src/foil.js, opt-in with ?foil=one|all): the canvas paints stock, strips, rosette and foil;
   the DOM keeps layout, tilt and all text on top */
.tk>canvas.tk-gl{position:absolute!important;inset:0;z-index:0!important;width:100%;height:100%;pointer-events:none;border-radius:inherit}
.tk.gl{background:none}
.tk.gl:before,.tk.gl .tk-foil,.tk.gl .tk-glare,.tk.gl .tk-emblem:before,.tk.gl .tk-emblem .mark,.tk.gl .tk-seal svg,.tk.gl .tk-seal:before,.tk.gl .tk-seal:after{display:none}
.tk.gl .tk-strip{background:none!important}
/* foil lab (?foil=lab): one card front at the reference ticket's on-screen width, three editions side by side */
body.foil-lab>*:not(#foil-lab){display:none!important}
#foil-lab{display:flex;gap:28px;justify-content:center;align-items:flex-start;padding:28px;min-height:100vh;box-sizing:border-box}
#foil-lab .lab-card{width:330px;flex:none;display:block;position:relative}
#foil-lab .card-front{position:relative;inset:auto;height:auto}
#foil-lab .tk{position:relative;inset:auto}
#foil-lab .tk-emblem{flex:none;min-height:150px;grid-template-rows:auto auto;align-content:center}
#foil-lab .tk-seal{height:120px}
.foil-measure,.foil-measure *{transform:none!important;translate:none!important;rotate:none!important;scale:none!important}
.foil-still,.foil-still *{transition:none!important}
.tk.gl .tk-name,.tk.gl .tk-amount strong,.tk.gl .tk-no{color:transparent}