/* ============================================================
   THE GRAND GUILD EXCHANGE — Diegetic fantasy marketplace
   ============================================================ */

:root{
  --stone-0:#0b0a09;
  --stone-1:#141210;
  --stone-2:#1e1a15;
  --stone-3:#2a241c;
  --parch-0:#efe2c4;
  --parch-1:#e4d3aa;
  --parch-2:#d7bf8f;
  --ink:#2a1c0e;
  --ink-soft:#4a3620;
  --gold:#d9a441;
  --gold-bright:#f3c869;
  --gold-deep:#8a5f1e;
  --ember:#e2732c;
  --arcane:#57e0c8;
  --arcane-deep:#1f8f7e;
  --violet:#9b7bd4;
  --blood:#a5352b;
  --shadow:0 18px 50px rgba(0,0,0,.7);
  --edge:1px solid rgba(217,164,65,.28);
  --font-display:'Cinzel',Georgia,serif;
  --font-body:'EB Garamond',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--parch-0);
  background:#000;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(87,224,200,.35)}

/* Scrollbar */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--stone-1)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-deep),var(--stone-3));border-radius:6px;border:2px solid var(--stone-1)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}

/* ---------- The great hall backdrop ---------- */
#hall{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(60,48,30,.55), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(87,224,200,.06), transparent 60%),
    linear-gradient(180deg,#0d0b09 0%,#100d0a 40%,#080706 100%);
}
.hall-pillar{
  position:absolute;top:-4%;bottom:-4%;width:9vw;min-width:70px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.6),rgba(60,50,36,.25) 20%,rgba(90,76,52,.4) 50%,rgba(60,50,36,.25) 80%,rgba(0,0,0,.6));
  box-shadow:inset 0 0 40px rgba(0,0,0,.7);
  border-left:1px solid rgba(0,0,0,.5);border-right:1px solid rgba(0,0,0,.5);
  opacity:.5;
}
.hall-pillar::before,.hall-pillar::after{
  content:"";position:absolute;left:-10%;right:-10%;height:6vh;
  background:linear-gradient(180deg,rgba(120,100,66,.5),rgba(20,16,12,.9));
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.hall-pillar::before{top:0}
.hall-pillar::after{bottom:0;transform:scaleY(-1)}
.hall-vignette{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.75) 100%);pointer-events:none}
.hall-rays{
  position:absolute;top:-20%;left:20%;right:20%;height:120%;
  background:linear-gradient(100deg,transparent 40%,rgba(243,200,105,.06) 48%,transparent 56%);
  filter:blur(4px);animation:rays 14s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes rays{from{transform:translateX(-6%) rotate(-1deg)}to{transform:translateX(6%) rotate(1deg)}}

/* Floating dust + candles layer */
#motes{position:fixed;inset:0;z-index:1;pointer-events:none}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(243,200,105,.9),rgba(243,200,105,0));animation:drift linear infinite}
@keyframes drift{
  0%{transform:translateY(110vh) translateX(0);opacity:0}
  10%{opacity:.8}
  90%{opacity:.5}
  100%{transform:translateY(-10vh) translateX(30px);opacity:0}
}
.candle{position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#ffe6a8,#e2732c 45%,rgba(226,115,44,0) 70%);
  filter:blur(1px);animation:flick 2.2s ease-in-out infinite}
.candle::after{content:"";position:absolute;inset:-24px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,200,105,.28),transparent 70%)}
@keyframes flick{0%,100%{transform:scale(1);opacity:.95}45%{transform:scale(.85) translateY(1px);opacity:.75}}

.reduce-motion .hall-rays,
.reduce-motion .mote,
.reduce-motion .candle{animation:none!important}
.reduce-motion *{animation-duration:.001s!important;transition-duration:.08s!important}

/* ---------- App shell ---------- */
#app{position:relative;z-index:2}
.shell{max-width:1360px;margin:0 auto;padding:0 clamp(14px,3vw,40px)}

