/* Duo Brawl (js/duo.js): draften, bonusvalget og stjernerne */
#shHubBar .sh-star{color:#ffd27a;font-weight:700;gap:6px;padding:8px 14px;text-shadow:0 0 10px rgba(255,210,90,.5)}
#shHubBar .sh-star b{color:#ffd27a}
.duo-draft{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr) minmax(140px,200px);gap:14px;margin-top:14px;align-items:start}
.duo-mid{min-width:0}
.duo-th{font:700 13px var(--sh-head);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.duo-team.b .duo-th{color:#46d2b8}.duo-team.r .duo-th{color:#e8463c;text-align:right}
.duo-slots{display:flex;flex-direction:column;gap:8px}
.duo-slot{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--sh-line);border-radius:12px;padding:6px 8px;min-height:64px;transition:.2s}
.duo-team.r .duo-slot{flex-direction:row-reverse;text-align:right}
.duo-slot canvas{width:44px;height:50px;flex:none}
.duo-slot>div{min-width:0}
.duo-slot .o{font:700 12px var(--sh-head);color:var(--sh-dim);width:14px;flex:none;text-align:center}
.duo-slot .n{font:700 13px var(--sh-head);color:var(--sh-ink)}
.duo-slot .w{font-size:11.5px;color:var(--sh-dim);margin-top:2px}
.duo-slot.cur{border-color:#ffd27a;box-shadow:0 0 0 1px #ffd27a,0 0 18px rgba(255,210,122,.25);animation:duoPulse 1.1s ease-in-out infinite}
.duo-team.b .duo-slot.got{border-color:rgba(70,210,184,.6);background:rgba(70,210,184,.07)}
.duo-team.r .duo-slot.got{border-color:rgba(232,70,60,.6);background:rgba(232,70,60,.07)}
@keyframes duoPulse{50%{box-shadow:0 0 0 1px #ffd27a,0 0 28px rgba(255,210,122,.45)}}
.duo-turn{text-align:center;font-size:14px;color:var(--sh-dim);min-height:20px;margin-bottom:8px}
.duo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.duo-hero{position:relative;background:rgba(0,0,0,.3);border:1px solid var(--sh-line);border-radius:12px;padding:5px 3px 7px;cursor:pointer;color:var(--sh-ink);transition:.16s;display:flex;flex-direction:column;align-items:center}
.duo-hero canvas{width:100%;max-width:74px;height:auto;aspect-ratio:74/80}
.duo-hero .n{font:600 11px var(--sh-head);letter-spacing:.03em;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo-hero .r{font-size:10.5px;font-weight:700;margin-top:2px}
.duo-hero:hover{border-color:var(--sh-line2);transform:translateY(-2px)}
.duo-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)}
.duo-hero.lock{opacity:.42}
.duo-hero.lock:hover,.duo-hero.tb:hover,.duo-hero.tr:hover{transform:none;cursor:default}
.duo-hero.tb,.duo-hero.tr{opacity:.5}
.duo-hero.tb{border-color:rgba(70,210,184,.8);background:rgba(70,210,184,.12)}
.duo-hero.tr{border-color:rgba(232,70,60,.8);background:rgba(232,70,60,.12)}
.duo-hero.tb::after,.duo-hero.tr::after{position:absolute;top:6px;right:6px;font:700 9.5px var(--sh-head);letter-spacing:.06em;padding:2px 6px;border-radius:999px;color:#06110f}
.duo-hero.tb::after{content:'DIT HOLD';background:#46d2b8}
.duo-hero.tr::after{content:'MODSTANDER';background:#e8463c;color:#fff}
.duo-info{margin-top:10px;font-size:13px;color:var(--sh-dim);min-height:18px;text-align:center}
.duo-info b{color:var(--sh-ink)}
.duo-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.duo-foot .br-chips{margin-top:0}
.duo-hero .r{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){.duo-draft{grid-template-columns:1fr}.duo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.duo-team.r .duo-slot{flex-direction:row;text-align:left}.duo-team.r .duo-th{text-align:left}}

/* bonusvalget */
.duo-bpick{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.duo-brows{display:flex;flex-direction:column;gap:7px}
.duo-brow{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--sh-line);border-left:3px solid var(--tc);border-radius:10px;padding:5px 10px;min-height:52px}
.duo-brow.cur{border-color:#ffd27a;border-left-color:var(--tc);box-shadow:0 0 18px rgba(255,210,122,.2)}
.duo-brow canvas{width:40px;height:44px;flex:none}
.duo-brow .o{font:700 12px var(--sh-head);color:var(--sh-dim);width:12px}
.duo-brow .n{font:700 13px var(--sh-head);flex:1}
.duo-brow .n span{display:block;font:500 11px system-ui,sans-serif;color:var(--sh-dim);margin-top:2px}
.duo-brow .bs{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;font-weight:700}
.duo-brow .bs em{font-style:normal}
.duo-brow .bs em.new{animation:duoPop .45s ease-out}
.duo-brow .bs i{color:var(--sh-dim);font-weight:500}
@keyframes duoPop{0%{transform:scale(1.8);opacity:0}100%{transform:none;opacity:1}}
.duo-bcards{display:flex;flex-direction:column;gap:10px}
.duo-bcard{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;background:rgba(0,0,0,.35);border:1px solid var(--sh-line);border-radius:14px;padding:12px 14px;cursor:pointer;color:var(--sh-ink);transition:.16s}
.duo-bcard i{grid-row:1/3;font-style:normal;font-size:34px;line-height:54px;text-align:center;color:var(--bc);text-shadow:0 0 14px var(--bc)}
.duo-bcard b{font:700 17px var(--sh-head);letter-spacing:.05em;color:var(--bc)}
.duo-bcard span{font-size:12.5px;color:var(--sh-dim)}
.duo-bcard:not(:disabled):hover{border-color:var(--bc);transform:translateY(-2px);box-shadow:0 0 22px rgba(255,255,255,.06)}
.duo-bcard:disabled{opacity:.4;cursor:default}
@media (max-width:720px){.duo-bpick{grid-template-columns:1fr}}

/* stjernerne til sidst */
.duo-stars{display:flex;justify-content:center;gap:22px;margin:22px 0 8px}
.duo-star{font-size:74px;line-height:1;color:rgba(255,210,122,.16);text-shadow:none}
.duo-star.on{color:#ffd27a;text-shadow:0 0 26px rgba(255,210,90,.8);animation:duoStar .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes duoStar{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.duo-sum{text-align:center;font-size:15px;line-height:1.6}
.duo-sum b{color:#ffd27a}
.duo-sum span{font-size:12.5px;color:var(--sh-dim)}
