/* Worlds Duel lobby action bar, in-place draft board, friend games and inbox pings. */
:root{--wd-queue:#1f6fff;--wd-queue-deep:#0b4fd8;--wd-queue-ink:#fff;--wd-alert:#ffb547}

/* Bottom action bar: friends first, Solo Queue as the biggest target. */
#duel-content .wd-action-bar{position:static;flex:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:12px 0 0;padding:0;background:none}
#duel-content .wd-action-friends{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;min-width:0}
#duel-content .wd-friend-action.wd-button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:64px;padding:10px 14px;border:1px solid #4a4a4a;border-radius:10px;background:#202020;color:#f2f2f2;text-align:left}
#duel-content .wd-friend-action.wd-button:hover:not(:disabled){border-color:#9a9a9a;background:#262626}
#duel-content .wd-friend-action>span:last-child{display:flex;flex-direction:column;min-width:0}
#duel-content .wd-friend-action strong{font:700 17px/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase}
#duel-content .wd-friend-action small{font:500 13px/1.3 var(--body);color:#c4c4c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#duel-content .wd-friend-action.is-alert{border-color:var(--wd-alert);box-shadow:inset 3px 0 var(--wd-alert)}
#duel-content .wd-friend-action.is-alert .wd-lobby-icon{color:var(--wd-alert)}
#duel-content .wd-solo-queue.wd-button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px;padding:12px 22px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--wd-queue),var(--wd-queue-deep));color:var(--wd-queue-ink);text-align:left;box-shadow:0 10px 26px #0b4fd84d}
#duel-content .wd-solo-queue.wd-button:hover:not(:disabled){filter:brightness(1.08)}
#duel-content .wd-solo-queue:focus-visible,#duel-content .wd-friend-action:focus-visible{outline:2px solid #fff;outline-offset:2px}
#duel-content .wd-solo-queue>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
#duel-content .wd-solo-queue strong{font:700 28px/1 var(--display);letter-spacing:.04em}
#duel-content .wd-solo-queue small{font:500 14px/1.3 var(--body);color:#e6eeff}
#duel-content .wd-solo-queue .wd-lobby-icon svg{width:26px;height:26px}
@media(max-width:700px){
 #duel-content .wd-action-bar{grid-template-columns:1fr;gap:8px;padding-top:10px}
 #duel-content .wd-action-friends.is-many{display:flex;min-height:max-content;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
 #duel-content .wd-action-friends.is-many .wd-friend-action{flex:0 0 72%;scroll-snap-align:start}
 #duel-content .wd-friend-action.wd-button{min-height:56px}
 #duel-content .wd-solo-queue.wd-button{min-height:68px;padding-right:76px}
 #duel-content .wd-solo-queue strong{font-size:24px}
}

/* In-place draft board: every dealt team shows its roster; open players are the buttons. */
.wd-draft-room .wd-draft-teams{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.wd-draft-room .wd-draft-team{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 14px 12px;border:1px solid #333;background:linear-gradient(130deg,#232323,#171717 55%,#121212)}
.wd-draft-room .wd-draft-team.is-spent{opacity:.55}
.wd-draft-room .wd-draft-team-head{display:flex;align-items:center;gap:12px;min-width:0}
.wd-draft-room .wd-draft-team-head .wd-draft-team-mark{flex-direction:row-reverse;justify-content:flex-end;gap:10px;margin:0}
.wd-draft-room .wd-draft-team-head .wd-draft-team-mark strong{font:700 26px/1 var(--display)}
.wd-draft-room .wd-draft-team-head .wd-draft-team-mark>img{width:36px;height:36px}
.wd-draft-room .wd-draft-team-name{display:flex;flex-direction:column;min-width:0}
.wd-draft-room .wd-draft-team-name .wd-draft-team-title{font:700 18px/1.15 var(--display);min-height:0}
.wd-draft-room .wd-draft-team-name .wd-draft-team-honor{font:400 12px/1.3 var(--body);min-height:0;margin:2px 0 0}
.wd-draft-room .wd-draft-team .wd-draft-team-roster{gap:6px;margin:0;padding:10px 0 0}
.wd-draft-room .wd-draft-team-roster>.is-unavailable{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;min-height:30px;padding:0 10px}
.wd-draft-room .wd-draft-team-roster>.is-unavailable small,.wd-draft-room .wd-draft-team-roster>.is-unavailable b{font:500 13px/1.2 var(--body)}
.wd-draft-room .wd-draft-pick.wd-button{display:grid;grid-template-columns:32px 40px minmax(0,1fr);align-items:center;gap:8px;min-height:46px;padding:6px 10px;border:1px solid #3a3a3a;border-radius:8px;background:#1d1d1d;color:#fff;text-align:left}
.wd-draft-room .wd-draft-pick.wd-button:hover:not(:disabled){border-color:var(--wd-queue);background:#1b2436}
.wd-draft-room .wd-draft-pick.is-legend{border-color:#7d6a3a}
.wd-draft-room .wd-draft-pick-photo{width:32px;height:32px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#2c2c2c;font:700 14px var(--display)}
.wd-draft-room .wd-draft-team-roster .wd-draft-pick-role{font:700 12px/1 var(--body);color:#9fb9ff;letter-spacing:.04em}
.wd-draft-room .wd-draft-pick-copy{display:flex;flex-direction:column;min-width:0}
.wd-draft-room .wd-draft-team-roster .wd-draft-pick-copy b{font:700 15px/1.2 var(--body)}
.wd-draft-room .wd-draft-team-roster .wd-draft-pick-copy small{font:400 12px/1.3 var(--body);color:#b5b5b5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-draft-room .wd-draft-footer{display:flex;justify-content:center}
.wd-draft-room .wd-draft-redraft.wd-button{min-height:44px;padding:8px 18px;border:1px solid #4a4a4a;border-radius:8px;color:#e6e6e6}
@media(max-width:700px){
 .wd-draft-room .wd-draft-teams{grid-template-columns:1fr;gap:8px}.wd-draft-room .wd-draft-team{padding:12px 10px 10px}
 /* The old phone team card wrapped names in a row and hid role tags; the board needs both. */
 .wd-draft-room .wd-draft-team .wd-draft-team-roster{display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px;padding-top:10px;border-top:1px solid #303030}
 .wd-draft-room .wd-draft-team .wd-draft-team-roster small{position:static;width:auto;height:auto;overflow:hidden;clip-path:none}
}

/* Friend game screen. */
.wd-friend-game .wd-friend-summary{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid #3a3a3a;border-radius:10px;background:#1b1b1b}
.wd-friend-game .wd-friend-summary small{font:600 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#a9a9a9}
.wd-friend-game .wd-friend-summary strong{display:block;font:700 22px/1.2 var(--display);color:#fff}
.wd-friend-game .wd-friend-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.wd-friend-game .wd-friend-choice.wd-button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:88px;padding:14px 16px;border:1px solid #474747;border-radius:10px;background:#1e1e1e;color:#fff;text-align:left}
.wd-friend-game .wd-friend-choice.is-primary{border-color:var(--wd-queue);background:#172338}
.wd-friend-game .wd-friend-choice strong{font:700 19px/1.2 var(--display)}
.wd-friend-game .wd-friend-choice small{font:400 13px/1.35 var(--body);color:#c6c6c6}

/* Inbox: one list, games waiting on you first. */
#duel-content .wd-inbox-list .wd-invite.is-action{border-color:var(--wd-alert)!important;box-shadow:inset 3px 0 var(--wd-alert)}

/* Pick'em page: badge on the phone menu button and a banner for new challenges. */
#mobile-nav-toggle{position:relative}
#mobile-nav-toggle .menu-badge{position:absolute;top:6px;left:24px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--wd-alert);color:#141414;font:700 11px/17px var(--body);text-align:center}
#mobile-nav-toggle .menu-badge[hidden]{display:none}
.duel-inbox-banner{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:12px 16px;border:1px solid var(--wd-alert);border-radius:10px;background:#251d10;color:#fff;text-align:left;cursor:pointer}
.duel-inbox-banner[hidden]{display:none}
.duel-inbox-banner:hover{background:#2e2414}
.duel-inbox-banner:focus-visible{outline:2px solid #fff;outline-offset:2px}
.duel-inbox-banner-count{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--wd-alert);color:#141414;font:700 14px var(--body)}
.duel-inbox-banner>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.duel-inbox-banner strong{font:700 16px/1.25 var(--body)}
.duel-inbox-banner small{font:400 13px/1.3 var(--body);color:#d8c9ad}
.duel-inbox-banner-go{flex:none;font:700 14px var(--body);color:var(--wd-alert)}