/* ---------- Passage / entrance transition ---------- */
#passage{position:fixed;inset:0;z-index:60;background:#050403;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1.1s ease}
#passage.gone{opacity:0;pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:52%;background:
  repeating-linear-gradient(180deg,#1a140d,#1a140d 22px,#221a10 22px,#221a10 46px);
  box-shadow:inset 0 0 60px #000;transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.door.l{left:0;border-right:3px solid var(--gold-deep)}
.door.r{right:0;border-left:3px solid var(--gold-deep)}
#passage.open .door.l{transform:translateX(-102%)}
#passage.open .door.r{transform:translateX(102%)}
.passage-core{text-align:center;position:relative;z-index:2;animation:coreGlow 3s ease-in-out infinite}
@keyframes coreGlow{50%{filter:drop-shadow(0 0 24px rgba(87,224,200,.6))}}
.passage-core .sigil{font-size:clamp(50px,11vw,120px);color:var(--arcane);text-shadow:0 0 40px rgba(87,224,200,.8)}
.passage-core h1{font-family:var(--font-display);font-weight:700;letter-spacing:.16em;color:var(--gold-bright);font-size:clamp(20px,4vw,40px);margin:.4em 0}
.passage-core p{color:var(--parch-2);letter-spacing:.3em;text-transform:uppercase;font-size:12px}
.enter-btn{margin-top:26px}

/* ---------- Handcrafted buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-size:13px;letter-spacing:.08em;
  padding:.7em 1.25em;border-radius:3px;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  text-transform:uppercase}
.btn:focus-visible{outline:2px solid var(--arcane);outline-offset:3px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ic{font-size:1.1em}
/* wood */
.btn-wood{color:var(--parch-0);
  background:linear-gradient(180deg,#4b371f,#33240f);
  box-shadow:inset 0 1px 0 rgba(243,200,105,.25),inset 0 -3px 6px rgba(0,0,0,.5),0 6px 14px rgba(0,0,0,.5);
  border:1px solid #2a1c0d}
.btn-wood:hover{filter:brightness(1.12)}
/* brass */
.btn-brass{color:#3a2a10;font-weight:700;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(217,164,65,.35);
  border:1px solid #6f4c15}
.btn-brass:hover{filter:brightness(1.08)}
/* iron */
.btn-iron{color:#d8d2c4;
  background:linear-gradient(180deg,#4a4a4e,#26262a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.5);
  border:1px solid #17171a}
.btn-iron:hover{filter:brightness(1.15)}
/* rune / arcane */
.btn-rune{color:var(--arcane);border:1px solid rgba(87,224,200,.5);
  background:linear-gradient(180deg,rgba(31,143,126,.2),rgba(10,20,18,.6));
  box-shadow:0 0 18px rgba(87,224,200,.25),inset 0 0 12px rgba(87,224,200,.12);
  text-shadow:0 0 10px rgba(87,224,200,.6)}
.btn-rune:hover{box-shadow:0 0 26px rgba(87,224,200,.5),inset 0 0 16px rgba(87,224,200,.2)}
/* wax seal */
.btn-wax{width:52px;height:52px;border-radius:50%;padding:0;justify-content:center;
  color:#f3d9c8;background:radial-gradient(circle at 35% 30%,#c4483a,#7c241b);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3),inset 0 -4px 8px rgba(0,0,0,.5),0 5px 12px rgba(0,0,0,.5);
  border:none;font-size:18px}
.btn-wax:hover{filter:brightness(1.1)}
.btn.small{font-size:11px;padding:.5em .8em}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- Top guild banner ---------- */
.topbar{position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(12,10,8,.96),rgba(12,10,8,.7));
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(217,164,65,.22)}
.topbar-in{display:flex;align-items:center;gap:16px;padding:12px 0}
.crest{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:24px;
  background:radial-gradient(circle at 35% 30%,#3a2a15,#120d08);
  border:2px solid var(--gold-deep);box-shadow:0 0 16px rgba(217,164,65,.3)}
.brand{line-height:1.05}
.brand .k{font-family:var(--font-display);font-size:clamp(15px,2.2vw,22px);letter-spacing:.14em;color:var(--gold-bright)}
.brand .s{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--parch-2)}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:10px}
@media(max-width:640px){.brand .s{display:none}}

/* ---------- Section framing ---------- */
.section{padding:clamp(34px,6vw,74px) 0;position:relative}
.sec-head{text-align:center;margin-bottom:30px}
.sec-head .eyebrow{letter-spacing:.4em;text-transform:uppercase;font-size:11px;color:var(--arcane)}
.sec-head h2{font-family:var(--font-display);font-size:clamp(22px,4vw,40px);color:var(--gold-bright);margin:.2em 0;font-weight:700}
.sec-head p{color:var(--parch-2);max-width:640px;margin:0 auto;font-size:16px;font-style:italic}
.divider{height:2px;width:min(560px,80%);margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold),var(--gold-deep),transparent)}

/* ---------- Hero: enchanted map table ---------- */
.hero{padding:clamp(40px,7vw,90px) 0 20px;text-align:center}
.hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;
  font-size:clamp(30px,6.4vw,74px);color:var(--gold-bright);
  text-shadow:0 4px 30px rgba(217,164,65,.35);line-height:1.05}
.hero .lede{max-width:660px;margin:14px auto 0;color:var(--parch-1);font-size:clamp(15px,2vw,19px);font-style:italic}

.maptable{position:relative;max-width:960px;margin:34px auto 0;aspect-ratio:16/9;border-radius:14px;
  background:
    radial-gradient(120% 120% at 50% 0%,rgba(87,224,200,.10),transparent 55%),
    repeating-radial-gradient(circle at 50% 60%,#12100b,#12100b 2px,#171309 3px,#171309 4px);
  border:10px solid #29200f;
  box-shadow:var(--shadow),inset 0 0 60px rgba(0,0,0,.8),0 0 60px rgba(217,164,65,.15);
  overflow:hidden}
.maptable .rim{position:absolute;inset:0;border-radius:6px;
  box-shadow:inset 0 0 0 3px rgba(217,164,65,.25);pointer-events:none}
.holo{position:absolute;inset:8%;border-radius:50%/40%;
  background:
    radial-gradient(60% 60% at 40% 35%,rgba(87,224,200,.22),transparent 60%),
    radial-gradient(50% 50% at 70% 70%,rgba(155,123,212,.18),transparent 60%);
  filter:blur(2px);animation:holoSpin 40s linear infinite}
@keyframes holoSpin{to{transform:rotate(360deg)}}
.holo-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(87,224,200,.05) 0 2px,transparent 2px 5px);pointer-events:none;animation:scan 6s linear infinite}
@keyframes scan{to{background-position:0 40px}}
.landmass{position:absolute;border-radius:46% 54% 60% 40%/50% 40% 60% 50%;
  background:radial-gradient(circle at 40% 35%,rgba(217,164,65,.55),rgba(138,95,30,.25));
  box-shadow:0 0 22px rgba(217,164,65,.4);filter:blur(.4px)}
