/* SnapDragon shared site styles — doc 06 tokens. Used by inner pages (how-to, token, cards). */
:root{
  --field-resource:#5C2456; --field-character:#1E4E6B; --field-build:#6B4A21;
  --field-skill:#1F5C46; --field-monster:#6B2222; --field-quest:#5C5516;
  --field-void:#2A2140;
  --rarity-common:#A8AEB5; --rarity-uncommon:#4FA870; --rarity-rare:#56A8DC;
  --rarity-epic:#B45CE0; --rarity-legendary:#E8A33D;
  --ink:#0E0C0F; --ink-soft:#241F26; --paper:#F2E9DA; --paper-dim:#E2D6C3;
  --ice:#CDE6EE; --ice-deep:#9CC3D1; --table:#16121B; --panel:#201A26;
  --gold:#E9B44C; --label-red:#FF5C5C;
  --shadow-ink:4px 4px 0 var(--ink); --shadow-ink-sm:2px 2px 0 var(--ink);
  --r-panel:14px; --r-chip:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--table);color:var(--paper);font-family:'Barlow',system-ui,sans-serif;line-height:1.5;overflow-x:hidden;
  background-image:radial-gradient(var(--ink) 1px,transparent 1.4px);background-size:16px 16px}
.display{font-family:'Rubik Dirt',cursive;color:var(--gold);letter-spacing:.04em;line-height:1.06;text-transform:uppercase}
.kicker{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--label-red);text-transform:uppercase;letter-spacing:.2em;font-size:14px}
.label{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.18em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:16px;padding:13px 22px;border:2px solid var(--ink);border-radius:10px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-ink)}
.btn-ghost{background:transparent;color:var(--ice);border-color:var(--ice);box-shadow:2px 2px 0 var(--ice-deep)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(14,12,15,.92);border-bottom:2px solid var(--ink-soft);backdrop-filter:blur(4px)}
.navrow{display:flex;align-items:center;gap:22px;padding:12px 24px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand .wordmark{font-family:'Rubik Dirt',cursive;color:var(--gold);font-size:22px;letter-spacing:.04em}
.emblem{width:34px;height:34px;flex:0 0 auto}
.navlinks{display:flex;gap:20px;margin-left:12px}
.navlinks a{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--paper);opacity:.85}
.navlinks a:hover,.navlinks a.active{color:var(--gold);opacity:1}
.navright{margin-left:auto;display:flex;align-items:center;gap:10px}
.tokchip{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--ice);border:1.5px solid var(--ink-soft);border-radius:var(--r-chip);padding:4px 9px}
.soon{color:var(--paper-dim);opacity:.7;position:relative}
.soon::after{content:"SOON";position:absolute;top:-7px;right:-8px;font-size:8px;color:var(--ink);background:var(--gold);border-radius:4px;padding:1px 3px;letter-spacing:.05em}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border:1.5px solid var(--ink-soft);border-radius:9px;color:var(--ice)}
.iconbtn:hover{border-color:var(--ice);color:var(--gold)}
.iconbtn svg{width:16px;height:16px}

/* page header */
.pagehead{padding:64px 0 30px;border-bottom:2px solid var(--ink-soft);position:relative}
.pagehead h1{font-size:clamp(30px,5vw,54px);margin:12px 0 8px;text-shadow:3px 3px 0 var(--ink)}
.pagehead .lede{max-width:60ch;color:var(--paper-dim);font-size:18px}

/* content */
section{padding:44px 0;border-bottom:1px solid var(--ink-soft)}
section:last-of-type{border-bottom:none}
h2.sec{font-size:clamp(22px,3vw,32px);margin-bottom:6px}
.sub{color:var(--paper-dim);max-width:62ch;margin-bottom:20px}
p{margin-bottom:12px}
.prose{max-width:64ch}
.prose p{color:#e9e2d5}

/* paper panel & steps */
.panel{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--shadow-ink);padding:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:var(--panel);border:2px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--shadow-ink);padding:18px}
.tile .k{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-size:18px;margin-bottom:4px}
.tile p{font-size:14px;color:var(--paper-dim);margin:0}
.tile svg{width:30px;height:30px;color:var(--ice);margin-bottom:8px}

/* numbered steps */
.step{display:flex;gap:16px;margin-bottom:16px;align-items:flex-start}
.step .n{font-family:'Rubik Dirt',cursive;color:var(--gold);font-size:26px;line-height:1;flex:0 0 auto;width:44px}
.step h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:20px;margin-bottom:4px}
.step p{color:#e9e2d5;font-size:15px;margin:0}

/* fight math block */
.fight{background:var(--ink);border:2px solid var(--gold);border-radius:var(--r-panel);box-shadow:var(--shadow-ink);padding:20px;max-width:420px}
.fight .row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--ink-soft);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.fight .row:last-child{border-bottom:none}
.fight .val{color:var(--gold);font-weight:700}
.fight .big{font-size:22px}

/* fee / data table */
table{width:100%;border-collapse:collapse;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--shadow-ink)}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(14,12,15,.18);font-size:14px;vertical-align:top}
th{background:var(--ink);color:var(--gold);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
tr:last-child td{border-bottom:none}
.tablewrap{overflow-x:auto}

/* callout */
.note{border-left:3px solid var(--label-red);background:rgba(255,92,92,.08);padding:12px 16px;border-radius:0 10px 10px 0;font-size:14px;color:var(--paper-dim);margin:14px 0}
.note.good{border-left-color:var(--rarity-uncommon);background:rgba(79,168,112,.09)}

/* footer */
footer{padding:40px 0;font-size:13px;color:var(--paper-dim)}
.footrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.footnote{margin-top:14px;opacity:.6;font-size:12px;max-width:70ch}

/* coming-soon banner (reusable across not-yet-live pages) */
.cs-banner{display:flex;align-items:center;gap:10px;justify-content:center;background:var(--gold);color:var(--ink);
  border-bottom:2px solid var(--ink);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:13px;padding:9px 16px;text-align:center}
.cs-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:pulse 1.6s ease-in-out infinite;flex:0 0 auto}
@keyframes pulse{50%{opacity:.25}}

/* vault tiers (locked / coming-soon preview) */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.tier{position:relative;background:var(--panel);border:2px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--shadow-ink);
  padding:20px;overflow:hidden;opacity:.74;filter:saturate(.85);transition:opacity .15s}
.tier:hover{opacity:.92}
.tier .ribbon{position:absolute;top:14px;right:-32px;transform:rotate(45deg);background:var(--ink);color:var(--gold);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:.12em;padding:3px 36px;text-transform:uppercase}
.tier .tname{font-family:'Rubik Dirt',cursive;color:var(--gold);font-size:20px}
.tier .meta{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ice);font-size:12px;margin:2px 0 10px}
.tier ul{list-style:none;margin-top:6px}
.tier ul li{font-size:13px;color:var(--paper-dim);padding:3px 0 3px 15px;position:relative}
.tier ul li::before{content:"›";position:absolute;left:0;color:var(--gold)}
.tier .lockbtn{margin-top:14px;display:inline-flex;gap:6px;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--paper-dim);border:2px solid var(--ink-soft);border-radius:8px;padding:8px 12px;cursor:not-allowed}
.tier.lp{border-color:var(--gold);opacity:.82}
.tier.lp .meta{color:var(--gold)}

/* wallet connect button */
.btn.connected{background:var(--field-skill);color:var(--paper);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}

@media(max-width:820px){.navlinks{display:none}.grid2,.grid3{grid-template-columns:1fr}}