/* ================= TRISK — site styles =================
   Celtic / Norse fairy-tale fantasy
   ======================================================== */
:root{
  --bg:#060509; --bg2:#0d0b12; --panel:rgba(15,12,21,.74); --panel2:rgba(22,18,30,.8);
  --line:rgba(194,163,107,.14); --line2:rgba(194,163,107,.3);
  --text:#ece6da; --muted:#9d96a8; --bronze:#c2a36b; --bronze2:#ead3a0;
  --might:#ff4a3d; --wisdom:#3f7bff; --cunning:#3fdc72;
  --iri:linear-gradient(90deg,#3ef0d0,#7b8cff,#c56bff,#ff6fb0,#ffc46b);
  --display:'Cinzel',Georgia,serif; --prose:'EB Garamond',Georgia,serif; --ui:'Jost','Segoe UI',system-ui,sans-serif;
  --rune:'Noto Sans Runic','Segoe UI Historic','Segoe UI Symbol',sans-serif;
  --card-font:'Segoe UI','Open Sans','Jost',system-ui,sans-serif;
  --mono:Consolas,'JetBrains Mono','SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-weight:300;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;overflow-x:clip}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;margin:0}
button{font-family:inherit}
[id]{scroll-margin-top:90px}
::selection{background:rgba(197,107,255,.35)}

/* ---------- cosmic background ---------- */
.cosmos{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(55vw 45vw at 85% -5%,rgba(110,80,255,.16),transparent 60%),
    radial-gradient(45vw 40vw at -5% 105%,rgba(40,220,200,.10),transparent 60%),
    radial-gradient(40vw 30vw at 50% 55%,rgba(255,90,170,.05),transparent 70%),
    var(--bg)}
.lattice{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9;
  -webkit-mask:radial-gradient(ellipse at 50% 35%,#000 0%,rgba(0,0,0,.5) 45%,transparent 80%);
  mask:radial-gradient(ellipse at 50% 35%,#000 0%,rgba(0,0,0,.5) 45%,transparent 80%)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;padding:12px clamp(16px,4vw,48px);
  background:rgba(6,5,9,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--iri);opacity:.35}
.brand img{height:26px;display:block}
.nav nav{display:flex;gap:2px;flex:1;justify-content:center}
.nav nav a{position:relative;padding:10px 16px;color:var(--muted);font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;transition:color .2s}
.nav nav a:hover{color:var(--text)}
.nav nav a.on{color:var(--bronze2)}
.nav nav a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;background:var(--bronze);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 10px var(--bronze)}
.menu-toggle{display:none;position:relative;width:42px;height:42px;flex:none;border:1px solid var(--line2);border-radius:4px;background:transparent;cursor:pointer}
.menu-toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);transition:transform .25s,opacity .2s}
.menu-toggle span:nth-child(1){top:14px}.menu-toggle span:nth-child(2){top:20px}.menu-toggle span:nth-child(3){top:26px}
.nav.open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .menu-toggle span:nth-child(2){opacity:0}
.nav.open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:3px;border:1px solid transparent;cursor:pointer;
  background:linear-gradient(120deg,#a8844a,#ead3a0 50%,#a8844a);background-size:200% 100%;color:#14100a;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:transform .15s,background-position .5s,box-shadow .3s}
.btn:hover{transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 24px -8px rgba(234,211,160,.5)}
.btn.ghost{background:transparent;color:var(--bronze2);border-color:var(--line2)}
.btn.ghost:hover{background:rgba(194,163,107,.07);box-shadow:none}
.btn.small{padding:8px 14px;font-size:11px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.wallet-btn{flex:none}
.wallet-btn .dot{width:7px;height:7px;border-radius:50%;background:#3ad37a;box-shadow:0 0 8px #3ad37a}
.wallet-btn .dot.demo{background:#e0b64e;box-shadow:0 0 8px #e0b64e}

/* ---------- layout & type ---------- */
.view{display:none;padding:0 clamp(16px,4vw,48px) 90px;max-width:1240px;margin:0 auto}
.view.on{display:block}
.section{padding:90px 0 0}
.section-head{text-align:center;margin:0 auto 44px;max-width:720px}
.section-head h2{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);letter-spacing:.06em;line-height:1.15}
.section-head p{color:var(--muted);margin:14px auto 0;line-height:1.7;font-size:17px}
.section-head.left{text-align:left;margin-left:0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--bronze);margin:0 0 16px;font-weight:400}
.eyebrow::before,.eyebrow::after{content:"";width:6px;height:6px;border:1px solid var(--bronze);transform:rotate(45deg);opacity:.8}
.muted{color:var(--muted)}
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:30px}
.panel.ornate::before,.panel.ornate::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--bronze);opacity:.7;pointer-events:none}
.panel.ornate::before{top:7px;left:7px;border-right:0;border-bottom:0}
.panel.ornate::after{bottom:7px;right:7px;border-left:0;border-top:0}
.iri-top{border-top:0}
.iri-top>.iri-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--iri);opacity:.7}