.river{position:absolute;height:3px;background:linear-gradient(90deg,transparent,var(--arcane),transparent);
  box-shadow:0 0 8px var(--arcane);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{50%{opacity:.4}}
.pin{position:absolute;width:14px;height:14px;transform:translate(-50%,-100%);cursor:pointer;z-index:3}
.pin .head{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffdf9e,var(--ember));
  box-shadow:0 0 12px var(--ember);animation:pinPulse 2.4s ease-in-out infinite}
.pin .stem{width:2px;height:10px;margin:0 auto;background:var(--gold-deep)}
.pin.active .head{background:radial-gradient(circle at 35% 30%,#c9fff2,var(--arcane));box-shadow:0 0 18px var(--arcane)}
@keyframes pinPulse{50%{transform:scale(1.35)}}
.pin .flag{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--font-display);font-size:11px;letter-spacing:.06em;color:var(--parch-0);
  background:rgba(12,10,8,.85);border:1px solid var(--gold-deep);padding:2px 8px;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none}
.pin:hover .flag,.pin.active .flag{opacity:1}
.kingdom-readout{position:absolute;left:12px;bottom:12px;text-align:left;
  background:rgba(8,6,5,.7);border:1px solid rgba(217,164,65,.3);border-radius:6px;padding:10px 14px;max-width:60%}
.kingdom-readout .kn{font-family:var(--font-display);color:var(--gold-bright);letter-spacing:.08em;font-size:14px}
.kingdom-readout .kd{font-size:13px;color:var(--parch-2);font-style:italic}
.map-stats{position:absolute;right:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:55%}
.chip{font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:20px;
  background:rgba(12,10,8,.7);border:1px solid rgba(217,164,65,.3);color:var(--parch-1);font-family:var(--font-display)}
@media(max-width:560px){.kingdom-readout{max-width:70%}.map-stats{display:none}}

/* ---------- Search tome ---------- */
.tome-wrap{display:flex;justify-content:center;margin:30px auto 0}
.tome{position:relative;width:min(760px,94vw);perspective:1600px}
.tome-book{display:grid;grid-template-columns:1fr 1fr;border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow),0 0 50px rgba(217,164,65,.15);border:6px solid #2a1c0d;
  background:linear-gradient(180deg,#3a2a17,#241708)}
.tome-page{background:
    linear-gradient(180deg,rgba(0,0,0,.06),transparent 8%,transparent 92%,rgba(0,0,0,.14)),
    radial-gradient(120% 120% at 100% 50%,rgba(120,90,40,.18),transparent 55%),
    var(--parch-1);
  color:var(--ink);padding:26px 24px;min-height:180px;position:relative}
.tome-page.left{border-right:2px solid rgba(80,55,25,.4);box-shadow:inset -14px 0 24px rgba(90,60,25,.2)}
.tome-page.right{box-shadow:inset 14px 0 24px rgba(90,60,25,.2)}
.tome-page h3{font-family:var(--font-display);font-size:15px;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:12px;text-transform:uppercase}
.rune-row{display:flex;gap:10px;font-size:20px;color:var(--gold-deep);margin-bottom:14px}
.rune-row span{animation:runeGlow 3s ease-in-out infinite}
.rune-row span:nth-child(2){animation-delay:.4s}
.rune-row span:nth-child(3){animation-delay:.8s}
.rune-row span:nth-child(4){animation-delay:1.2s}
@keyframes runeGlow{50%{color:var(--arcane-deep);text-shadow:0 0 10px rgba(31,143,126,.6)}}
.ink-input{width:100%;background:transparent;border:none;border-bottom:2px solid rgba(80,55,25,.5);
  font-family:var(--font-body);font-size:22px;color:var(--ink);padding:6px 2px;letter-spacing:.01em}
.ink-input::placeholder{color:rgba(74,54,32,.55);font-style:italic}
.ink-input:focus{outline:none;border-bottom-color:var(--arcane-deep)}
.ink-caret{display:inline-block;width:2px;height:1em;background:var(--ink);animation:blink 1s steps(2) infinite;vertical-align:-2px}
@keyframes blink{50%{opacity:0}}
.tome-hint{font-style:italic;color:var(--ink-soft);font-size:14px;margin-top:14px}
.tome-results-note{position:absolute;right:20px;bottom:14px;font-family:var(--font-display);font-size:12px;color:var(--gold-deep)}
@media(max-width:620px){.tome-book{grid-template-columns:1fr}.tome-page.left{display:none}}

/* ---------- Relic filters ---------- */
.relics{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:8px auto 0;max-width:1000px}
.relic{position:relative;width:92px;padding:14px 8px 10px;border-radius:10px;text-align:center;
  background:linear-gradient(180deg,rgba(42,33,20,.9),rgba(18,14,9,.9));
  border:1px solid rgba(217,164,65,.22);transition:transform .18s,box-shadow .18s,border-color .18s}
.relic:hover{transform:translateY(-4px);border-color:var(--gold)}
.relic .glyph{font-size:30px;filter:grayscale(.3) brightness(.9);transition:filter .2s,transform .3s}
.relic:hover .glyph{transform:scale(1.12)}
.relic .lbl{display:block;margin-top:6px;font-family:var(--font-display);font-size:10px;letter-spacing:.08em;color:var(--parch-2);text-transform:uppercase}
.relic.on{border-color:var(--arcane);box-shadow:0 0 22px rgba(87,224,200,.35),inset 0 0 16px rgba(87,224,200,.1)}
.relic.on .glyph{filter:none;text-shadow:0 0 16px rgba(87,224,200,.7)}
.relic.on .lbl{color:var(--arcane)}
.relic:focus-visible{outline:2px solid var(--arcane);outline-offset:2px}

/* secondary filter runes */
.subfilters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;max-width:1000px;margin-left:auto;margin-right:auto}
.tag-toggle{font-family:var(--font-display);font-size:11px;letter-spacing:.06em;padding:5px 12px;border-radius:20px;
  background:rgba(20,16,11,.8);border:1px solid rgba(217,164,65,.25);color:var(--parch-2);transition:.15s;text-transform:uppercase}
.tag-toggle:hover{border-color:var(--gold);color:var(--parch-0)}
.tag-toggle.on{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2a1c0d;border-color:var(--gold-bright)}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:20px}
.sort-select{font-family:var(--font-display);font-size:12px;background:rgba(20,16,11,.9);color:var(--parch-0);
  border:1px solid rgba(217,164,65,.3);border-radius:4px;padding:7px 10px;letter-spacing:.05em}
