/* =====================================================================================================
   SHADOWS · designsystem
   Mørk nat, koldt spøgelsesmint (ånden), rav (lys, guld) og blodrødt (fare). Glaspaneler med en tynd lysende kant.
   Bevægelse: korte, bløde overgange (180–320 ms); intet blinker, intet dækker vigtig information.
   ===================================================================================================== */
:root{
  --sh-bg:#06070d; --sh-glass:rgba(13,13,24,.84); --sh-glass2:rgba(20,19,34,.92); --sh-line:rgba(159,243,223,.18); --sh-line2:rgba(159,243,223,.42);
  --sh-mint:#9ff3df; --sh-mint2:#5ad0c0; --sh-amber:#f2b04a; --sh-red:#ff5a4a; --sh-violet:#a48cff;
  --sh-ink:#e9ecf5; --sh-muted:#8f96ab; --sh-dim:#5b6178;
  --r-norm:#d9dccf; --r-mag:#7c95ff; --r-rare:#f4e35a; --r-uniq:#e0a85a;
  --sh-title:'Cinzel Decorative','Cinzel',Georgia,serif; --sh-head:'Cinzel',Georgia,serif; --sh-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
#shRoot{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--sh-body);color:var(--sh-ink)}
#shRoot>*{pointer-events:auto}
#shRoot [hidden]{display:none!important}
.sh-fx{position:fixed;inset:0;z-index:40;pointer-events:none}

/* ---------- knapper ---------- */
.sh-btn{font:600 15px/1 var(--sh-head);letter-spacing:.08em;text-transform:uppercase;color:var(--sh-ink);cursor:pointer;
  background:linear-gradient(180deg,rgba(40,40,64,.9),rgba(18,18,32,.95));border:1px solid var(--sh-line2);border-radius:12px;padding:14px 26px;
  position:relative;overflow:hidden;transition:transform .16s var(--ease),border-color .16s,box-shadow .2s,color .16s;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.sh-btn:hover,.sh-btn:focus-visible{outline:none;border-color:var(--sh-mint);color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(159,243,223,.3),0 0 28px rgba(159,243,223,.25)}
.sh-btn:active{transform:translateY(1px) scale(.99)}
.sh-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.13) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.sh-btn:hover::after{transform:translateX(120%)}
.sh-btn.pri{background:linear-gradient(180deg,#a8f7e4,#5ad0c0);color:#06110f;border-color:#c8fff2;text-shadow:none}
.sh-btn.pri:hover{color:#000;box-shadow:0 10px 34px rgba(90,208,192,.45),0 0 0 1px #fff}
.sh-btn.gold{background:linear-gradient(180deg,#ffd789,#d8962e);color:#1d1204;border-color:#ffe7b0}
.sh-btn.danger{border-color:rgba(255,90,74,.55)} .sh-btn.danger:hover{border-color:var(--sh-red);box-shadow:0 0 26px rgba(255,90,74,.3)}
.sh-btn.small{font-size:12px;padding:9px 14px;border-radius:9px}
.sh-btn[disabled]{opacity:.38;pointer-events:none}
.sh-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--sh-line);background:rgba(0,0,0,.35);color:var(--sh-muted);font-size:18px;cursor:pointer;transition:.16s}
.sh-x:hover{color:#fff;border-color:var(--sh-mint);transform:rotate(90deg)}
kbd{font:700 11px var(--sh-body);color:#06110f;background:var(--sh-mint);border-radius:5px;padding:2px 6px;box-shadow:0 2px 0 #2a8a7c}

/* ---------- modal og paneler ---------- */
.sh-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,18,40,.55),rgba(3,3,8,.86) 75%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:shFade .22s var(--ease)}
.sh-card{position:relative;background:var(--sh-glass);border:1px solid var(--sh-line);border-radius:22px;padding:28px 30px;max-width:min(1180px,96vw);max-height:92vh;overflow:auto;box-sizing:border-box;
  box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.6);animation:shRise .32s var(--ease);
  scrollbar-width:thin;scrollbar-color:rgba(159,243,223,.25) transparent}
.sh-card::before{content:'';position:absolute;inset:-1px;border-radius:22px;padding:1px;pointer-events:none;
  background:linear-gradient(130deg,rgba(159,243,223,.55),transparent 28%,transparent 72%,rgba(164,140,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.sh-h1{font:700 clamp(26px,3.4vw,38px)/1.05 var(--sh-head);letter-spacing:.06em;margin:0 0 4px;color:#fff;text-shadow:0 0 24px rgba(159,243,223,.25)}
.sh-sub{color:var(--sh-muted);font-size:14px;margin:0 0 20px;letter-spacing:.02em}
.sh-h2{font:700 13px var(--sh-head);letter-spacing:.2em;text-transform:uppercase;color:var(--sh-mint);margin:0 0 12px;opacity:.9}
.sh-row{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.sh-col{flex:1 1 280px;min-width:0}
.sh-box{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 18px}
.sh-stagger>*{animation:shRise .4s var(--ease) both}
.sh-stagger>*:nth-child(2){animation-delay:.05s}.sh-stagger>*:nth-child(3){animation-delay:.1s}.sh-stagger>*:nth-child(4){animation-delay:.15s}.sh-stagger>*:nth-child(5){animation-delay:.2s}
.sh-gold{font:700 15px var(--sh-head);color:var(--sh-amber);display:inline-flex;align-items:center;gap:7px;letter-spacing:.04em}
.sh-gold i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c0,#f2b04a 45%,#9a6a1e);box-shadow:0 0 10px rgba(242,176,74,.6);display:inline-block}

/* ---------- startskærmen ---------- */
#shTitle{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(3,3,9,.62),rgba(3,3,9,.15) 70%,rgba(3,3,9,.35))}
#shTitle .logo{font:700 clamp(54px,11vw,150px)/1.08 var(--sh-title);letter-spacing:.14em;margin:0;padding-left:.14em;color:transparent;
  background:linear-gradient(180deg,#f4fffb 0%,#9ff3df 45%,#3a6a78 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(159,243,223,.35)) drop-shadow(0 6px 0 rgba(0,0,0,.6));animation:shLogo 6s ease-in-out infinite}
#shTitle .tag{font:italic 18px Georgia,serif;color:rgba(233,236,245,.72);letter-spacing:.06em;margin:10px 0 26px;position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.9)}
#shTitle .menu{display:flex;flex-direction:column;gap:12px;width:min(320px,80vw)}
#shTitle .ghost{width:clamp(120px,15vw,210px);animation:shFloat 4.4s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(159,243,223,.45))}
#shTitle .foot{position:fixed;bottom:16px;left:0;right:0;color:var(--sh-dim);font-size:12px;letter-spacing:.1em}
/* lave skærme (fx telefon på langs): titel og spøgelse skaleres efter højden, så alle knapper kan ses */
@media (max-height:640px){#shTitle .logo{font-size:min(11vw,16vh)}#shTitle .ghost{width:min(15vw,17vh)}#shTitle .tag{margin:2px 0 10px}#shTitle .menu{gap:7px}#shTitle .menu .sh-btn{padding-top:11px;padding-bottom:11px}}

/* ---------- hubbens bjælke ---------- */
#shHubBar{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;pointer-events:none;gap:12px}
#shHubBar .pill{pointer-events:auto;display:flex;align-items:center;gap:14px;background:var(--sh-glass);border:1px solid var(--sh-line);border-radius:999px;padding:9px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);font:600 13px var(--sh-head);letter-spacing:.06em;color:var(--sh-ink);animation:shDrop .5s var(--ease)}
#shHubBar .pill b{color:var(--sh-mint);font-weight:700}
#shHubBar .tools{display:flex;gap:8px}
#shHubBar .goal{position:absolute;left:50%;top:16px;transform:translateX(-50%);gap:10px;font-size:13px;letter-spacing:.05em;white-space:nowrap}
#shHubBar .goal .dot{width:8px;height:8px;border-radius:50%;background:var(--sh-mint);box-shadow:0 0 12px var(--sh-mint);animation:shPulse 1.6s ease-in-out infinite}
#shHubBar .goal .arr{color:var(--sh-mint);font:700 15px var(--sh-body);animation:shNudge 1.2s ease-in-out infinite}
@keyframes shNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media (max-width:900px){#shHubBar .goal{top:70px}}
.sh-ico{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--sh-line);background:var(--sh-glass);color:var(--sh-ink);cursor:pointer;
  display:grid;place-items:center;font:600 13px var(--sh-head);transition:.16s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sh-ico:hover{border-color:var(--sh-mint);color:#fff;transform:translateY(-2px);box-shadow:0 0 22px rgba(159,243,223,.25)}
#shHint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);color:rgba(233,236,245,.5);font-size:12.5px;letter-spacing:.04em;white-space:nowrap;pointer-events:none}

/* ---------- helte og statark ---------- */
.sh-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sh-hero>div{min-width:0;flex:1 1 200px}
.sh-hero canvas{width:150px;height:170px;flex:none;border-radius:16px;background:radial-gradient(ellipse at 50% 70%,rgba(159,243,223,.14),rgba(0,0,0,0) 65%)}
.sh-hero .nm{font:700 clamp(19px,2.3vw,26px) var(--sh-head);letter-spacing:.05em;overflow-wrap:anywhere}
.sh-hero .ty{font:700 11px var(--sh-body);letter-spacing:.2em;text-transform:uppercase;color:var(--sh-mint);margin:4px 0 8px}
.sh-hero p{margin:0;color:var(--sh-muted);font-size:13.5px;line-height:1.5;max-width:380px}
.sh-stats{display:grid;grid-template-columns:1fr auto;gap:7px 14px;font-size:13.5px}
.sh-stats span:nth-child(odd){color:var(--sh-muted)} .sh-stats span:nth-child(even){font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.sh-stats .up{color:var(--sh-mint)!important} .sh-stats .dn{color:var(--sh-red)!important}
.sh-abil{display:flex;gap:12px;margin-top:10px}
.sh-abil>div{flex:1;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.2)}
.sh-abil b{font:700 12px var(--sh-head);letter-spacing:.1em;color:var(--sh-amber)} .sh-abil p{margin:4px 0 0;font-size:12.5px;color:var(--sh-muted);line-height:1.45}

/* ---------- gear: pladser, kisten, genstande ---------- */
.sh-doll{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.sh-slot{position:relative;aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.28);display:grid;place-items:center;cursor:pointer;transition:transform .14s var(--ease),border-color .14s,box-shadow .2s}
.sh-slot:hover{transform:translateY(-2px);border-color:var(--rc,var(--sh-line2));box-shadow:0 0 22px color-mix(in srgb,var(--rc,#9ff3df) 30%,transparent)}
.sh-slot img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.sh-slot .sl{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:600 10px var(--sh-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sh-dim)}
.sh-slot .sv{position:absolute;top:4px;right:4px;font:700 12px/1 var(--sh-body);color:#1a1204;background:var(--sh-amber);padding:3px 6px;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none}   /* værdien af den stat, kisten filtrerer på */
.sh-slot.has{border-color:color-mix(in srgb,var(--rc) 55%,transparent);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--rc) 18%,transparent),rgba(0,0,0,.3) 70%)}
.sh-slot.r4{animation:shUniq 2.8s ease-in-out infinite}
.sh-slot .nw{position:absolute;top:6px;right:6px;font:800 9px var(--sh-body);letter-spacing:.1em;background:var(--sh-amber);color:#1b1102;border-radius:5px;padding:2px 5px;animation:shPulse 1.6s ease-in-out infinite}
.sh-slot.lock{opacity:.4;filter:grayscale(.8)} .sh-slot.lock::after{content:'🔒';position:absolute;top:5px;left:7px;font-size:11px}
.sh-slot.sel{outline:2px solid var(--sh-mint);outline-offset:2px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:9px;max-height:46vh;overflow:auto;padding:3px;scrollbar-width:thin}
.sh-filter{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.sh-filter button{font:600 11px var(--sh-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sh-muted);background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 12px;cursor:pointer;transition:.15s}
.sh-filter button.on,.sh-filter button:hover{color:#06110f;background:var(--sh-mint);border-color:var(--sh-mint)}
.sh-sfilter{display:flex;gap:5px;margin:-4px 0 12px;flex-wrap:wrap;align-items:center}
.sh-sfilter>span{font:600 10px var(--sh-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sh-dim);margin-right:4px}
.sh-sfilter button{font:500 11.5px var(--sh-body);color:var(--sh-muted);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:4px 8px;cursor:pointer;transition:.15s}
.sh-sfilter button em{font-style:normal;margin-left:5px;color:var(--sh-dim);font-size:10.5px}
.sh-sfilter button:hover{color:#fff;border-color:var(--sh-line2)}
.sh-sfilter button.on{color:#1a1204;background:var(--sh-amber);border-color:var(--sh-amber)} .sh-sfilter button.on em{color:#5a3a08}
.sh-sfilter button.tom{opacity:.4}
.sh-tip{position:fixed;z-index:60;pointer-events:none;width:300px;background:var(--sh-glass2);border:1px solid var(--rc,var(--sh-line2));border-radius:14px;padding:14px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 30px color-mix(in srgb,var(--rc,#9ff3df) 18%,transparent);font-size:13px;animation:shFade .12s}
.sh-tip h4{margin:0;font:700 16px var(--sh-head);color:var(--rc);letter-spacing:.03em}
.sh-tip .k{font:600 10.5px var(--sh-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sh-dim);margin:3px 0 10px}
.sh-tip .a{margin:3px 0;color:var(--sh-ink)} .sh-tip .a.imp{color:#fff;font-weight:700}
.sh-tip .p{margin:6px 0 0;color:var(--sh-amber)} .sh-tip .p small{display:block;color:var(--sh-muted);font-size:12px;margin-top:2px}
.sh-tip .cmp{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.55}
.sh-tip .up{color:var(--sh-mint)} .sh-tip .dn{color:var(--sh-red)} .sh-tip .lk{color:var(--sh-red);margin-top:8px}
.sh-tip .hint{margin-top:10px;color:var(--sh-dim);font-size:11.5px}
/* infoboksen: navnet som poleret guld, hovedstattens tal som blankt platin med regnbueskær og glimt */
.sh-tip h4.guld{font:800 23px/1.15 var(--sh-head);letter-spacing:.02em;color:#f2c64e;
  background:linear-gradient(105deg,transparent 38%,rgba(255,253,235,.95) 48%,rgba(255,253,235,.95) 52%,transparent 62%),
    linear-gradient(180deg,#fff4c4 0%,#f6d266 28%,#c8901f 52%,#f8dc80 70%,#9a6614 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(40,24,0,.85)) drop-shadow(0 0 10px rgba(255,196,80,.28));animation:shGuld 3.4s ease-in-out infinite}
@keyframes shGuld{0%{background-position:160% 0,0 0}55%,100%{background-position:-60% 0,0 0}}
.sh-tip .a.hoved{display:flex;align-items:baseline;gap:7px;margin:6px 0 8px;font-size:13px;color:#e9ecf5}
.sh-tip .platw{position:relative;display:inline-block}
.sh-tip .platin{font:800 28px/1 var(--sh-head);color:#e8ebf0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.95) 52%,transparent 64%),
    linear-gradient(90deg,rgba(255,110,170,.5),rgba(255,214,110,.5),rgba(110,255,190,.5),rgba(110,190,255,.5),rgba(190,130,255,.5),rgba(255,110,170,.5)),
    linear-gradient(180deg,#ffffff 0%,#dfe3ea 30%,#8e95a1 52%,#f1f3f7 70%,#737a86 100%);
  background-size:260% 100%,200% 100%,100% 100%;background-repeat:no-repeat,repeat-x,no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(10,12,20,.9)) drop-shadow(0 0 9px rgba(200,220,255,.3));animation:shPlatin 3.4s ease-in-out infinite .5s,shRegn 4s linear infinite}
@keyframes shPlatin{0%{background-position:160% 0,0 0,0 0}55%,100%{background-position:-60% 0,200% 0,0 0}}
@keyframes shRegn{0%{filter:drop-shadow(0 1px 0 rgba(10,12,20,.9)) drop-shadow(0 0 9px rgba(255,170,220,.35))}33%{filter:drop-shadow(0 1px 0 rgba(10,12,20,.9)) drop-shadow(0 0 9px rgba(170,255,220,.35))}
  66%{filter:drop-shadow(0 1px 0 rgba(10,12,20,.9)) drop-shadow(0 0 9px rgba(170,200,255,.35))}100%{filter:drop-shadow(0 1px 0 rgba(10,12,20,.9)) drop-shadow(0 0 9px rgba(255,170,220,.35))}}
.sh-tip .platw i{position:absolute;width:9px;height:9px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 18%,transparent 22%),linear-gradient(0deg,transparent 42%,#fff 50%,transparent 58%),linear-gradient(90deg,transparent 42%,#fff 50%,transparent 58%);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 5px rgba(180,200,255,.8));animation:shGlimt 2.2s ease-in-out infinite}
.sh-tip .platw i:nth-of-type(1){left:-4px;top:-3px;animation-delay:.1s}
.sh-tip .platw i:nth-of-type(2){left:55%;top:-6px;animation-delay:.7s;width:7px;height:7px}
.sh-tip .platw i:nth-of-type(3){right:-6px;top:45%;animation-delay:1.25s}
.sh-tip .platw i:nth-of-type(4){left:22%;bottom:-4px;animation-delay:1.7s;width:6px;height:6px}
@keyframes shGlimt{0%,100%{opacity:0;transform:scale(.2) rotate(0)}12%{opacity:1;transform:scale(1.15) rotate(25deg)}26%{opacity:0;transform:scale(.3) rotate(45deg)}}
.sh-tip .ulm{font:800 23px/1 var(--sh-head);color:#c4561a;text-shadow:0 1px 0 rgba(20,6,0,.9),0 0 6px rgba(255,90,20,.35);animation:shUlm 2.6s ease-in-out infinite}   /* dårligere end det, man har på */
@keyframes shUlm{0%,100%{color:#b84c16;text-shadow:0 1px 0 rgba(20,6,0,.9),0 0 4px rgba(255,80,20,.22)}38%{color:#cf5d1e;text-shadow:0 1px 0 rgba(20,6,0,.9),0 0 9px rgba(255,100,30,.5)}
  52%{color:#c2541a;text-shadow:0 1px 0 rgba(20,6,0,.9),0 0 6px rgba(255,90,20,.34)}70%{color:#d26222;text-shadow:0 1px 0 rgba(20,6,0,.9),0 0 11px rgba(255,110,40,.55)}}
@media (prefers-reduced-motion:reduce){.sh-tip h4.guld,.sh-tip .platin,.sh-tip .platw i,.sh-tip .ulm{animation:none}}

/* ---------- kisten: sælg ---------- */
.sh-selling{border-color:rgba(242,176,74,.35);background:linear-gradient(180deg,rgba(242,176,74,.06),rgba(255,255,255,.02))}
.sh-selling .sh-grid .sh-slot .sl{color:var(--sh-amber);font-weight:700}
.sh-selling .sh-grid .sh-slot.has:hover{border-color:var(--sh-amber);box-shadow:0 0 22px rgba(242,176,74,.4)}
.sh-sellbar{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px dashed rgba(242,176,74,.3);font-size:12.5px;color:var(--sh-muted);animation:shRise .25s var(--ease)}
.sh-sellall{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sh-sellall button{font:600 11.5px var(--sh-body);color:var(--rc);background:rgba(0,0,0,.3);border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);border-radius:999px;padding:6px 11px;cursor:pointer;transition:.15s}
.sh-sellall button em{font-style:normal;color:var(--sh-amber);margin-left:7px;font-weight:700}
.sh-sellall button:hover{background:color-mix(in srgb,var(--rc) 16%,transparent)} .sh-sellall button.ask{border-color:var(--sh-amber);color:#fff;background:rgba(242,176,74,.18)}
.sh-sellkey{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11px;letter-spacing:.04em}
.sh-coinfx{position:fixed;z-index:70;pointer-events:none;transform:translate(-50%,-50%);font:700 18px var(--sh-head);color:var(--sh-amber);text-shadow:0 0 12px rgba(242,176,74,.8),0 2px 0 #000;animation:shCoin .9s var(--ease) forwards}
@keyframes shCoin{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}

/* ---------- Udstyr i runden: figuren med pladserne ---------- */
.sh-pd{position:relative;width:100%;max-width:360px;aspect-ratio:340/440;margin:0 auto}
.sh-pd .fig{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sh-pd .fig .body{animation:shBreath 5s ease-in-out infinite;transform-origin:50% 90%}
.sh-pd .fig .eyes{animation:shPulse 3.2s ease-in-out infinite}
.pd-at{position:absolute;width:23%;transform:translate(-50%,-50%);z-index:1;transition:transform .18s var(--ease)}
.pd-at.pd-chest{width:27%}
.pd-at .sh-slot{background:rgba(6,8,16,.82);border-radius:12px;border-width:1.5px;box-shadow:0 8px 22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03)}
.pd-at .sh-slot:not(.has){border-style:dashed;border-color:rgba(159,243,223,.22)}
.pd-at .sh-slot:not(.has)::before{content:'';position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,rgba(159,243,223,.08),transparent 70%)}
.pd-at .sh-slot .sl{bottom:-19px;color:var(--sh-muted);font-size:9.5px}
.pd-at.tgt{transform:translate(-50%,-50%) scale(1.08)}
.pd-at.tgt .sh-slot,.pd-at.over .sh-slot{border-color:var(--sh-mint);border-style:solid;box-shadow:0 0 0 2px rgba(159,243,223,.35),0 0 28px rgba(159,243,223,.45)}
.pd-at.flash .sh-slot{animation:shEquip .55s var(--ease)}
.sh-gear.dragging .sh-pdlist .sh-slot{opacity:.75}
.sh-pdnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sh-pdnums>div{border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:9px 10px}
.sh-pdnums b{display:block;font:700 18px var(--sh-head);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-pdnums b em{font:700 11px var(--sh-body);font-style:normal;margin-left:6px;animation:shDelta 2.4s var(--ease) both}
.sh-pdnums em.up{color:var(--sh-mint)} .sh-pdnums em.dn{color:var(--sh-red)}
.sh-pdnums span{font:600 10px var(--sh-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sh-dim)}
.sh-pdlist{max-height:24vh;grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
.sh-pdlist .sh-slot .sl{font-size:8.5px;letter-spacing:.06em;bottom:3px;color:var(--sh-muted)}
.sh-empty{grid-column:1/-1;color:var(--sh-dim);padding:16px 0;text-align:center;font-size:13px}
.sh-pdfoot{margin-top:12px;color:var(--sh-dim);font-size:12px}
@keyframes shBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.008)}}
@keyframes shEquip{0%{transform:scale(.7);box-shadow:0 0 0 0 rgba(159,243,223,.8)}60%{transform:scale(1.08);box-shadow:0 0 0 14px rgba(159,243,223,0)}100%{transform:none}}
@keyframes shDelta{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
@media (max-width:640px){.sh-pd{max-width:290px}.sh-pdnums b{font-size:15px}.pd-at .sh-slot .sl{font-size:8px;bottom:-16px}}

/* ---------- butikken ---------- */
.sh-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.sh-pot{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));padding:12px 14px 14px;text-align:center;
  transition:transform .18s var(--ease),border-color .18s,box-shadow .2s;overflow:hidden}
.sh-pot:hover{transform:translateY(-4px);border-color:var(--pc);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 30px color-mix(in srgb,var(--pc) 25%,transparent)}
.sh-pot canvas{width:110px;height:120px;display:block;margin:0 auto}
.sh-pot b{display:block;font:700 15px var(--sh-head);letter-spacing:.04em;margin-top:2px}
.sh-pot p{margin:6px 0 12px;font-size:12.5px;color:var(--sh-muted);min-height:34px;line-height:1.4}
.sh-pot .sh-btn{width:100%}
.sh-bag3{display:flex;gap:12px}
.sh-bag3>div{flex:1;aspect-ratio:1;max-width:96px;border-radius:16px;border:1px dashed rgba(159,243,223,.25);display:grid;place-items:center;position:relative;cursor:pointer;transition:.16s;background:rgba(0,0,0,.2)}
.sh-bag3>div.f{border-style:solid;border-color:var(--pc);background:radial-gradient(circle,color-mix(in srgb,var(--pc) 22%,transparent),rgba(0,0,0,.2) 70%)}
.sh-bag3>div.f:hover::after{content:'Fortryd';position:absolute;bottom:-20px;font-size:11px;color:var(--sh-muted)}
.sh-bag3 canvas{width:70%;height:76%}

/* ---------- indgangen ---------- */
.sh-dg{border-radius:18px;padding:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--dc) 18%,transparent),rgba(0,0,0,.25) 60%);border:1px solid color-mix(in srgb,var(--dc) 40%,transparent)}
.sh-dg h3{margin:0;font:700 30px var(--sh-head);color:var(--dc);letter-spacing:.06em}
.sh-dg .s{color:var(--sh-muted);font-style:italic;margin:4px 0 16px}
.sh-steps{display:flex;gap:10px;flex-wrap:wrap}
.sh-steps>div{flex:1 1 140px;border-radius:12px;background:rgba(0,0,0,.28);padding:10px 12px;font-size:12.5px;color:var(--sh-muted)}
.sh-steps b{display:block;font:700 13px var(--sh-head);color:var(--sh-ink);letter-spacing:.04em;margin-bottom:3px}

/* ---------- opsummering efter runden ---------- */
#shSum{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(ellipse at 50% 40%,rgba(18,30,40,.75),rgba(2,2,6,.96) 70%);animation:shFade .5s}
#shSum .big{font:700 clamp(46px,8vw,96px)/1 var(--sh-title);letter-spacing:.12em;margin:0;text-align:center}
#shSum .big.win{color:var(--sh-mint);text-shadow:0 0 40px rgba(159,243,223,.5)} #shSum .big.lose{color:#ff7a6a;text-shadow:0 0 40px rgba(255,90,74,.45)}
.sh-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:24px 0}
.sh-nums>div{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:14px;text-align:center}
.sh-nums b{display:block;font:700 28px var(--sh-head);color:#fff} .sh-nums span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sh-dim)}
.sh-loot{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 22px}
.sh-loot .sh-slot{width:64px;animation:shPop .45s var(--ease) both}
.sh-newhero{display:flex;gap:20px;align-items:center;justify-content:center;margin:8px 0 22px;padding:16px;border-radius:18px;border:1px solid var(--sh-line2);background:radial-gradient(ellipse at 30% 50%,rgba(159,243,223,.14),rgba(0,0,0,0) 70%);animation:shRise .6s .6s both var(--ease)}
.sh-newhero canvas{width:130px;height:150px}

/* ---------- små ting ---------- */
.sh-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.sh-toggle small{display:block;color:var(--sh-dim);font-size:12px;margin-top:3px}
.sh-switch{width:48px;height:28px;border-radius:999px;background:rgba(255,255,255,.1);position:relative;cursor:pointer;transition:.2s;flex:none;border:1px solid rgba(255,255,255,.1)}
.sh-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfd3df;transition:.22s var(--ease)}
.sh-switch.on{background:var(--sh-mint2);border-color:var(--sh-mint)} .sh-switch.on::after{left:23px;background:#fff}
.sh-keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13.5px;color:var(--sh-muted)} .sh-keys b{color:var(--sh-ink);font-weight:700}

@keyframes shFade{from{opacity:0}to{opacity:1}}
@keyframes shRise{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes shDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes shPop{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes shFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes shLogo{0%,100%{filter:drop-shadow(0 0 22px rgba(159,243,223,.32)) drop-shadow(0 6px 0 rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 40px rgba(159,243,223,.55)) drop-shadow(0 6px 0 rgba(0,0,0,.6))}}
@keyframes shPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes shUniq{0%,100%{box-shadow:0 0 14px rgba(224,168,90,.25)}50%{box-shadow:0 0 30px rgba(224,168,90,.55)}}
/* ---------- gemte spil ---------- */
.sh-saves{display:flex;flex-direction:column;gap:12px}
.sh-save{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:14px 16px;transition:border-color .16s}
.sh-save:hover{border-color:var(--sh-line2)}
.sh-save.cur{border-color:var(--sh-line2);box-shadow:inset 0 0 30px rgba(159,243,223,.06)}
.sh-save .num{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 17px var(--sh-head);color:var(--sh-mint);border:1px solid var(--sh-line)}
.sh-save.empty .num{color:var(--sh-dim)}
.sh-save .bodies{order:5;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:2px;padding-left:54px}   /* kroppene på deres egen linje under pladsen – der er nu 16, og de skubbede tekst og knapper ud */
.sh-save .bodies canvas{width:40px;height:54px;margin:-6px -4px}
.sh-save .info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.sh-save .info b{font:700 15px var(--sh-head);letter-spacing:.04em;color:#fff}
.sh-save.empty .info b{color:var(--sh-muted)}
.sh-save .info em{font:700 10px var(--sh-body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#06110f;background:var(--sh-mint);border-radius:999px;padding:3px 8px;margin-left:8px;vertical-align:2px}
.sh-save .info small{color:var(--sh-muted);font-size:12.5px}
.sh-save .info .g{color:var(--sh-amber)}
.sh-save .act{flex:none;display:flex;gap:8px}
@media (max-width:640px){.sh-save{flex-wrap:wrap;gap:10px}.sh-save .bodies{order:5}.sh-save .act{width:100%}.sh-save .act .sh-btn{flex:1}}
.sh-saved{position:fixed;right:18px;bottom:18px;display:flex;align-items:center;gap:9px;background:var(--sh-glass);border:1px solid var(--sh-line);border-radius:999px;padding:9px 16px;
  font:600 12px var(--sh-head);letter-spacing:.08em;color:var(--sh-ink);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:shSaved 2.6s var(--ease) both}
.sh-saved span{width:14px;height:14px;border-radius:50%;border:2px solid var(--sh-mint);border-top-color:transparent;animation:shSpin .8s linear 2}
@keyframes shSaved{0%{opacity:0;transform:translateY(10px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes shSpin{to{transform:rotate(360deg)}}
/* ---------- Kryptens indgang: påmindelse og sværhedsgrad ---------- */
.sh-remind{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:linear-gradient(90deg,rgba(242,176,74,.14),rgba(242,176,74,.04));border:1px solid rgba(242,176,74,.45);animation:shRise .4s var(--ease) both}
.sh-remind .ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--sh-body);color:#1d1204;background:var(--sh-amber);box-shadow:0 0 18px rgba(242,176,74,.6);animation:shPulse 1.6s ease-in-out infinite}
.sh-remind .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.sh-remind b{font:700 14px var(--sh-head);color:#fff;letter-spacing:.04em}
.sh-remind span{font-size:13px;color:var(--sh-muted)}.sh-remind em{font-style:normal;font-weight:700}
.sh-diffrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sh-diffrow .sh-ico{font-size:20px}.sh-diffrow .sh-ico[disabled]{opacity:.3;pointer-events:none}
.sh-diffrow .v{min-width:92px;text-align:center}.sh-diffrow .v b{display:block;font:700 36px/1 var(--sh-head);color:#fff}.sh-diffrow .v span{font:700 10.5px var(--sh-body);letter-spacing:.16em;text-transform:uppercase}
.sh-diffrow .info{flex:1 1 180px;font-size:13px;color:var(--sh-muted);line-height:1.5}.sh-diffrow .info b{color:#fff}
.sh-diffchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sh-diffchips button{position:relative;min-width:36px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.3);color:var(--tc);font:700 13px var(--sh-head);cursor:pointer;transition:.15s}
.sh-diffchips button:hover{border-color:var(--tc);transform:translateY(-1px)}
.sh-diffchips button.on{background:var(--tc);color:#06110f;border-color:transparent;box-shadow:0 0 16px color-mix(in srgb,var(--tc) 50%,transparent)}
.sh-diffchips button.rec::after{content:'★';position:absolute;top:-8px;right:-5px;font-size:11px;color:var(--sh-mint)}
.sh-diffnote{margin-top:12px;font-size:12.5px;color:var(--sh-dim)}.sh-diffnote b{color:var(--sh-ink)}
@media (max-width:640px){.sh-card{padding:20px 16px;border-radius:18px}.sh-doll{gap:6px}.sh-hero canvas{width:110px;height:130px}.sh-slot .sl{font-size:7.5px;letter-spacing:.04em;bottom:3px}.sh-h1{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* eliksirernes niveauer (I · II · III) i Alkymistens bod */
.sh-tiers{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sh-tier{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"r d" "r p";align-items:center;column-gap:9px;row-gap:2px;width:100%;text-align:left;cursor:pointer;
  border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);color:var(--sh-text,#e8eef5);padding:7px 10px;font:inherit;transition:border-color .15s,background .15s}
.sh-tier:not(:has(.r)){grid-template-columns:1fr;grid-template-areas:"d" "p"}
.sh-tier .r{grid-area:r;font:700 13px var(--sh-head);color:var(--pc);min-width:22px;text-align:center}
.sh-tier .d{grid-area:d;font-size:12px;line-height:1.35;color:var(--sh-muted)}
.sh-tier .p{grid-area:p;font-size:12.5px;font-weight:700;color:#f2b04a}
.sh-tier:hover:not(:disabled){border-color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,rgba(0,0,0,.25))}
.sh-tier:disabled{opacity:.4;cursor:default}
.sh-tier.have{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,rgba(0,0,0,.25))}
.sh-tier.have .p{color:#9ff3df}
/* controller-markering i menuerne (js/padnav.js) */
.sh-padfocus{outline:2px solid var(--sh-mint)!important;outline-offset:3px;box-shadow:0 0 0 5px rgba(159,243,223,.14),0 0 26px rgba(159,243,223,.35)!important}
.sh-btn.sh-padfocus{border-color:var(--sh-mint);color:#fff;transform:translateY(-2px)}

/* Kisten: "Udrust bedste" */
.sh-auto{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.sh-auto-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sh-auto-l>span{font:600 10px var(--sh-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sh-dim)}
.sh-seg{display:flex;gap:5px}
.sh-seg button{font:600 11px var(--sh-body);letter-spacing:.1em;text-transform:uppercase;color:var(--sh-muted);background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 12px;cursor:pointer;transition:.15s}
.sh-seg button:hover{color:#fff;border-color:var(--sh-line2)}
.sh-seg button.on{color:#06110f;background:var(--sh-mint);border-color:var(--sh-mint)}
.sh-auto-l>span.sh-autohint{letter-spacing:.04em;text-transform:none;font-weight:500;font-size:11.5px;color:var(--sh-muted)}
.sh-automsg{flex:1 1 100%;font:500 12.5px var(--sh-body);color:var(--sh-mint)}
/* tomaterne og udviklingen (js/udvikling.js) */
.sh-tomat{display:inline-block;vertical-align:middle;flex:none;filter:drop-shadow(0 0 6px rgba(255,80,60,.35))}
#shHubBar .sh-tomatpill{display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 9px;color:#ff9a84;font-weight:700}
#shHubBar .sh-tomatpill b{color:#ffb4a2}
.duo-tom,.br-tom,.evo-pris{display:flex;align-items:center;gap:8px;justify-content:center}
.duo-tom{margin:10px 0 6px;font-size:16px}.duo-tom b,.br-tom b{color:#ff9a84}
.br-tom{font-size:17px}.br-tom span{color:var(--sh-muted,#8f96ab);font-size:13px}
.evo-pris{margin-top:16px;font-size:18px;background:rgba(0,0,0,.28);border:1px solid var(--sh-line);border-radius:14px;padding:12px}
.evo-pris b{color:#ff9a84}
.evo-former{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:16px}
.evo-form{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;text-align:left}
.evo-form span{font-size:11px;opacity:.7;letter-spacing:.05em}
.evo-form.on{border-color:var(--sh-mint,#9ff3df);box-shadow:0 0 0 1px var(--sh-mint,#9ff3df) inset}
.evo-pris .sh-btn{margin-left:auto}