/* celtic braid divider with triskelion medallion */
.divider{position:relative;height:20px;max-width:880px;margin:90px auto 0;background:url(assets/braid.svg) repeat-x center/48px 20px;opacity:.85;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.divider-wrap{position:relative}
.divider-wrap .medal{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;
  background:#0a090d;border:1px solid var(--bronze);box-shadow:0 0 0 4px var(--bg),0 0 22px rgba(194,163,107,.25);display:flex;align-items:center;justify-content:center}
.divider-wrap .medal .gloss{width:30px;height:30px}

/* pitch-black glossy triskelion (small uses) — filter on wrapper, mask on child */
.gloss{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 -1px 0 rgba(255,255,255,.07))}
.gloss>i{display:block;width:100%;height:100%;
  -webkit-mask:url(assets/triskelion.png) center/contain no-repeat;mask:url(assets/triskelion.png) center/contain no-repeat;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.13) 41%,rgba(255,255,255,.04) 44%,transparent 54%),
             radial-gradient(circle at 34% 28%,rgba(255,255,255,.12),transparent 22%),
             linear-gradient(160deg,#0b0b0e 0%,#000 32%,#000 100%)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;min-height:calc(100vh - 66px);padding:40px 0}
.hero-logo{width:min(440px,82%);display:block;margin:6px 0 28px;filter:drop-shadow(0 0 24px rgba(197,107,255,.25))}
.lead{font-family:var(--prose);font-size:clamp(20px,1.8vw,24px);line-height:1.6;color:#d9d2c4;max-width:520px;margin:0 0 32px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hint{margin-top:28px;font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:620px}
.mandala{position:absolute;left:50%;top:50%;width:min(660px,112vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.mandala svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mandala .m-geo{inset:14%;width:72%;height:72%}
.rune-ring{font-family:var(--rune);letter-spacing:.1em}
.mandala .halo{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,rgba(197,107,255,.18),rgba(62,240,208,.06) 45%,transparent 70%);filter:blur(10px)}
#hero-card{position:relative}
#hero-card .card{--card-w:min(340px,72vw)}
.card__front{text-align:left} /* cards never inherit page centring (e.g. hero on mobile) */

/* ---------- lore ---------- */
.lore{display:block;max-width:780px;margin:0 auto}
.lore-text p{font-family:var(--prose);font-size:clamp(19px,1.6vw,22px);line-height:1.75;color:#ddd5c6;margin:0 0 22px}
.lore-text p:first-child::first-letter{float:left;font-family:var(--display);font-size:4.1em;line-height:.82;margin:.08em .1em 0 0;color:var(--bronze2);
  text-shadow:0 0 18px rgba(234,211,160,.35)}
.lore-text em{font-style:normal;color:var(--bronze2)}
.c-red{color:#ff7a6e!important}.c-blue{color:#7fa6ff!important}.c-green{color:#6ff09a!important}.c-white{color:#fff!important;text-shadow:0 0 12px rgba(255,255,255,.6)}
.shades-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.shades{position:relative;width:min(360px,80vw);aspect-ratio:1;isolation:isolate}
.shade{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen}
.shade.red{left:19%;top:4%;background:radial-gradient(circle,rgba(255,50,40,1) 0%,rgba(255,50,40,.85) 50%,rgba(255,50,40,0) 71%)}
.shade.green{left:2%;top:34%;background:radial-gradient(circle,rgba(40,255,80,1) 0%,rgba(40,255,80,.85) 50%,rgba(40,255,80,0) 71%)}
.shade.blue{left:36%;top:34%;background:radial-gradient(circle,rgba(50,90,255,1) 0%,rgba(50,90,255,.85) 50%,rgba(50,90,255,0) 71%)}
.shade-label{position:absolute;font-family:var(--display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;text-align:center;line-height:1.5;z-index:2;mix-blend-mode:normal;text-shadow:0 1px 6px #000}
.shade-label small{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.2em;opacity:.75}
.shade-label.red{left:50%;top:-6%;transform:translateX(-50%)}
.shade-label.green{left:-4%;bottom:-4%}
.shade-label.blue{right:-4%;bottom:-4%;text-align:right}
.shade-label.white{left:50%;top:56%;transform:translate(-50%,-50%);color:#111;text-shadow:none;font-weight:600}
.shades-cap{font-family:var(--prose);font-style:italic;color:var(--muted);font-size:16px;text-align:center}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.path{text-align:center;padding:34px 26px}
.path .orb{width:64px;height:64px;margin:0 auto 18px;border-radius:50%}
.path.light .orb{background:radial-gradient(circle,#fff 0%,#fff6dc 30%,rgba(255,240,200,.15) 62%,transparent 72%);box-shadow:0 0 40px rgba(255,240,200,.35)}
.path.dark .orb{background:radial-gradient(circle at 38% 34%,#1a1a1d,#000 55%);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 34px rgba(120,60,255,.25) inset,0 0 26px rgba(0,0,0,.9)}
.path.grey .orb{background:linear-gradient(90deg,#f2efe8 0 50%,#050506 50% 100%);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 30px rgba(200,200,210,.15)}
.path h3{font-family:var(--display);font-size:20px;letter-spacing:.1em;margin-bottom:10px}
.path p{margin:0;color:var(--muted);line-height:1.65;font-size:15px}

/* ---------- tenets ---------- */
.tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tenet{padding:38px 30px 34px;overflow:hidden}
.tenet .numeral{font-family:var(--display);font-size:46px;line-height:1;color:#ecd08f;-webkit-text-fill-color:#ecd08f;background:none;text-shadow:0 0 18px rgba(236,208,143,.35);margin-bottom:18px;display:block}
.tenet h3{font-family:var(--display);font-size:22px;letter-spacing:.08em;margin-bottom:6px}
.tenet .sub{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);margin:0 0 18px}
.tenet ul{margin:0;padding:0;list-style:none}
.tenet li{position:relative;padding-left:20px;margin-bottom:12px;color:#cfc8bb;line-height:1.6;font-size:15px}
.tenet li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border:1px solid var(--bronze);transform:rotate(45deg)}

/* ---------- grids & slots ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:36px 26px}
.slot{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.slot .card{--card-w:100%}
.slot figcaption{display:flex;align-items:center;gap:10px;font-size:15px;color:#d6d0c4;flex-wrap:wrap;justify-content:center;text-align:center}
.slot figcaption small{color:var(--muted);font-size:13px;width:100%}
.pill{font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;border-radius:2px;border:1px solid var(--line2);color:var(--muted)}
.pill.radiant{color:#8fe9ff;border-color:rgba(143,233,255,.4)}
.pill.signed{color:#ecd08f;border-color:rgba(236,208,143,.45);background:linear-gradient(90deg,rgba(122,90,34,.12),rgba(243,220,152,.14),rgba(122,90,34,.12))}
.count{font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.08)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 15px;border-radius:2px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;font-size:13px;letter-spacing:.06em;transition:all .15s}
.chip:hover{color:var(--text)}
.chip.on{background:var(--bronze);color:#14100a;border-color:var(--bronze)}
.note-line{text-align:center;color:var(--muted);font-size:14px;margin:34px auto 0;max-width:640px;line-height:1.7}
.note-line b{color:var(--bronze2);font-weight:400}
.stats-row{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:28px}
.stats-row div{min-width:110px}
.stats-row b{display:block;font-family:var(--display);font-size:30px;font-weight:400}
.stats-row span{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.empty{text-align:center;padding:70px 24px}
.empty h3{font-family:var(--display);font-size:26px;margin-bottom:12px;letter-spacing:.06em}
.empty p{color:var(--muted);max-width:480px;margin:0 auto 24px;line-height:1.6}
.empty .cta{justify-content:center}
.demo-note{font-size:13px;color:#e0c070;background:rgba(224,192,112,.08);border:1px solid rgba(224,192,112,.25);padding:10px 14px;border-radius:3px;margin-bottom:24px}

/* ---------- collection ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.connect-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px;padding:22px 26px}
.connect-strip h3{font-family:var(--display);font-size:21px;margin-bottom:6px;letter-spacing:.05em}
.connect-strip p{margin:0;color:var(--muted)}
.set{margin-bottom:64px}
.set-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;padding:24px 28px;margin-bottom:30px;border-radius:4px;
  border:1px solid var(--line2);background:linear-gradient(110deg,#16131d 0%,#0b0a0f 60%,#14111a 100%)}
.set-banner::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:url(assets/braid.svg) repeat-x center/24px 10px;opacity:.45}
.set-banner::after{content:"";position:absolute;right:-50px;top:50%;width:260px;aspect-ratio:1;transform:translateY(-50%);pointer-events:none;
  -webkit-mask:url(assets/triskelion.png) center/contain no-repeat;mask:url(assets/triskelion.png) center/contain no-repeat;background:rgba(0,0,0,.55)}
.set-sym{width:58px;height:58px;flex:none;position:relative;z-index:1}
.set-info{flex:1;min-width:0;position:relative;z-index:1}
.set-info .eyebrow{margin-bottom:6px}
.set-info h3{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);letter-spacing:.06em}
.set-info p.muted{margin:6px 0 0;font-size:14px}
.set-progress{position:relative;z-index:1;min-width:150px;text-align:right}
.set-progress b{font-family:var(--display);font-size:26px;font-weight:400;display:block}
.set-progress span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--iri);border-radius:inherit}
.set-empty{padding:4px 4px 10px;margin:0}
.num{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pill.missing{border-style:dashed}
.card[data-missing]{--glow:transparent}
.card[data-missing] .card__front{filter:grayscale(1) brightness(.4) contrast(.95)}
.card[data-missing] .card__shine{display:none}
.card[data-missing] .card__rotator{cursor:default;pointer-events:none}
.card[data-missing] .card__face{box-shadow:0 1cqw 4cqw -1.5cqw rgba(0,0,0,.7)}
.slot.missing figcaption{opacity:.55}

/* ---------- market ---------- */
.packs{min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.pack{display:flex;flex-direction:column;gap:14px}
.pack-art{height:180px;border-radius:3px;position:relative;overflow:hidden;background:#0b0a0e;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.pack-art .gloss{width:110px;height:110px;position:relative;z-index:1}
.pack-art.radiant{background:linear-gradient(120deg,#122638,#2a1640,#0f2c2a)}
.pack-art.signed{background:linear-gradient(130deg,#3a2a10,#9c7a3a 35%,#f3dc98 50%,#9c7a3a 65%,#2e210c)}
.pack h3{font-family:var(--display);font-size:21px;letter-spacing:.06em}
.pack ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.8;font-size:14px}
.pack .price{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:10px}
.pack .price b{font-weight:400;font-size:14px;color:var(--bronze2);letter-spacing:.06em}
.opening{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;padding:10px 0}
.opening .slot{width:min(200px,42vw)}
.trade-strip{display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap;margin-top:22px}
.trade-strip h3{font-family:var(--display);font-size:20px;letter-spacing:.06em;margin-bottom:6px}
.trade-strip p{margin:0;color:var(--muted)}

/* ---------- rulebook ---------- */
.rules{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line2);padding-left:4px}
.toc a{padding:8px 14px;color:var(--muted);font-size:14px;letter-spacing:.04em;border-left:2px solid transparent;margin-left:-6px;cursor:pointer}
.toc a:hover{color:var(--text);border-left-color:var(--bronze)}
.rules article section{scroll-margin-top:96px;margin-bottom:56px}
.rules h3{font-family:var(--display);font-size:26px;letter-spacing:.06em;margin-bottom:16px}
.rules p{color:#d4cdc0;line-height:1.75;font-size:16px;margin:0 0 14px}
.anatomy{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center}
.anatomy-card{max-width:100%;position:relative;width:min(300px,100%)}
.anatomy-card .card{--card-w:min(300px,calc(100vw - 32px))}
.marker{position:absolute;z-index:8;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:#0b0a0e;border:1px solid var(--bronze);color:var(--bronze2);font-family:var(--display);font-size:13px;box-shadow:0 0 0 3px rgba(0,0,0,.5),0 0 14px rgba(194,163,107,.4)}
.parts{list-style:none;margin:0;padding:0;counter-reset:p}
.parts li{position:relative;padding:0 0 18px 44px;color:#d4cdc0;line-height:1.6}
.parts li b{display:block;font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--text);font-size:17px}
.parts li::before{counter-increment:p;content:counter(p);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--bronze);
  color:var(--bronze2);font-family:var(--display);font-size:13px;display:flex;align-items:center;justify-content:center}
.stat-table{width:100%;border-collapse:collapse;font-size:15px}
.stat-table th{text-align:left;font-weight:400;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line2)}
.stat-table td{padding:11px 12px;border-bottom:1px solid var(--line);color:#d4cdc0}
.stat-table td:first-child{font-family:var(--mono);color:var(--text);width:90px}
.tbd{color:var(--muted);font-style:italic}
.soon-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.soon-list div{padding:16px 18px;border:1px dashed var(--line2);border-radius:3px;color:var(--muted)}
.soon-list b{display:block;color:var(--text);font-family:var(--display);font-weight:400;letter-spacing:.06em;margin-bottom:4px}

/* ---------- inspect overlay ---------- */
.backdrop{position:fixed;inset:0;z-index:100;background:rgba(3,2,6,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s}
.backdrop.show{opacity:1;pointer-events:auto}
.inspect-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);z-index:130;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;
  border-radius:4px;background:rgba(16,13,22,.94);border:1px solid var(--line2);opacity:0;pointer-events:none;transition:all .3s}
.inspect-bar.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.inspect-bar #inspect-name{font-family:var(--display);font-size:14px;letter-spacing:.06em;margin-right:6px;white-space:nowrap}
.toast{position:fixed;top:80px;left:50%;transform:translate(-50%,-10px);z-index:200;background:#17131f;border:1px solid var(--line2);padding:12px 18px;border-radius:4px;
  font-size:14px;opacity:0;pointer-events:none;transition:all .25s;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
footer{position:relative;border-top:1px solid var(--line);padding:34px clamp(16px,4vw,48px);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:14px}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--iri);opacity:.3}
footer img{height:16px;opacity:.75}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a:hover{color:var(--text)}

/* ================= THE CARD ================= */
.card{--mx:50%;--my:50%;--mxr:50%;--posx:50%;--posy:50%;--gx:0px;--gy:0px;--rx:0deg;--ry:0deg;--o:0;--tx:0px;--ty:0px;--s:1;--hue:0;--glow:transparent;
  width:var(--card-w,260px);aspect-ratio:521/723;position:relative;container-type:inline-size;z-index:1;-webkit-tap-highlight-color:transparent;font-family:var(--card-font)}
.card.interacting{z-index:5}
.card.active{z-index:120;touch-action:none}
.card__translater{width:100%;height:100%;perspective:600px;transform:translate3d(var(--tx),var(--ty),0) scale(var(--s));transform-origin:center}
.card__rotator{all:unset;display:block;width:100%;height:100%;position:relative;cursor:pointer;transform-style:preserve-3d;
  transform:rotateY(var(--ry)) rotateX(var(--rx));border-radius:4.4cqw}
.card__rotator:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.card__face{position:absolute;inset:0;border-radius:4.4cqw;overflow:hidden;isolation:isolate;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:translateZ(.1px);background:#111;box-shadow:0 1.5cqw 6cqw -1.5cqw rgba(0,0,0,.85);transition:box-shadow .4s}
.card.interacting .card__face,.card.active .card__face{box-shadow:0 0 .6cqw rgba(255,255,255,.22),0 5cqw 14cqw -4cqw rgba(0,0,0,.95),0 0 14cqw -3cqw var(--glow)}
.card__back{transform:rotateY(180deg) translateZ(.1px)}
.card[data-rarity="radiant"]{--glow:hsla(190,100%,70%,.55)}
.card[data-rarity="signed"]{--glow:hsla(42,85%,60%,.55)}

/* front layers */
.card__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;user-select:none;-webkit-user-drag:none}
.card__shine,.card__glare{position:absolute;inset:0;pointer-events:none}
.card__shine{z-index:2;opacity:0}
.ov-shade{position:absolute;left:0;right:24.2%;bottom:0;height:34%;z-index:3;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.ov-name{position:absolute;left:0;top:0;width:75.8%;height:13.8%;z-index:3;padding:2.3cqw 2cqw 0 6.9cqw;background:linear-gradient(rgba(36,36,40,.62),rgba(36,36,40,.42))}
.ov-name h3{font-size:6.6cqw;line-height:1.2;font-weight:300;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-name p{margin:.3cqw 0 0;font-size:3.8cqw;color:rgba(255,255,255,.82);font-weight:300;white-space:nowrap}
.ov-stats{position:absolute;right:0;top:0;bottom:0;width:24.2%;z-index:3;padding:8.6cqw 4cqw 0 4.4cqw;background:rgba(14,14,18,.6)}
.stat-label{font-family:var(--mono);font-size:3.3cqw;line-height:4.6cqw;letter-spacing:.03em;color:#f1f1f1}
.stat-val{height:7.7cqw;margin:.55cqw 0 .35cqw;background:rgba(0,0,0,.34);display:flex;align-items:center;justify-content:flex-end;padding-right:1.6cqw;font-size:5.8cqw;font-weight:300;color:#fff;line-height:1}
.stat-val.txt{font-size:2.9cqw;letter-spacing:.02em}
.ov-abil{position:absolute;left:8.6cqw;bottom:6.2cqw;z-index:3;display:flex;flex-direction:column;gap:3cqw}
.abil{display:flex;align-items:center;gap:4.6cqw}
.abil-icon{width:11cqw;height:11cqw;position:relative;flex:none}
.abil-icon svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.5;overflow:visible}
.abil-icon span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5.6cqw;font-weight:300;color:#fff}
.abil-icon.triangle span{padding-top:2.6cqw}
.abil-name{font-size:6.2cqw;font-weight:300;color:#fff;text-shadow:0 .2cqw 1.6cqw rgba(0,0,0,.7);white-space:nowrap}
.card__glare{z-index:5;mix-blend-mode:overlay;opacity:calc(var(--o)*.55);
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.8) 8%,rgba(255,255,255,.45) 22%,rgba(0,0,0,.5) 90%)}
.card[data-rarity="common"] .card__glare{opacity:calc(var(--o)*.4)}

/* --- RADIANT: rainbow foil bands --- */
.card[data-rarity="radiant"] .card__shine{--space:5%;
  background-image:url(assets/glitter.png),
    repeating-linear-gradient(0deg,hsl(2,100%,73%) calc(var(--space)*1),hsl(53,100%,69%) calc(var(--space)*2),hsl(93,100%,69%) calc(var(--space)*3),hsl(176,100%,76%) calc(var(--space)*4),hsl(228,100%,74%) calc(var(--space)*5),hsl(283,100%,73%) calc(var(--space)*6),hsl(2,100%,73%) calc(var(--space)*7)),
    repeating-linear-gradient(133deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(0,0,0,.1) 12%,rgba(0,0,0,.15) 20%,rgba(0,0,0,.25) 120%);
  background-blend-mode:screen,screen,hue,hard-light;
  background-size:150px 150px,400% 400%,300% 300%,200% 200%;
  background-position:calc(50% + var(--gx)) calc(50% + var(--gy)),0% var(--posy),var(--posx) var(--posy),var(--posx) var(--posy);
  filter:brightness(.6) contrast(1.5) saturate(1);mix-blend-mode:color-dodge;opacity:calc(.06 + var(--o)*.45) /* toned down: light parchment art makes colour-dodge much brighter than the old dark art did */}

/* --- SIGNED: gold leaf (text, icons, rim, sweeping gold sheen) + white artist signature --- */
.card[data-rarity="signed"] .card__shine{
  background-image:url(assets/glitter.png),
    linear-gradient(115deg,transparent 0%,transparent calc(var(--mx) - 30%),rgba(255,222,150,.8) var(--mx),transparent calc(var(--mx) + 30%),transparent 100%);
  background-size:140px 140px,100% 100%;background-position:calc(50% + var(--gx)) calc(50% + var(--gy)),center;
  mix-blend-mode:soft-light;opacity:calc(.25 + var(--o)*.75)}
/* Signed: solid gold text (no gradient) for readability */
.card[data-rarity="signed"] :is(.ov-name h3,.ov-name p,.stat-label,.stat-val,.abil-name,.abil-icon span){background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#ecd08f;-webkit-text-fill-color:#ecd08f;text-shadow:0 .15cqw .5cqw rgba(0,0,0,.75)}
.card[data-rarity="signed"] .stat-val{position:relative;isolation:isolate}
.card[data-rarity="signed"] .stat-val::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.34)}
.card[data-rarity="signed"] .stat-val .ico,.card[data-rarity="signed"] .stat-val .dash{color:#e2c47e;-webkit-text-fill-color:#e2c47e}
.card[data-rarity="signed"] .abil-icon svg{stroke:#e2c47e}
.card[data-rarity="signed"] .ov-stats{background:rgba(22,17,9,.64)}
.card[data-rarity="signed"] .ov-name{background:linear-gradient(rgba(40,32,18,.66),rgba(40,32,18,.44))}
.card[data-rarity="signed"] .card__front::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;padding:1cqw;pointer-events:none;
  background:linear-gradient(135deg,#7a5a22,#f3dc98 var(--mx),#9c7a3a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sig{position:absolute;left:5%;right:27%;bottom:36cqw;z-index:4;text-align:center;pointer-events:none;
  font-family:"Mrs Saint Delafield","Segoe Script","Brush Script MT",cursive;font-size:12cqw;line-height:1;color:#fff;white-space:nowrap;
  transform:rotate(-7deg);text-shadow:0 0 .5cqw rgba(255,255,255,.55),0 .3cqw 1.4cqw rgba(0,0,0,.6);opacity:.96}
.sig-img{position:absolute;left:6%;width:60%;bottom:33cqw;z-index:4;pointer-events:none;user-select:none;transform:rotate(-6deg);
  filter:drop-shadow(0 0 .5cqw rgba(255,255,255,.45)) drop-shadow(0 .4cqw 1.2cqw rgba(0,0,0,.65))}
.sig .cap{font-family:"Monsieur La Doulaise","Mrs Saint Delafield",cursive;font-size:2.1em;line-height:0;vertical-align:-.12em;margin-right:-.06em}

/* --- BACK: matte black card + pitch-black glossy triskelion --- */
.card__back{background:radial-gradient(circle at 50% 46%,#1b1a1e 0%,#131215 65%,#0c0b0d 100%)}
.back-grain{position:absolute;inset:0;background:url(assets/grain.png);background-size:200px;opacity:.11;mix-blend-mode:overlay}
.back-sym-wrap{position:absolute;left:13.7%;top:23.5%;width:72.6%;aspect-ratio:1;
  filter:drop-shadow(0 .55cqw .45cqw rgba(0,0,0,.95)) drop-shadow(0 -.14cqw 0 rgba(255,255,255,.055))}
.back-sym{width:100%;height:100%;-webkit-mask:url(assets/triskelion.png) center/contain no-repeat;mask:url(assets/triskelion.png) center/contain no-repeat;
  background:
    radial-gradient(circle at var(--mxr) var(--my),rgba(255,255,255,calc(.05 + var(--o)*.15)) 0%,rgba(255,255,255,calc(.012 + var(--o)*.035)) 8%,transparent 19%),
    linear-gradient(115deg,transparent calc(var(--mxr) - 9%),rgba(255,255,255,calc(.02 + var(--o)*.08)) calc(var(--mxr) - 1.2%),rgba(255,255,255,calc(.035 + var(--o)*.12)) var(--mxr),rgba(255,255,255,calc(.02 + var(--o)*.08)) calc(var(--mxr) + 1.2%),transparent calc(var(--mxr) + 9%)),
    linear-gradient(160deg,#09090b 0%,#000 30%,#000 100%)}
.back-glare{position:absolute;inset:0;pointer-events:none;opacity:var(--o);background:radial-gradient(farthest-corner circle at var(--mxr) var(--my),rgba(255,255,255,.05) 0%,transparent 60%)}
.card__back::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.035)}


/* ---------- card: painted placeholder art ---------- */
.card__art.placeholder{background-color:#857b69;
  background-image:url(assets/wash.jpg),
    radial-gradient(60% 45% at 42% 22%,rgba(196,62,48,var(--aM)),transparent 100%),
    radial-gradient(60% 50% at 18% 66%,rgba(58,150,84,var(--aC)),transparent 100%),
    radial-gradient(60% 50% at 62% 70%,rgba(58,96,190,var(--aW)),transparent 100%),
    linear-gradient(170deg,#b9ad96,#8a7f6c);
  background-size:cover,100% 100%,100% 100%,100% 100%,100% 100%;
  background-blend-mode:multiply,normal,normal,normal,normal}
.card__art.placeholder::before{content:"";position:absolute;left:8%;top:27%;width:60%;aspect-ratio:1;
  -webkit-mask:url(assets/triskelion.png) center/contain no-repeat;mask:url(assets/triskelion.png) center/contain no-repeat;background:rgba(40,28,16,.16)}
.card__art.placeholder span{position:absolute;left:0;width:75.8%;top:66%;text-align:center;font-family:var(--prose);font-style:italic;font-size:3.6cqw;color:rgba(40,28,16,.55);letter-spacing:.04em}
/* card text tweaks */
.ov-name h3.long{font-size:5.4cqw}
.ov-name h3.longer{font-size:4.6cqw;line-height:1.45}
.stat-val.icons{gap:1cqw;padding-right:1.2cqw}
.ico{display:inline-flex;align-items:center;gap:.25cqw;color:#fff}
.ico svg{width:5cqw;height:5cqw;fill:currentColor;overflow:visible}
.ico b{font-family:var(--display);font-weight:400;font-size:2.7cqw;line-height:1}
.stat-val .dash{font-size:5.8cqw;font-weight:300}
.abil-icon svg{stroke-width:1.6}

/* ---------- home: creatures ---------- */
.grid.six{grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto}

/* ---------- rulebook: icon legend ---------- */
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0 22px}
.legend div{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:var(--panel)}
.legend svg{width:24px;height:24px;fill:currentColor;color:var(--text);flex:none;overflow:visible}
.legend span{font-size:15px;color:#d4cdc0}
.legend h4{grid-column:1/-1;font-family:var(--display);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--bronze);margin:12px 0 0}
.shape-key{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 18px}
.shape-key div{display:flex;align-items:center;gap:12px;color:#d4cdc0}
.shape-key svg{width:30px;height:30px;fill:none;stroke:var(--text);stroke-width:2.4;overflow:visible}
.shape-key b{font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--text)}

/* ---------- rulebook: primals, deck, turn ---------- */
.rule-list{margin:6px 0 4px;padding-left:22px}
.rule-list li{margin:6px 0;color:#d4cdc0}
.phases{list-style:none;counter-reset:ph;padding:0;margin:10px 0 0;display:grid;gap:14px}
.phases>li{counter-increment:ph;position:relative;padding:16px 18px 16px 62px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:#d4cdc0}
.phases>li::before{content:counter(ph);position:absolute;left:18px;top:14px;width:30px;height:30px;border:1px solid var(--bronze);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--bronze2)}
.phases>li>b{display:block;font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--text);margin-bottom:4px}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}
.actions div{padding:12px 14px;border:1px solid rgba(194,163,107,.35);border-radius:3px;background:rgba(0,0,0,.18)}
.actions b{display:block;font-family:var(--display);font-weight:400;color:var(--bronze2);letter-spacing:.06em;margin-bottom:4px}
.primal-picker{flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.primal-picker .chip.on{border-color:var(--bronze);color:var(--text);background:rgba(194,163,107,.14)}
.primal-result p{color:#d4cdc0}
.playable{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px}
.playable li{padding:7px 10px;border-bottom:1px solid var(--line);color:#e9e2d4;font-size:15px}
.playable small{color:var(--muted);font-size:12px;margin-left:4px}
.playable em{float:right;font-style:normal;font-family:var(--mono);font-size:12px}


/* ---------- phones: everything fits the screen width ---------- */
@media (max-width:980px){
  .hero{min-width:0;grid-template-columns:minmax(0,1fr)}
  .hero>*{min-width:0;max-width:100%}
  /* the spinning rune ring is wider than a phone: keep it inside a clipped, full-width stage */
  .hero-stage{overflow:hidden;margin-inline:calc(-1 * clamp(16px,4vw,48px));padding:0;width:auto;max-width:none}
  .mandala{width:min(660px,100vw)}
  #view-home{overflow-x:clip}
  #view-home .section-head,#view-home .lore,#view-home .tenets{max-width:100%;overflow-wrap:break-word}
  .tenets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .packs{grid-template-columns:1fr}
  .inspect-bar{max-width:calc(100vw - 24px)}
  .inspect-bar #inspect-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .playable{grid-template-columns:1fr}
  .stat-table{width:100%;table-layout:fixed}
  .stat-table td{overflow-wrap:anywhere}
  .phases>li{padding-left:56px;padding-right:14px}
  .rules article,.rules{min-width:0}
}

/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .mandala .m-ring{animation:spin 160s linear infinite}
  .mandala .m-geo{animation:spin 90s linear infinite reverse}
  .mandala .halo{animation:breathe 9s ease-in-out infinite}
  .shade{animation:pulse 8s ease-in-out infinite}
  .shade.green{animation-delay:-2.7s}.shade.blue{animation-delay:-5.3s}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes breathe{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
  @keyframes pulse{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center;min-height:auto;padding-top:20px}
  .hero-logo,.lead{margin-left:auto;margin-right:auto}
  .cta{justify-content:center}
  .hero-stage{order:-1;min-height:520px}
  .lore{grid-template-columns:1fr;gap:40px}
  .tenets,.paths{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;padding:0;gap:6px}
  .toc a{border:1px solid var(--line2);margin:0;border-radius:2px;padding:6px 12px;font-size:13px}
  .anatomy{grid-template-columns:1fr;justify-items:center}
}
@media (max-width:880px){
  .menu-toggle{display:block}
  .wallet-btn{margin-left:auto}
  .nav nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;padding:8px clamp(16px,4vw,48px) 18px;
    background:rgba(8,7,12,.97);border-bottom:1px solid var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.6)}
  .nav.open nav{display:flex}
  .nav nav a{padding:16px 6px;font-size:14px;border-bottom:1px solid var(--line)}
  .nav nav a:last-child{border-bottom:0}
  .nav nav a.on::after{left:auto;right:10px;bottom:50%;transform:translateY(50%) rotate(45deg)}
}
@media (max-width:720px){
  .grid,.grid.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .slot{min-width:0}
  .hero-copy .eyebrow{letter-spacing:.2em;flex-wrap:wrap;justify-content:center}
  .lead{font-size:19px}
  .section{padding-top:70px}
  .hero-stage{min-height:440px}
  .set-banner{flex-wrap:wrap;padding:20px}
  .set-progress{text-align:left;width:100%}
  .set-banner::after{width:170px}
  .stat-table td:first-child{width:70px}
}
@media (max-width:420px){
  .brand img{height:21px}
  .wallet-btn{padding:7px 10px;font-size:10px;letter-spacing:.08em}
  .nav{gap:10px}
}

/* ---------- collection: one card per slot, swipe through finishes ---------- */
.col-hint{color:var(--muted);font-size:13px;margin:-18px 0 26px;letter-spacing:.02em}
.slot.cyc .card{touch-action:pan-y}
.card.swap-in{animation:swapin .3s ease-out}
@keyframes swapin{from{opacity:0;translate:var(--swap,22px) 0}to{opacity:1;translate:0 0}}
.owns{display:inline-flex;gap:6px}
.own{font-family:var(--mono);font-size:12px;line-height:1;padding:3px 7px;border-radius:3px;border:1px solid currentColor;background:rgba(255,255,255,.05)}
.own-common{color:#fff}
.own-radiant{color:#8fe9ff}
.own-signed{color:#ecd08f}
.fnav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:-6px}
.fstep{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;padding:4px 10px;cursor:pointer}
.fstep:hover{color:var(--text)}
.fdot{width:10px;height:10px;border-radius:50%;padding:0;border:1px solid;background:transparent;cursor:pointer;opacity:.8}
.fdot.common{border-color:#fff}.fdot.radiant{border-color:#8fe9ff}.fdot.signed{border-color:#ecd08f}
.fdot.on{opacity:1}
.fdot.on.common{background:#fff}.fdot.on.radiant{background:#8fe9ff}.fdot.on.signed{background:#ecd08f}

/* ---------- rulebook: primals, d10 levels, upgrading ---------- */
.primal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 16px;margin:22px 0 30px}
.primal-grid .pill{display:none}
.primal-grid figcaption small{font-family:var(--mono);font-size:14px;letter-spacing:.12em;color:var(--bronze2)}
.d10{width:52px;height:auto;display:block;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.d10 .d10-edge{fill:#0d0b10;stroke:#c2a36b;stroke-width:2.2;stroke-linejoin:round}
.d10 .d10-side{fill:#2a2116;stroke:#c2a36b;stroke-width:1.2;stroke-linejoin:round}
.d10 .d10-low{fill:#1a140d;stroke:#c2a36b;stroke-width:1.2;stroke-linejoin:round}
.d10 .d10-low.r{fill:#140f0a}
.d10 .d10-face{fill:#5a4524;stroke:#ead3a0;stroke-width:1.6;stroke-linejoin:round}
.d10 text{font-family:var(--display);font-weight:600;fill:#fff4d2;dominant-baseline:middle}
.d10.sm{width:34px}
.d10-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px}
.rule-sub{font-family:var(--display);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:26px 0 16px}
.up-chain{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap}
.up-step{margin:0;flex:0 1 200px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.up-step .card{--card-w:100%}
.up-step figcaption{display:flex;align-items:center;gap:10px}
.up-step figcaption span{display:flex;flex-direction:column;line-height:1.3}
.up-step figcaption b{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.04em}
.up-step figcaption small{color:var(--muted);font-size:13px}
.up-arrow{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--bronze2);text-align:center;padding-bottom:60px}
.up-arrow span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.up-arrow b{font-family:var(--mono);font-weight:400;font-size:13px}
.up-arrow i{font-style:normal;font-size:26px;line-height:1}
.up-cap{text-align:center;margin-top:18px}
@media (max-width:720px){
  .up-chain{flex-direction:column;gap:14px}
  .up-step{flex:none;width:min(220px,70vw)}
  .up-arrow{padding-bottom:0}
  .up-arrow i{transform:rotate(90deg)}
  .primal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- rulebook: damage tokens (red pebbles) ---------- */
.pebbles{position:absolute;inset:0;z-index:5;pointer-events:none}
.pebble{position:absolute;display:block;width:9cqw;height:7.4cqw;translate:-50% -50%;rotate:var(--r,0deg);
  border-radius:52% 48% 57% 43% / 55% 60% 40% 45%;
  background:radial-gradient(circle at 34% 30%,#ffb4a6 0 6%,#f04a36 18%,#b5170d 52%,#5c0704 100%);
  box-shadow:inset -.6cqw -.8cqw 1.2cqw rgba(0,0,0,.45),inset .3cqw .4cqw .6cqw rgba(255,255,255,.18),0 .9cqw 1.4cqw rgba(0,0,0,.6)}
.pebble.p1{width:8cqw;height:7cqw;border-radius:46% 54% 44% 56% / 58% 46% 54% 42%}
.pebble.p2{width:9.6cqw;height:7cqw;border-radius:58% 42% 50% 50% / 48% 56% 44% 52%}
.pebble.p3{width:7.6cqw;height:7.2cqw;border-radius:50% 50% 42% 58% / 52% 44% 56% 48%}
.pebble.solo{position:static;translate:none;flex:none;width:22px;height:18px;rotate:-14deg;box-shadow:inset -2px -3px 4px rgba(0,0,0,.45),0 3px 5px rgba(0,0,0,.6)}
.destroyed-stamp{position:absolute;left:37.9%;top:33%;z-index:6;translate:-50% -50%;rotate:-14deg;pointer-events:none;
  font-family:var(--display);font-size:6.4cqw;letter-spacing:.16em;text-transform:uppercase;color:#ff5a48;
  padding:1.2cqw 3cqw;border:.6cqw solid #ff5a48;border-radius:1cqw;background:rgba(20,4,3,.55);text-shadow:0 0 2cqw rgba(255,60,40,.5)}
.is-dead .card__front > :not(.tokens):not(.destroyed-stamp){filter:grayscale(.85) brightness(.55)}
.dmg-step.dead figcaption small{color:#ff7a6a}

/* ---------- inspect: what the abilities do (white text) ---------- */
.inspect-info{position:fixed;left:50%;bottom:80px;z-index:130;width:min(560px,calc(100vw - 24px));max-height:36vh;overflow:auto;
  translate:-50% 20px;opacity:0;pointer-events:none;transition:opacity .3s,translate .3s;
  padding:12px 16px;border-radius:4px;background:rgba(10,8,14,.92);border:1px solid var(--line2);color:#fff}
.inspect-info.show{opacity:1;translate:-50% 0;pointer-events:auto}
.ii-row{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.ii-row+.ii-row{border-top:1px solid rgba(255,255,255,.08)}
.ii-ico{position:relative;flex:none;width:30px;height:30px;margin-top:2px}
.ii-ico svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:3;overflow:visible}
.ii-ico i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:#fff}
.ii-ico.triangle i{padding-top:6px}
.ii-name{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.06em;color:#fff}
.ii-row small{margin-left:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ii-row p{margin:3px 0 0;color:#fff;font-size:15px;line-height:1.5}
.ii-row .kw{color:#fff;font-weight:600}

/* ---------- rulebook: Skill Book ---------- */
.kw{font-weight:600;color:var(--bronze2)}
.sk-search{width:100%;max-width:420px;margin:6px 0 4px;padding:10px 14px;border-radius:3px;border:1px solid var(--line2);background:rgba(0,0,0,.3);color:var(--text);font:inherit;font-size:15px}
.sk-search:focus{outline:none;border-color:var(--bronze)}
.rule-sub small{font-family:var(--ui);font-size:11px;letter-spacing:.12em;color:var(--muted);margin-left:8px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.sk{display:flex;gap:12px;padding:12px 14px;border:1px solid rgba(194,163,107,.22);border-radius:3px;background:rgba(0,0,0,.18)}
.sk h5{margin:0;font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.05em;color:var(--text)}
.sk h5 small{font-family:var(--ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.sk p{margin:4px 0 6px;color:#d4cdc0;font-size:14.5px;line-height:1.55}
.sk-on{font-size:12px;color:var(--muted)}
.sk-ico{flex:none;width:26px;height:26px;margin-top:2px;display:flex;align-items:center;justify-content:center}
.sk-ico svg{width:100%;height:100%;fill:none;stroke:var(--text);stroke-width:3.2;overflow:visible}
.sk-ico.plain svg.ic{color:var(--text);fill:currentColor;stroke:none;stroke-width:1;width:22px;height:22px}
.sk-dot{width:10px;height:10px;border-radius:50%;background:var(--bronze2)}
.sk-dot.term{border-radius:1px;rotate:45deg;background:transparent;border:1px solid var(--bronze2)}
.sk[hidden],.sk-grid[hidden],.rule-sub[hidden]{display:none}

.abil-icon span.wide{font-size:4.3cqw;letter-spacing:-.02em}
.abil-icon.triangle span.wide{padding-top:3cqw}

/* Celtic divider medal: gold triskelion (other .gloss uses stay pitch black) */
.divider-wrap .medal .gloss{filter:drop-shadow(0 0 6px rgba(236,208,143,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.divider-wrap .medal .gloss>i{background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.45) 41%,rgba(255,255,255,.12) 45%,transparent 55%),
  linear-gradient(160deg,#f6e3a8 0%,#ecd08f 30%,#c9a35c 62%,#8a6a2f 100%)}

/* set banners: gold set symbol; the Jager Set uses a stag instead of the triskelion */
.set-banner .set-sym.gloss{filter:drop-shadow(0 0 8px rgba(236,208,143,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.set-banner .set-sym.gloss>i{background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.45) 41%,rgba(255,255,255,.12) 45%,transparent 55%),
  linear-gradient(160deg,#f6e3a8 0%,#ecd08f 30%,#c9a35c 62%,#8a6a2f 100%)}
.set-banner[data-set="jager"] .set-sym.gloss>i{-webkit-mask-image:url(assets/stag.png);mask-image:url(assets/stag.png)}
.set-banner[data-set="jager"]::after{-webkit-mask-image:url(assets/stag.png);mask-image:url(assets/stag.png)}

/* ---------- 3D tokens on cards (hidden while a card is inspected) ---------- */
.tokens{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .25s}
.card.active .tokens,.card.active .destroyed-stamp{opacity:0}
.destroyed-stamp{transition:opacity .25s}
.tok-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.die-sm{width:52px;height:52px;display:block;cursor:grab}
.d10-row{gap:6px}
.peb-solo{width:28px;height:24px;flex:none;display:block}

/* ---------- Play: table demo ---------- */
.table-demo{margin-top:30px}
.table-demo .section-head{margin-bottom:26px}
.table-demo .section-head h3{font-family:var(--display);font-size:26px;letter-spacing:.06em}
.td-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px;align-items:start}
.td-picks{margin-bottom:18px}
.td-card .card{--card-w:min(320px,100%)}
.td-status{color:var(--muted);font-size:14px;margin:14px 0 0}
.td-status .bad{color:#ff7a6a;font-weight:400}
.td-right{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.td-row{display:flex;align-items:center;gap:12px}
.td-row span{width:80px;font-family:var(--display);letter-spacing:.08em;color:var(--bronze2)}
.td-row b{min-width:64px;text-align:center;font-family:var(--mono);font-weight:400;font-size:16px}
.td-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.25);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.td-btn:hover{border-color:var(--bronze);color:var(--bronze2)}
.td-coin{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 26px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2)}
.coin3d{width:190px;height:230px;display:block}
.td-coin-res{margin:0;color:#d4cdc0;min-height:1.5em;text-align:center}
.td-coin-res b{font-family:var(--display);font-weight:400;color:var(--bronze2);letter-spacing:.06em}
@media (max-width:720px){
  .td-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .td-left,.td-right{align-items:center;display:flex;flex-direction:column}
  .td-card .card{--card-w:min(300px,80vw)}
}

/* ---------- rulebook: coin flips ---------- */
.coin-rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.coin-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 20px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2)}
.coin-box .coin3d{width:160px;height:190px}
@media (max-width:720px){.coin-rule{grid-template-columns:minmax(0,1fr)}.coin-box{justify-self:center}}

/* ---------- in play: locked abilities and the unlock glow (light only, no size change) ---------- */
.abil{transition:opacity .35s,filter .35s}
.abil.locked{opacity:.34;filter:grayscale(1) brightness(.75)}
.abil.unlock{animation:abil-unlock 1.2s ease-out}
@keyframes abil-unlock{
  0%{opacity:.34;filter:grayscale(1) brightness(.75)}
  16%{opacity:1;filter:brightness(2.4) drop-shadow(0 0 .8cqw #fff) drop-shadow(0 0 3cqw rgba(255,240,200,.85))}
  50%{filter:brightness(1.4) drop-shadow(0 0 .6cqw rgba(255,255,255,.7)) drop-shadow(0 0 2cqw rgba(255,240,200,.4))}
  100%{opacity:1;filter:none}}
.td-next{color:var(--bronze2);font-size:13px}
@media (prefers-reduced-motion:reduce){.abil.unlock{animation:none}}

/* ---------- Play: status checkboxes ---------- */
.td-fx-row{align-items:flex-start}
.td-fx{display:flex;flex-wrap:wrap;gap:8px}
.td-chk{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line2);border-radius:3px;cursor:pointer;font-size:14px;user-select:none;background:rgba(0,0,0,.2)}
.td-chk input{position:absolute;opacity:0;width:1px;height:1px}
.td-chk i{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;flex:none;transition:background .2s,box-shadow .2s}
.td-chk.fx-fear{color:#c9a6ff}.td-chk.fx-invisible{color:#cfe8f5}.td-chk.fx-poison{color:#9be07a}
.td-chk input:checked + i{background:currentColor;box-shadow:0 0 8px currentColor}
.td-chk input:focus-visible + i{outline:2px solid var(--bronze2);outline-offset:2px}
.td-chk:has(input:checked){border-color:currentColor}

/* ---------- in play: HP left after damage (red); inspecting shows the full HP ---------- */
.stat-val.hp .hp-now{display:none}
.stat-val.hp.hurt .hp-base{display:none}
.stat-val.hp.hurt .hp-now{display:inline;color:#ff5a48;-webkit-text-fill-color:#ff5a48;text-shadow:0 0 1.2cqw rgba(255,60,40,.55),0 .2cqw .6cqw rgba(0,0,0,.8)}
.card.active .stat-val.hp.hurt .hp-base{display:inline}
.card.active .stat-val.hp.hurt .hp-now{display:none}
.stat-val.hp-tick .hp-now{animation:hp-tick .6s ease-out}
@keyframes hp-tick{0%{filter:brightness(2.2) drop-shadow(0 0 1.2cqw #ff6a50)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.stat-val.hp-tick .hp-now{animation:none}}

/* ---------- Play: sandbox table (hot-seat) ---------- */
.sandbox{margin-top:30px}
.sandbox .section-head{margin-bottom:20px}
.sandbox .section-head h3{font-family:var(--display);font-size:26px;letter-spacing:.06em}
.sb-setup{display:grid;gap:10px;margin-bottom:20px}
.sb-setup .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sb-setup .row > span{width:150px;flex:none;font-family:var(--display);color:var(--bronze2);letter-spacing:.06em;font-size:14px}
.sb-setup .chip small{font-family:var(--mono);opacity:.7;margin-left:3px}
.sb-side{border:1px solid var(--line);border-radius:4px;padding:14px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,box-shadow .3s}
.sb-side.top{flex-direction:column}
.sb-side.top .sb-hand-row{order:1}.sb-side.top .sb-field{order:2}
.sb-side.on{border-color:var(--bronze);box-shadow:0 0 0 1px rgba(194,163,107,.25),0 0 36px -12px rgba(236,208,143,.45)}
.sb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.sb-head b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--text);letter-spacing:.06em}
.sb-badge{font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid var(--bronze);color:var(--bronze2)}
.sb-field,.sb-hand-row{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;padding:4px 2px 8px}
.sb-zone{display:flex;gap:12px;align-items:flex-start}
.sb-prim{flex:none;padding-right:16px;border-right:1px dashed var(--line2)}
.sb-board{flex:1;min-height:230px}
.sb-board:not(:has(.sb-slot))::before{content:"No creations in play";color:var(--muted);font-size:14px;align-self:center;padding:0 12px}
.sb-hand:not(:has(.sb-slot))::before{content:"Hand is empty";color:var(--muted);font-size:14px;align-self:center;padding:0 12px}
.sandbox{--sbw:140px}
.sb-slot{margin:0;flex:none;width:var(--sbw);display:flex;flex-direction:column;align-items:center;gap:6px}
.sb-slot .card{--card-w:var(--sbw)}
.sb-cap{font-size:12.5px;color:#d4cdc0;text-align:center;line-height:1.35}
.sb-cap b{font-family:var(--display);font-weight:400;color:var(--bronze2);letter-spacing:.06em}
.sb-ctl{display:flex;flex-direction:column;gap:5px;align-items:stretch;width:100%}
.sb-ctl:empty{display:none}
.sb-b{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:3px;border:1px solid var(--line2);background:rgba(0,0,0,.3);color:var(--text);cursor:pointer;letter-spacing:.03em;line-height:1.25}
.sb-b small{opacity:.7;font-size:11px;margin-left:3px}
.sb-b:hover:not(:disabled){border-color:var(--bronze);color:var(--bronze2)}
.sb-b.go{background:linear-gradient(120deg,#a8844a,#ead3a0 50%,#a8844a);color:#141008;border-color:transparent}
.sb-b.go:hover:not(:disabled){color:#141008;filter:brightness(1.08)}
.sb-b.ghost{background:transparent}
.sb-b.on{border-color:#ff7a6a;color:#ffb0a6;background:rgba(120,20,10,.35)}
.sb-b:disabled{opacity:.42;cursor:not-allowed}
.sb-ctl select{font:inherit;font-size:12px;padding:5px;background:#0d0b12;color:var(--text);border:1px solid var(--line2);border-radius:3px;width:100%}
.sb-req{font-family:var(--mono);font-size:11px;letter-spacing:.02em}.sb-req.ok{color:#9be07a}.sb-req.no{color:#ff8a7a}
.sb-note{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3}
.sb-tag{align-self:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1px solid}
.sb-tag.atk{color:#ff9a8a}.sb-tag.blk{color:#9cc3ff}.sb-tag.dead{color:#ff5a48}
.sb-piles{display:flex;gap:10px;flex:none}
.sb-pile{width:84px;height:118px;border-radius:7px;border:1px solid var(--line2);background:#0a090d;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font:inherit;padding:6px}
.sb-pile.deck{background:radial-gradient(circle at 50% 38%,#1b1822,#08070a 70%);box-shadow:3px 3px 0 -1px #0a090d,3px 3px 0 0 var(--line2),6px 6px 0 -1px #0a090d,6px 6px 0 0 var(--line)}
.sb-pile .gloss{width:34px;height:34px}
.sb-pile b{font-family:var(--display);font-size:22px;font-weight:400;line-height:1}
.sb-pile span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.sb-pile:hover:not(:disabled),.sb-pile.on{border-color:var(--bronze)}
.sb-pile:disabled{opacity:.5;cursor:default}
.sb-mid{margin:14px 0;padding:14px;border:1px solid var(--line2);border-radius:4px;background:rgba(10,8,14,.75)}
.sb-track{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.sb-ph{padding:8px 12px;border:1px solid var(--line);border-radius:3px;opacity:.45;transition:opacity .3s,border-color .3s,background .3s}
.sb-ph.on{opacity:1;border-color:var(--bronze);background:rgba(194,163,107,.08)}
.sb-ph.done{opacity:.7}
.sb-ph b{display:block;font-family:var(--display);font-weight:400;letter-spacing:.08em;color:var(--bronze2);font-size:15px;margin-bottom:2px}
.sb-ph i{font-style:normal;font-size:12px;color:var(--muted);margin-right:10px}
.sb-ph i.on{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sb-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sb-bar .msg{flex:1 1 280px;color:#d4cdc0;font-size:14px}
.sb-bar .msg b{color:var(--text);font-weight:400;font-family:var(--display);letter-spacing:.05em}
.sb-pips i{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid var(--bronze2);margin-left:4px;vertical-align:-1px}
.sb-pips i.on{background:var(--bronze2)}
.sb-win{font-family:var(--display);font-size:20px;color:var(--bronze2) !important;letter-spacing:.08em}
.sb-grave{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px}
.sb-grave:empty{display:none}
.sb-grave b{font-family:var(--display);font-weight:400;color:var(--bronze2);margin-right:6px}
.sb-gcard{padding:3px 8px;border:1px solid var(--line2);border-radius:2px;color:#d4cdc0}
.sb-log{list-style:none;margin:12px 0 0;padding:10px 14px;max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2);font-size:13px;color:#cfc8bb}
.sb-log li{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);line-height:1.45}
.sb-log small{color:var(--muted);margin-right:8px;font-family:var(--mono)}
@media (max-width:720px){
  .sandbox{--sbw:112px}
  .sb-track{grid-template-columns:minmax(0,1fr)}
  .sb-setup .row > span{width:100%}
}

/* ---------- sandbox: every card the same size; deck = card backs; graveyard = greyed stack, latest on top ---------- */
.card[data-static] .card__rotator{cursor:inherit;pointer-events:none}
.sb-piles{display:flex;gap:14px;flex:none;align-items:flex-start}
.sb-pile-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--sbw)}
.sb-pile-lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sb-count{position:absolute;right:-6px;top:-8px;z-index:20;min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#0d0b12;border:1px solid var(--bronze);color:var(--bronze2);font-family:var(--mono);font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.sb-deck{all:unset;position:relative;display:block;width:var(--sbw);aspect-ratio:521/723;cursor:pointer;border-radius:calc(var(--sbw)*.044)}
.sb-deck .card{--card-w:var(--sbw);position:relative;z-index:2}
/* the cards underneath: a few edges peeking out down and to the right */
.sb-deck:not(.empty)::before,.sb-deck:not(.empty)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0b0a0d;border:1px solid rgba(194,163,107,.22)}
.sb-deck:not(.empty)::before{translate:calc(var(--n) * 1.6px) calc(var(--n) * 1.6px);z-index:1}
.sb-deck:not(.empty)::after{translate:calc(var(--n) * .8px) calc(var(--n) * .8px);z-index:1}
.sb-deck:hover:not(:disabled) .card{translate:0 -3px;transition:translate .2s}
.sb-deck:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.sb-deck:disabled{cursor:default}
.sb-deck.empty,.sb-gy.empty{border:1px dashed var(--line2);background:rgba(0,0,0,.15)}
.sb-gy{position:relative;width:var(--sbw);height:calc(var(--sbw) * 723 / 521 + var(--n) * 5px);cursor:pointer;border-radius:calc(var(--sbw)*.044)}
.sb-gy.empty{height:auto;aspect-ratio:521/723}
.sb-gy-card{position:absolute;left:0;top:calc(var(--k) * 5px);width:var(--sbw)}
.sb-gy-card .card,.sb-gy-open .card{--card-w:var(--sbw)}
.sb-gy .card .card__front,.sb-gy-open .card .card__front{filter:grayscale(1) brightness(.55) contrast(.95)}
.sb-gy .card__shine,.sb-gy-open .card__shine{display:none}
.sb-gy:hover .sb-gy-card:last-of-type .card__front{filter:grayscale(1) brightness(.72)}
.sb-gy.on{outline:1px solid var(--bronze);outline-offset:5px}
.sb-gy:focus-visible{outline:2px solid var(--bronze);outline-offset:5px}
.sb-grave{display:block;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2)}
.sb-grave:empty{display:none}
.sb-grave-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.sb-grave-head b{font-family:var(--display);font-weight:400;color:var(--bronze2);letter-spacing:.06em}
.sb-grave-head .sb-b{margin-left:auto}
.sb-grave-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.sb-gy-open{flex:none;width:var(--sbw)}
.sb-back{pointer-events:none}

/* ================= sandbox v2: tap / drag play, grid, shared card size ================= */
#sb-root{--sbw:120px;--sbgap:10px;--cells:4}
.sb-side .sb-head,.sb-side .sb-field,.sb-side .sb-hand-row{order:0}
.sb-field,.sb-hand-row{overflow:visible;gap:var(--sbgap);flex-wrap:nowrap;padding:4px 0}
.sb-zone{gap:var(--sbgap)}
.sb-prim{padding-right:16px}
.sb-hand{flex-wrap:wrap;min-height:calc(var(--sbw) * 723 / 521)}
.sb-board{display:grid;grid-template-columns:repeat(var(--cells),var(--sbw));gap:var(--sbgap);align-items:start;min-height:0;flex:none}
.sb-board::before{content:none !important}
.sb-cell{grid-row:1;width:var(--sbw);aspect-ratio:521/723;border:1px dashed rgba(194,163,107,.16);border-radius:calc(var(--sbw) * .044);
  background:radial-gradient(circle at 50% 45%,rgba(194,163,107,.05),transparent 70%);transition:border-color .2s,background .2s,box-shadow .2s;z-index:0}
.sb-board > .sb-slot{grid-row:1;z-index:1}
.sb-slot{width:var(--sbw);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .2s}
.sb-slot .card{--card-w:var(--sbw);transition:filter .3s,translate .25s}
.sb-cap{font-size:clamp(9px,calc(var(--sbw) * .09),12.5px)}
.sb-pile-wrap{width:var(--sbw)}
.sb-pile-lbl{font-size:clamp(8px,calc(var(--sbw) * .075),10.5px)}
.sb-up{font-size:.9em;color:var(--muted)}
.sb-ctl .sb-b{font-size:clamp(9.5px,calc(var(--sbw) * .09),12.5px);padding:4px 6px}
.sb-tag{font-size:clamp(8px,calc(var(--sbw) * .07),10px)}
/* what you can tap */
.sb-slot[data-click] .card__rotator,.sb-slot.sb-pick .card__rotator{cursor:pointer}
.sb-slot.sb-hit .card{filter:drop-shadow(0 0 6px rgba(236,208,143,.35))}
.sb-slot.sb-hit:hover .card{filter:drop-shadow(0 0 12px rgba(236,208,143,.75))}
.sb-deck.sb-hit .card{filter:drop-shadow(0 0 8px rgba(236,208,143,.5))}
.sb-deck.sb-hit:hover .card{filter:drop-shadow(0 0 14px rgba(236,208,143,.85))}
/* picked card + where it can go */
.sb-slot.sb-sel .card{translate:0 calc(var(--sbw) * -.07);filter:drop-shadow(0 0 4px #fff4d2) drop-shadow(0 0 16px rgba(236,208,143,.9))}
.sb-cell.sb-target{border:1px dashed rgba(236,208,143,.75);background:rgba(236,208,143,.06);box-shadow:inset 0 0 18px rgba(236,208,143,.18)}
.sb-cell.sb-target.sb-over{border-style:solid;border-color:#fff4d2;background:rgba(236,208,143,.14);box-shadow:inset 0 0 24px rgba(236,208,143,.35),0 0 18px rgba(236,208,143,.35)}
.sb-slot.sb-target .card{filter:drop-shadow(0 0 8px rgba(236,208,143,.8))}
.sb-slot.sb-target.sb-over .card{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 18px rgba(236,208,143,1))}
/* dragging */
.sb-slot.sb-drag{touch-action:none;user-select:none;-webkit-user-select:none}
.sb-slot.sb-drag .card__rotator{cursor:grab}
.sb-slot.sb-lift{opacity:.25}
.sb-ghost{position:fixed;left:0;top:0;z-index:400;pointer-events:none;rotate:-4deg;scale:1.06;filter:drop-shadow(0 18px 22px rgba(0,0,0,.75))}
.sb-ghost .card{--card-w:inherit}
html.sb-dragging,html.sb-dragging *{cursor:grabbing !important}
/* combat */
.sb-slot.sb-dim .card{filter:grayscale(1) brightness(.48)}
.sb-slot.sb-atk,.sb-slot.sb-blk{z-index:3}
.sb-slot.sb-atk .card{filter:drop-shadow(0 0 12px rgba(255,90,70,.6))}
.sb-slot.sb-blk .card{filter:drop-shadow(0 0 12px rgba(120,170,255,.65))}
.sb-slot.sb-dim.sb-pick:hover .card{filter:grayscale(.6) brightness(.75)}
.sb-slot .card.active{filter:none !important}
.sb-side.def{border-color:rgba(120,170,255,.55);box-shadow:0 0 0 1px rgba(120,170,255,.18),0 0 36px -12px rgba(120,170,255,.45)}
.sb-badge.def{border-color:#9cc3ff;color:#cfe0ff}
/* deck: count sits on the pile */
.sb-count{right:-5px;top:-7px;min-width:20px;height:20px;font-size:11px}

/* ---------- phase bar:  • • •  ━━━━━  • • •   → ---------- */
#sb-track.sb-track{display:block;margin-bottom:10px}
.sbp{display:flex;align-items:center;gap:18px}
.sbp-bar{flex:1;display:flex;align-items:flex-start;gap:18px;min-width:0}
.sbp-g{display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.42;transition:opacity .35s}
.sbp-g.on,.sbp-g.done{opacity:1}
.sbp-g.big{flex:1;min-width:40px}
.sbp-g span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sbp-g.on span{color:var(--bronze2)}
.sbp-dots{display:flex;gap:9px;height:18px;align-items:center}
.sbp-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(194,163,107,.55);background:rgba(0,0,0,.35);transition:background .3s,border-color .3s,box-shadow .3s}
.sbp-dots i.fill{background:radial-gradient(circle at 35% 30%,#fff4d2,#ecd08f 45%,#8a6a2f);border-color:#ecd08f}
.sbp-dots i.next,.sbp-dots i.cur{border-color:#fff4d2;animation:sbp-pulse 1.6s ease-in-out infinite}
.sbp-dots i.cur{background:radial-gradient(circle,#fff,#fff4d2 40%,#ecd08f)}
.sbp-big{width:100%;height:18px;display:flex;align-items:center}
.sbp-big i{display:block;width:100%;height:7px;border-radius:4px;background:rgba(194,163,107,.18);position:relative;overflow:hidden;transition:background .4s,box-shadow .4s}
.sbp-g.on .sbp-big i{background:linear-gradient(90deg,#8a6a2f,#ecd08f,#8a6a2f);box-shadow:0 0 14px rgba(236,208,143,.55)}
.sbp-g.on .sbp-big i::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:sbp-sweep 1.8s linear infinite}
.sbp-g.done .sbp-big i{background:linear-gradient(90deg,#8a6a2f,#c9a35c)}
@keyframes sbp-sweep{to{left:100%}}
@keyframes sbp-pulse{0%,100%{box-shadow:0 0 6px rgba(236,208,143,.6)}50%{box-shadow:0 0 16px rgba(236,208,143,1)}}
.sbp-next{flex:none;display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;border-radius:30px;border:1px solid var(--bronze);background:rgba(0,0,0,.35);color:var(--bronze2);font:inherit;cursor:pointer;transition:border-color .2s}
.sbp-next span{font-size:12px;letter-spacing:.08em;white-space:nowrap}
.sbp-next b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f6e3a8,#c9a35c 60%,#8a6a2f);color:#1a1206;font-size:20px;font-weight:600;box-shadow:0 0 16px rgba(236,208,143,.4);transition:translate .2s}
.sbp-next:hover:not(:disabled){border-color:#fff4d2}
.sbp-next:hover:not(:disabled) b{translate:3px 0}
.sbp-next:disabled{opacity:.4;cursor:default}
.sb-bar .msg{font-size:13.5px}
.sb-wait{display:block;height:3px;margin-top:8px;background:rgba(194,163,107,.18);border-radius:2px;overflow:hidden}
.sb-wait i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2f,#ecd08f);transform-origin:left;animation:sb-wait 2.2s linear forwards}
@keyframes sb-wait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:720px){
  .sbp{gap:10px}.sbp-bar{gap:10px}
  .sbp-next span{display:none}
  .sbp-g span{font-size:8.5px;letter-spacing:.08em}
  .sbp-dots{gap:6px}.sbp-dots i{width:11px;height:11px}
  .sb-prim{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){.sbp-dots i,.sbp-g.on .sbp-big i::after,.sb-wait i{animation:none}.sb-slot{transition:none}}

/* ---------- sandbox v3 ---------- */
/* room for cards that step forward (attackers, blockers, creations that used an ability) */
.sb-side.bottom .sb-field{padding-top:calc(var(--sbw) * .2)}
.sb-side.top .sb-field{padding-bottom:calc(var(--sbw) * .2)}
.sb-slot.sb-used,.sb-slot.sb-atk,.sb-slot.sb-blk{z-index:3}
/* combat: everything greyed; what can be chosen glows */
.sb-slot.sb-dim .card,.sb-deck.sb-dim .card{filter:grayscale(1) brightness(.48)}
.sb-slot.sb-dim.sb-hit .card{filter:grayscale(1) brightness(.62) drop-shadow(0 0 7px rgba(236,208,143,.6))}
.sb-slot.sb-dim.sb-hit:hover .card{filter:grayscale(.55) brightness(.82) drop-shadow(0 0 14px rgba(236,208,143,.95))}
.sb-deck.sb-dim{cursor:default}
.sb-tag.used{color:#cfc8bb}
/* an opened (inspected) card always sits above the table */
.sb-slot:has(.card.active){z-index:120 !important}
.sb-slot .card.active{filter:none !important}
/* inspect panel: level, damage and status of a card in play */
.ii-state{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:2px}
.ii-state:last-child{border-bottom:0;margin-bottom:0;padding-bottom:4px}
.ii-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:13px;line-height:1.2}
.ii-chip b{font-weight:600}
.ii-chip.lv{border-color:rgba(236,208,143,.6);color:#fff4d2}
.ii-chip.dmg.hurt{border-color:rgba(255,90,72,.65);color:#ffd2cb}
.ii-chip.dmg.hurt b{color:#ff6a58}
.ii-chip.none{opacity:.6}
.ii-chip.fx-fear{border-color:#a67cff;color:#e4d6ff}
.ii-chip.fx-invisible{border-color:#bfe0f0;color:#eef8ff}
.ii-chip.fx-poison{border-color:#6fcf55;color:#dcffd0}
.ii-chip.ex{border-style:dashed}
.ii-peb{width:11px;height:9px;border-radius:52% 48% 57% 43% / 55% 60% 40% 45%;background:radial-gradient(circle at 34% 30%,#ffb4a6 0 6%,#f04a36 22%,#b5170d 60%,#5c0704)}

/* ---------- phase bar v2: the steps are segments of one bar; fixed arrow width; fixed panel height ---------- */
.sb-mid{display:flex;flex-direction:column;gap:12px}
#sb-track.sb-track{height:44px;margin:0;display:block}
.sbp{height:100%;gap:16px}
.sbp-bar{flex:1;display:flex;align-items:flex-start;gap:7px;min-width:0}
.sbp-g{align-items:stretch;gap:8px;min-width:0;opacity:.5}
.sbp-g.g0,.sbp-g.g2{flex:3}
.sbp-g.g1{flex:4}
.sbp-g span{display:block;overflow:hidden;text-overflow:ellipsis;text-align:center}
.sbp-segs{display:flex;gap:3px;height:10px}
.sbp-segs i{flex:1;position:relative;overflow:hidden;background:rgba(194,163,107,.12);border:1px solid rgba(194,163,107,.3);border-radius:2px;transition:background .35s,border-color .35s,box-shadow .35s}
.g0 .sbp-segs i:first-child{border-radius:6px 2px 2px 6px}
.g2 .sbp-segs i:last-child{border-radius:2px 6px 6px 2px}
.sbp-segs i.fill{background:linear-gradient(180deg,#f6e3a8,#c9a35c 55%,#8a6a2f);border-color:#ecd08f}
.sbp-segs i.cur{background:linear-gradient(180deg,rgba(255,244,210,.55),rgba(236,208,143,.3));border-color:#fff4d2;animation:sbp-pulse 1.6s ease-in-out infinite}
.sbp-segs i.cur::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:sbp-sweep 1.6s linear infinite}
.sbp-next{width:212px;justify-content:space-between;gap:10px}
.sbp-next span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
/* instructions: always two lines tall, never more */
.sb-bar{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;font-size:13.5px;line-height:1.45;height:2.9em}
.sb-bar .msg{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:inherit}
.sb-bar .msg .sb-win{font-size:20px;line-height:1.4}
.sb-bar > .sb-b{flex:none}
.sb-bar .sb-wait{position:absolute;left:0;right:0;bottom:-7px;margin:0}
@media (max-width:720px){
  .sbp-next{width:48px;padding:4px;justify-content:center}
  .sbp-next b{width:38px;height:38px}
  .sb-bar{font-size:12.5px}
  .sbp-bar{gap:5px}
}
@media (prefers-reduced-motion:reduce){.sbp-segs i.cur,.sbp-segs i.cur::after{animation:none}}
.sb-bar .m-s{display:none}
@media (max-width:720px){.sb-bar .m-l{display:none}.sb-bar .m-s{display:inline}}

/* ---------- cards in play: level + HP badges (like the deck counter) ---------- */
.sb-slot{position:relative}
.sb-badges{position:absolute;left:0;top:0;width:var(--sbw);height:0;z-index:6;pointer-events:none;transition:opacity .25s}
.sb-n{position:absolute;top:-7px;height:clamp(15px,calc(var(--sbw) * .16),20px);min-width:clamp(15px,calc(var(--sbw) * .16),20px);padding:0 clamp(4px,calc(var(--sbw) * .05),7px);
  border-radius:12px;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;
  background:#0d0b12;border:1px solid var(--bronze);color:var(--bronze2);font-family:var(--mono);font-size:clamp(8px,calc(var(--sbw) * .085),11.5px);line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.sb-n small{font-size:.78em;opacity:.65;letter-spacing:.02em}
.sb-n.lv{left:-5px}
.sb-n.hp{right:-5px;border-color:rgba(255,255,255,.45);color:#fff}
.sb-n.hp.hurt{border-color:#ff5a48;color:#ff8a7a;box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 8px rgba(255,70,50,.35)}
.sb-n.bump{animation:sbn-bump .55s ease-out}
@keyframes sbn-bump{0%{filter:brightness(2.2) drop-shadow(0 0 6px currentColor)}100%{filter:none}}
.sb-slot.sb-dim .sb-badges{opacity:.55}
.sb-slot:has(.card.active) .sb-badges{opacity:0}
@media (prefers-reduced-motion:reduce){.sb-n.bump{animation:none}}

/* ---------- sandbox: aiming, coin flips, Scry / Fetch / Rally panel, new status chips ---------- */
.sb-slot.sb-tgt .card{filter:drop-shadow(0 0 6px rgba(255,120,90,.7))}
.sb-slot.sb-tgt:hover .card{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px rgba(255,120,90,1))}
.sb-slot.sb-aim .card{filter:drop-shadow(0 0 4px #fff4d2) drop-shadow(0 0 16px rgba(236,208,143,.95))}
.sb-mid{position:relative}
.sb-flips{position:absolute;left:50%;top:50%;z-index:50;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 18px 10px;
  border-radius:14px;background:rgba(8,7,12,.92);border:1px solid var(--bronze);box-shadow:0 10px 40px rgba(0,0,0,.7);pointer-events:none;opacity:0;scale:.9;transition:opacity .25s,scale .25s}
.sb-flips.show{opacity:1;scale:1}
.sb-coins{display:flex;gap:4px}
.sb-coin{width:62px;height:76px;display:block}
.sb-flip-t{font-size:13px;color:#e9e2d4;white-space:nowrap}
.sb-flip-t b{color:var(--bronze2);font-weight:400;font-family:var(--display);letter-spacing:.05em}
.sb-modal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:rgba(3,2,6,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:16px}
.sb-modal.show{display:flex}
.sb-mpanel{max-width:min(760px,100%);max-height:100%;overflow:auto;padding:20px 22px;border:1px solid var(--bronze);border-radius:6px;background:#0d0b12;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.sb-mpanel h4{margin:0 0 4px;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.08em;color:var(--bronze2)}
.sb-mpanel p{margin:0 0 14px;color:#d4cdc0;font-size:14px}
.sb-mrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sb-mcard{position:relative;width:132px;cursor:pointer;border-radius:6px;transition:translate .2s,filter .2s}
.sb-mcard .card{--card-w:132px}
.sb-mcard:hover,.sb-mcard:focus-visible{translate:0 -4px;filter:drop-shadow(0 0 12px rgba(236,208,143,.7));outline:none}
.sb-mpos{position:absolute;left:50%;top:-9px;translate:-50% 0;z-index:5;padding:2px 9px;border-radius:12px;background:#0d0b12;border:1px solid var(--bronze);color:var(--bronze2);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sb-mbtns{display:flex;justify-content:flex-end;margin-top:16px}
.ii-chip.fx-blind{border-color:#a8a8b4;color:#f0f0f4}
.ii-chip.fx-sleep{border-color:#7fb0ec;color:#e3f0ff}
.td-chk.fx-blind{color:#cfcfd8}.td-chk.fx-sleep{color:#9cc4f2}

/* ---------- cards inside the Rulebook: don't inherit the Rulebook's heading/paragraph styles (type line alignment) ---------- */
.card .ov-name h3{margin:0;font-family:var(--ui);font-size:6.6cqw;line-height:1.2;font-weight:300;letter-spacing:.01em}
.card .ov-name h3.long{font-size:5.4cqw}
.card .ov-name h3.longer{font-size:4.6cqw;line-height:1.45}
.card .ov-name p{margin:.3cqw 0 0;font-size:3.8cqw;line-height:normal;font-weight:300;color:rgba(255,255,255,.82)}
/* ---------- Rulebook: grouped contents, status table ---------- */
.toc .toc-h{display:block;margin:16px 0 4px;padding-left:2px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.toc .toc-h:first-child{margin-top:0}
.rules h4.rule-sub{margin-top:22px}
.status-table td:nth-child(2){white-space:nowrap}
.st-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;box-shadow:inset -2px -2px 3px rgba(0,0,0,.4)}
.st-dot.fear{background:#7b4bd1}.st-dot.blind{background:#55555f}.st-dot.sleep{background:#4a7fc0}.st-dot.poison{background:#3f9b3a}
@media (max-width:980px){.toc .toc-h{width:100%;margin:10px 0 2px}}

/* ---------- sorceries ---------- */
.card.sorc .ov-name{width:100%;padding-right:6.9cqw}
.ii-ico.sorc{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;font-size:15px;line-height:1;margin-top:2px}
.ii-ico.sorc.blessing{color:#f3dc98}.ii-ico.sorc.curse{color:#c79bff}.ii-ico.sorc.ritual{color:#ff9a8a}
.ii-row p.ii-how{margin-top:6px;font-size:13px;color:rgba(255,255,255,.7)}
.sb-sk{font-size:clamp(8px,calc(var(--sbw) * .085),11.5px);letter-spacing:.08em;text-transform:uppercase}
.sb-sk.blessing{color:#f3dc98}.sb-sk.curse{color:#c79bff}.sb-sk.ritual{color:#ff9a8a}
.sb-cl{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:4px;border:1px solid var(--line2);background:rgba(0,0,0,.3);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.sb-cl:hover{border-color:var(--bronze2)}
.sb-cl small{color:var(--muted)}
.st-dot.silence{background:#a8322a}.st-dot.flight{background:#d6b56a}
.td-chk.fx-silence{color:#ff9a8a}.td-chk.fx-flight{color:#f3dc98}
.ii-chip.fx-silence{border-color:#d0574d;color:#ffd9d4}
.ii-chip.fx-flight{border-color:#d6b56a;color:#fff3d2}
.sorc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 16px;margin-top:22px}
.sorc-grid .pill{display:none}
.sorc-grid figcaption small{font-size:12.5px;line-height:1.45}
.sorc-table td:first-child{white-space:nowrap;color:var(--bronze2)}

/* ---------- combat: who can attack / block gets a clear border ---------- */
.sb-slot.sb-dim.sb-hit .card{filter:none}
.sb-slot.sb-dim.sb-hit:hover .card{filter:drop-shadow(0 0 12px rgba(236,208,143,.8))}
.sb-slot.sb-hit.sb-dim::after,.sb-slot.sb-atk::after,.sb-slot.sb-blk::after{content:"";position:absolute;left:calc(var(--sbw) * -.035);top:calc(var(--sbw) * -.035);
  width:calc(var(--sbw) * 1.07);aspect-ratio:521/723;border-radius:calc(var(--sbw) * .075);border:2.5px solid #ecd08f;
  box-shadow:0 0 10px rgba(236,208,143,.55),inset 0 0 6px rgba(236,208,143,.3);pointer-events:none;z-index:4;transition:border-color .2s,box-shadow .2s}
.sb-slot.sb-hit.sb-dim:hover::after{border-color:#fff4d2;box-shadow:0 0 16px rgba(236,208,143,.9)}
.sb-slot.sb-hit.sb-chance::after{border-style:dashed;border-color:#b993ff;box-shadow:0 0 10px rgba(123,75,209,.6)}
.sb-slot.sb-atk::after{border-color:#ff7a62;box-shadow:0 0 12px rgba(255,90,70,.6)}
.sb-slot.sb-blk::after{border-color:#8fb6ff;box-shadow:0 0 12px rgba(120,170,255,.6)}
.sb-slot.sb-atk .card,.sb-slot.sb-blk .card{filter:none}

/* the Primal now sits in the row with its creations */
.sb-tag.prim{color:#ecd08f;border-color:rgba(236,208,143,.4);background:rgba(236,208,143,.08)}