.result-count{font-family:var(--font-display);color:var(--gold);font-size:13px;letter-spacing:.05em}

/* ---------- Discovery cards (parchment plaques) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px;margin-top:14px}
.disc{position:relative;text-align:left;border-radius:6px;overflow:hidden;transition:transform .22s,box-shadow .22s;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05),transparent 10%,transparent 88%,rgba(0,0,0,.16)),
    var(--parch-1);
  color:var(--ink);
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  border:1px solid rgba(80,55,25,.35);
  --pin-rot:-3deg}
.disc:nth-child(even){--pin-rot:4deg}
.disc:hover{transform:translateY(-6px) rotate(0deg);box-shadow:0 22px 44px rgba(0,0,0,.6),0 0 30px rgba(217,164,65,.2)}
.disc:focus-visible{outline:3px solid var(--arcane);outline-offset:2px}
.disc .tape{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(var(--pin-rot));z-index:3;
  width:44px;height:18px;background:rgba(217,164,65,.35);border:1px solid rgba(217,164,65,.5);
  box-shadow:0 2px 6px rgba(0,0,0,.3)}
.disc .art{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:2px solid rgba(80,55,25,.35)}
.disc .art canvas{width:100%;height:100%;display:block}
.disc .art .frame{position:absolute;inset:6px;border:1px solid rgba(239,226,196,.4);box-shadow:inset 0 0 24px rgba(0,0,0,.4);pointer-events:none}
.disc .art .cat{position:absolute;left:8px;top:8px;font-family:var(--font-display);font-size:10px;letter-spacing:.08em;
  padding:3px 8px;border-radius:3px;background:rgba(8,6,5,.7);color:var(--gold-bright);border:1px solid var(--gold-deep);text-transform:uppercase}
.disc .art .price{position:absolute;right:8px;top:8px;font-family:var(--font-display);font-size:11px;
  padding:3px 8px;border-radius:3px;background:rgba(8,6,5,.75);color:var(--arcane);border:1px solid var(--arcane-deep)}
.disc .art .price.free{color:#bfe3a0;border-color:#5f7c3a}
.disc .body{padding:12px 14px 14px}
.disc .title{font-family:var(--font-display);font-size:16px;color:var(--ink);letter-spacing:.02em;line-height:1.15}
.disc .by{font-size:13px;color:var(--ink-soft);font-style:italic;margin-top:2px}
.disc .meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;font-size:12px;color:var(--ink-soft)}
.disc .meta b{color:var(--ink)}
.disc .stars{color:var(--gold-deep);letter-spacing:1px;font-size:13px}
.disc .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.disc .tags span{font-size:10px;letter-spacing:.04em;padding:2px 7px;border-radius:12px;background:rgba(80,55,25,.14);border:1px solid rgba(80,55,25,.28);color:var(--ink-soft);text-transform:uppercase}
.disc .cardfoot{display:flex;gap:8px;margin-top:12px;align-items:center}
.disc .wax{margin-left:auto;font-size:12px;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.disc .wax button{color:var(--ink-soft);font-size:15px;transition:.15s}
.disc .wax button:hover{color:var(--blood);transform:scale(1.15)}
.disc .wax button.on{color:var(--blood)}
.disc .wax button.book.on{color:var(--gold-deep)}

.loadmore{display:flex;justify-content:center;margin-top:34px}

/* ---------- Detail overlay ---------- */
.veil{position:fixed;inset:0;z-index:70;background:rgba(3,2,2,.86);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;
  animation:veilIn .4s ease}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.detail{position:relative;width:min(1080px,100%);margin:auto;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#1c160e,#12100b);border:2px solid var(--gold-deep);
  box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 60px rgba(217,164,65,.2);
  animation:detailRise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes detailRise{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.detail-close{position:absolute;top:12px;right:12px;z-index:5}
.detail-grid{display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}
.detail-gallery{position:relative;background:#0b0a08;padding:18px}
.detail-hero{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid rgba(217,164,65,.3);box-shadow:inset 0 0 50px rgba(0,0,0,.6)}
.detail-hero canvas{width:100%;height:100%}
.detail-hero .float-label{position:absolute;left:14px;bottom:12px;font-family:var(--font-display);letter-spacing:.06em;
  color:var(--gold-bright);background:rgba(8,6,5,.7);padding:4px 10px;border-radius:3px;border:1px solid var(--gold-deep);font-size:12px}
.thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.thumbs .th{width:64px;aspect-ratio:1;border-radius:5px;overflow:hidden;border:1px solid rgba(217,164,65,.3);cursor:pointer;transition:.15s}
.thumbs .th canvas{width:100%;height:100%}
.thumbs .th.on{border-color:var(--arcane);box-shadow:0 0 12px rgba(87,224,200,.5)}
.detail-info{padding:22px;overflow:hidden}
.detail-info .cat{font-family:var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--arcane);font-size:11px}
.detail-info h2{font-family:var(--font-display);font-size:clamp(22px,3.4vw,32px);color:var(--gold-bright);margin:.15em 0;line-height:1.08}
.detail-info .sub{color:var(--parch-2);font-style:italic}
.detail-info p.desc{color:var(--parch-1);margin:14px 0;font-size:15px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:14px 0;font-size:14px}
.spec-grid .k{color:var(--parch-2);letter-spacing:.04em}
.spec-grid .v{color:var(--parch-0);font-weight:600}
.detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.detail-tags span{font-family:var(--font-display);font-size:10px;letter-spacing:.06em;padding:3px 9px;border-radius:14px;
  background:rgba(217,164,65,.1);border:1px solid rgba(217,164,65,.3);color:var(--gold);text-transform:uppercase}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;align-items:center}
.detail-section{border-top:1px solid rgba(217,164,65,.15);padding:16px 0}
.detail-section h4{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--gold);margin-bottom:10px}
.creator-row{display:flex;align-items:center;gap:12px}
.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:22px;
  background:radial-gradient(circle at 35% 30%,#3a2a15,#120d08);border:2px solid var(--gold-deep)}
.creator-row .cn{font-family:var(--font-display);color:var(--parch-0);letter-spacing:.04em}
.creator-row .cr{font-size:12px;color:var(--parch-2)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge{font-size:10px;letter-spacing:.05em;padding:2px 8px;border-radius:12px;background:rgba(155,123,212,.15);border:1px solid rgba(155,123,212,.4);color:var(--violet);text-transform:uppercase}
.versions li,.comments li{list-style:none;padding:8px 0;border-bottom:1px dashed rgba(217,164,65,.15);font-size:14px;color:var(--parch-1)}
.versions .vtag{font-family:var(--font-display);color:var(--gold);margin-right:8px}
.comment .ch{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.comment .cavatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:#2a2015;border:1px solid var(--gold-deep)}
.comment .cn{font-family:var(--font-display);font-size:13px;color:var(--gold)}
.comment .cd{font-size:11px;color:var(--parch-2);margin-left:auto}
.related-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.related-row .rel{border-radius:6px;overflow:hidden;border:1px solid rgba(217,164,65,.25);cursor:pointer;background:#0b0a08;transition:.15s}
.related-row .rel:hover{border-color:var(--gold);transform:translateY(-3px)}
.related-row .rel canvas{width:100%;aspect-ratio:4/3}
.related-row .rel .rn{font-size:11px;padding:5px 7px;color:var(--parch-1);font-family:var(--font-display);letter-spacing:.03em}

/* ---------- Community rails ---------- */
.rail{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:8px}
.rail-card{scroll-snap-align:start;flex:0 0 auto;width:min(280px,80vw)}
.pick-plaque{position:relative;border-radius:8px;padding:16px;color:var(--parch-0);
  background:linear-gradient(180deg,rgba(42,33,20,.95),rgba(16,13,9,.95));border:1px solid rgba(217,164,65,.28);
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.pick-plaque .rank{font-family:var(--font-display);font-size:30px;color:var(--gold-deep);position:absolute;right:12px;top:8px;opacity:.5}
.pick-plaque .pt{font-family:var(--font-display);color:var(--gold-bright);letter-spacing:.05em;font-size:16px;margin-bottom:4px;padding-right:34px}
.pick-plaque .pd{font-size:13px;color:var(--parch-2);font-style:italic;min-height:38px}
.pick-plaque .pm{margin-top:10px;font-size:12px;color:var(--parch-1);display:flex;gap:12px;flex-wrap:wrap}

.creator-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}
.creator-card{border-radius:8px;padding:18px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(87,224,200,.06),transparent 60%),linear-gradient(180deg,rgba(30,26,21,.95),rgba(14,11,8,.95));
  border:1px solid rgba(217,164,65,.24);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.creator-card .avatar{width:64px;height:64px;font-size:30px;margin:0 auto 10px}
.creator-card .cn{font-family:var(--font-display);color:var(--gold-bright);letter-spacing:.05em}
.creator-card .cr{font-size:12px;color:var(--parch-2);font-style:italic}
.creator-card .cstats{display:flex;justify-content:center;gap:16px;margin-top:12px;font-size:12px}
.creator-card .cstats b{display:block;font-family:var(--font-display);color:var(--gold);font-size:15px}

.kingdom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px}
.kingdom-tile{position:relative;border-radius:8px;overflow:hidden;height:150px;cursor:pointer;border:1px solid rgba(217,164,65,.25)}
.kingdom-tile canvas{position:absolute;inset:0;width:100%;height:100%}
.kingdom-tile .kv{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,5,4,.9),transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.kingdom-tile .kv .kn{font-family:var(--font-display);color:var(--gold-bright);letter-spacing:.06em}
.kingdom-tile .kv .kc{font-size:12px;color:var(--parch-2)}
.kingdom-tile:hover canvas{transform:scale(1.06)}
.kingdom-tile canvas{transition:transform .4s}

/* ---------- Footer ---------- */
.foot{border-top:1px solid rgba(217,164,65,.2);padding:40px 0 60px;text-align:center;color:var(--parch-2)}
.foot .seal{font-size:34px;color:var(--gold);margin-bottom:10px}
.foot .fq{font-style:italic;max-width:560px;margin:0 auto 16px;font-size:15px}
.foot .fl{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.foot .fl a{color:var(--parch-2);text-decoration:none;transition:.15s}
.foot .fl a:hover{color:var(--gold-bright)}

/* toast */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{font-family:var(--font-display);font-size:13px;letter-spacing:.04em;color:var(--parch-0);
  background:linear-gradient(180deg,rgba(42,33,20,.98),rgba(16,13,9,.98));border:1px solid var(--gold-deep);
  padding:10px 18px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.6);animation:toastIn .3s ease}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* high contrast toggle */
.high-contrast{--parch-0:#fff;--parch-1:#f4ecd8;--parch-2:#e0d3b3;--ink:#000;--ink-soft:#1e150a;--gold-bright:#ffd772}
.high-contrast .disc,.high-contrast .tome-page{background:#f6ecd2}
.high-contrast .sec-head p,.high-contrast .hero .lede{color:#f4ecd8}

/* misc */
.center{text-align:center}
.mt{margin-top:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
a.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--gold);color:#2a1c0d;padding:8px 14px}
a.skip:focus{left:8px}