@property --accent{syntax:'<color>';inherits:true;initial-value:#ecc98c}
:root{--accent:#ecc98c;--ink:#f3eee6;--dim:rgba(243,238,230,.58);--line:rgba(243,238,230,.14);transition:--accent .9s ease}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#050407;color:var(--ink);overflow:hidden;font-family:'Cormorant Garamond',Georgia,serif;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab;touch-action:none}
#c.drag{cursor:grabbing}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
kbd{font:600 10px/1 system-ui,sans-serif;letter-spacing:.05em;padding:4px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;color:var(--ink);background:rgba(255,255,255,.05)}
.hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease .3s}
.hud.on{opacity:1}
.hud button,.hud .card{pointer-events:auto}

.brand{position:absolute;top:28px;left:44px}
.brand .ahs{font:600 11px/1 'Cinzel',serif;letter-spacing:.55em;color:var(--dim);text-transform:uppercase}
.brand .coven{font:900 66px/1 'Cinzel Decorative',serif;letter-spacing:.06em;margin-top:6px;background:linear-gradient(180deg,#fff 10%,#b9ab97 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(0,0,0,.7))}
.brand .tag{display:flex;align-items:center;gap:12px;font:600 11px/1 'Cinzel',serif;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.brand .tag i{display:block;width:34px;height:1px;background:var(--accent)}

.info{position:absolute;left:44px;bottom:190px;width:min(500px,40vw)}
.meta{display:flex;align-items:center;gap:12px;font:600 11px/1 'Cinzel',serif;letter-spacing:.38em;text-transform:uppercase;color:var(--dim)}
.meta .num{font:400 26px/1 Anton,sans-serif;letter-spacing:.02em;color:var(--accent)}
.meta .bar{width:40px;height:1px;background:var(--line)}
.meta .ttl{color:var(--accent)}
h1{font:400 clamp(56px,7.6vw,118px)/.84 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em;margin:14px 0 18px;transform:skewX(-7deg);transform-origin:left bottom;filter:drop-shadow(0 8px 30px rgba(0,0,0,.65))}
h1 span{display:block}
h1 .first{color:#fff}
h1 .last{background:linear-gradient(95deg,var(--accent) 0%,#fff 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote{font:italic 500 23px/1.25 'Cormorant Garamond',serif;color:var(--ink);max-width:430px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.actor{margin-top:14px;font:600 10px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:var(--dim)}
.actor b{color:var(--ink);font-weight:700}
.swap .meta,.swap h1,.swap .quote,.swap .actor{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.swap h1{animation-delay:.05s}.swap .quote{animation-delay:.12s}.swap .actor{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(18px) skewX(-7deg);filter:blur(6px)}to{opacity:1}}

.stats{position:absolute;right:44px;top:50%;transform:translateY(-58%);width:300px;padding:22px 22px 20px;background:linear-gradient(160deg,rgba(20,14,26,.62),rgba(8,6,10,.4));border:1px solid var(--line);border-left:2px solid var(--accent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.shead{display:flex;justify-content:space-between;align-items:baseline;font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.shead em{font:400 30px/1 Anton,sans-serif;font-style:normal;letter-spacing:0;color:var(--accent)}
.wonders{list-style:none;display:grid;gap:11px}
.wonders li{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font:600 10.5px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase}
.wonders b{font:400 14px/1 Anton,sans-serif;letter-spacing:.04em;color:var(--ink)}
.wonders .t{grid-column:1/-1;height:4px;background:rgba(255,255,255,.08);transform:skewX(-20deg);overflow:hidden}
.wonders .f{height:100%;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));box-shadow:0 0 12px var(--accent);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.sig{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.slabel{font:600 10px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:var(--dim)}
.sname{font:400 24px/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--accent);margin:8px 0 6px}
.sdesc{font:500 16px/1.25 'Cormorant Garamond',serif;color:var(--ink)}

.arrow{position:absolute;top:50%;width:54px;height:54px;margin-top:-27px;border:1px solid var(--line);border-radius:50%;font:400 30px/1 'Cinzel',serif;color:var(--ink);background:rgba(10,8,14,.35);backdrop-filter:blur(6px);transition:border-color .3s,background .3s,transform .3s}
.arrow:hover{border-color:var(--accent);background:rgba(10,8,14,.6);transform:scale(1.08)}
.arrow.l{left:calc(50% - 250px)}.arrow.r{right:calc(50% - 250px)}

.roster{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:9px;max-width:calc(100vw - 32px)}
.card{position:relative;width:62px;height:82px;flex:none;transform:skewX(-9deg);overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#221a2b,#0b0810);transition:width .35s,height .35s,border-color .35s,box-shadow .35s,transform .35s;cursor:pointer}
.card img{position:absolute;inset:0 -12px;width:calc(100% + 24px);height:100%;object-fit:cover;transform:skewX(9deg);filter:saturate(.7) brightness(.72);transition:filter .35s}
.card:hover{transform:skewX(-9deg) translateY(-4px)}
.card:hover img{filter:none}
.card.on{width:84px;height:108px;border-color:var(--accent);box-shadow:0 0 28px -4px var(--accent),inset 0 -40px 40px -30px var(--accent)}
.card.on img{filter:none}
.card span{position:absolute;left:0;right:0;bottom:4px;font:400 10px/1 Anton,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-align:center;transform:skewX(9deg);text-shadow:0 1px 4px #000}

.actions{position:absolute;right:44px;bottom:30px;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.keys{display:flex;gap:16px;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.keys span{display:flex;align-items:center;gap:5px}
.choose{display:flex;align-items:center;gap:14px;padding:15px 22px 15px 26px;background:var(--accent);color:#0b0709;font:400 22px/1 Anton,sans-serif;letter-spacing:.14em;text-transform:uppercase;transform:skewX(-10deg);box-shadow:0 10px 40px -10px var(--accent);transition:transform .25s,box-shadow .25s,filter .25s}
.choose>*{transform:skewX(10deg)}
.choose kbd{color:#0b0709;border-color:rgba(0,0,0,.35);background:rgba(0,0,0,.08)}
.choose:hover{transform:skewX(-10deg) translateY(-2px);box-shadow:0 14px 50px -6px var(--accent);filter:brightness(1.1)}
.snd{position:absolute;top:30px;right:44px;font:600 10px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);padding:10px 14px;border:1px solid var(--line)}
.snd:hover{color:var(--ink);border-color:var(--accent)}
.zoom{position:absolute;top:30px;right:180px;font:600 10px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);padding:10px 14px;border:1px solid var(--line)}
.zoom:hover{color:var(--ink);border-color:var(--accent)}

#loader{position:fixed;inset:0;background:#050407;display:grid;place-content:center;justify-items:center;gap:18px;z-index:10;transition:opacity 1.2s ease}
#loader.gone{opacity:0;pointer-events:none}
#loader .lc{font:900 64px/1 'Cinzel Decorative',serif;letter-spacing:.08em;color:#e9e2d6}
#loader .la{font:600 11px/1 'Cinzel',serif;letter-spacing:.55em;text-transform:uppercase;color:rgba(243,238,230,.5)}
#loader .lt{font:italic 500 18px/1 'Cormorant Garamond',serif;color:rgba(243,238,230,.7);min-height:18px}
#loader .lb{width:220px;height:1px;background:rgba(255,255,255,.12)}
#loader .lb i{display:block;height:100%;width:0;background:#ecc98c;box-shadow:0 0 10px #ecc98c;transition:width .3s}

#chosen{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:14px;background:radial-gradient(ellipse at center,rgba(0,0,0,.15),rgba(0,0,0,.75));z-index:5;opacity:0;pointer-events:none;transition:opacity 1s ease}
#chosen.on{opacity:1;pointer-events:auto}
#chosen .k{font:600 12px/1 'Cinzel',serif;letter-spacing:.55em;text-transform:uppercase;color:var(--accent)}
#chosen .n{font:400 clamp(54px,9vw,130px)/.9 Anton,sans-serif;text-transform:uppercase;transform:skewX(-7deg);background:linear-gradient(95deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 40px rgba(0,0,0,.8))}
#chosen .s{font:italic 500 22px/1.3 'Cormorant Garamond',serif;color:var(--ink)}
#chosen button{margin-top:18px;padding:12px 20px;border:1px solid var(--accent);font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase}
#chosen button:hover{background:var(--accent);color:#0b0709}
#flash{position:fixed;inset:0;background:var(--accent);mix-blend-mode:screen;opacity:0;pointer-events:none;z-index:6}
#flash.go{animation:flash 1.1s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}

@media (max-width:980px){
  .stats{display:none}
  .arrow.l{left:12px}.arrow.r{right:12px}
  .info{left:20px;bottom:150px;width:calc(100vw - 40px)}
  .brand{left:20px;top:18px}.brand .coven{font-size:44px}
  .quote{font-size:18px}
  .actions{right:16px;bottom:auto;top:20px}.keys{display:none}
  .choose{padding:11px 16px;font-size:16px}.choose kbd{display:none}
  .snd,.zoom{display:none}
  .roster{justify-content:flex-start;overflow-x:auto;padding:14px 6px 2px;bottom:14px}
  .card{width:50px;height:66px}.card.on{width:64px;height:84px}
}

/* ================= shared screens ================= */
.screen{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity .9s ease;z-index:6}
.screen.on{opacity:1;pointer-events:auto}

/* ================= splash ================= */
#splash{background:radial-gradient(ellipse at 50% 60%,rgba(5,4,7,0) 20%,rgba(5,4,7,.75) 80%);cursor:pointer;gap:6px}
.sp-top{font:600 13px/1 'Cinzel',serif;letter-spacing:.8em;text-transform:uppercase;color:rgba(243,238,230,.7);margin-bottom:10px;animation:rise 1.6s .2s both}
.sp-title{font:900 clamp(90px,16vw,210px)/.85 'Cinzel Decorative',serif;letter-spacing:.06em;display:flex;gap:.02em}
.sp-title span{display:inline-block;background:linear-gradient(180deg,#fff 10%,#c9b9a2 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 40px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(160,110,255,.25));animation:letter 1.6s cubic-bezier(.2,.8,.2,1) both}
.sp-title span:nth-child(2){animation-delay:.12s}.sp-title span:nth-child(3){animation-delay:.24s}.sp-title span:nth-child(4){animation-delay:.36s}.sp-title span:nth-child(5){animation-delay:.48s}
@keyframes letter{from{opacity:0;transform:translateY(40px) scale(1.2);filter:blur(12px)}to{opacity:1}}
.sp-sub{font:400 22px/1 Anton,sans-serif;letter-spacing:.9em;text-transform:uppercase;color:#ecc98c;margin:8px 0 22px;padding-left:.9em;animation:rise 1.6s .9s both}
.sp-tag{font:italic 500 22px/1.3 'Cormorant Garamond',serif;color:rgba(243,238,230,.85);animation:rise 1.6s 1.2s both}
.sp-press{margin-top:60px;font:600 12px/1 'Cinzel',serif;letter-spacing:.6em;text-transform:uppercase;color:#fff;animation:pulse 2.2s 2s infinite both}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.sp-foot{position:fixed;bottom:22px;left:0;right:0;font:600 10px/1 'Cinzel',serif;letter-spacing:.4em;text-transform:uppercase;color:rgba(243,238,230,.35)}

/* ================= entering ================= */
#enter{background:#050407;gap:14px;z-index:9}
#enter .ek{font:600 11px/1 'Cinzel',serif;letter-spacing:.55em;text-transform:uppercase;color:var(--accent)}
#enter .en{font:900 clamp(34px,5vw,64px)/1 'Cinzel Decorative',serif;color:#efe8dc}
#enter .ez{font:italic 500 19px/1 'Cormorant Garamond',serif;color:rgba(243,238,230,.7)}
#enter .eb{width:260px;height:1px;background:rgba(255,255,255,.12);margin-top:18px}
#enter .eb i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .4s}
#enter .ew{font:600 11px/1 'Cinzel',serif;letter-spacing:.4em;text-transform:uppercase;color:rgba(243,238,230,.5);margin-top:6px}
#enter .ew b{color:#fff}
#titlecard{position:fixed;left:0;right:0;bottom:16vh;text-align:center;opacity:0;pointer-events:none;transition:opacity 1.6s ease;z-index:5}
#titlecard.on{opacity:1}
#titlecard .tk{font:900 clamp(30px,4.2vw,58px)/1 'Cinzel Decorative',serif;color:#fff;filter:drop-shadow(0 6px 26px rgba(0,0,0,.9))}
#titlecard .ts{font:italic 500 24px/1.3 'Cormorant Garamond',serif;color:#f3eee6;text-shadow:0 2px 14px #000}
#titlecard .tl{margin-top:12px;font:600 11px/1 'Cinzel',serif;letter-spacing:.55em;text-transform:uppercase;color:var(--accent);text-shadow:0 2px 10px #000}

/* ================= game HUD ================= */
#game{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1s ease;z-index:3}
#game.on{opacity:1}
#bars,#bubbles{position:fixed;inset:0;pointer-events:none}
.hb{position:absolute;left:0;top:0;width:64px;height:5px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);display:none}
.hb i{display:block;height:100%;background:linear-gradient(90deg,#b31b1b,#ff5a4a)}
.hb.ally i{background:linear-gradient(90deg,#2aa870,#7dffb0)}
.hb.marked{border-color:#6f8cff;box-shadow:0 0 10px #6f8cff}
.bubble{position:absolute;left:0;top:0;display:none;max-width:220px;padding:8px 12px;background:rgba(10,20,30,.78);border:1px solid rgba(111,220,255,.5);border-radius:14px;font:italic 500 15px/1.2 'Cormorant Garamond',serif;color:#dff6ff;text-align:center;box-shadow:0 0 18px rgba(111,220,255,.3)}
#cross{position:fixed;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
#cross i{position:absolute;inset:11px;border-radius:50%;background:#fff;box-shadow:0 0 6px #000}
#cross b{position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;transition:transform .2s,border-color .2s}
#cross.aim b{transform:scale(.6);border-color:var(--accent)}
.vitals{position:fixed;left:32px;bottom:34px;width:300px;display:grid;gap:9px}
.vrow{display:grid;grid-template-columns:48px 1fr 40px;align-items:center;gap:10px}
.vl{font:600 10px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,238,230,.7)}
.vb{height:9px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);transform:skewX(-20deg);overflow:hidden}
.vb i{display:block;height:100%;transition:width .25s}
.hp .vb i{background:linear-gradient(90deg,#8b1010,#ff4a3a);box-shadow:0 0 12px #ff3a2a}
.mp .vb i{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 50%,#000),var(--accent));box-shadow:0 0 12px var(--accent)}
.vrow em{font:400 16px/1 Anton,sans-serif;font-style:normal;color:#fff;text-shadow:0 2px 6px #000}
.abar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
#abname{font:400 22px/1 Anton,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 10px #000}
#hotbar{display:flex;gap:7px}
.slot{position:relative;width:52px;height:52px;background:rgba(8,6,12,.62);border:1px solid rgba(255,255,255,.18);transform:skewX(-8deg);display:grid;place-items:center;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.slot svg{width:28px;height:28px;transform:skewX(8deg);fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--c))}
.slot .k{position:absolute;left:5px;top:3px;font:600 10px/1 system-ui,sans-serif;color:rgba(255,255,255,.55);transform:skewX(8deg)}
.slot .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.65)}
.slot.on{border-color:var(--c);box-shadow:0 0 18px -2px var(--c),inset 0 0 18px -6px var(--c);transform:skewX(-8deg) translateY(-6px)}
.slot.sig{border-style:double;border-width:3px}
.slot.nomana svg{opacity:.35}
.ahint{font:600 10px/1 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,230,.55);text-shadow:0 1px 4px #000}
.ahint kbd{font-size:9px;padding:2px 5px}
.scoreb{position:fixed;right:30px;top:26px;display:flex;gap:30px;text-align:right;padding:12px 18px;background:linear-gradient(90deg,rgba(8,6,12,0),rgba(8,6,12,.55))}
.scoreb div{display:flex;flex-direction:column;gap:5px}
.scoreb span{font:600 9px/1 'Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,238,230,.6)}
.scoreb b{font:400 22px/1 Anton,sans-serif;color:#fff;text-shadow:0 2px 8px #000;font-weight:400}
#toast{position:fixed;left:50%;top:18%;transform:translate(-50%,10px);padding:10px 18px;background:rgba(8,6,12,.7);border-left:2px solid var(--accent);font:italic 500 19px/1.2 'Cormorant Garamond',serif;color:#f3eee6;opacity:0;transition:opacity .35s,transform .35s;max-width:70vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#banner{position:fixed;left:0;right:0;top:30%;text-align:center;opacity:0}
#banner.on{animation:bannerIn 3.6s ease both}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.15);filter:blur(10px)}12%{opacity:1;transform:none;filter:none}80%{opacity:1}100%{opacity:0}}
#banner .bt{font:400 clamp(50px,7vw,96px)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.06em;transform:skewX(-7deg);background:linear-gradient(95deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(0,0,0,.8))}
#banner .bs{font:italic 500 24px/1.3 'Cormorant Garamond',serif;color:#f3eee6;text-shadow:0 2px 12px #000}
#lockhint{position:fixed;left:50%;top:62%;transform:translateX(-50%);padding:12px 22px;border:1px solid var(--accent);background:rgba(8,6,12,.6);font:600 12px/1 'Cinzel',serif;letter-spacing:.4em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .4s}
#lockhint.on{opacity:1;animation:pulse 2s infinite}

/* ================= ability wheel ================= */
:is(#wheel,#ewheel){position:fixed;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;opacity:0;transform:scale(.85);transition:opacity .12s,transform .18s cubic-bezier(.2,.8,.2,1);background:radial-gradient(circle,rgba(5,4,8,.55) 0,rgba(5,4,8,.35) 50%,transparent 70%);border-radius:50%;pointer-events:none;z-index:7}
:is(#wheel,#ewheel).on{opacity:1;transform:none}
:is(#wheel,#ewheel) svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
:is(#wheel,#ewheel) .seg{fill:rgba(12,8,18,.86);stroke:rgba(255,255,255,.14);stroke-width:1;transition:fill .15s}
:is(#wheel,#ewheel) .seg.hov{fill:color-mix(in srgb,var(--c) 38%,rgba(12,8,18,.8));stroke:var(--c);stroke-width:2}
#wheel .ico path{fill:none;stroke:var(--c);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
#wheel .ico.hov path{opacity:1;stroke-width:1.8;filter:drop-shadow(0 0 3px var(--c))}
:is(#wheel,#ewheel) .wc{position:absolute;left:50%;top:50%;width:200px;transform:translate(-50%,-50%);text-align:center;display:grid;gap:6px}
.wtag{font:600 8px/1.2 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,238,230,.55)}
.wname{font:400 22px/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.wdesc{font:500 14px/1.2 'Cormorant Garamond',serif;color:#f3eee6}
.wmeta{font:600 9px/1 'Cinzel',serif;letter-spacing:.25em;color:rgba(243,238,230,.6)}

/* ================= help / pause / dead ================= */
#help{background:rgba(5,4,7,.72);z-index:8;cursor:pointer}
.hbox{max-width:620px;padding:34px 40px;background:linear-gradient(160deg,rgba(20,14,26,.9),rgba(8,6,10,.85));border:1px solid var(--line);border-top:2px solid var(--accent)}
.hk{font:900 30px/1 'Cinzel Decorative',serif;margin-bottom:20px}
.hgrid{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;text-align:left;align-items:center;font:500 17px/1.2 'Cormorant Garamond',serif}
.hgrid div{display:flex;gap:4px;justify-content:flex-end}
.hp{margin-top:18px;font:italic 500 17px/1.35 'Cormorant Garamond',serif;color:rgba(243,238,230,.85)}
.hclick{margin-top:18px;font:600 11px/1 'Cinzel',serif;letter-spacing:.5em;text-transform:uppercase;color:var(--accent);animation:pulse 2s infinite}
#pause{background:rgba(5,4,7,.72);z-index:8}
.pbox{display:grid;gap:10px;min-width:300px}
.pk{font:900 44px/1 'Cinzel Decorative',serif;margin-bottom:14px}
.pbox button{padding:14px 20px;border:1px solid var(--line);background:rgba(20,14,26,.7);font:600 12px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;transition:all .2s}
.pbox button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,transparent)}
#dead{background:radial-gradient(ellipse at center,rgba(40,0,0,.2),rgba(0,0,0,.8));z-index:8;gap:12px}
#dead .dt{font:900 clamp(40px,6vw,80px)/1 'Cinzel Decorative',serif;color:#e9ded2;filter:drop-shadow(0 8px 30px #000)}
#dead .ds{font:italic 500 24px/1.3 'Cormorant Garamond',serif;color:#f3eee6}
@media (max-width:980px){.scoreb{gap:12px;right:14px}.vitals{left:14px;width:220px}.ahint{display:none}.slot{width:40px;height:40px}}

.dmg{position:absolute;left:0;top:0;font:400 20px/1 Anton,sans-serif;color:#fff;text-shadow:0 2px 6px #000,0 0 10px rgba(255,80,60,.6);pointer-events:none;letter-spacing:.03em}
.dmg.big{font-size:30px;color:#ffd27a}
.dmg.burn{color:#ffab5a;font-size:15px}

#trials{position:fixed;right:30px;top:96px;width:270px;padding:14px 16px;background:linear-gradient(160deg,rgba(20,14,26,.62),rgba(8,6,10,.35));border:1px solid var(--line);border-left:2px solid var(--accent);display:grid;gap:8px}
#trials .th{display:flex;justify-content:space-between;align-items:baseline;font:600 10px/1 'Cinzel',serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
#trials .th b{font:400 18px/1 Anton,sans-serif;color:var(--accent);letter-spacing:0}
#trials .tr{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start;opacity:.82}
#trials .tr i{font-style:normal;color:rgba(243,238,230,.45);font-size:12px;line-height:16px}
#trials .tr b{display:block;font:600 10px/1.3 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;color:#f3eee6}
#trials .tr span{display:block;font:500 13px/1.15 'Cormorant Garamond',serif;color:rgba(243,238,230,.75)}
#trials .tr.ok{opacity:1}
#trials .tr.ok i,#trials .tr.ok b{color:var(--accent)}
#trials .tr.ok span{text-decoration:line-through;color:rgba(243,238,230,.45)}
@media (max-width:1100px){#trials{display:none!important}}
@media (max-width:1260px){.vitals{bottom:118px}}     /* narrow screens: the centred hotbar would run under the life/magic bars */

/* ---------- Descensum ---------- */
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 60; }
#hellhud { position: fixed; left: 50%; top: 7%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .6s; z-index: 30; }
#hellhud.on { opacity: 1; }
#hellhud .hk { font-family: 'Cinzel Decorative', serif; letter-spacing: .4em; font-size: 13px; color: #ff6a4a; text-shadow: 0 0 12px #a01000; }
#hellhud .hh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: #f2d8c8; margin-top: 6px; text-shadow: 0 2px 10px #000; }
#hellhud .hx { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: #c8a898; opacity: .7; margin-top: 4px; letter-spacing: .1em; }
#hellhud .ht { font-family: 'Anton', sans-serif; font-size: 28px; color: #ff3a1a; margin-top: 4px; text-shadow: 0 0 14px #600; }
.slot.passive { opacity: .6; }

/* ---------------- lobby: nickname + mode ---------------- */
.sp-lobby { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: auto; }
.sp-lobby label { font-family: 'Cinzel', serif; letter-spacing: .35em; font-size: 11px; text-transform: uppercase; color: #cdb89a; }
.sp-lobby input { width: min(340px, 80vw); padding: 12px 16px; font: 600 20px 'Cormorant Garamond', serif; text-align: center; color: #f4e6d0;
  background: rgba(10, 6, 6, .55); border: 1px solid rgba(236, 201, 140, .45); border-radius: 2px; outline: none; }
.sp-lobby input:focus { border-color: #ecc98c; box-shadow: 0 0 18px rgba(236, 201, 140, .25); }
.sp-modes { width: min(380px,84vw); display: grid; gap: 9px; margin-top: 3px; }
.sp-modes .sp-mode { position: relative; display: grid; gap: 4px; width: 100%; padding: 13px 22px; color: #f4e6d0; cursor: pointer; text-transform: uppercase; overflow: hidden;
  background: rgba(20,10,10,.66); border: 1px solid rgba(236,201,140,.5); transition: background .2s,border-color .2s,transform .2s,box-shadow .2s; }
.sp-mode span { font: 600 14px 'Cinzel',serif; letter-spacing: .22em; }
.sp-mode small { font: italic 13px 'Cormorant Garamond',serif; letter-spacing: .04em; text-transform: none; opacity: .66; }
.sp-modes .primary-mode { color: #160c0b; background: linear-gradient(105deg,#d8b575,#f0d9a6 55%,#c99d5b); border-color: #f8dfab; box-shadow: 0 8px 28px #0007,0 0 24px #d8b57520; }
.sp-modes .online-mode::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 18% 50%,rgba(142,49,51,.28),transparent 45%); pointer-events:none; }
.sp-modes .sp-mode:hover { border-color: #fff0c5; transform: translateY(-1px); box-shadow: 0 10px 30px #0009,0 0 18px #ecc98c25; }
.sp-modes .primary-mode:hover { background: linear-gradient(105deg,#e3c58b,#fff0c9 55%,#d9ae69); }
.lan-mode { padding: 3px 8px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #b9a893; font: 600 9px 'Cinzel',serif; letter-spacing: .15em; text-transform: uppercase; cursor:pointer; opacity:.72; transition:opacity .2s,color .2s,border-color .2s; }
.lan-mode:hover { opacity:1; color:#ecc98c; border-bottom-color:#ecc98c77; }
.sp-modes button:disabled { opacity: .5; cursor: wait; }
.sp-msg { min-height: 20px; font: italic 16px 'Cormorant Garamond', serif; color: #e8b8a0; text-align: center; max-width: 520px; }
.server-panel { width: min(620px, 88vw); padding: 14px; margin-top: 4px; background: rgba(7,4,7,.92); border: 1px solid rgba(236,201,140,.48); box-shadow: 0 18px 55px #000b; }
.server-panel[hidden] { display: none; }
.server-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.server-head b { flex: 1; font: 600 12px 'Cinzel',serif; letter-spacing: .28em; color: #ecc98c; text-transform: uppercase; }
.server-head button,.private-coven button { border: 0; background: transparent; color: #d9c8b5; font: 600 10px 'Cinzel',serif; letter-spacing: .12em; cursor: pointer; }
#closeServers { font-size: 22px; line-height: 1; }
.server-list { display: grid; gap: 6px; max-height: 180px; overflow: auto; text-align: left; }
.server-list>i { text-align: center; padding: 14px; color: #bcae9d; }
.server-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 9px 12px; color: #eee4d8; border: 1px solid #ffffff16; background: #ffffff08; }
.server-row b { font: 600 15px 'Cinzel',serif; letter-spacing: .1em; }.server-row span { color: #bcae9d; }.server-row button,.quick-join { padding: 8px 14px; border: 1px solid #ecc98c77; background: #5b211fc0; color: #fff1dc; font: 600 11px 'Cinzel',serif; letter-spacing: .12em; cursor: pointer; text-transform: uppercase; }
.server-row.full { opacity: .5; }.server-row.full button { pointer-events: none; }
.quick-join { margin-top: 10px; background: #8d3d32; }
.private-coven { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ffffff17; }
.private-coven span { margin-right: 5px; font: 600 10px 'Cinzel',serif; letter-spacing: .18em; color: #ecc98c; text-transform: uppercase; }
.private-coven input { width: 155px; padding: 8px 10px; font-size: 15px; text-transform: uppercase; }
/* ---------------- multiplayer roster on the select screen ---------------- */
.mproster { position: absolute; right: 28px; top: 120px; width: 230px; display: none; font-family: 'Cormorant Garamond', serif; color: #eadccc;
  background: rgba(8, 5, 5, .55); border: 1px solid rgba(236, 201, 140, .25); padding: 12px 14px; pointer-events: none; }
.mproster.on { display: block; }
.mproster .mh { font: 600 11px 'Cinzel', serif; letter-spacing: .3em; text-transform: uppercase; color: #ecc98c; margin-bottom: 8px; }
.mproster ul { list-style: none; margin: 0; padding: 0; }
.mproster li { display: flex; justify-content: space-between; font-size: 16px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.mproster li b { font-weight: 600; } .mproster li i { opacity: .75; }
.mproster li.me b { color: #ecc98c; }
.mproster .ml { margin-top: 8px; font-size: 13px; opacity: .7; }
.card.taken { filter: grayscale(1) brightness(.55); }
.card.taken::after { content: attr(data-taken); position: absolute; left: 0; right: 0; bottom: 2px; font: 600 9px 'Cinzel', serif; letter-spacing: .08em; color: #ffb0a0; text-align: center; }
.choose.taken { opacity: .45; pointer-events: none; }
/* ---------------- in-game multiplayer HUD ---------------- */
.nameplate { position: absolute; left: 0; top: 0; pointer-events: none; text-align: center; white-space: nowrap; will-change: transform; }
.nameplate b { display: block; font: 600 15px 'Cinzel', serif; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px var(--c); }
.nameplate i { display: block; width: 76px; height: 4px; margin: 3px auto 0; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); }
.nameplate u { display: block; height: 100%; background: var(--c); text-decoration: none; }
#killfeed { position: absolute; right: 22px; top: 88px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
#killfeed div { font: 600 14px 'Cormorant Garamond', serif; color: #f2e4d4; background: rgba(0, 0, 0, .45); padding: 3px 10px; border-left: 2px solid #ecc98c; animation: kfIn .3s ease-out; }
#killfeed div.good { border-left-color: #7dffb0; } #killfeed div.bad { border-left-color: #ff4a3a; }
@keyframes kfIn { from { opacity: 0; transform: translateX(20px); } }
#mpboard { position: absolute; left: 22px; top: 150px; font-family: 'Cormorant Garamond', serif; color: #eadccc; pointer-events: none; display: none; }
#mpboard.on { display: block; }
#mpboard .r { display: flex; gap: 12px; font-size: 15px; padding: 2px 8px; background: rgba(0, 0, 0, .35); margin-bottom: 2px; min-width: 200px; }
#mpboard .r b { flex: 1; font-weight: 600; } #mpboard .r em { font-style: normal; opacity: .8; }
#mpboard .h { font: 600 10px 'Cinzel', serif; letter-spacing: .3em; color: #ecc98c; margin-bottom: 4px; }
#mindctl { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; display: none; font-family: 'Cormorant Garamond', serif; color: #e8fff4; text-shadow: 0 0 12px #3fbf8a, 0 2px 6px #000; }
#mindctl.on { display: block; }
#mindctl b { display: block; font: 700 22px 'Cinzel', serif; letter-spacing: .08em; }
#mindctl span { font-size: 16px; opacity: .85; }
#mindctl i { display: block; width: 240px; height: 5px; margin: 8px auto 0; background: rgba(0, 0, 0, .5); border: 1px solid rgba(232, 255, 244, .4); }
#mindctl u { display: block; height: 100%; background: #9fffd0; text-decoration: none; }
/* ---------- taxi ---------- */
#tprompt{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);padding:10px 20px;background:rgba(8,6,12,.72);border:1px solid rgba(242,194,27,.7);font:600 13px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center}
#tprompt.on{opacity:1}
#tprompt kbd,#taxi kbd{display:inline-block;padding:3px 7px;border:1px solid #f2c21b;border-radius:3px;color:#f2c21b;font:700 11px/1 monospace;margin:0 4px}
#tprompt i{display:block;height:3px;margin-top:8px;background:rgba(255,255,255,.15)}
#tprompt s{display:block;height:100%;width:0;background:#f2c21b;text-decoration:none}
#taxi{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(560px,92vw);padding:26px 28px 20px;background:linear-gradient(160deg,rgba(24,18,10,.95),rgba(8,6,6,.96));border:1px solid #f2c21b;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 4px rgba(242,194,27,.08);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:30}
#taxi.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#taxi .tx-mirror{font:italic 500 16px/1.3 'Cormorant Garamond',serif;color:#b8ad98}
#taxi .tx-say{margin:6px 0 16px;font:400 34px/1.1 Anton,sans-serif;color:#f2c21b;letter-spacing:.02em}
#taxi .tx-opts{display:grid;gap:10px}
#taxi .tx-opts button{display:grid;grid-template-columns:auto 1fr;column-gap:12px;text-align:left;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(242,194,27,.3);color:#f3eee6;cursor:pointer;transition:background .2s,border-color .2s}
#taxi .tx-opts button:hover{background:rgba(242,194,27,.12);border-color:#f2c21b}
#taxi .tx-opts kbd{grid-row:span 3;align-self:center}
#taxi .tx-opts b{font:700 18px/1.2 'Cinzel',serif}
#taxi .tx-opts i{font:600 11px/1.4 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;color:#f2c21b;font-style:normal}
#taxi .tx-opts em{font:italic 500 15px/1.3 'Cormorant Garamond',serif;color:#b8ad98}
#taxi .tx-no{margin-top:14px;background:none;border:0;color:#9a9080;font:600 12px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
#travel{position:fixed;inset:0;z-index:40;background:#050406;opacity:0;pointer-events:none;transition:opacity .6s;overflow:hidden;display:grid;place-items:center}
#travel.on{opacity:1}
#travel .tv-streaks{position:absolute;inset:-20%;background:repeating-linear-gradient(90deg,transparent 0 120px,rgba(255,196,90,.5) 120px 124px,transparent 124px 300px),repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,80,60,.35) 70px 72px,transparent 72px 210px);filter:blur(3px);transform:perspective(500px) rotateX(58deg) translateY(10%);opacity:.55;animation:tvRoad .5s linear infinite}
#travel .tv-streaks::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 20%,#050406 70%)}
@keyframes tvRoad{from{background-position:0 0,0 0}to{background-position:-300px 0,-210px 0}}
#travel .tv-card{position:relative;text-align:center;transform:translateY(12px);opacity:0;transition:transform .8s .2s,opacity .8s .2s}
#travel.on .tv-card{transform:none;opacity:1}
#travel .tv-from{font:600 12px/1 'Cinzel',serif;letter-spacing:.4em;text-transform:uppercase;color:#8d8272}
#travel .tv-from::before{content:'Leaving · '}
#travel svg{width:min(520px,86vw);margin:18px 0 10px;overflow:visible}
#travel .tv-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2;stroke-dasharray:4 7}
#travel .tv-route{fill:none;stroke:#f2c21b;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(242,194,27,.7))}
#travel .tv-a{fill:#8d8272}#travel .tv-b{fill:none;stroke:var(--accent);stroke-width:2;animation:pulse 1.4s infinite}
#travel .tv-cab rect{fill:#f2c21b;stroke:#111;stroke-width:1.5}
#travel .tv-to{font:400 clamp(40px,6vw,76px)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.9)}
#travel .tv-area{margin-top:10px;font:italic 500 20px/1.2 'Cormorant Garamond',serif;color:#f2c21b}
/* ---------- progression ---------- */
.slot .lv{position:absolute;right:4px;bottom:3px;font:700 9px/1 system-ui,sans-serif;color:rgba(255,255,255,.8);transform:skewX(8deg);z-index:1}
.slot.locked svg{opacity:.18;filter:grayscale(1)}
.slot.locked{border-style:dashed}
#plevel{margin-top:6px;font:600 11px/1 'Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
#xpfly{position:fixed;left:50%;top:40%;pointer-events:none;z-index:25}
#xpfly div{position:absolute;transform:translateX(-50%);font:700 15px/1 'Cinzel',serif;color:#ffe3a0;text-shadow:0 2px 10px #000;animation:xpUp 1.4s ease-out forwards;white-space:nowrap}
@keyframes xpUp{from{opacity:0;transform:translate(-50%,10px)}15%{opacity:1}to{opacity:0;transform:translate(-50%,-60px)}}
#skills{background:rgba(4,3,6,.93);backdrop-filter:blur(10px);z-index:35;display:block;overflow-y:auto;overscroll-behavior:contain;padding:clamp(12px,3vh,32px) 16px}
#skills .sk-box{text-align:left;width:min(1280px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,24vw,320px);gap:16px 22px;align-items:start}
#skills header{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;position:sticky;top:calc(-1 * clamp(12px,3vh,32px));z-index:2;background:linear-gradient(rgba(6,4,8,.96),rgba(6,4,8,.9));padding-top:10px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px}
#skills header>div:first-child{flex:1}
#skills .sk-k{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:var(--accent)}
#skills h2{margin:6px 0 0;font:400 clamp(30px,4vw,48px)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#fff}
#skills .sk-lv{width:min(280px,100%)}
#skills .sk-lv b{font:700 20px/1 'Cinzel',serif;color:#fff}
#skills .sk-lv i{display:block;height:6px;margin:8px 0 6px;background:rgba(255,255,255,.1)}
#skills .sk-lv s{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#fff);text-decoration:none}
#skills .sk-lv em{font:italic 500 15px/1 'Cormorant Garamond',serif;color:#cfc6b6}
#skills .sk-x{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;width:38px;height:38px;cursor:pointer;font-size:16px}
#skills .sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px;align-content:start}
#skills .sk-c{min-width:0;overflow:hidden;padding:14px;background:linear-gradient(160deg,rgba(28,20,34,.85),rgba(10,8,12,.85));border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--c);display:grid;gap:8px}
#skills .sk-c.locked{opacity:.72;border-top-style:dashed}
#skills .sk-h{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
#skills .sk-h svg{width:30px;height:30px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--c));flex:none}
#skills .sk-h div{flex:1;min-width:0}
#skills .sk-h b{display:block;font:700 15px/1.1 'Cinzel',serif;color:#fff;overflow-wrap:anywhere}
#skills .sk-h i{font:600 9px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--c);font-style:normal}
#skills .sk-p{display:flex;gap:4px;flex:none;margin-left:auto;padding-right:2px}
#skills .sk-p u{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--c);text-decoration:none}
#skills .sk-p u.on{background:var(--c);box-shadow:0 0 6px var(--c)}
#skills p{margin:0;font:500 15px/1.3 'Cormorant Garamond',serif;color:#d9d0c1}
#skills .sk-n{color:#a79d8d;font-style:italic}
#skills .sk-lock b{color:#ffe3a0}
#skills .sk-c button{justify-self:start;padding:8px 14px;background:rgba(255,255,255,.05);border:1px solid var(--c);color:#fff;font:600 11px/1 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
#skills .sk-c button:hover:not(:disabled){background:var(--c);color:#000}
#skills .sk-c button:disabled{opacity:.4;cursor:default}
#skills aside{display:grid;gap:8px;position:sticky;top:110px;max-height:calc(100vh - 140px);overflow-y:auto;padding-right:4px}
#skills aside>div{display:grid;gap:8px;align-content:start}
#skills aside h3{margin:6px 0 2px;font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
#skills aside>div>div{display:grid;grid-template-columns:16px 1fr;column-gap:8px;font:500 14px/1.3 'Cormorant Garamond',serif;color:#b8ad98}
#skills aside>div>div i{grid-row:span 2;color:#8d8272;font-style:normal}
#skills aside>div>div.ok i{color:#ffe3a0}
#skills aside>div>div b{font:700 12px/1.3 'Cinzel',serif;color:#fff}
@media (max-width:860px){#skills .sk-box{grid-template-columns:1fr}#skills aside{position:static;max-height:none}}
/* ---------- the Supreme ---------- */
.nameplate em{display:none;font:700 11px/1 'Cinzel Decorative','Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px;background:linear-gradient(90deg,#b8862b,#fff3c4,#d9a441,#fff3c4,#b8862b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(255,210,120,.8));animation:supShine 3s linear infinite;font-style:normal}
.nameplate.supreme em,.nameplate.nextsup em{display:block}
.nameplate.nextsup em{background:linear-gradient(90deg,#8a93b8,#f2f5ff,#aab4dc,#f2f5ff,#8a93b8);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px rgba(190,205,255,.8))}
.nameplate.supreme b{color:#ffe9b0;text-shadow:0 1px 3px #000,0 0 14px #ffcf6a}
.nameplate.supreme i{border-color:#e8c46a;box-shadow:0 0 8px rgba(255,207,106,.6)}
@keyframes supShine{to{background-position:-200% 0}}
#suptitle{display:none;margin-top:5px;font:700 13px/1 'Cinzel Decorative','Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(90deg,#b8862b,#fff3c4,#d9a441,#fff3c4,#b8862b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:supShine 3s linear infinite;filter:drop-shadow(0 0 6px rgba(255,210,120,.7))}
#suptitle.on{display:block}
#suptitle.next{background:linear-gradient(90deg,#8a93b8,#f2f5ff,#aab4dc,#f2f5ff,#8a93b8);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px rgba(190,205,255,.7))}
/* ---------- the apocalypse / Michael's rise ---------- */
#apoc{position:fixed;left:50%;top:14px;transform:translateX(-50%);min-width:min(520px,90vw);padding:10px 18px 12px;background:linear-gradient(180deg,rgba(40,6,4,.85),rgba(12,2,2,.7));border:1px solid #7a1a10;border-top:2px solid #ff4a1a;text-align:center;display:none;pointer-events:none;z-index:8}
#apoc.on{display:block}
#apoc .at{font:400 20px/1 Anton,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff6a3a;text-shadow:0 0 14px rgba(255,80,30,.6)}
#apoc .ao{margin-top:6px;font:italic 500 16px/1.25 'Cormorant Garamond',serif;color:#f0d8c8}
#apoc .ab{height:5px;margin-top:8px;background:rgba(255,255,255,.1)}
#apoc .ab i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b8d0ff,#fff);box-shadow:0 0 10px #b8d0ff}
/* ---------- objective marker ---------- */
#objmark{position:fixed;left:0;top:0;pointer-events:none;z-index:7;display:none;text-align:center}
#objmark i{display:block;width:14px;height:14px;margin:0 auto 4px;transform:rotate(45deg);border:2px solid #ffd27a;background:rgba(255,190,90,.25);box-shadow:0 0 10px rgba(255,190,90,.8);animation:pulse 1.6s infinite}
#objmark b{font:600 11px/1 'Cinzel',serif;letter-spacing:.12em;color:#ffe3b0;text-shadow:0 1px 4px #000;white-space:nowrap}
#objmark.edge i{border-color:#ff9a5a}
/* ---------- the Test of the Seven Wonders ---------- */
#wtest{position:fixed;right:24px;top:96px;width:280px;display:grid;gap:6px;pointer-events:none}
#wtest:empty{display:none}
#wtest{padding:12px 14px;background:linear-gradient(160deg,rgba(26,20,10,.75),rgba(8,6,4,.5));border:1px solid rgba(255,231,168,.3);border-left:2px solid #ffe7a8}
#wtest .th{font:600 11px/1 'Cinzel',serif;letter-spacing:.28em;text-transform:uppercase;color:#ffe7a8;margin-bottom:4px}
#wtest>div:not(.th){display:grid;grid-template-columns:16px 1fr;column-gap:8px;font:500 14px/1.25 'Cormorant Garamond',serif;color:#cfc3ae}
#wtest>div i{grid-row:span 2;color:#8d8272;font-style:normal}
#wtest>div.ok i{color:#ffe7a8}#wtest>div.ok b{color:#ffe7a8}
#wtest>div b{font:700 12px/1.3 'Cinzel',serif;color:#fff}

/* photo mode: nothing on screen but the picture (and the hint toast) */
body.photo #game>*:not(#toast){opacity:0!important;transition:opacity .3s}
/* the Test of the Seven Wonders: task caption, Concilium's will-bar, Vitalum's pulse */
#wtest>div.no i,#wtest>div.no b{color:#8a5a52}#wtest>div.cur b{color:#ffe7a8}#wtest>div.cur i{color:#ffe7a8}
#wtask{position:fixed;left:50%;top:13%;transform:translateX(-50%);max-width:min(760px,86vw);text-align:center;pointer-events:none;opacity:0;transition:opacity .4s;font:500 18px/1.35 'Cormorant Garamond',serif;color:#efe4cf;text-shadow:0 2px 8px #000}
#wtask.on{opacity:1}
#wtask b{font:700 15px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase;color:#ffe7a8}
#wtask.big b{display:block;font-size:30px;margin:4px 0 8px}
#wtask em{display:block;font:700 13px/1 'Cinzel',serif;letter-spacing:.4em;color:#b89a5a;font-style:normal}
#wtask span{display:block;margin-top:4px}
#wbar{position:fixed;left:50%;bottom:24%;width:min(520px,70vw);height:16px;transform:translateX(-50%);display:none;border:1px solid rgba(255,231,168,.45);background:rgba(8,6,4,.55);pointer-events:none}
#wbar.on{display:block}
#wbar .zone{position:absolute;top:0;bottom:0;width:20%;background:rgba(111,255,176,.28);border:1px solid rgba(111,255,176,.8)}
#wbar.in .zone{background:rgba(111,255,176,.55)}
#wbar .dot{position:absolute;top:-6px;width:4px;height:28px;margin-left:-2px;background:#fff;box-shadow:0 0 10px #fff}
#wbar .fill{position:absolute;left:0;bottom:-8px;height:3px;background:#6fffb0;box-shadow:0 0 8px #6fffb0}
#wbeat{position:fixed;left:50%;top:58%;width:0;height:0;display:none;pointer-events:none}
#wbeat.on{display:block}
#wbeat i,#wbeat b{position:absolute;left:0;top:0;width:90px;height:90px;border-radius:50%;transform:translate(-50%,-50%)}
#wbeat .target{border:3px solid rgba(168,255,154,.85);box-shadow:0 0 16px rgba(168,255,154,.6)}
#wbeat .pulse{border:2px solid rgba(255,255,255,.9)}
#wbeat.good .target{animation:beatGood .35s}#wbeat.bad .target{animation:beatBad .35s}
@keyframes beatGood{0%{box-shadow:0 0 40px #a8ff9a;background:rgba(168,255,154,.35)}100%{box-shadow:0 0 16px rgba(168,255,154,.6)}}
@keyframes beatBad{0%{border-color:#ff5a4a;background:rgba(255,90,74,.25)}100%{}}
#wcur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid #ffe7a8;border-radius:50%;box-shadow:0 0 12px rgba(255,210,120,.8),inset 0 0 8px rgba(255,210,120,.5);pointer-events:none;display:none;z-index:40}
#wcur::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff}
#wcur.on{display:block}

/* painted ability icons over the glyphs */
.slot img.aico{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);object-fit:cover;transform:skewX(8deg);pointer-events:none}
.slot .k,.slot .lv,.slot .cd{z-index:2}
.slot.locked img.aico{filter:grayscale(1) brightness(.45)}
#wheel image.aico{opacity:.92;filter:drop-shadow(0 0 4px var(--c))}
#wheel image.aico.hov{opacity:1}
#skills .sk-i{position:relative;width:34px;height:34px;flex:none;display:grid;place-items:center}
#skills .sk-i img.aico{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;object-fit:cover;box-shadow:0 0 6px var(--c)}
#skills .sk-c.locked .sk-i img.aico{filter:grayscale(1) brightness(.5)}

/* NPC witches on the board */
#mpboard .r.npc { opacity: .82; }
#mpboard .r.npc em:first-of-type { color: #9fe3c8; font: 600 11px 'Cinzel', serif; letter-spacing: .12em; align-self: center; }

/* emotes: the balloon over a witch's head, and the T menu */
.balloon { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; will-change: transform, opacity;
  padding: 6px 12px; border-radius: 14px; background: rgba(250, 244, 232, .95); color: #1c1510;
  font: 600 14px 'Cormorant Garamond', serif; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
.balloon::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(250, 244, 232, .95); }
.balloon.pl { background: rgba(255, 236, 196, .97); }
/* a character's line as she casts (quotes.js): not a chat bubble — dark, italic, gold, the power named under it */
.balloon.qt { background: rgba(18, 10, 14, .88); color: #f0d8a0; font-style: italic; font-family: Georgia, 'Times New Roman', serif; border: 1px solid rgba(214, 170, 90, .55); box-shadow: 0 0 14px rgba(160, 90, 40, .35); }
.balloon.qt::after { border-top-color: rgba(18, 10, 14, .88); }
.balloon.qt small { display: block; font-style: normal; font-family: system-ui, sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #b89a6a; margin-top: 2px; }
  padding: 12px; background: rgba(12, 8, 6, .82); border: 1px solid rgba(236, 201, 140, .35); border-radius: 10px; min-width: 240px; }
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; font: 600 16px 'Cormorant Garamond', serif; cursor: pointer; }

#ewheel { z-index: 9; }
#ewheel .et { fill: #f2e6d4; font: 600 15px 'Cormorant Garamond', serif; pointer-events: none; }
#ewheel .et.hov { fill: #fff; font-size: 16px; }
#ewheel .wname { font-size: 18px; color: #ecc98c; }

/* hold I: the selected power, explained */
#abinfo { position: fixed; right: 22px; bottom: 268px; width: 340px; display: flex; gap: 14px; padding: 14px 16px; z-index: 6; pointer-events: none;
  background: linear-gradient(160deg, rgba(20, 14, 26, .92), rgba(8, 6, 10, .88)); border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--c, #ecc98c);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s; }
#abinfo.on { opacity: 1; transform: none; }
#abinfo .ai-i { flex: 0 0 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--c, #ecc98c); background: #000; }
#abinfo .ai-i img { width: 100%; height: 100%; object-fit: cover; }
#abinfo .ai-t { display: grid; gap: 5px; }
#abinfo i { font: 600 9px/1 'Cinzel', serif; letter-spacing: .25em; text-transform: uppercase; color: rgba(243, 238, 230, .55); font-style: normal; }
#abinfo b { font: 400 21px/1 Anton, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--c, #ecc98c); }
#abinfo p { margin: 0; font: 500 15px/1.25 'Cormorant Garamond', serif; color: #f3eee6; }
#abinfo em { font: 600 9px/1.4 'Cinzel', serif; letter-spacing: .12em; color: rgba(243, 238, 230, .7); font-style: normal; }
#abinfo u { text-decoration: none; font: italic 500 13px/1 'Cormorant Garamond', serif; color: rgba(243, 238, 230, .6); }
/* ---------- errands, omens, bounties (errands.js) ---------- */
#errand{position:fixed;right:24px;top:132px;width:270px;display:flex;flex-direction:column;gap:8px;pointer-events:none;opacity:0;transition:opacity .5s;z-index:5}
#errand.on{opacity:1}
#errand .er,#errand .om{background:linear-gradient(90deg,rgba(10,8,12,.72),rgba(10,8,12,.4));border-left:2px solid var(--accent);padding:9px 12px 10px;backdrop-filter:blur(4px)}
#errand i{display:block;font:600 9px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);font-style:normal}
#errand b{display:block;margin-top:5px;font:400 17px/1.1 Anton,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#fff}
#errand span{display:block;margin-top:4px;font:italic 500 14px/1.25 'Cormorant Garamond',serif;color:var(--dim)}
#errand u{display:block;height:3px;margin-top:8px;background:rgba(255,255,255,.12)}#errand s{display:block;height:100%;background:var(--accent);transition:width .4s}
#errand em{display:block;margin-top:4px;font:600 10px/1 system-ui,sans-serif;color:var(--dim);font-style:normal;text-align:right}
#errand .om{display:flex;justify-content:space-between;align-items:baseline;border-left-color:#c8202a}
#errand .om b{margin:0;color:#ff5a5a}#errand .om span{margin:0;font:600 12px/1 system-ui,sans-serif;font-style:normal}
#errand .om.bounty{border-left-color:#f2c21b}#errand .om.bounty b{color:#f2c21b}
#skills .sk-er{grid-column:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:10px;align-content:start;margin-top:6px}
#skills .sk-er h3{grid-column:1/-1;margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
#skills .er-c{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;background:linear-gradient(160deg,rgba(28,20,34,.85),rgba(10,8,12,.85));border:1px solid rgba(255,255,255,.08);border-left:2px solid rgba(236,201,140,.35);transition:border-color .2s,transform .2s}
#skills .er-c:hover{border-left-color:var(--accent);transform:translateY(-1px)}
#skills .er-c>div{flex:1;display:grid;gap:4px}
#skills .er-c b{font:700 14px/1.15 'Cinzel',serif;color:#fff}
#skills .er-c span{font:500 15px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#skills .er-c em{font:600 10px/1 system-ui,sans-serif;letter-spacing:.08em;color:var(--accent);font-style:normal;text-transform:uppercase}
#skills .er-c i{font:600 9px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-style:normal}
#skills .er-c.act{grid-column:1/-1;border-left:3px solid var(--accent);background:linear-gradient(100deg,rgba(60,40,24,.55),rgba(10,8,12,.85))}
#skills .er-c u{display:block;height:3px;margin-top:6px;background:rgba(255,255,255,.12)}#skills .er-c s{display:block;height:100%;background:var(--accent)}
#skills .er-c.sch{border-left-color:#b8322a}#skills .er-c.sch b{color:#ffb2a8}
#skills .er-c button,#skills .er-new{flex:none;padding:8px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 10px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
#skills .er-c button:hover:not(:disabled),#skills .er-new:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#000}
#skills .er-c button:disabled,#skills .er-new:disabled{opacity:.4;cursor:default}
#skills .er-new{justify-self:start}#skills .er-done{align-self:center;font:italic 500 14px/1 'Cormorant Garamond',serif;color:#8d8272}
#skills .er-note{grid-column:1/-1;color:#a79d8d;font-style:italic}
/* ---------- minimap (minimap.js) ---------- */
#minimap{position:fixed;right:22px;bottom:22px;width:210px;height:210px;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s}
#minimap.on{opacity:1}
#minimap canvas{width:210px;height:210px;border-radius:50%;box-shadow:0 0 0 2px rgba(236,201,140,.55),0 0 0 6px rgba(8,6,10,.75),0 10px 30px rgba(0,0,0,.7)}
#minimap .mm-place{position:absolute;left:50%;top:-22px;transform:translateX(-50%);white-space:nowrap;font:600 10px/1 'Cinzel',serif;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 4px #000}
#minimap .mm-note{position:absolute;right:0;bottom:218px;width:260px;text-align:right;font:italic 600 14px/1.25 'Cormorant Garamond',serif;color:#ff9af0;text-shadow:0 1px 4px #000}
/* ---------- loadout editor (progress.js) ---------- */
#loadout{display:block;text-align:left;background:rgba(4,3,6,.93);backdrop-filter:blur(10px);z-index:35;overflow-y:auto;padding:clamp(12px,4vh,40px) 16px}
#loadout .lo-box{width:min(980px,100%);margin:0 auto;display:grid;gap:10px}
#loadout header{display:flex;align-items:flex-start;gap:20px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px}
#loadout header>div{flex:1}#loadout header p{margin-top:8px;font:italic 500 16px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#loadout .sk-k{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:var(--accent)}
#loadout h2{margin:6px 0 0;font:400 clamp(30px,4vw,44px)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#fff}
#loadout .sk-x{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;width:38px;height:38px;cursor:pointer;font-size:16px}
#loadout .lo-body{display:grid;gap:10px}
#loadout h3{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
#loadout .lo-row{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;padding:8px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12)}
#loadout .lo-row>i{flex-basis:100%;font:italic 500 14px/1 'Cormorant Garamond',serif;color:#8d8272}
#loadout .lo-c{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:linear-gradient(160deg,rgba(28,20,34,.9),rgba(10,8,12,.9));border:1px solid rgba(255,255,255,.12);border-bottom:2px solid var(--c);cursor:grab;user-select:none;transition:transform .15s,border-color .15s}
#loadout .lo-c:hover{transform:translateY(-2px);border-color:var(--c)}
#loadout .lo-c.off{opacity:.5}#loadout .lo-c.off:hover{opacity:1}
#loadout .lo-c b{font:700 12px/1 'Cinzel',serif;color:#fff;white-space:nowrap}
#loadout .lo-c kbd{min-width:20px;text-align:center}
#loadout .lo-i{position:relative;width:28px;height:28px;flex:none}#loadout .lo-i img{position:absolute;inset:0;width:100%;height:100%;border-radius:5px;object-fit:cover;box-shadow:0 0 5px var(--c)}
#loadout .lo-reset{justify-self:start;padding:7px 12px;border:1px solid rgba(255,255,255,.2);font:600 10px/1 'Cinzel',serif;letter-spacing:.15em;text-transform:uppercase;color:#cfc6b6}
/* ---------- interiors (interiors.js) ---------- */
#iprompt{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);padding:10px 18px;background:rgba(8,6,10,.78);border:1px solid rgba(236,201,140,.35);font:500 17px/1 'Cormorant Garamond',serif;color:#f3eee6;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6}
#iprompt.on{opacity:1}
#ifade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}
#ifade.on{opacity:1}
#pick1{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,3,6,.6);z-index:45}
#pick1 .p1-box{width:min(420px,92vw);padding:22px;background:linear-gradient(160deg,rgba(28,20,34,.96),rgba(10,8,12,.96));border:1px solid rgba(255,79,216,.35);display:grid;gap:8px}
#pick1 i{font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:#ff4fd8;font-style:normal}
#pick1 p{font:italic 500 17px/1.3 'Cormorant Garamond',serif;color:#cfc6b6;margin:4px 0 8px}
#pick1 button{display:flex;align-items:center;gap:10px;padding:9px 12px;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
#pick1 button:hover{border-color:#ff4fd8}
#pick1 button b{font:700 14px/1 'Cinzel',serif;color:#fff}#pick1 button span{margin-left:auto;font:italic 500 14px/1 'Cormorant Garamond',serif;color:#a79d8d}
#pick1 button[data-x]{justify-content:center;color:#a79d8d;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase}
#rprompt{position:fixed;left:50%;bottom:190px;transform:translateX(-50%);padding:10px 18px;background:rgba(8,6,10,.78);border:1px solid rgba(255,180,90,.4);font:500 17px/1.2 'Cormorant Garamond',serif;color:#f3eee6;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6;max-width:80vw;text-align:center}
#rprompt.on{opacity:1}
#xpfly .coin{color:#f2c21b}
#dnfade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .7s;z-index:39}#dnfade.on{opacity:.85}
/* ---------- inventory slot, inventory and the botánica (inventory.js) ---------- */
#islot{position:fixed;right:244px;bottom:30px;width:74px;height:74px;z-index:4;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(40,30,44,.9),rgba(10,8,12,.92));border:1px solid rgba(236,201,140,.5);box-shadow:0 0 0 4px rgba(8,6,10,.7),0 8px 22px rgba(0,0,0,.6);transform:rotate(45deg);opacity:0;pointer-events:none;transition:opacity .5s;cursor:pointer}
#islot.on{opacity:1;pointer-events:auto}
#islot>*{transform:rotate(-45deg)}
#islot .iv-i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#0c0a0e;box-shadow:0 0 0 1.5px rgba(236,201,140,.7),0 0 0 4px rgba(10,8,12,.9),inset 0 0 10px rgba(0,0,0,.8)}#islot .iv-i img{width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.06)}#islot .iv-i b{font:700 22px/1 'Cinzel',serif;color:#ecc98c}#islot:hover{border-color:#ecc98c;box-shadow:0 0 0 4px rgba(8,6,10,.7),0 0 18px rgba(236,201,140,.35)}
#islot em{position:absolute;right:2px;bottom:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ecc98c;color:#111!important;text-shadow:none!important;display:grid;place-items:center;box-shadow:0 1px 4px #000;font:700 13px/1 system-ui,sans-serif;color:#fff;text-shadow:0 1px 3px #000;font-style:normal}
#islot kbd{position:absolute;left:-10px;top:26px;font-size:9px;padding:3px 5px}
#islot .is-empty{font:600 14px/1 'Cinzel',serif;color:rgba(236,201,140,.6)}
#inv,#shop{display:block;text-align:left;background:rgba(4,3,6,.93);backdrop-filter:blur(10px);z-index:36;overflow-y:auto;padding:clamp(12px,4vh,40px) 16px}
#inv .iv-box,#shop .iv-box{width:min(900px,100%);margin:0 auto;display:grid;gap:14px}
#inv header,#shop header{display:flex;align-items:flex-start;gap:20px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px}
#inv header>div:first-child,#shop header>div:first-child{flex:1}
#inv header p,#shop header p{margin-top:8px;font:italic 500 16px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#inv .sk-k,#shop .sk-k{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:var(--accent)}
#inv h2,#shop h2{margin:6px 0 0;font:400 clamp(30px,4vw,44px)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#fff}
#inv .sk-x,#shop .sk-x{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;width:38px;height:38px;cursor:pointer;font-size:16px}
.iv-coins{align-self:center;padding:8px 14px;border:1px solid rgba(242,194,27,.5);font:700 14px/1 'Cinzel',serif;color:#f2c21b}
.iv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.iv-c{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:14px;background:linear-gradient(160deg,rgba(28,20,34,.9),rgba(10,8,12,.9));border:1px solid rgba(255,255,255,.1);color:inherit}
button.iv-c{cursor:pointer}button.iv-c:hover,.iv-c.on{border-color:var(--accent)}
.iv-c.on{box-shadow:inset 0 0 0 1px var(--accent)}
.iv-c>div{flex:1;display:grid;gap:4px}
.iv-c b{font:700 14px/1.2 'Cinzel',serif;color:#fff}.iv-c b em{color:var(--accent);font-style:normal}
.iv-c span{font:500 15px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
.iv-c i{font:600 10px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-style:normal}
.iv-i{width:64px;height:64px;flex:none;display:grid;place-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.iv-i img{width:100%;height:100%;object-fit:cover}.iv-i b{font:700 26px/1 'Cinzel',serif;color:var(--accent)}
.iv-c button{flex:none;align-self:center;padding:9px 14px;border:1px solid #f2c21b;color:#f2c21b;font:700 11px/1 'Cinzel',serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.iv-c button:hover:not(:disabled){background:#f2c21b;color:#000}.iv-c button:disabled{opacity:.4;cursor:default}
.iv-empty{font:italic 500 17px/1.4 'Cormorant Garamond',serif;color:#a79d8d}
#shprompt{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);padding:10px 18px;background:rgba(8,6,10,.78);border:1px solid rgba(242,194,27,.45);font:500 17px/1 'Cormorant Garamond',serif;color:#f3eee6;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6}
#shprompt.on{opacity:1}

/* K screen tabs */
#skills .sk-box{grid-template-columns:1fr}
#skills header .sk-tabs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#skills .sk-tabs button{padding:9px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);font:600 11px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase;color:#cfc6b6;cursor:pointer}
#skills .sk-tabs button:hover{color:#fff;border-color:rgba(236,201,140,.5)}
#skills .sk-tabs button.act{color:#000;background:var(--accent);border-color:var(--accent)}
#skills [data-pane]{display:none}#skills [data-pane].act{display:grid}
#skills .sk-qs,#skills .sk-rs{gap:8px;align-content:start}
#skills .sk-qs h3,#skills .sk-rs h3{margin:6px 0 2px;font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
#skills .sk-q,#skills .sk-r{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:8px}
#skills .sk-q>div,#skills .sk-r>div{display:grid;grid-template-columns:16px 1fr;column-gap:8px;padding:12px 14px;background:linear-gradient(160deg,rgba(28,20,34,.85),rgba(10,8,12,.85));border:1px solid rgba(255,255,255,.08);font:500 15px/1.3 'Cormorant Garamond',serif;color:#b8ad98}
#skills .sk-q>div i,#skills .sk-r>div i{grid-row:span 2;color:#8d8272;font-style:normal}
#skills .sk-q>div.ok i,#skills .sk-r>div.ok i{color:#ffe3a0}
#skills .sk-q>div b,#skills .sk-r>div b{font:700 12px/1.3 'Cinzel',serif;color:#fff}
#skills .sk-er{margin-top:0}#skills .sk-er h3:first-child{margin-top:0;padding-top:0;border-top:0}
#skills .sk-q h3{grid-column:1/-1}
#chatbox{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);width:min(520px,80vw);padding:11px 16px;background:rgba(8,6,10,.88);border:1px solid rgba(236,201,140,.5);color:#f3eee6;font:500 18px/1 'Cormorant Garamond',serif;outline:none;opacity:0;pointer-events:none;z-index:30;transition:opacity .15s}
#chatbox.on{opacity:1;pointer-events:auto}
.balloon{max-width:280px;white-space:normal;text-align:center}
#smprompt{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);padding:10px 18px;background:rgba(8,6,10,.78);border:1px solid rgba(188,212,255,.45);font:500 17px/1.2 'Cormorant Garamond',serif;color:#f3eee6;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6;max-width:80vw;text-align:center}
#smprompt.on{opacity:1}
#smwhite{position:fixed;inset:0;background:radial-gradient(circle,#fff,#cfdcff);opacity:0;pointer-events:none;transition:opacity .8s;z-index:41}#smwhite.on{opacity:1}
#rmenu{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,3,6,.55);z-index:45}
#rmenu .rm-box{width:min(460px,92vw);padding:22px;background:linear-gradient(160deg,rgba(34,22,16,.96),rgba(10,8,12,.96));border:1px solid rgba(255,180,90,.4);display:grid;gap:8px}
#rmenu i{font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:#ffb45a;font-style:normal}
#rmenu p{font:italic 500 17px/1.3 'Cormorant Garamond',serif;color:#cfc6b6;margin:4px 0 8px}
#rmenu button{display:flex;align-items:center;gap:12px;padding:11px 12px;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);cursor:pointer}
#rmenu button:hover:not(:disabled){border-color:#ffb45a}
#rmenu button:disabled{opacity:.55;cursor:default}
#rmenu button div{flex:1;display:grid;gap:3px}#rmenu button b{font:700 14px/1.1 'Cinzel',serif;color:#fff}#rmenu button span{font:italic 500 15px/1.25 'Cormorant Garamond',serif;color:#b8ad98}
#rmenu button em{font:700 10px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6fffb0;font-style:normal}
#rmenu button[data-x]{justify-content:center;color:#a79d8d;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase}
#xxx{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,3,6,.6);z-index:45}
#xxx .xx-box{width:min(760px,94vw);padding:20px;background:linear-gradient(160deg,rgba(30,22,20,.97),rgba(10,8,12,.97));border:1px solid rgba(255,106,74,.4);display:grid;gap:10px}
#xxx i{font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:#ff6a4a;font-style:normal}
#xxx p{margin:0;font:italic 500 17px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#xxx canvas{width:100%;height:auto;cursor:crosshair;touch-action:none;border:1px solid rgba(255,255,255,.12)}
#xxx button{justify-self:center;padding:8px 14px;border:1px solid rgba(255,255,255,.2);color:#a79d8d;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
#dowse{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,3,6,.7);z-index:45}
#dowse .dw-box{width:min(1000px,96vw);padding:18px;background:linear-gradient(160deg,rgba(30,24,20,.97),rgba(10,8,12,.97));border:1px solid rgba(255,79,216,.35);display:grid;gap:10px}
#dowse i{font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:#ff4fd8;font-style:normal}
#dowse p{margin:0;font:italic 500 18px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}#dowse p b{color:#fff;font-style:normal}
#dowse canvas{width:100%;height:auto;cursor:none;border:1px solid rgba(255,255,255,.12)}
#dowse button{justify-self:center;padding:8px 14px;border:1px solid rgba(255,255,255,.2);color:#a79d8d;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
/* lessons, the big nights */
#lsprompt,#evprompt{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);padding:10px 18px;background:rgba(8,6,10,.78);border:1px solid rgba(242,194,27,.45);font:500 17px/1 'Cormorant Garamond',serif;color:#f3eee6;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#lsprompt.on,#evprompt.on{opacity:1}
#lesson{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,3,6,.72);z-index:45}
#lesson .ls-box{width:min(940px,96vw);padding:18px;background:linear-gradient(160deg,rgba(30,22,20,.97),rgba(10,8,12,.97));border:1px solid rgba(242,194,27,.35);display:grid;gap:10px}
#lesson i{font:600 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:#f2c21b;font-style:normal}
#lesson p{margin:0;font:italic 500 17px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#lesson canvas{width:auto;max-width:100%;max-height:68vh;justify-self:center;height:auto;cursor:crosshair;touch-action:none;border:1px solid rgba(255,255,255,.12)}
#lesson button{justify-self:center;padding:8px 14px;border:1px solid rgba(255,255,255,.2);color:#a79d8d;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;background:none}
#evtimer{position:fixed;top:64px;left:50%;transform:translateX(-50%);padding:8px 16px;background:rgba(30,6,4,.8);border:1px solid rgba(255,106,42,.55);font:500 16px/1 'Cormorant Garamond',serif;color:#ffd2b0;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6}
#evtimer.on{opacity:1;animation:evpulse 1.6s ease-in-out infinite}
#evtimer b{font:600 12px/1 'Cinzel',serif;letter-spacing:.12em;color:#ff8a4a}
@keyframes evpulse{50%{box-shadow:0 0 18px rgba(255,90,30,.45)}}
#skills .sk-q>div.ev-card{grid-column:1/-1;display:flex;gap:16px;align-items:center;margin-top:10px;padding:16px 18px;border:1px solid rgba(242,194,27,.35);background:linear-gradient(120deg,rgba(60,44,10,.55),rgba(14,10,16,.9));color:#cfc6b6}
#skills .sk-q>div.ev-card.ready{border-color:#f2c21b;box-shadow:0 0 24px rgba(242,194,27,.15)}
#skills .ev-card .ev-crown{flex:none;width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(242,194,27,.5);border-radius:50%;font:400 28px/1 serif;color:#f2c21b;background:rgba(242,194,27,.08)}
#skills .ev-card .ev-txt{flex:1;display:grid;gap:5px;min-width:0}
#skills .ev-card .ev-txt b{font:700 14px/1.2 'Cinzel',serif;letter-spacing:.08em;color:#fff}
#skills .ev-card .ev-txt span{font:italic 500 15px/1.35 'Cormorant Garamond',serif;color:#cfc6b6}
#skills .ev-card .ev-txt em{font:600 10px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#a89060}
#skills .ev-card button{flex:none;padding:10px 18px;border:1px solid #f2c21b;background:rgba(242,194,27,.14);color:#f2c21b;font:700 11px/1 'Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
#skills .ev-card button:hover{background:#f2c21b;color:#000}
@media (max-width:600px){#skills .sk-q>div.ev-card{flex-wrap:wrap}#skills .ev-card button{width:100%}}
.iv-back{grid-column:1/-1;margin:14px 0 2px;font:600 12px/1.3 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#c84a4a}
.iv-back span{font:italic 500 14px/1 'Cormorant Garamond',serif;letter-spacing:0;text-transform:none;color:#a0908a}
.iv-c.cursed{border-color:rgba(200,60,60,.45)!important;background:linear-gradient(160deg,rgba(60,10,12,.35),rgba(10,6,8,.2))!important}
/* the botánica */
#shop .iv-grid{grid-template-columns:1fr;gap:8px}
#shop .iv-box{width:min(820px,100%)}
.iv-coins{display:flex;align-items:center;gap:8px}
i.coin{display:inline-block;width:.95em;height:.95em;border-radius:50%;vertical-align:-.12em;margin-right:4px;background:radial-gradient(circle at 35% 30%,#fff3b0,#f2c21b 45%,#8a6a10);box-shadow:inset 0 0 0 1.5px rgba(90,60,0,.6)}
.iv-front{margin:4px 0 0;font:600 12px/1.3 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#f2c21b}
.sh-msg{margin:0;padding:10px 14px;border:1px solid rgba(125,255,168,.35);background:rgba(125,255,168,.06);font:italic 500 16px/1.2 'Cormorant Garamond',serif;color:#bfffd4}
.sh-c{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;padding:12px 14px;background:linear-gradient(160deg,rgba(28,20,34,.92),rgba(10,8,12,.92));border:1px solid rgba(255,255,255,.1);transition:border-color .2s}
.sh-c:hover{border-color:rgba(242,194,27,.5)}
.sh-c.cursed{border-color:rgba(200,60,60,.4);background:linear-gradient(160deg,rgba(60,10,14,.55),rgba(12,6,8,.92))}
.sh-c.cursed:hover{border-color:rgba(230,80,80,.8);box-shadow:0 0 22px rgba(160,20,20,.25)}
.sh-i{width:84px;height:84px;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.sh-i img{width:100%;height:100%;object-fit:cover}.sh-i b{font:700 30px/1 'Cinzel',serif;color:var(--accent)}
.sh-t{display:grid;gap:5px;min-width:0}
.sh-t b{font:700 15px/1.2 'Cinzel',serif;color:#fff}
.sh-t span{font:500 15px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
.sh-t i{font:600 10px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a8278;font-style:normal}
.sh-buy{display:grid;gap:8px;justify-items:end;min-width:150px}
.sh-buy em{font:700 18px/1 'Cinzel',serif;color:#f2c21b;font-style:normal}.sh-buy em small{font:500 12px/1 'Cormorant Garamond',serif;color:#a79d8d}
.sh-q{display:flex;align-items:center;border:1px solid rgba(255,255,255,.2)}
.sh-q button{width:30px;height:28px;background:none;border:0;color:#fff;font:600 16px/1 system-ui;cursor:pointer}.sh-q button:disabled{opacity:.3;cursor:default}
.sh-q b{min-width:30px;text-align:center;font:700 14px/1 'Cinzel',serif;color:#fff}
.sh-buy>button{padding:9px 14px;border:1px solid #f2c21b;background:rgba(242,194,27,.1);color:#f2c21b;font:700 11px/1 'Cinzel',serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.sh-buy>button:hover:not(:disabled){background:#f2c21b;color:#000}.sh-buy>button:disabled{opacity:.4;cursor:default}
.sh-c.cursed .sh-buy>button{border-color:#d04a4a;color:#ff8a7a;background:rgba(200,40,40,.1)}.sh-c.cursed .sh-buy>button:hover:not(:disabled){background:#d04a4a;color:#fff}
@media (max-width:600px){.sh-c{grid-template-columns:60px 1fr}.sh-i{width:60px;height:60px}.sh-buy{grid-column:1/-1;grid-template-columns:auto auto 1fr;align-items:center;justify-items:start}.sh-buy>button{justify-self:end}}
/* admin */
#admin{position:fixed;inset:0;display:none;background:rgba(4,3,6,.93);backdrop-filter:blur(10px);z-index:60;overflow-y:auto;padding:clamp(12px,4vh,40px) 16px;text-align:left}
#admin.on{display:block}
#admin .ad-box{width:min(900px,100%);margin:0 auto;display:grid;gap:12px}
#admin header{display:flex;gap:20px;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:12px}
#admin header>div{flex:1}#admin .sk-k{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:#ff6a4a}
#admin h2{margin:6px 0 0;font:400 clamp(28px,4vw,40px)/1 Anton,sans-serif;text-transform:uppercase;color:#fff}
#admin header p{margin:8px 0 0;font:italic 500 15px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#admin h4{margin:6px 0 0;font:600 12px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#f2c21b}
#admin .ad-row{display:flex;flex-wrap:wrap;gap:6px}
#admin button{padding:8px 12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#f3eee6;font:600 11px/1 'Cinzel',serif;letter-spacing:.06em;cursor:pointer}
#admin button:hover{border-color:#f2c21b;color:#f2c21b}
#admin .sk-x{width:38px;height:38px;font-size:16px}
#admin input{flex:1;min-width:180px;padding:8px 10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);color:#fff;font:500 14px/1 system-ui}
#admin .ad-list{display:grid;gap:6px}#admin .ad-list p{margin:0;color:#a79d8d;font:italic 15px 'Cormorant Garamond',serif}
#admin .ad-p{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.1)}
#admin .ad-p b{font:700 14px/1 'Cinzel',serif;color:#fff}#admin .ad-p span{flex:1;font:500 14px/1 'Cormorant Garamond',serif;color:#a79d8d}
/* big news across the server */
#bignews{position:fixed;inset:0;z-index:40;pointer-events:none;display:grid;place-items:center;--c:#fff;--g:rgba(255,255,255,.2)}
#bignews.bn-fire{--c:#ffb070;--g:rgba(255,90,20,.35)}#bignews.bn-blood{--c:#ff5a4a;--g:rgba(170,10,10,.4)}#bignews.bn-crown{--c:#ffe3a0;--g:rgba(242,194,27,.28)}#bignews.bn-jazz{--c:#ffd9a0;--g:rgba(255,170,60,.25)}#bignews.bn-ash{--c:#d8d2c8;--g:rgba(60,60,60,.45)}
#bignews::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--g) 75%,rgba(0,0,0,.6));opacity:0;transition:opacity 1s}
#bignews .bn-bar{position:absolute;left:0;right:0;height:14vh;background:#000;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
#bignews .bn-bar.t{top:0;transform:translateY(-100%)}#bignews .bn-bar.b{bottom:0;transform:translateY(100%)}
#bignews .bn-in{position:relative;text-align:center;max-width:min(900px,92vw);display:grid;gap:12px;opacity:0;transform:scale(1.12);filter:blur(8px);transition:all 1.3s cubic-bezier(.2,.8,.2,1) .25s}
#bignews em{font:600 12px/1 'Cinzel',serif;letter-spacing:.45em;text-transform:uppercase;font-style:normal;color:var(--c);opacity:.85}
#bignews h1{margin:0;font:400 clamp(40px,8vw,96px)/.95 Anton,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 0 40px var(--g),0 0 12px var(--c),0 4px 0 rgba(0,0,0,.5)}
#bignews p{margin:0 auto;max-width:720px;font:italic 500 clamp(17px,2.2vw,22px)/1.35 'Cormorant Garamond',serif;color:#f1e9dc;text-shadow:0 2px 10px #000}
#bignews.on::before{opacity:1}#bignews.on .bn-bar{transform:none}#bignews.on .bn-in{opacity:1;transform:none;filter:none}
#bignews.out::before,#bignews.out .bn-in{opacity:0;transition-duration:.9s}#bignews.out .bn-bar.t{transform:translateY(-100%)}#bignews.out .bn-bar.b{transform:translateY(100%)}
#bignews.bn-fire h1{animation:bnflick 1.4s infinite}@keyframes bnflick{50%{text-shadow:0 0 60px rgba(255,120,30,.6),0 0 16px #ffb070,0 4px 0 rgba(0,0,0,.5)}}
/* Delphine's telephone */
#phone{position:fixed;inset:0;display:grid;place-items:center;background:rgba(6,4,3,.8);backdrop-filter:blur(6px);z-index:46}
#phone .ph-box{width:min(820px,94vw);display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px;background:linear-gradient(160deg,#2a2018,#120d0a);border:1px solid rgba(208,170,100,.5);box-shadow:0 0 0 6px rgba(20,14,10,.9),0 0 0 7px rgba(208,170,100,.3),0 30px 80px rgba(0,0,0,.7)}
#phone .ph-art{width:100%;height:auto;align-self:center;filter:drop-shadow(0 8px 16px rgba(0,0,0,.7))}
#phone .ph-t{display:grid;gap:10px;align-content:start}
#phone em{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;font-style:normal;color:#d0aa64}
#phone h2{margin:0;font:600 clamp(22px,3vw,30px)/1.15 'Cormorant Garamond',serif;font-style:italic;color:#f4e8d0}
#phone h2.ring{animation:phring .25s steps(2) infinite}@keyframes phring{50%{transform:translateX(2px)}}
#phone p{margin:0;font:italic 500 16px/1.3 'Cormorant Garamond',serif;color:#b8a888}
#phone .ph-list{display:grid;gap:10px;margin-top:6px}
#phone .ph-o{display:grid;gap:5px;text-align:left;padding:14px 16px;background:rgba(240,225,190,.05);border:1px solid rgba(208,170,100,.35);color:inherit;cursor:pointer;transition:all .2s}
#phone .ph-o:hover:not(:disabled){background:rgba(208,170,100,.15);border-color:#d0aa64;transform:translateX(4px)}
#phone .ph-o:disabled{opacity:.45;cursor:default}
#phone .ph-n{font:700 11px/1 'Courier New',monospace;letter-spacing:.2em;color:#d0aa64}
#phone .ph-o b{font:700 15px/1.2 'Cinzel',serif;color:#fff}
#phone .ph-o span:not(.ph-n){font:500 15px/1.3 'Cormorant Garamond',serif;color:#cfc2a8}
#phone .ph-o i{font:600 10px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#e08a5a}
#phone .ph-x{justify-self:start;margin-top:6px;padding:8px 14px;background:none;border:1px solid rgba(255,255,255,.2);color:#a79d8d;font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
@media (max-width:600px){#phone .ph-box{grid-template-columns:1fr}#phone .ph-art{width:70px;justify-self:center}}
#admin button.ad-danger{border-color:rgba(220,70,60,.5);color:#ff9a8a}#admin button.ad-danger:hover{background:rgba(200,40,30,.25);color:#fff;border-color:#e05a4a}
/* resisting a summoning */
#resist{position:fixed;inset:0;z-index:47;display:grid;place-items:center;pointer-events:none;--w:.3;background:radial-gradient(ellipse at center,rgba(220,230,255,calc(var(--w)*.25)) 20%,rgba(200,215,255,calc(var(--w)*.85)) 90%)}
#resist .rs-box{text-align:center;display:grid;gap:10px;padding:26px 34px;background:rgba(8,8,16,.72);border:1px solid rgba(188,212,255,.5);box-shadow:0 0 40px rgba(160,190,255,.3)}
#resist em{font:600 11px/1 'Cinzel',serif;letter-spacing:.4em;text-transform:uppercase;font-style:normal;color:#bcd4ff}
#resist h2{margin:0;font:400 clamp(28px,4.5vw,48px)/1 Anton,sans-serif;text-transform:uppercase;color:#fff;text-shadow:0 0 20px #9ab8ff}
#resist p{margin:0;font:italic 500 19px/1.3 'Cormorant Garamond',serif;color:#e4e8f4}
#resist .rs-bar{position:relative;width:min(420px,80vw);height:16px;margin:6px auto 0;background:rgba(255,255,255,.1);border:1px solid rgba(188,212,255,.5)}
#resist .rs-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#9ab8ff,#ffffff);box-shadow:0 0 14px #bcd4ff}
#resist .rs-bar b{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:#ffcf8a}
#resist .rs-t{font:600 13px/1 'Cinzel',serif;color:#bcd4ff}
#resist.hit .rs-box{animation:rshit .12s}@keyframes rshit{50%{transform:translateX(-6px) scale(1.02)}}
#resist.won .rs-box{border-color:#ffcf8a;box-shadow:0 0 50px rgba(255,200,120,.5)}#resist.lost{background:rgba(240,245,255,.95);transition:background .5s}
#resist.atk{background:radial-gradient(ellipse at center,rgba(120,255,190,calc(var(--w)*.18)) 20%,rgba(60,200,140,calc(var(--w)*.55)) 90%)}
#resist.atk .rs-box{border-color:rgba(125,255,200,.55);box-shadow:0 0 40px rgba(110,255,180,.3)}
#resist.atk em{color:#7dffc8}#resist.atk h2{text-shadow:0 0 20px #6fffb0}
#resist.atk .rs-bar i{background:linear-gradient(90deg,#6fffb0,#ffffff);box-shadow:0 0 14px #7dffc8}
/* covens (J) */
#covens{display:block;text-align:left;background:rgba(5,3,7,.94);backdrop-filter:blur(10px);z-index:36;overflow-y:auto;padding:clamp(12px,4vh,40px) 16px}
#covens .cv-box{width:min(980px,100%);margin:0 auto;display:grid;gap:14px}
#covens header{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:12px}
#covens header>div{flex:1}#covens .sk-k{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:#e8cf98}
#covens h2{margin:6px 0 0;font:400 clamp(30px,4vw,46px)/1 Anton,sans-serif;text-transform:uppercase;color:#fff}
#covens .sk-x{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;width:38px;height:38px;cursor:pointer;font-size:16px}
#covens nav{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap}
#covens nav button{padding:9px 14px;border:1px solid rgba(255,255,255,.18);background:none;color:#cfc6b6;font:600 11px/1 'Cinzel',serif;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}
#covens nav button.act{border-color:#e8cf98;color:#e8cf98;background:rgba(232,207,152,.08)}
#covens h4{margin:6px 0 0;font:600 12px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#a89878}
#covens .cv-note{margin:0;font:italic 500 15px/1.35 'Cormorant Garamond',serif;color:#a89e8e}
#covens .cv-sig{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--cc,#555);color:var(--cc,#ccc);font:400 28px/1 serif;background:radial-gradient(circle,rgba(255,255,255,.06),rgba(0,0,0,.4));text-shadow:0 0 12px var(--cc)}
#covens .cv-sig.big{width:96px;height:96px;font-size:52px;box-shadow:0 0 30px color-mix(in srgb,var(--cc) 35%,transparent)}
#covens .cv-mine{display:flex;gap:20px;align-items:center;padding:20px;border:1px solid var(--cc);background:linear-gradient(120deg,color-mix(in srgb,var(--cc) 14%,transparent),rgba(10,8,12,.9))}
#covens .cv-mine em{font:600 10px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;font-style:normal;color:var(--cc)}
#covens .cv-mine h3{margin:6px 0;font:700 24px/1.1 'Cinzel',serif;color:#fff}
#covens .cv-mine p{margin:0 0 10px;font:italic 500 16px/1.3 'Cormorant Garamond',serif;color:#cfc6b6}
#covens .cv-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:6px;font:500 15px/1 'Cormorant Garamond',serif;color:#b8ad98}
#covens .cv-row b{color:#fff;font-family:Cinzel,serif}
#covens button:not(.sk-x):not(nav button){padding:9px 14px;border:1px solid #e8cf98;background:rgba(232,207,152,.08);color:#e8cf98;font:700 11px/1 'Cinzel',serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#covens button:not(.sk-x):not(nav button):hover:not(:disabled){background:#e8cf98;color:#000}
#covens button.dark{border-color:#c05a5a!important;color:#ff9a8a!important;background:rgba(200,50,50,.08)!important}
#covens button:disabled{opacity:.35;cursor:default}
#covens .cv-list,#covens .cv-pl,#covens .cv-board{display:grid;gap:8px}
#covens .cv-c,#covens .cv-p{display:flex;gap:14px;align-items:center;padding:12px 14px;background:linear-gradient(160deg,rgba(28,20,34,.9),rgba(10,8,12,.9));border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--cc,#444)}
#covens .cv-c.mine{border-color:var(--cc)}
#covens .cv-t,#covens .cv-pt{flex:1;display:grid;gap:4px;min-width:0}
#covens .cv-t b,#covens .cv-pt b{font:700 15px/1.2 'Cinzel',serif;color:#fff}
#covens .cv-t span,#covens .cv-pt span{font:500 15px/1.3 'Cormorant Garamond',serif;color:#b8ad98}
#covens .cv-t em{font:600 10px/1.3 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#8a8278}
#covens .cv-pt i{font-style:normal}#covens .cv-pt u{text-decoration:none;color:#ffe3a0;font-size:12px}
#covens .cv-you,#covens .cv-p em{font:600 10px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cc,#e8cf98);font-style:normal}
#covens .cv-p .cv-sig{width:42px;height:42px;font-size:22px}
#covens .cv-rk{display:grid;grid-template-columns:34px 46px 1fr repeat(3,64px) 70px;gap:10px;align-items:center;padding:10px 14px;background:rgba(20,14,24,.9);border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--cc)}
#covens .cv-rk i{font:400 26px/1 Anton,sans-serif;color:#8a8278;font-style:normal}#covens .cv-rk.first i{color:#ffd27a}
#covens .cv-rk .cv-sig{width:40px;height:40px;font-size:20px}
#covens .cv-rk b{font:700 14px/1.2 'Cinzel',serif;color:#fff}
#covens .cv-rk span{font:600 13px/1 'Cinzel',serif;color:#b8ad98}
#covens .cv-rk em{font:400 24px/1 Anton,sans-serif;color:var(--cc);font-style:normal;text-align:right}
#covens .cv-rk.first{box-shadow:0 0 24px rgba(255,210,120,.15);border-color:#ffd27a}
#covens .cv-found{display:grid;gap:14px;max-width:620px}
#covens .cv-found label,#covens .cv-found em{display:grid;gap:6px;font:600 11px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#a89878;font-style:normal}
#covens .cv-found input,#covens .cv-found select{padding:10px 12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font:500 16px/1 'Cormorant Garamond',serif;letter-spacing:0;text-transform:none}
#covens .cv-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#covens .cv-pick button{width:40px;height:40px;padding:0!important;display:grid;place-items:center;font:400 22px/1 serif!important;letter-spacing:0!important;color:#e8cf98}
#covens .cv-pick button.on{outline:2px solid #fff;outline-offset:2px}
#covens .cv-go{justify-self:start;padding:12px 20px!important}
@media (max-width:640px){#covens .cv-rk{grid-template-columns:28px 40px 1fr 56px}#covens .cv-rk span{display:none}#covens .cv-mine{flex-direction:column;align-items:flex-start}}
/* over heads: coven and soul */
.nameplate s{display:block;margin-top:2px;font:600 11px/1.2 'Cinzel',serif;letter-spacing:.06em;text-decoration:none;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.8)}
.nameplate.bounty b::before{content:'☠ ';color:#ff4a3a}
#mycov{position:fixed;left:24px;bottom:178px;align-items:baseline;z-index:4;display:none;gap:10px;font:600 12px/1 'Cinzel',serif;letter-spacing:.08em;text-shadow:0 1px 3px #000;pointer-events:none}
#mycov.on{display:flex}
/* the Delphi Trust's contracts */
#bounty{display:block;text-align:left;background:rgba(6,3,3,.94);backdrop-filter:blur(10px);z-index:36;overflow-y:auto;padding:clamp(12px,4vh,40px) 16px}
#bounty .bt-box{width:min(760px,100%);margin:0 auto;display:grid;gap:14px}
#bounty header{display:flex;gap:20px;align-items:flex-start;border-bottom:1px solid rgba(200,60,50,.35);padding-bottom:12px}
#bounty header>div{flex:1}#bounty .sk-k{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:#d05a4a}
#bounty h2{margin:6px 0;font:400 clamp(30px,4vw,46px)/1 Anton,sans-serif;text-transform:uppercase;color:#fff}
#bounty header p{margin:0;font:italic 500 17px/1.35 'Cormorant Garamond',serif;color:#cfc2b2}
#bounty .sk-x{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;width:38px;height:38px;cursor:pointer;font-size:16px}
#bounty .bt-amt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#bounty .bt-amt em{font:600 11px/1 'Cinzel',serif;letter-spacing:.25em;text-transform:uppercase;color:#a89080;font-style:normal;margin-right:6px}
#bounty .bt-amt span{margin-left:auto;font:500 15px/1 'Cormorant Garamond',serif;color:#b8ad98}#bounty .bt-amt b{color:#f2c21b;font-family:Cinzel,serif}
#bounty button:not(.sk-x){padding:9px 14px;border:1px solid #c0493a;background:rgba(190,50,40,.1);color:#ff9a8a;font:700 11px/1 'Cinzel',serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#bounty button:not(.sk-x):hover:not(:disabled),#bounty .bt-amt button.on{background:#c0493a;color:#fff}
#bounty button:disabled{opacity:.35;cursor:default}
#bounty .bt-list{display:grid;gap:8px}
#bounty .bt-t{display:flex;gap:14px;align-items:center;padding:10px 12px;background:linear-gradient(160deg,rgba(34,16,16,.9),rgba(10,6,6,.9));border:1px solid rgba(255,255,255,.08)}
#bounty .bt-t img,#bounty .bt-ph{width:56px;height:70px;object-fit:cover;flex:none;border:1px solid rgba(200,80,60,.4);filter:sepia(.4) contrast(1.1);display:grid;place-items:center;font-style:normal;color:#c0493a;font-size:26px;background:#140808}
#bounty .bt-t>div{flex:1;display:grid;gap:4px}#bounty .bt-t b{font:700 15px/1.2 'Cinzel',serif;color:#fff}
#bounty .bt-t span{font:500 15px/1.2 'Cormorant Garamond',serif;color:#b8ad98}#bounty .bt-t span i{font-style:normal}
#bounty .bt-t em{font:600 11px/1 'Cinzel',serif;color:#ff6a5a;font-style:normal}
#bounty .bt-none,#bounty .bt-note{margin:0;font:italic 500 15px/1.35 'Cormorant Garamond',serif;color:#a89e8e}
#covens .cv-face{width:44px;height:54px;object-fit:cover;flex:none;border:1px solid var(--cc,#555)}
/* spell combos */
#combo{position:fixed;left:50%;top:26%;transform:translate(-50%,-50%) scale(1.3);z-index:41;text-align:center;pointer-events:none;opacity:0;filter:blur(10px);transition:all .6s cubic-bezier(.2,.8,.2,1)}
#combo.on{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}#combo.out{opacity:0;transform:translate(-50%,-60%) scale(.95);transition-duration:.8s}
#combo em{display:block;font:600 13px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;color:#fff;font-style:normal;text-shadow:0 0 12px var(--a)}
#combo em i{font-style:normal;color:var(--b);margin:0 .3em}
#combo h1{margin:8px 0 0;font:400 clamp(44px,8vw,110px)/.9 Anton,sans-serif;text-transform:uppercase;letter-spacing:.03em;background:linear-gradient(100deg,var(--a),#fff 45%,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px var(--a)) drop-shadow(0 4px 0 rgba(0,0,0,.6))}
/* the Council */
#cltimer{position:fixed;top:64px;left:50%;transform:translateX(-50%);padding:8px 16px;background:rgba(10,6,4,.82);border:1px solid rgba(232,207,152,.5);font:500 16px/1 'Cormorant Garamond',serif;color:#f1e6cc;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6}
#cltimer.on{opacity:1}#cltimer b{font:600 12px/1 'Cinzel',serif;letter-spacing:.12em;color:#e8cf98}
#cvote{position:fixed;inset:0;display:grid;place-items:center;background:rgba(6,3,3,.55);z-index:46}
#cvote .cvb{display:grid;justify-items:center;gap:10px;padding:26px 40px;background:linear-gradient(160deg,rgba(40,16,12,.96),rgba(10,6,6,.96));border:1px solid rgba(232,160,120,.5);box-shadow:0 30px 80px rgba(0,0,0,.7);text-align:center}
#cvote img{width:110px;height:136px;object-fit:cover;border:1px solid rgba(232,160,120,.6);filter:sepia(.35) contrast(1.1)}
#cvote em{font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;font-style:normal;color:#e8a080}
#cvote h2{margin:0;font:400 clamp(30px,4vw,46px)/1 Anton,sans-serif;text-transform:uppercase;color:#fff}
#cvote p{margin:0;font:italic 500 20px/1 'Cormorant Garamond',serif;color:#e4d8c4}
#cvote .cvb-b{display:flex;gap:12px;margin-top:6px}#cvote .cvb-b i{font:italic 500 17px/1 'Cormorant Garamond',serif;color:#cfc6b6}
#cvote button{padding:12px 22px;font:700 12px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:1px solid}
#cvote button[data-v="1"]{border-color:#e05a3a;color:#ffb09a;background:rgba(220,70,40,.14)}#cvote button[data-v="1"]:hover{background:#e05a3a;color:#fff}
#cvote button[data-v="0"]{border-color:#e8cf98;color:#e8cf98;background:rgba(232,207,152,.08)}#cvote button[data-v="0"]:hover{background:#e8cf98;color:#000}
#clfade{position:fixed;inset:0;background:#000;z-index:45;display:grid;place-items:center;opacity:0;transition:opacity .9s;pointer-events:none}
#clfade.on{opacity:1}#clfade p{font:italic 500 26px/1.3 'Cormorant Garamond',serif;color:#d8ccb8}
/* the world's exposure */
#mask{position:fixed;right:18px;top:92px;z-index:5;display:none;align-items:center;gap:8px;padding:6px 10px;background:rgba(8,6,10,.72);border:1px solid color-mix(in srgb,var(--c,#b8b0a8) 60%,transparent);pointer-events:none;--c:#b8b0a8}
#mask.on{display:flex}#mask i{font-style:normal;font-size:15px;filter:drop-shadow(0 0 6px var(--c))}
#mask b{font:600 11px/1 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
#mask span{display:block;width:90px;height:5px;background:rgba(255,255,255,.1)}#mask u{display:block;height:100%;background:var(--c);text-decoration:none;box-shadow:0 0 8px var(--c)}
/* the Grimoire: an open book on the lectern */
#grimoire{display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(40,24,10,.55),rgba(4,3,2,.92));backdrop-filter:blur(6px);z-index:36;padding:clamp(10px,3vh,32px) 12px;overflow-y:auto}
#grimoire:not(.on){display:none}
#grimoire .gr-book{position:relative;width:min(1060px,100%);display:grid;grid-template-columns:1fr 1fr;padding:22px 20px;background:linear-gradient(90deg,#3a1a10,#5a2a16 3%,#4a2212 50%,#5a2a16 97%,#3a1a10);border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.8),inset 0 0 0 2px rgba(200,150,80,.35),inset 0 0 40px rgba(0,0,0,.6)}
#grimoire .gr-left,#grimoire .gr-right{position:relative;min-width:0;padding:26px 30px 24px;color:#3a2210;background:#e8dcc0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:inset 0 0 60px rgba(120,80,30,.35)}
#grimoire .gr-left{border-radius:6px 0 0 6px;background-color:#e6d8b8;box-shadow:inset -30px 0 40px -20px rgba(80,50,20,.55),inset 0 0 60px rgba(120,80,30,.35)}
#grimoire .gr-right{border-radius:0 6px 6px 0;background-color:#eadcbf;box-shadow:inset 30px 0 40px -20px rgba(80,50,20,.55),inset 0 0 60px rgba(120,80,30,.35);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
#grimoire .gr-left>em{display:block;font:600 11px/1 'Cinzel',serif;letter-spacing:.35em;text-transform:uppercase;font-style:normal;color:#8a3a1a}
#grimoire h2{margin:6px 0 14px;font:700 34px/1 'Cinzel Decorative','Cinzel',serif;color:#3a1a0a;letter-spacing:.04em;border-bottom:1px solid rgba(90,50,20,.35);padding-bottom:10px}
#grimoire .gr-list{display:grid;gap:6px}
#grimoire .gr-list button{display:flex;align-items:center;gap:12px;padding:7px 10px;text-align:left;background:rgba(255,248,230,.35);border:1px solid rgba(90,50,20,.18);border-radius:4px;color:inherit;cursor:pointer;transition:all .15s}
#grimoire .gr-list button:hover{background:rgba(255,248,230,.7);border-color:rgba(138,58,26,.5)}
#grimoire .gr-list button.on{background:rgba(138,58,26,.12);border-color:#8a3a1a;box-shadow:inset 3px 0 0 #8a3a1a}
#grimoire .gr-list button b{display:block;font:700 14px/1.2 'Cinzel',serif;color:#3a1a0a}
#grimoire .gr-list button i{display:block;margin-top:2px;font:italic 500 14px/1.2 'Cormorant Garamond',serif;color:#7a5a3a}
#grimoire .gr-list button.can i{color:#2a6a2a;font-weight:700}
#grimoire .gr-i{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#2a1a10;box-shadow:0 0 0 2px #b08a4a,0 2px 6px rgba(0,0,0,.4)}
#grimoire .gr-i img{width:100%;height:100%;object-fit:cover}#grimoire .gr-i b{color:#e8c890;font:700 18px/1 serif}
#grimoire .gr-where{margin:14px 0 0;font:italic 500 14px/1.35 'Cormorant Garamond',serif;color:#6a4a2a;border-top:1px solid rgba(90,50,20,.25);padding-top:10px}
#grimoire .gr-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(90,50,20,.45);background:rgba(255,248,230,.5);color:#5a2a10;font-size:15px;cursor:pointer}
#grimoire .gr-x:hover{background:#8a3a1a;color:#fff}
#grimoire .gr-hero{width:150px;height:150px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #b08a4a,0 0 0 7px rgba(90,50,20,.25),0 10px 30px rgba(60,30,10,.5);margin-top:6px}
#grimoire .gr-hero img{width:100%;height:100%;object-fit:cover}
#grimoire h3{margin:6px 0 0;font:700 24px/1.1 'Cinzel',serif;color:#3a1a0a}
#grimoire .gr-right>p{margin:0;max-width:380px;font:italic 500 17px/1.35 'Cormorant Garamond',serif;color:#4a2e16}
#grimoire .gr-ings{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
#grimoire .gr-ing{display:grid;justify-items:center;gap:4px;width:92px;padding:8px 4px;border:1px dashed rgba(90,50,20,.4);border-radius:6px;background:rgba(255,248,230,.3)}
#grimoire .gr-ing .gr-i{width:48px;height:48px;filter:grayscale(.85) opacity(.6)}
#grimoire .gr-ing.ok{border-style:solid;border-color:#2a6a2a;background:rgba(80,140,60,.1)}
#grimoire .gr-ing.ok .gr-i{filter:none}
#grimoire .gr-ing b{font:600 11px/1.15 'Cinzel',serif;color:#3a1a0a}
#grimoire .gr-ing em{font:700 12px/1 'Cinzel',serif;font-style:normal;color:#8a3a1a}#grimoire .gr-ing.ok em{color:#2a6a2a}
#grimoire .gr-quill{width:100%;max-width:440px;height:auto;margin-top:4px;border-bottom:1px solid rgba(90,50,20,.3)}
#grimoire .gr-go{margin-top:4px;padding:12px 26px;border:none;border-radius:4px;background:linear-gradient(#9a3a1a,#6a2410);color:#f8e8c8;font:700 13px/1 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 14px rgba(90,30,10,.45),inset 0 1px 0 rgba(255,220,180,.35)}
#grimoire .gr-go:hover:not(:disabled){filter:brightness(1.15)}
#grimoire .gr-go:disabled{background:#b8a88a;color:#6a5a4a;box-shadow:none;cursor:default}
@media (max-width:760px){#grimoire .gr-book{grid-template-columns:1fr}#grimoire .gr-left{border-radius:6px 6px 0 0}#grimoire .gr-right{border-radius:0 0 6px 6px}}
/* a scroll being read: it unrolls and burns up in her hands */
#scrollfx{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:42;pointer-events:none;animation:scrollfx 1.6s ease-out forwards}
#scrollfx div{display:grid;justify-items:center;gap:8px}
#scrollfx img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #e8c890,0 0 40px rgba(255,200,120,.8)}
#scrollfx b{font:700 22px/1 'Cinzel',serif;color:#fff4d8;text-shadow:0 0 18px #ffb040,0 2px 4px #000}
@keyframes scrollfx{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;filter:none}100%{opacity:0;transform:translate(-50%,-70%) scale(1.15);filter:blur(6px) brightness(2)}}

/* the army's machines (vehicles.js): a hard military health bar over the tank and the helicopter */
.vbar { position: absolute; left: 0; top: 0; pointer-events: none; width: 190px; will-change: transform; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #e8e2d0; text-align: center; text-shadow: 0 1px 2px #000; }
.vbar b { display: block; margin-bottom: 4px; }
.vbar b::before { content: '⚠ '; color: #ff5a3a; }
.vbar i { display: block; position: relative; height: 9px; background: rgba(10, 10, 8, .75); border: 1px solid rgba(220, 200, 150, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .5); overflow: hidden; }
.vbar u { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#c8b070, #8a6a2a); transition: width .25s; }
.vbar s { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 0, 0, .55) 18px 19px); }
.vbar.fire u { background: linear-gradient(#ffb040, #d0401a); animation: vfire .3s infinite alternate; }
.vbar.hurt i { animation: vhurt .25s; }
.vbar.dead { opacity: .4; }
@keyframes vfire { to { filter: brightness(1.35); } }
@keyframes vhurt { 0% { transform: translateX(-3px); border-color: #ff8a4a; } 50% { transform: translateX(3px); } 100% { transform: none; } }

/* karma on the hotbar (social.js mulFor): the light's healing and wards glow gold, the dark's attacks violet */
.slot .km { position: absolute; right: 3px; top: 2px; z-index: 1; transform: skewX(8deg); font: 700 10px/1 system-ui, sans-serif; pointer-events: none; display: none; }
.slot .km.light { display: block; color: #ffe6a0; text-shadow: 0 0 4px rgba(255, 210, 110, .9), 0 1px 1px #000; }
.slot .km.dark { display: block; color: #e0b0ff; text-shadow: 0 0 4px rgba(190, 100, 255, .9), 0 1px 1px #000; }
.slot:has(.km.light) { border-color: rgba(255, 220, 130, .45); }
.slot:has(.km.dark) { border-color: rgba(200, 130, 255, .42); }
#mycov em { font-style: normal; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .06em; opacity: .9; color: #b8b0a8; }
#mycov em.kl { color: #ffe6a0; } #mycov em.kd { color: #d8a0ff; }

/* J: a coven's members (social.js roster) — faces like the bounty board, the leader crowned */
#covens .cv-cw.open .cv-c { border-bottom-color: transparent; }
#covens .cv-lead { color: #f0d890 !important; }
#covens .cv-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; padding: 14px; background: rgba(8, 6, 10, .85); border: 1px solid rgba(255, 255, 255, .08); border-top: 0; animation: cvIn .25s ease-out; }
#covens .cv-m { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; background: linear-gradient(170deg, rgba(34, 24, 40, .9), rgba(12, 9, 14, .95)); border: 1px solid rgba(255, 255, 255, .1); text-align: center; }
#covens .cv-m img, #covens .cv-m .cv-ph { width: 62px; height: 78px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .18); filter: sepia(.25) contrast(1.08); display: grid; place-items: center; font-style: normal; color: #777; background: #111; }
#covens .cv-m b { font: 600 12px/1.2 'Cinzel', serif; color: #efe6d2; margin-top: 4px; }
#covens .cv-m span { font: 10px/1.2 system-ui, sans-serif; color: #9a9088; }
#covens .cv-m em { font: 600 9px/1 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #b8a888; font-style: normal; margin-top: 3px; }
#covens .cv-m.lead { border-color: rgba(240, 210, 120, .7); box-shadow: 0 0 18px rgba(240, 200, 100, .18), inset 0 0 24px rgba(240, 200, 100, .06); }
#covens .cv-m.lead img { border-color: #e8c870; filter: none; }
#covens .cv-m.lead em { color: #f0d890; }
#covens .cv-m.dead { opacity: .45; } #covens .cv-m.dead img { filter: grayscale(1); }
#covens .cv-crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 20px; color: #f0d070; text-shadow: 0 0 10px rgba(255, 210, 90, .8), 0 2px 3px #000; }
@keyframes cvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* a scheme's destinations (errands.js): one button per coven house */
.er-c .sch-to { display: flex; flex-direction: column; gap: 5px; flex: none; }
.er-c .sch-to button { min-width: 150px; }

/* the coven & soul badge as the first row of the vitals block (social.js): it moves with them on every screen size */
.vitals #mycov { position: static; margin-bottom: 1px; flex-wrap: wrap; row-gap: 3px; }

/* ---------------- sign in / create account ---------------- */
.auth { width: min(400px, 88vw); margin-top: 30px; padding: 22px 26px 18px; pointer-events: auto; cursor: default; background: linear-gradient(180deg, rgba(14,8,10,.9), rgba(6,4,7,.94));
  border: 1px solid rgba(236,201,140,.42); box-shadow: 0 22px 60px #000c, inset 0 0 40px rgba(142,49,51,.12); }
.auth[hidden] { display: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: -4px -6px 16px; border-bottom: 1px solid #ffffff1c; }
.auth-tabs button { padding: 10px 4px 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: #a8957b; font: 600 12px 'Cinzel', serif; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.auth-tabs button:hover { color: #f4e6d0; }
.auth-tabs button.on { color: #ecc98c; border-bottom-color: #ecc98c; }
.auth form { display: grid; gap: 7px; text-align: left; }
.auth label { font: 600 10px 'Cinzel', serif; letter-spacing: .3em; text-transform: uppercase; color: #cdb89a; margin-top: 6px; }
.auth input { width: 100%; box-sizing: border-box; padding: 11px 14px; font: 600 19px 'Cormorant Garamond', serif; color: #f4e6d0; background: rgba(10,6,6,.6); border: 1px solid rgba(236,201,140,.35); border-radius: 2px; outline: none; }
.auth input::placeholder { color: #f4e6d040; }
.auth input:focus { border-color: #ecc98c; box-shadow: 0 0 16px rgba(236,201,140,.22); }
.auth-pw2 { display: grid; gap: 7px; }
.auth-pw2[hidden] { display: none; }
.auth-go { margin-top: 14px; padding: 13px 18px; border: 1px solid #f8dfab; color: #160c0b; font: 700 13px 'Cinzel', serif; letter-spacing: .26em; text-transform: uppercase; cursor: pointer;
  background: linear-gradient(105deg,#d8b575,#f0d9a6 55%,#c99d5b); box-shadow: 0 8px 28px #0007, 0 0 24px #d8b57520; }
.auth-go:hover { background: linear-gradient(105deg,#e3c58b,#fff0c9 55%,#d9ae69); }
.auth-go:disabled { opacity: .55; cursor: wait; }
.auth-msg { min-height: 20px; font: italic 15px 'Cormorant Garamond', serif; color: #ff8a8a; text-align: center; }
.auth-msg.ok { color: #bfe6b0; }
.auth-note { margin: 6px 0 0; font: italic 13px 'Cormorant Garamond', serif; color: #cdb89a99; text-align: center; }
.who { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.who[hidden] { display: none; }
.who span { font: 600 11px 'Cinzel', serif; letter-spacing: .35em; text-transform: uppercase; color: #cdb89a; }
.who b { font: 700 24px 'Cormorant Garamond', serif; color: #f4e6d0; letter-spacing: .04em; }
.who button { border: 0; background: transparent; color: #ecc98c99; font: 600 10px 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.who button:hover { color: #fff0c5; }
#lobby.locked { display: none; }
.auth-reg { display: grid; gap: 7px; }
.auth-reg[hidden] { display: none; }
.auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-two > div { display: grid; gap: 7px; min-width: 0; }
.auth { max-height: 92vh; overflow-y: auto; }

/* full-screen sign in / create account */
.auth { position: fixed; inset: 0; z-index: 60; width: auto; max-height: none; margin: 0; padding: max(24px, env(safe-area-inset-top)) 16px; display: flex; align-items: center; justify-content: center; overflow-y: auto; cursor: default; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 35%, rgba(60,20,34,.55), rgba(4,3,6,.97) 70%), rgba(4,3,6,.9); backdrop-filter: blur(6px); border: 0; box-shadow: none; }
.auth[hidden] { display: none; }
.auth-card { width: min(460px, 100%); margin: auto; padding: 8px 30px 22px; }
.auth-logo { text-align: center; font: 900 clamp(54px, 9vw, 84px)/1 'Cinzel Decorative', 'Cinzel', serif; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; color: #f0d9a6; text-shadow: 0 0 40px rgba(236,201,140,.25), 0 4px 30px #000; }
.auth-sub { text-align: center; margin: 6px 0 26px; font: italic 17px 'Cormorant Garamond', serif; letter-spacing: .12em; color: #cdb89a; }
.auth-tabs { margin: 0 0 18px; }
.auth input { font-size: 20px; padding: 13px 16px; }
.sp-enter { margin-top: 34px; pointer-events: auto; }
.sp-enter[hidden] { display: none; }
.auth-back { display: block; margin: 0 0 6px -6px; padding: 6px; border: 0; background: transparent; color: #cdb89a; font: 600 10px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.auth-back:hover { color: #fff0c5; }
#covens .cv-roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#covens .cv-m em.cv-on { color: #8fe0a4; } #covens .cv-m em.cv-off { color: #7d746c; }
#covens .cv-m.me { border-color: rgba(236, 201, 140, .55); }
#covens .cv-m button { margin-top: 5px; padding: 4px 9px; border: 1px solid rgba(143, 224, 164, .5); background: rgba(143, 224, 164, .08); color: #b8f0c6; font: 600 9px 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#covens .cv-m button:hover { background: rgba(143, 224, 164, .2); }

/* ---------------- the store ---------------- */
#store { display: block; text-align: left; background: radial-gradient(ellipse at 50% 0%, #2a1020, #0a0710 62%); z-index: 300; overflow-y: auto; padding: clamp(14px, 4vh, 44px) 16px; }
#store .st-box { width: min(1000px, 100%); margin: 0 auto; display: grid; gap: 16px; }
#store header { display: flex; align-items: flex-start; gap: 20px; border-bottom: 1px solid rgba(236,201,140,.25); padding-bottom: 14px; }
#store header > div:first-child { flex: 1; }
#store h2 { margin: 2px 0 0; font: 900 clamp(26px, 4vw, 40px)/1.05 'Cinzel Decorative', 'Cinzel', serif; letter-spacing: .06em; color: #f0d9a6; }
.st-coin { display: flex; align-items: center; gap: 8px; font: 700 20px 'Cormorant Garamond', serif; color: #f0d9a6; padding: 8px 14px; border: 1px solid rgba(236,201,140,.3); background: rgba(236,201,140,.06); }
.st-coin i, .st-coins i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b04a 55%, #8a5f1c); box-shadow: 0 0 10px #e0b04a66, inset 0 0 0 2px #ffe9a866; }
#store nav { display: flex; gap: 6px; flex-wrap: wrap; }
#store nav button { padding: 10px 18px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #a8957b; font: 600 11px 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
#store nav button:hover { color: #f4e6d0; border-color: rgba(236,201,140,.5); }
#store nav button.act { color: #160c0b; background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); border-color: #f8dfab; }
.st-wait { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid rgba(143,224,164,.4); background: rgba(143,224,164,.07); color: #b8f0c6; }
.st-wait span { font: italic 15px 'Cormorant Garamond', serif; color: #a8d8b4; }
.st-note, .st-foot { color: #a8957b; font: italic 15px 'Cormorant Garamond', serif; text-align: center; margin: 4px 0; }
.st-foot code { color: #f0d9a6; font-style: normal; letter-spacing: .05em; }
.st-bundle { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 22px; border: 1px solid rgba(236,201,140,.55); background: linear-gradient(100deg, rgba(142,49,51,.35), rgba(236,201,140,.12)); box-shadow: 0 10px 40px #0008, inset 0 0 40px rgba(236,201,140,.06); }
.st-bundle > div { flex: 1; min-width: 240px; }
.st-bundle em { font: 600 10px 'Cinzel', serif; letter-spacing: .3em; text-transform: uppercase; color: #ecc98c; font-style: normal; }
.st-bundle h3 { margin: 4px 0; font: 700 26px 'Cormorant Garamond', serif; color: #fff0c5; }
.st-bundle p { margin: 0; color: #d8c8b0; font: 16px/1.4 'Cormorant Garamond', serif; }
.st-buy { padding: 12px 22px; border: 1px solid #f8dfab; color: #160c0b; font: 700 12px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); box-shadow: 0 8px 24px #0007; transition: transform .15s, filter .15s; }
.st-buy:hover { transform: translateY(-2px); filter: brightness(1.08); }
.st-buy:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.st-buy.owned { background: transparent; color: #b8f0c6; border-color: rgba(143,224,164,.6); box-shadow: none; }
.st-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.st-grid.wit { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.st-grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.st-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(170deg, rgba(34,24,40,.92), rgba(10,8,13,.96)); transition: transform .2s, border-color .2s, box-shadow .2s; }
.st-card:hover { transform: translateY(-3px); border-color: var(--ac, #ecc98c); box-shadow: 0 16px 40px #000a, 0 0 30px -8px var(--ac, #ecc98c); }
.st-card.focus { border-color: var(--ac, #ecc98c); box-shadow: 0 0 0 1px var(--ac, #ecc98c), 0 0 40px -6px var(--ac, #ecc98c); }
.st-art { position: relative; height: 260px; overflow: hidden; background: #0b0810; }
.st-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: saturate(.9) contrast(1.05); transition: transform .5s; }
.st-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,8,13,.95)); }
.st-art i { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 10px; font: 700 9px 'Cinzel', serif; letter-spacing: .25em; text-transform: uppercase; font-style: normal; color: #160c0b; background: var(--ac, #ecc98c); }
.st-card.own .st-art i { background: #8fe0a4; }
.st-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 18px 18px; flex: 1; }
.st-card h3 { margin: 0; font: 700 22px 'Cinzel', serif; color: #f4e6d0; letter-spacing: .04em; }
.st-card em { font: 600 10px 'Cinzel', serif; letter-spacing: .24em; text-transform: uppercase; color: var(--ac, #ecc98c); font-style: normal; }
.st-card p { margin: 0; color: #b9a893; font: italic 15px/1.35 'Cormorant Garamond', serif; }
.st-card p.dim { font-size: 13px; color: #8a7d70; }
.st-card ul { margin: 4px 0 10px; padding: 0; list-style: none; display: grid; gap: 3px; }
.st-card li { font: 12px system-ui, sans-serif; color: #d8c8b0; padding-left: 14px; position: relative; }
.st-card li::before { content: '✦'; position: absolute; left: 0; color: var(--ac, #ecc98c); font-size: 9px; top: 2px; }
.st-body .st-buy { margin-top: auto; }
.st-card.pack { align-items: center; text-align: center; padding: 22px 16px 18px; gap: 6px; }
.st-card.pack .st-buy { margin-top: 10px; width: 100%; }
.st-coins { display: flex; justify-content: center; height: 46px; align-items: flex-end; }
.st-coins i { width: 30px; height: 30px; margin-left: -8px; }
.st-heart { font-size: 46px; color: #ffcf6a; text-shadow: 0 0 24px #ffb020aa; line-height: 1; }
/* the lock on a witch you don't own yet: a gold padlock on a round dark medallion (a real element, so it stays crisp) */
.card .lk { display: none; }
.card.prem .lk { display: grid; position: absolute; z-index: 3; top: 6px; right: 9px; width: 26px; height: 26px; place-items: center; border-radius: 50%; transform: skewX(9deg);
  background: radial-gradient(circle at 35% 28%, rgba(58,42,66,.97), rgba(9,6,13,.97)); box-shadow: 0 0 0 1px rgba(240,214,150,.95), 0 0 0 3px rgba(9,6,13,.6), 0 5px 14px rgba(0,0,0,.65), 0 0 16px rgba(236,201,140,.4); }
.card.prem .lk svg { width: 14px; height: 14px; filter: drop-shadow(0 0 2px rgba(236,201,140,.55)); }
.card.prem::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(200deg, rgba(8,5,12,.05) 30%, rgba(8,5,12,.55)); pointer-events: none; }
.card.prem img { filter: saturate(.35) brightness(.55); }
.choose.premium { background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); }
.store-lobby { color: #ecc98c !important; }
@media (max-width: 640px) { .st-art { height: 200px; } }
#store .st-art { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--ac, #ecc98c) 38%, #0b0810), #0b0810 75%); }
#store .st-glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 400 96px/1 serif; color: var(--ac, #ecc98c); opacity: .5; text-shadow: 0 0 50px var(--ac, #ecc98c); }
#store .st-art img { position: relative; z-index: 1; }
#store a { color: #ecc98c; cursor: pointer; text-decoration: underline; }
.st-shelf { margin-top: 6px; }
.st-shelf h4 { margin: 18px 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 700 15px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ac); }
.st-shelf h4 span { font: italic 15px 'Cormorant Garamond', serif; letter-spacing: 0; text-transform: none; color: #8a7d70; }
.st-shelf h4::before { content: ''; width: 22px; height: 1px; background: var(--ac); align-self: center; }
.st-items { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.st-item { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 8px 14px; padding: 14px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(30,22,36,.9), rgba(10,8,13,.95)); transition: border-color .2s, box-shadow .2s; }
.st-item:hover { border-color: var(--ac); box-shadow: 0 0 26px -10px var(--ac); }
.st-ico { grid-row: span 2; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ac) 30%, #1a1220), #0d0a10); border: 1px solid color-mix(in srgb, var(--ac) 55%, transparent); box-shadow: 0 0 20px -6px var(--ac); overflow: hidden; }
.st-ico img { width: 46px; height: 46px; object-fit: contain; }
.st-ico b { font: 700 26px 'Cinzel', serif; color: var(--ac); }
.st-it b { display: block; font: 700 16px 'Cinzel', serif; color: #f4e6d0; letter-spacing: .03em; }
.st-it p { margin: 3px 0 0; font: 14px/1.3 'Cormorant Garamond', serif; color: #b9a893; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-it em { display: inline-block; margin-top: 4px; font: 600 9px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #8fe0a4; font-style: normal; }
.st-buyrow { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.st-q { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.14); }
.st-q button { width: 30px; height: 30px; border: 0; background: transparent; color: #d8c8b0; font: 700 16px system-ui; cursor: pointer; }
.st-q button:hover { background: rgba(255,255,255,.08); color: #fff; }
.st-q span { min-width: 30px; text-align: center; font: 700 14px system-ui; color: #f4e6d0; }
.st-cbuy { display: inline-flex; align-items: center; gap: 8px; min-width: 96px; justify-content: center; padding: 8px 16px; border: 1px solid #f8dfab; color: #160c0b; font: 700 14px 'Cinzel', serif; cursor: pointer; background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); transition: transform .15s, filter .15s; }
.st-cbuy i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #b9862f); box-shadow: inset 0 0 0 1.5px #7a531344; }
.st-cbuy:hover { transform: translateY(-1px); filter: brightness(1.08); }
.st-cbuy.no { background: transparent; color: #a8957b; border-color: rgba(255,255,255,.18); }
.st-cbuy.no i { background: #5a4a30; }
#store .st-body-w { min-height: 460px; }

#storeHud { position: fixed; right: 336px; bottom: 34px; z-index: 4; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s, transform .2s;
  background: radial-gradient(circle at 35% 30%, #f6dc9c, #c99d5b 70%); border: 1px solid #f8dfab; box-shadow: 0 0 0 4px rgba(8,6,10,.7), 0 8px 22px rgba(0,0,0,.6), 0 0 22px -4px rgba(236,201,140,.6); color: #160c0b; }
#storeHud.on { opacity: 1; pointer-events: auto; }
#storeHud:hover { transform: scale(1.08); }
#storeHud span { font-size: 22px; line-height: 1; }
#storeHud em { position: absolute; bottom: -8px; padding: 1px 6px; font: 700 9px 'Cinzel', serif; font-style: normal; color: #ecc98c; background: #140c10; border: 1px solid rgba(236,201,140,.5); }
.store-sel { right: 180px !important; } .powers-sel { right: 285px !important; }
@media (max-width: 1100px) { .store-sel, .powers-sel { display: none; } }
.st-view { align-self: flex-start; margin: 2px 0 8px; padding: 0; border: 0; background: transparent; color: var(--ac, #ecc98c); font: 600 10px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--ac, #ecc98c) 50%, transparent); }
.st-view:hover { color: #fff0c5; }


/* the owner's announcements and countdowns */
#bc { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 900; display: grid; gap: 12px; justify-items: center; pointer-events: none; width: min(760px, 94vw); }
.bc-say { width: 100%; text-align: center; padding: 16px 30px 18px; background: linear-gradient(180deg, rgba(26,16,30,.96), rgba(8,5,11,.96)); border: 1px solid rgba(236,201,140,.7); box-shadow: 0 18px 60px #000c, 0 0 50px -10px rgba(236,201,140,.5); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); animation: bcIn .5s cubic-bezier(.2,.9,.2,1); }
.bc-say.all { border-color: #ff8a5c; box-shadow: 0 18px 60px #000c, 0 0 60px -8px rgba(255,138,92,.6); }
.bc-say em, .bc-count em { display: block; font: 700 10px 'Cinzel', serif; letter-spacing: .4em; text-transform: uppercase; font-style: normal; color: #ecc98c; margin-bottom: 6px; }
.bc-say.all em, .bc-count.all em { color: #ff9a70; }
.bc-say p { margin: 0; font: 600 clamp(20px, 3vw, 30px)/1.25 'Cormorant Garamond', serif; color: #fff0d0; text-shadow: 0 2px 20px #000; }
.bc-count { text-align: center; padding: 10px 34px 12px; background: linear-gradient(180deg, rgba(20,12,24,.94), rgba(6,4,9,.94)); border: 1px solid rgba(236,201,140,.55); box-shadow: 0 12px 40px #000b; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); animation: bcIn .5s cubic-bezier(.2,.9,.2,1); }
.bc-count b { display: block; font: 900 clamp(42px, 7vw, 76px)/1 'Cinzel', serif; letter-spacing: .06em; color: #f6e6c0; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(236,201,140,.4); }
.bc-count.hot b { color: #ff7a5c; animation: bcPulse 1s ease-in-out infinite; text-shadow: 0 0 40px rgba(255,90,60,.7); }
.bc-count.go b { color: #8fe0a4; text-shadow: 0 0 40px rgba(143,224,164,.7); }
@keyframes bcIn { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes bcPulse { 50% { transform: scale(1.08); } }
#admin .ad-row input, #admin .ad-row select { padding: 7px 10px; background: rgba(10,6,12,.7); border: 1px solid rgba(236,201,140,.35); color: #f4e6d0; font: 14px system-ui; min-width: 120px; }
#admin .ad-row input#adSay { flex: 1; min-width: 220px; } #admin .ad-row input#adCl { flex: 1; min-width: 160px; }
.ad-res { min-height: 20px; margin: 6px 0; font: italic 15px 'Cormorant Garamond', serif; color: #a8957b; } .ad-res.ok { color: #8fe0a4; } .ad-res.bad { color: #ff8a8a; }

/* ---------------- a witch's page (fixed layout: header, body, and the buy bar always in view) ---------------- */
#champ { display: block; z-index: 320; background: #08060c; overflow: hidden; text-align: left; }
#champ .ch-shell { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(ellipse at 14% 35%, color-mix(in srgb, var(--ac) 20%, #0a0710), #08060c 62%); }
.ch-bar { display: flex; align-items: center; gap: 18px; padding: 12px 28px; border-bottom: 1px solid rgba(236,201,140,.18); }
.ch-back { padding: 8px 16px; border: 1px solid rgba(236,201,140,.35); background: transparent; color: #ecc98c; font: 600 11px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.ch-back:hover { background: rgba(236,201,140,.12); color: #fff0c5; }
.ch-crumb { flex: 1; font: 600 11px 'Cinzel', serif; letter-spacing: .26em; text-transform: uppercase; color: #8a7d70; } .ch-crumb i { margin: 0 8px; font-style: normal; opacity: .5; } .ch-crumb b { color: #f4e6d0; font-weight: 600; }
.ch-pager { display: flex; align-items: center; gap: 4px; font: 600 11px 'Cinzel', serif; letter-spacing: .15em; color: #a8957b; }
.ch-pager button, .ch-x { width: 36px; height: 36px; border: 1px solid rgba(236,201,140,.3); background: transparent; color: #ecc98c; font: 400 22px/1 serif; cursor: pointer; } .ch-pager button:hover, .ch-x:hover { background: rgba(236,201,140,.14); }
.ch-pager span { min-width: 64px; text-align: center; } .ch-x { font-size: 15px; margin-left: 10px; }
.ch-body { display: grid; grid-template-columns: minmax(240px, 32%) 1fr; gap: clamp(20px, 3vw, 44px); padding: 22px clamp(20px, 3vw, 44px) 0; min-height: 0; }
.ch-side { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.ch-fig { position: relative; height: calc(100vh - 250px); max-height: 600px; min-height: 200px; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ac) 65%, #fff2); background: #0c0810; box-shadow: 0 0 60px -14px var(--ac); }
.ch-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.ch-fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(8,6,12,.7)); }
.ch-fig b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 140px 'Cinzel Decorative', serif; color: var(--ac); opacity: .4; }
.ch-roles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ch-roles span { padding: 5px 12px; font: 600 10px 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; color: #f4e6d0; border: 1px solid color-mix(in srgb, var(--ac) 55%, transparent); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.ch-info { overflow-y: auto; min-height: 0; padding: 0 12px 20px 0; display: grid; gap: 14px; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(236,201,140,.4) transparent; }
.ch-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ch-top em { font: 600 12px 'Cinzel', serif; letter-spacing: .3em; text-transform: uppercase; color: var(--ac); font-style: normal; }
.ch-tag { padding: 5px 12px; font: 700 10px 'Cinzel', serif; letter-spacing: .24em; text-transform: uppercase; color: #160c0b; background: var(--ac); } .ch-tag.own { background: #8fe0a4; } .ch-tag.free { background: transparent; color: #cdb89a; border: 1px solid rgba(255,255,255,.25); }
.ch-info h1 { margin: 0; font: 900 clamp(34px, 5vw, 62px)/1 'Cinzel Decorative', 'Cinzel', serif; letter-spacing: .03em; color: #f6e6c0; } .ch-info h1 span { color: var(--ac); }
.ch-quote { margin: 0; font: italic 20px/1.35 'Cormorant Garamond', serif; color: #d8c8b0; max-width: 36em; }
.ch-lore { margin: 0; font: 16px/1.5 'Cormorant Garamond', serif; color: #b9a893; max-width: 40em; } .ch-lore b { color: var(--ac); font-family: 'Cinzel', serif; }
.ch-perk { display: flex; gap: 14px; align-items: center; padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--ac) 18%, #0d0912), rgba(10,7,13,.9)); }
.ch-perk i { font-style: normal; font-size: 22px; color: var(--ac); } .ch-perk p { margin: 0; font: 600 19px/1.3 'Cormorant Garamond', serif; color: #fff0d0; }
.ch-stats { display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: center; padding: 14px 20px; border: 1px solid rgba(236,201,140,.2); background: #0d0912; }
.ch-bars { display: grid; gap: 11px; } .ch-bars > div { display: grid; grid-template-columns: 88px 1fr 64px; align-items: center; gap: 10px; }
.ch-bars span { font: 600 10px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #a8957b; }
.ch-bars i { height: 7px; background: rgba(255,255,255,.08); position: relative; } .ch-bars u { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 45%, #000), var(--ac)); }
.ch-bars b { text-align: right; font: 700 14px 'Cormorant Garamond', serif; color: #f4e6d0; }
.ch-arts { text-align: center; } .ch-arts p { margin: 0; font: 600 10px 'Cinzel', serif; letter-spacing: .18em; text-transform: uppercase; color: #a8957b; } .ch-arts p b { color: var(--ac); font-size: 13px; }
.ch-radar { width: 100%; max-width: 250px; overflow: visible; } .ch-radar text { font: 600 8px 'Cinzel', serif; fill: #cdb89a; } .ch-radar .v { fill: var(--ac); font-size: 9.5px; font-weight: 700; }
.ch-noarts h4 { margin: 0 0 4px; font: 700 14px 'Cinzel', serif; color: var(--ac); letter-spacing: .1em; } .ch-noarts p { font: italic 14px/1.35 'Cormorant Garamond', serif; letter-spacing: 0; text-transform: none; color: #b9a893; }
.ch-kit { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: flex-start; }
.ch-grp h4 { margin: 0 0 8px; font: 700 10px 'Cinzel', serif; letter-spacing: .3em; text-transform: uppercase; color: #ecc98c; }
.ch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-ab { position: relative; display: grid; justify-items: center; gap: 4px; width: 76px; padding: 4px 2px; border: 0; background: transparent; cursor: pointer; color: #cdb89a; }
.ch-ab b { font: 600 9px/1.15 'Cinzel', serif; letter-spacing: .04em; text-align: center; min-height: 21px; }
.ch-ab:hover { color: #fff; }
.ch-ab > i { position: absolute; top: 0; left: 4px; z-index: 3; min-width: 16px; padding: 0 4px; font: 700 9px 'Cinzel', serif; font-style: normal; color: #ecc98c; background: #0b0810; border: 1px solid rgba(236,201,140,.5); }
.ch-ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 30%, #1a1220), #0a0710); border: 2px solid color-mix(in srgb, var(--c) 70%, #fff2); border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 14px -4px var(--c); }
.ch-ic svg { position: absolute; width: 28px; height: 28px; opacity: .85; } .ch-ic img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.ch-ab:hover .ch-ic, .ch-ab.on .ch-ic { border-color: var(--c); box-shadow: 0 0 18px -2px var(--c); }
.ch-ab.on::after { content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 3px; background: var(--c); }
.ch-ab.passive .ch-ic { border-radius: 50%; }
.ch-row.small .ch-ab { width: 68px; } .ch-row.small .ch-ic { width: 46px; height: 46px; } .ch-row.small .ch-ic svg { width: 22px; height: 22px; }
.ch-detail { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 20px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--c) 12%, #0d0912), #0a0710); }
.ch-detail .ch-ic { width: 60px; height: 60px; } .ch-detail h3 { margin: 0 0 6px; font: 700 21px 'Cinzel', serif; color: #f6e6c0; }
.ch-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; } .ch-chips span { padding: 2px 9px; font: 600 9px 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.ch-detail p { margin: 0 0 4px; font: 16px/1.4 'Cormorant Garamond', serif; color: #d8c8b0; } .ch-detail em { font: italic 13px 'Cormorant Garamond', serif; color: #8a7d70; }
.ch-buybar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 14px clamp(20px, 3vw, 44px); border-top: 1px solid rgba(236,201,140,.35); background: #0b0810; box-shadow: 0 -14px 40px #000a; }
.ch-price b { display: block; font: 900 34px/1 'Cinzel', serif; color: #f6e6c0; } .ch-price span { font: italic 15px 'Cormorant Garamond', serif; color: #a8957b; }
.ch-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ch-bundle { padding: 6px 0; border: 0; border-bottom: 1px solid rgba(236,201,140,.5); background: transparent; color: #ecc98c; font: 600 11px 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .ch-bundle:hover { color: #fff0c5; }
.ch-buy { padding: 16px 40px; border: 1px solid #f8dfab; color: #160c0b; font: 700 14px 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); box-shadow: 0 8px 26px #000a; }
.ch-buy:hover { filter: brightness(1.1); } .ch-buy.own { background: linear-gradient(105deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #fff)); }
#chtip { position: fixed; z-index: 400; width: 320px; padding: 14px 16px; pointer-events: none; opacity: 0; background: #120c19; border: 1px solid color-mix(in srgb, var(--c) 70%, #fff2); box-shadow: 0 12px 40px #000c; }
#chtip.on { opacity: 1; }
#chtip .th { display: flex; gap: 12px; align-items: center; } #chtip .th .ch-ic { width: 44px; height: 44px; flex: none; } #chtip .th .ch-ic svg { width: 21px; height: 21px; }
#chtip b { display: block; font: 700 16px 'Cinzel', serif; color: #f6e6c0; } #chtip .th span { font: 600 9px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
#chtip .tc { display: flex; gap: 10px; margin: 8px 0 4px; } #chtip .tc span { font: 700 11px 'Cinzel', serif; color: #ecc98c; }
#chtip p { margin: 0 0 6px; font: 15px/1.4 'Cormorant Garamond', serif; color: #d8c8b0; } #chtip em { font: italic 13px 'Cormorant Garamond', serif; color: #8a7d70; }
@media (max-width: 900px) { .ch-body { grid-template-columns: 1fr; overflow-y: auto; } .ch-side { display: none; } .ch-info { overflow: visible; } .ch-stats { grid-template-columns: 1fr; } .ch-crumb { display: none; } .ch-buy { padding: 14px 26px; } }
@media (max-height: 700px) { .ch-fig { height: calc(100vh - 210px); } }

/* ---------------- the store's witches: four cards, price and button on each ---------------- */
.wc-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .wc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wc-grid { grid-template-columns: 1fr; } }
.wc { display: flex; flex-direction: column; background: #0f0a14; border: 1px solid rgba(255,255,255,.12); transition: border-color .15s; }
.wc:hover, .wc.focus { border-color: var(--ac); }
.wc-art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0b0810; cursor: pointer; }
.wc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.wc-art b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 80px serif; color: var(--ac); opacity: .45; }
.wc-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,10,20,.96)); }
.wc-tag { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 10px; font: 700 9px 'Cinzel', serif; letter-spacing: .24em; text-transform: uppercase; color: #160c0b; background: var(--ac); }
.wc.own .wc-tag { background: #8fe0a4; }
.wc-name { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; } .wc-name h3 { margin: 0; font: 700 21px/1.1 'Cinzel', serif; color: #f6e6c0; } .wc-name em { font: 600 10px 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ac); font-style: normal; }
.wc-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; flex: 1; }
.wc-perk { margin: 0; font: italic 16px/1.35 'Cormorant Garamond', serif; color: #d8c8b0; min-height: 4.1em; }
.wc-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .wc-body li { position: relative; padding-left: 14px; font: 12px system-ui, sans-serif; color: #b9a893; } .wc-body li::before { content: '✦'; position: absolute; left: 0; top: 2px; font-size: 9px; color: var(--ac); }
.wc-act { margin-top: auto; display: grid; gap: 8px; }
.wc-buy { padding: 13px; border: 1px solid #f8dfab; color: #160c0b; font: 700 13px 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); } .wc-buy:hover { filter: brightness(1.1); } .wc-buy:disabled { opacity: .45; cursor: not-allowed; }
.wc-buy.own { background: transparent; color: #b8f0c6; border-color: rgba(143,224,164,.6); }
.wc-more { padding: 6px; border: 0; background: transparent; color: var(--ac); font: 600 10px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; } .wc-more:hover { color: #fff0c5; }
#store.screen, #champ.screen { transition: opacity .12s ease-out; }          /* (the generic screens fade for .9s: far too slow for a shop) */
.ch-row.small .ch-ab { width: 84px; } .ch-ab b { letter-spacing: 0; overflow-wrap: anywhere; }

#fsPrompt { position: fixed; left: 50%; bottom: 26px; z-index: 950; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; width: min(720px, 94vw); padding: 14px 20px; background: linear-gradient(180deg, #1a1020, #09060d); border: 1px solid rgba(236,201,140,.65); box-shadow: 0 18px 60px #000c, 0 0 40px -10px rgba(236,201,140,.5); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#fsPrompt.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#fsPrompt .fs-t { flex: 1; min-width: 240px; } #fsPrompt b { display: block; font: 700 13px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; color: #ecc98c; margin-bottom: 3px; }
#fsPrompt span { font: italic 16px/1.35 'Cormorant Garamond', serif; color: #d8c8b0; }
#fsPrompt button { padding: 11px 20px; border: 1px solid #f8dfab; color: #160c0b; font: 700 11px 'Cinzel', serif; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; background: linear-gradient(105deg, #d8b575, #f0d9a6 55%, #c99d5b); }
#fsPrompt button.fs-no { background: transparent; color: #a8957b; border-color: rgba(255,255,255,.2); } #fsPrompt button:hover { filter: brightness(1.12); }

#ppPanel { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(4,3,6,.86); }
#ppPanel .pp-box { width: min(680px, 94vw); padding: 28px 40px 24px; max-height: 92vh; overflow-y: auto; padding: 24px 26px 20px; text-align: center; background: linear-gradient(180deg, #1a1020, #09060d); border: 1px solid rgba(236,201,140,.6); box-shadow: 0 22px 70px #000d; }
#ppPanel h3 { margin: 0; font: 700 22px 'Cinzel', serif; color: #f6e6c0; } #ppPanel .pp-price { display: block; margin: 6px 0 4px; font: 900 34px 'Cinzel', serif; color: #ecc98c; }
#ppPanel p { margin: 4px 0 14px; font: italic 15px 'Cormorant Garamond', serif; color: #b9a893; } #ppPanel .pp-msg { min-height: 20px; color: #ff9a8a; margin: 10px 0 0; }
#ppPanel .pp-x { margin-top: 10px; padding: 8px 18px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #a8957b; font: 600 10px 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
#ppBtns { min-height: 150px; width: 100%; max-width: 560px; margin: 0 auto; }

.sp-foot .legal-links { display: block; margin-top: 6px; font: 600 9px 'Cinzel', serif; letter-spacing: .18em; text-transform: uppercase; opacity: .7; pointer-events: auto; }
.sp-foot .legal-links a, .auth-note a, .st-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .sp-foot .legal-links a:hover, .auth-note a:hover, .st-foot a:hover { color: #ecc98c; }

#pdPanel { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(4,3,6,.9); }
#pdPanel .pd-box { position: relative; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; width: min(1000px, 100%); background: #0d0912; border: 1px solid rgba(236,201,140,.55); box-shadow: 0 24px 80px #000d; }
.pd-x { position: absolute; top: 10px; right: 12px; z-index: 3; width: 34px; height: 34px; border: 1px solid rgba(236,201,140,.35); background: rgba(10,7,12,.8); color: #ecc98c; cursor: pointer; }
.pd-sum { padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac, #ecc98c) 14%, #150d1c), #0d0912); border-right: 1px solid rgba(255,255,255,.08); }
.pd-art { aspect-ratio: 4 / 5; max-height: 250px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); } .pd-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.pd-glyph { display: grid; place-items: center; height: 120px; font-size: 64px; color: #ecc98c; } .pd-glyph i { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b04a 55%, #8a5f1c); }
.pd-sum em { font: 600 10px 'Cinzel', serif; letter-spacing: .26em; text-transform: uppercase; font-style: normal; color: var(--ac, #ecc98c); } .pd-sum h3 { margin: 0; font: 700 24px/1.15 'Cinzel', serif; color: #f6e6c0; }
.pd-sum ul { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 6px; } .pd-sum li { position: relative; padding-left: 16px; font: italic 16px/1.35 'Cormorant Garamond', serif; color: #d8c8b0; } .pd-sum li::before { content: '✦'; position: absolute; left: 0; top: 2px; font-size: 10px; color: var(--ac, #ecc98c); }
.pd-price { margin-top: auto; font: 900 38px 'Cinzel', serif; color: #f6e6c0; } .pd-sum small { font: italic 14px 'Cormorant Garamond', serif; color: #8a7d70; }
.pd-pay { padding: 22px 22px 14px; min-width: 0; background: #14101a; } .pd-pay .pdFrame { min-height: 520px; }
@media (max-width: 800px) { #pdPanel .pd-box { grid-template-columns: 1fr; } .pd-art { display: none; } .pd-sum { padding-bottom: 14px; } }