/* =====================================================================================================
   SHADOWS · Shadow Brawl · lobby, butik og slutskærm (samme designsystem som css/ui.css)
   ===================================================================================================== */
.br-lobby{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.br-lcol{flex:1 1 380px;min-width:0}
.br-heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.br-hero{background:rgba(0,0,0,.3);border:1px solid var(--sh-line);border-radius:12px;padding:6px 4px 8px;cursor:pointer;color:var(--sh-ink);transition:.16s;display:flex;flex-direction:column;align-items:center}
.br-hero canvas{width:84px;height:92px}
.br-hero span{font:600 11px var(--sh-head);letter-spacing:.04em;text-align:center}
.br-hero:hover{border-color:var(--sh-line2);transform:translateY(-2px)}
.br-hero.on{border-color:var(--sh-mint);box-shadow:0 0 0 1px var(--sh-mint),0 0 24px rgba(159,243,223,.25);background:rgba(159,243,223,.08)}
.br-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.br-chips button{font:600 13px var(--sh-head);letter-spacing:.05em;color:var(--sh-ink);background:rgba(0,0,0,.35);border:1px solid var(--sh-line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.16s}
.br-chips button:hover{border-color:var(--sh-line2)}
.br-chips button.on{background:var(--sh-mint);color:#06110f;border-color:#c8fff2}
.br-note{color:var(--sh-muted);font-size:13px;line-height:1.5;margin-top:10px}
.br-keys{margin-top:18px;padding:12px 14px;border:1px solid var(--sh-line);border-radius:12px;background:rgba(0,0,0,.25);font-size:13px;line-height:2;color:var(--sh-muted)}
/* butikken: spillet kører videre bagved (som i LoL) */
.br-shop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;background:rgba(3,3,8,.35);animation:shFade .18s var(--ease)}
.br-shop-in{width:min(1100px,98vw);max-height:94vh;display:flex;flex-direction:column;background:var(--sh-glass2);border:1px solid var(--sh-line2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.br-shop-hd{display:flex;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid var(--sh-line);position:relative}
.br-gold{display:flex;align-items:center;gap:8px;font:700 20px var(--sh-head);color:#f2c44a}
.br-gold i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c0,#f2b04a 50%,#8a5a14);display:inline-block}
.br-where{font-size:13px;color:var(--sh-red);margin-right:50px}.br-where.ok{color:var(--sh-mint)}
.br-shop-body{display:flex;min-height:0;flex:1;overflow:hidden}
.br-shop-in{width:min(1320px,98vw)}
.bt0{--tc:#d9dccf}.bt1{--tc:#7c95ff}.bt2{--tc:#f4e35a}.bt3{--tc:#e8a64a}
/* pladserne */
.br-pss{display:flex;flex-direction:column;gap:6px;padding:14px 10px;border-right:1px solid var(--sh-line);width:176px;flex:none;overflow:auto}
.br-ps{display:flex;align-items:center;gap:10px;text-align:left;background:rgba(0,0,0,.3);border:1px solid var(--sh-line);border-radius:12px;padding:6px 8px;cursor:pointer;color:var(--sh-ink);transition:.14s}
.br-ps:hover{border-color:var(--sh-line2)}.br-ps.on{border-color:var(--sh-mint);background:rgba(159,243,223,.07);box-shadow:0 0 0 1px var(--sh-mint)}
.br-ps .ico{width:40px;height:40px;flex:none;border-radius:9px;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}.br-ps .ico img{width:36px;height:36px;object-fit:contain}
.br-ps b{display:block;font:700 13px var(--sh-head);letter-spacing:.04em}.br-ps em{display:block;font-style:normal;font-size:12px;color:var(--sh-dim);margin-top:1px}.br-ps em[class]{color:var(--tc)}
.br-help{margin-top:auto;padding-top:12px;font-size:11.5px;line-height:1.5;color:var(--sh-dim)}
/* træet */
.br-tr{flex:1;min-width:0;overflow:auto;padding:12px 16px 16px}
.br-root{display:flex;align-items:center;gap:18px;margin-bottom:12px;flex-wrap:wrap}
.br-legend{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--sh-dim);flex-wrap:wrap}.br-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:-6px;vertical-align:-1px}
.br-legend i.buy{background:#f2c44a;box-shadow:0 0 8px #f2c44a}.br-legend i.next{background:rgba(255,255,255,.25)}.br-legend i.own{background:#7ae86a}.br-legend i.lock{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.br-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.br-col{background:rgba(0,0,0,.22);border:1px solid var(--sh-line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:7px;transition:.2s}
.br-col.lock{opacity:.42;filter:saturate(.4)}.br-col.own,.br-col.path{border-color:rgba(122,232,106,.45);background:rgba(122,232,106,.05)}
.br-bh{display:flex;align-items:center;gap:8px}.br-arch{font-size:11px;color:var(--sh-dim);line-height:1.3}
.br-row{display:flex;flex-direction:column;gap:4px}.br-golds{display:flex;flex-direction:column;gap:3px;margin-left:14px;padding-left:8px;border-left:1px dashed rgba(232,166,74,.35)}
.br-n{position:relative;display:flex;align-items:center;gap:6px;min-width:0;background:rgba(0,0,0,.4);border:1px solid color-mix(in srgb,var(--tc) 30%,transparent);border-left:3px solid var(--tc);border-radius:9px;padding:3px 6px 3px 4px;cursor:pointer;color:var(--sh-ink);text-align:left;transition:.14s}
.br-bh>.br-n{flex:1}.br-root>.br-n{width:200px}
.br-n img{width:30px;height:30px;object-fit:contain;flex:none;filter:grayscale(.5) brightness(.75)}.br-n.g img{width:24px;height:24px}.br-n[class*=" g"]{padding-right:14px}
.br-n .tx{display:flex;flex-direction:column;flex:1;min-width:0}
.br-n .tx{flex-direction:row;align-items:baseline;gap:8px}.br-n .nm{font:600 12.5px var(--sh-body);line-height:1.2;flex:1;min-width:0}.br-n .pr{margin-left:auto}.br-n.g .nm{font-size:11.5px}
.br-n .pr{font:700 11px var(--sh-body);color:var(--sh-dim);margin-top:1px}.br-n .pr:empty{display:none}
.br-n .cat{position:absolute;top:-6px;right:-5px;font:800 9px var(--sh-body);font-style:normal;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111}
.cA{background:#ff8a6a}.cM{background:#7ae8d0}.cF{background:#9ab6ff}.cG{background:#d49aff}
.br-n:hover{border-color:var(--tc);transform:translateY(-1px)}
.br-n.buy{box-shadow:0 0 0 1px #f2c44a,0 0 14px rgba(242,196,74,.35)}.br-n.buy img{filter:none}.br-n.buy .pr{color:#f2c44a}
.br-n.next img{filter:grayscale(.2) brightness(.9)}
.br-n.own{background:rgba(122,232,106,.16);border-color:#7ae86a}.br-n.own img,.br-n.path img{filter:none}.br-n.own .pr{color:#7ae86a}.br-n.path{background:rgba(122,232,106,.07)}
.br-n.lock{opacity:.55}
.br-n.on{outline:2px solid var(--sh-mint);outline-offset:1px}
.br-potion{display:flex;flex-direction:column;gap:10px;max-width:420px;color:var(--sh-muted);font-size:14px;line-height:1.5}.br-potion .br-n{width:180px}
/* det valgte item */
.br-info{width:300px;flex:none;overflow-x:hidden;border-left:1px solid var(--sh-line);padding:16px;overflow:auto}
.br-ih{display:flex;gap:12px;align-items:center}.br-ih img{width:56px;height:56px;object-fit:contain;background:rgba(0,0,0,.4);border-radius:10px;padding:4px}
.br-in{font:700 18px var(--sh-head)}.br-ic{color:var(--sh-muted);font-size:13px;margin-top:2px}.br-ic span{color:var(--tc);font-weight:700}
.br-path{margin-top:10px;font-size:12px;color:var(--sh-dim);line-height:1.6}.br-path span{color:var(--tc)}.br-path i{font-style:normal;margin:0 5px}
.br-sts{margin-top:12px}.br-st{font-size:14px;color:var(--sh-muted);line-height:1.75}.br-st b{color:var(--sh-ink);display:inline-block;min-width:46px}.br-st small{color:var(--sh-dim);font-size:11px}
.br-st span{float:right;font-weight:700;font-size:12px}.br-st .up{color:#7ae86a}.br-st .dn{color:var(--sh-red)}
.br-d{margin-top:10px;font-size:13px;color:#d8c8a0;line-height:1.5}.br-d b{display:block;font:700 11px var(--sh-head);letter-spacing:.1em;text-transform:uppercase;color:var(--sh-dim);margin-bottom:3px}
.br-soon{margin-top:6px;font-size:11.5px;color:var(--sh-dim);font-style:italic}
/* slutskærmen */
table.br-end{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.br-end th{text-align:left;font:700 12px var(--sh-head);letter-spacing:.08em;text-transform:uppercase;color:var(--sh-dim);padding:10px 8px 6px}
.br-end td{padding:7px 8px;border-top:1px solid rgba(159,243,223,.08)}
.br-end td span{display:block;font-size:11px;color:var(--sh-muted)}
.br-end tr.me td{background:rgba(122,232,106,.07)}
.br-end img,.br-end i{width:26px;height:26px;object-fit:contain;display:inline-block;margin-right:3px;background:rgba(0,0,0,.35);border-radius:6px;vertical-align:middle}
@media (max-width:900px){.br-shop-body{flex-direction:column;overflow:auto}.br-info,.br-pss{width:auto}.br-pss{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--sh-line)}.br-help{display:none}.br-cols{grid-template-columns:1fr}.br-tr{overflow:visible}}
/* butikkens træ: foldes ud som i docs/item-trae */
.br-t,.br-t ul{list-style:none;margin:0;padding:0}
.br-legend{margin-bottom:10px}.br-fold{margin-left:auto;display:flex;gap:6px}
.br-fold button{background:rgba(255,255,255,.06);color:var(--sh-muted);border:1px solid var(--sh-line);border-radius:8px;padding:3px 9px;font:600 11px var(--sh-body);cursor:pointer}.br-fold button:hover{color:var(--sh-ink)}
.br-it{position:relative;margin:4px 0}
ul.br-kids{display:none;margin-left:20px;padding-left:16px;border-left:2px solid var(--sh-line)}
.br-it.open>ul.br-kids{display:block;animation:shFade .16s var(--ease)}
ul.br-kids>.br-it::before{content:"";position:absolute;left:-16px;top:20px;width:14px;border-top:2px solid var(--sh-line)}
.br-it.lockd>.br-n{opacity:.55}
.br-it .br-n{width:min(100%,340px)}
.br-n .tx{flex-direction:column;align-items:flex-start;gap:0}.br-n .sub{font:500 10.5px var(--sh-body);color:var(--sh-dim);line-height:1.2;text-transform:none;letter-spacing:0}
.br-n .pr{margin-left:6px;flex:none}
.br-n .chev{flex:none;display:grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid var(--sh-line);font:700 10.5px var(--sh-body);color:var(--sh-dim)}
.br-n[aria-expanded=true] .chev{background:var(--sh-mint);border-color:var(--sh-mint);color:#10131a}
/* introduktionen før lobbyen */
.br-intro{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;align-items:flex-start}
.br-imap{flex:none;width:min(380px,100%)}.br-imap canvas{width:100%;display:block;border-radius:14px;border:1px solid var(--sh-line);background:#0b0d12;image-rendering:pixelated}
.br-imap .br-legend{margin-top:8px}
.br-itx{flex:1;min-width:280px;display:flex;flex-direction:column;gap:11px;color:var(--sh-muted);font-size:13.5px;line-height:1.5}
.br-itx b{color:var(--sh-ink)}.br-itx h3{margin:0 0 2px;font:700 12px var(--sh-body);letter-spacing:.1em;text-transform:uppercase;color:var(--sh-mint)}
.br-goal{padding:12px 14px;border:1px solid rgba(159,243,223,.35);border-radius:12px;background:rgba(159,243,223,.07);color:var(--sh-ink);font-size:14.5px}
.br-dotb,.br-dotr{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 2px;vertical-align:-1px}.br-dotb{background:#46d2b8}.br-dotr{background:#e8463c}
.br-pause{font:700 12px var(--sh-body);color:#f2c44a;letter-spacing:.05em}
.br-imap .br-legend b{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.br-imap .br-legend b.br-dotb{background:#46d2b8}.br-imap .br-legend b.br-dotr{background:#e8463c}
/* butikken: pladserne pulserer som blikfang, næste trin som kort, rollemærker */
@keyframes brPsPulse{0%,100%{box-shadow:0 0 0 1px rgba(242,196,74,.25),0 0 6px rgba(242,196,74,.12)}50%{box-shadow:0 0 0 1px rgba(242,196,74,.75),0 0 18px rgba(242,196,74,.45)}}
.br-ps[data-slot]{position:relative;animation:brPsPulse 1.8s ease-in-out infinite}
.br-ps.on{animation:none;box-shadow:0 0 0 2px var(--sh-mint),0 0 16px rgba(159,243,223,.35)}
.br-ps .plus{font:700 22px var(--sh-head);color:rgba(242,196,74,.8)}
.br-ps .br-dot{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:#f2c44a;box-shadow:0 0 8px #f2c44a;display:none}.br-ps.can .br-dot{display:block}
.br-rl{display:inline-flex;align-items:center;gap:4px;font:700 11.5px var(--sh-body);font-style:normal;color:var(--rc);background:color-mix(in srgb,var(--rc) 16%,transparent);border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);border-radius:999px;padding:2px 9px;margin:0 5px 0 0;white-space:nowrap}
.br-rl.all{--rc:#c9ccd6}
.br-rl.sm{padding:0 4px;font-size:10px;margin:0 0 0 5px;vertical-align:1px}
.br-sh{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.br-sh-t{font:700 19px var(--sh-head);flex:1;min-width:200px}
.br-full{background:rgba(159,243,223,.1);color:var(--sh-mint);border:1px solid rgba(159,243,223,.45);border-radius:10px;padding:7px 13px;font:700 12.5px var(--sh-body);cursor:pointer;transition:.14s}.br-full:hover{background:rgba(159,243,223,.2)}
.br-way{font-size:12.5px;color:var(--sh-dim);margin-bottom:6px}.br-way span{color:var(--tc);font-weight:700}.br-way i{font-style:normal;margin:0 5px}
.br-me{font-size:13px;color:var(--sh-muted);margin:4px 0 14px;display:flex;align-items:center;gap:6px}.br-me .br-rl{margin:0}
.br-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.br-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:rgba(0,0,0,.38);border:1px solid color-mix(in srgb,var(--tc) 35%,transparent);border-top:4px solid var(--tc);border-radius:14px;padding:14px 12px 12px;cursor:pointer;transition:.14s}
.br-card:hover{transform:translateY(-2px);border-color:var(--tc)}
.br-card img{width:64px;height:64px;object-fit:contain;filter:grayscale(.3) brightness(.85)}.br-card.buy img{filter:none}
.br-card .nm{font:700 16px var(--sh-head)}.br-card .tr{font-size:12px;color:var(--tc);font-weight:700}
.br-card .rls{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.br-card .rls .br-rl{margin:0}
.br-card .sts{font-size:12px;color:var(--sh-muted);line-height:1.5}
.br-card .e{font-size:12px;color:#d8c8a0;line-height:1.45}
.br-card .br-cbuy{margin-top:auto;width:100%}
.br-card.on{outline:2px solid var(--sh-mint);outline-offset:2px}
.br-card.mine{background:rgba(122,232,106,.07);box-shadow:0 0 0 1px rgba(122,232,106,.55),0 0 20px rgba(122,232,106,.18)}
.br-fit{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#7ae86a;color:#0c1a0a;font:800 11px var(--sh-body);border-radius:999px;padding:3px 10px;white-space:nowrap}
.br-card:not(.mine){opacity:.82}.br-card:not(.mine):hover,.br-card.on{opacity:1}
.br-done{display:flex;flex-direction:column;gap:10px;max-width:420px;color:var(--sh-muted);font-size:14px;line-height:1.5}.br-done .br-n{width:260px}
.br-n.mine{box-shadow:inset 0 0 0 1px rgba(122,232,106,.5)}.br-n.mine::after{content:"✓";position:absolute;left:-14px;top:50%;transform:translateY(-50%);color:#7ae86a;font:800 12px var(--sh-body)}
.br-legend i.mine{background:rgba(122,232,106,.25);border:1px solid #7ae86a}
.br-irl{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.br-irl b{font-size:12px;color:#7ae86a}