:root{
  --bg:#09090b;
  --bg2:#0f1015;
  --panel:#111218;
  --panel2:#171921;
  --line:#6e5630;
  --line2:#b88d44;
  --ink:#f3ecd7;
  --muted:#b9aa86;
  --accent:#dca449;
  --accent2:#5aa7d6;
  --shadow:0 14px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.5 "Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top, rgba(94,67,28,.22), transparent 30%),
    linear-gradient(180deg,#0b0b0d 0%,#0d0e12 42%,#08090b 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.page-shell{max-width:1600px;margin:0 auto;padding:22px}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 18px;margin-bottom:18px;
  background:rgba(12,13,17,.88);backdrop-filter:blur(8px);
  border:1px solid rgba(184,141,68,.5);
  box-shadow:var(--shadow);
}
.brand img{width:220px;height:auto}
.topnav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.topnav a{padding:8px 10px;border:1px solid transparent}
.topnav a:hover{border-color:rgba(184,141,68,.4);color:var(--ink)}
.frame{
  position:relative;
  border:1px solid rgba(184,141,68,.48);
  background:linear-gradient(180deg,rgba(18,19,25,.97),rgba(12,12,16,.96));
  box-shadow:var(--shadow);
}
.frame:before,.frame:after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
  border-color:rgba(220,164,73,.82);
}
.frame:before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.frame:after{bottom:-1px;right:-1px;border-right:2px solid;border-bottom:2px solid}
.section{margin:0 0 28px;padding:28px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}
.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--accent)}
h1,h2,h3{margin:0 0 10px}
h1{font-size:clamp(2.3rem,5vw,4.6rem);line-height:1}
h2{font-size:clamp(1.45rem,2vw,2.2rem)}
h3{font-size:1.1rem}
.hero{overflow:hidden;min-height:72vh;padding:54px;display:grid;align-items:center}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,11,.92) 0%,rgba(7,8,11,.75) 44%,rgba(7,8,11,.86) 100%),
    url("../assets/imgs/ui/ui-reference.webp") center/cover no-repeat;
  transform:scale(1.02);
}
.hero-copy{position:relative;z-index:1;max-width:760px}
.lede{font-size:1.1rem;color:#ddd0b1;max-width:64ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid rgba(184,141,68,.65);background:linear-gradient(180deg,#1a1c23,#101117);color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.btn-primary{background:linear-gradient(180deg,#5f451c,#302113)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;max-width:640px}
.hero-stats .stat,.mini-stats div{padding:14px;border:1px solid rgba(184,141,68,.28);background:rgba(17,18,24,.82)}
.hero-stats span,.mini-stats span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.hero-stats strong,.mini-stats strong{display:block;font-size:1.5rem;margin-top:4px}
.hero-note{margin-top:18px;color:#f3c97e}
.overview-grid,.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rules-grid{grid-template-columns:1.3fr .9fr}
.panel{background:linear-gradient(180deg,rgba(22,24,31,.96),rgba(14,15,20,.96));border:1px solid rgba(184,141,68,.28);padding:18px}
.bullet-list{margin:12px 0 0;padding-left:18px;color:#e0d7c6}
.bullet-list li+li{margin-top:8px}
.addon-stack{display:grid;gap:12px}
.addon-card,.set-card,.archive-card,.vault-card{border:1px solid rgba(184,141,68,.28);background:linear-gradient(180deg,rgba(19,20,27,.98),rgba(12,13,17,.96))}
.addon-card{padding:14px}
.addon-card .chip-row{margin-top:10px}
.ui-panel img{margin-top:14px;border:1px solid rgba(184,141,68,.28)}
.rule-steps{margin:0;padding-left:18px}
.rule-steps li+li{margin-top:12px}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.set-card{overflow:hidden;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.set-card:hover,.set-card:focus-visible{transform:translateY(-2px);border-color:rgba(220,164,73,.75);box-shadow:0 10px 26px rgba(0,0,0,.35);outline:none}
.set-card .art{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid rgba(184,141,68,.25)}
.set-card .art img{width:100%;height:100%;object-fit:cover}
.set-card .copy{padding:18px}
.set-card .tagline{color:#e4d2ad}
.meta-line,.chip-row,.value-strip,.pips,.archive-meta{display:flex;gap:8px;flex-wrap:wrap}
.chip,.value-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid rgba(184,141,68,.28);color:#e6dcc8;background:rgba(255,255,255,.03);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filter-btn{min-height:34px;padding:0 12px;border:1px solid rgba(184,141,68,.3);background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.filter-btn.active{background:linear-gradient(180deg,#4f3919,#251a10);border-color:rgba(220,164,73,.75)}
.archive-head{align-items:center}
.archive-controls input{width:min(360px,80vw);min-height:42px;padding:0 14px;background:#101116;color:var(--ink);border:1px solid rgba(184,141,68,.32)}
.card-grid,.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.archive-card,.vault-card{cursor:pointer;overflow:hidden}
.archive-card .thumb,.vault-card .thumb{aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid rgba(184,141,68,.22)}
.archive-card img,.vault-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.archive-card:hover img,.vault-card:hover img,.set-card:hover img{transform:scale(1.03)}
.archive-card .copy,.vault-card .copy{padding:14px}
.archive-card h3,.vault-card h3{font-size:1rem;margin-bottom:6px}
.archive-card .sub,.vault-card .sub{color:var(--muted);font-size:13px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.pip{border:1px solid rgba(184,141,68,.28);background:#0f1015;padding:8px;text-align:center}
.pip span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}
.pip strong{display:block;font-size:1.15rem}
.rarity-common{border-top:2px solid #d8d8d8}
.rarity-uncommon{border-top:2px solid #2fe665}
.rarity-rare{border-top:2px solid #4f9fff}
.rarity-epic{border-top:2px solid #a35cff}
.rarity-legendary{border-top:2px solid #f3c04d}
.footer{padding:20px 24px;margin-bottom:30px;color:var(--muted)}
.vault-intro{margin-bottom:16px}
.lightbox{position:fixed;inset:0;display:none;z-index:40;background:rgba(5,6,9,.88);backdrop-filter:blur(6px)}
.lightbox.open{display:block}
.lightbox-inner{position:absolute;inset:5% 9%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.8fr);gap:20px;align-items:center}
.lightbox-inner img{width:100%;max-height:88vh;object-fit:contain;border:1px solid rgba(184,141,68,.35);background:#08090d}
.lightbox-copy{padding:20px;border:1px solid rgba(184,141,68,.28);background:rgba(17,18,24,.95)}
.lightbox-close,.lightbox-nav{position:absolute;border:1px solid rgba(184,141,68,.5);background:rgba(16,17,22,.92);color:var(--ink);cursor:pointer}
.lightbox-close{top:18px;right:18px;width:42px;height:42px;font-size:18px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:70px;font-size:26px}
.lightbox-nav.prev{left:18px}
.lightbox-nav.next{right:18px}
code{font-family:Consolas,monospace;background:#0b0c10;padding:2px 6px;border:1px solid rgba(184,141,68,.26)}
@media (max-width:1100px){.overview-grid,.rules-grid{grid-template-columns:1fr}.lightbox-inner{grid-template-columns:1fr;inset:6% 6% 10%}}
@media (max-width:760px){.page-shell{padding:12px}.topbar{padding:12px;position:relative}.brand img{width:160px}.topnav{gap:8px;font-size:12px}.hero{padding:26px;min-height:60vh}.section{padding:18px}.mini-stats{grid-template-columns:1fr}.lightbox-nav{display:none}}

.section-actions{display:flex;gap:12px;flex-wrap:wrap}
.package-grid,.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.package-card,.asset-card{border:1px solid rgba(184,141,68,.28);background:linear-gradient(180deg,rgba(19,20,27,.98),rgba(12,13,17,.96));cursor:pointer;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.package-card:hover,.asset-card:hover,.archive-card:hover,.package-card:focus-visible,.asset-card:focus-visible,.archive-card:focus-visible{transform:translateY(-2px);border-color:rgba(220,164,73,.75);box-shadow:0 10px 26px rgba(0,0,0,.35);outline:none}
.package-card .thumb,.asset-card .thumb{overflow:hidden;border-bottom:1px solid rgba(184,141,68,.22);background:#08090d}
.package-card img,.asset-card img{width:100%;height:100%;transition:transform .3s ease}
.package-card:hover img,.asset-card:hover img{transform:scale(1.03)}
.package-card .copy,.asset-card .copy{padding:14px}
.package-card h3,.asset-card h3{font-size:1rem;margin-bottom:6px}
.package-card .sub,.asset-card .sub{color:var(--muted);font-size:13px}
.gallery-group+.gallery-group{margin-top:24px}
.packaging-notes{margin-top:18px}
.empty-grid-note{padding:18px;border:1px solid rgba(184,141,68,.28);background:linear-gradient(180deg,rgba(22,24,31,.96),rgba(14,15,20,.96));color:var(--muted)}