.friend-entry, .home-actions > .friend-entry { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:50px; margin-top:8px; padding:13px 16px; background:var(--card2,#171b26); color:var(--ink); border:1px solid var(--line2,#303644); border-radius:14px; box-shadow:none; font-size:14px; font-weight:650; letter-spacing:0; }
.friend-entry-icon,.friend-entry-icon svg { display:block; width:20px; height:20px; flex:none; }
.friend-entry-icon { color:var(--mut,#959caf); }
.friend-entry.duel-opening { opacity:1; cursor:wait; }
.duel-entry-spinner { display:inline-block; flex:none; width:16px; height:16px; box-sizing:border-box; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:middle; animation:duel-entry-turn .8s linear infinite; }
.duel-entry-error { color:#ffc77a; font-size:12px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
.duel-entry-error > span { display:block; padding-top:10px; }
.duel-entry-error .duel-entry-retry { width:auto; min-height:44px; margin:0; padding:10px 12px; border:0; background:none; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:3px; letter-spacing:0; cursor:pointer; }
@keyframes duel-entry-turn { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){.duel-entry-spinner{animation:none}}
.duel-app { width:100%; max-width:620px; margin:0 auto; padding:0 0 32px; color:var(--ink,#edf0fa); }
.duel-app button { min-height:44px; font-family:inherit; cursor:pointer; touch-action:manipulation; }
.duel-app button:disabled { cursor:default; opacity:.32; }
.duel-app button.duel-opening { opacity:1; cursor:wait; }
.duel-app button:focus-visible,.duel-app summary:focus-visible,.duel-app input:focus-visible { outline:2px solid #4d8fff; outline-offset:3px; }
.duel-nav { display:flex; align-items:center; min-height:48px; margin-bottom:18px; }
.duel-app .duel-back { text-align:left; min-width:72px; margin:0; padding:10px 0; border:0; background:none; font-size:14px; color:var(--ink); letter-spacing:0; }
.duel-title { margin:24px 0 8px; font-size:clamp(25px,6vw,34px); line-height:1.12; letter-spacing:-.7px; }
.duel-subtitle { margin:0 0 24px; font-size:15px; line-height:1.5; color:var(--mut,#959caf); }
.duel-note { font-size:12px; font-weight:400; line-height:1.6; color:var(--mut,#959caf); margin:12px 0 20px; }
.duel-app .duel-primary { width:100%; margin:16px 0 8px; padding:16px; border:0; border-radius:14px; background:#1764ed; color:white; font-weight:750; font-size:15px; letter-spacing:.6px; box-shadow:none; }
.duel-app .duel-secondary { width:100%; margin:10px 0; padding:14px; border:1px solid #292d38; border-radius:12px; background:#141720; color:var(--ink); font-size:14px; letter-spacing:.3px; }
.duel-app .duel-link { margin:0; padding:11px; background:none; border:0; color:var(--mut); font-size:12px; font-weight:500; letter-spacing:0; }
.duel-app input { width:100%; min-height:48px; padding:14px; border:1px solid #292d38; border-radius:12px; background:#141720; color:var(--ink); font-family:inherit; font-size:16px; box-sizing:border-box; }
.duel-lobby .duel-nav { margin-bottom:12px; }
.duel-lobby .duel-title { text-align:center; margin:24px 0 10px; }
.duel-lobby .duel-subtitle { text-align:center; margin-bottom:28px; }
.duel-lobby .duel-invite-action { margin:0 0 10px; min-height:54px; }
.duel-lobby .duel-join-toggle { margin:0; min-height:50px; background:transparent; border-color:var(--line2,#303644); font-weight:550; letter-spacing:0; }
.duel-join { padding:20px 0 4px; }
.duel-join[hidden] { display:none; }
.duel-join label { display:block; margin-bottom:8px; font-size:12px; font-weight:500; color:var(--mut); }
.duel-join .duel-primary { margin-top:12px; }
.duel-join-entry { display:flex; align-items:center; gap:8px; }
.duel-join-entry input { flex:1; min-width:0; }
.duel-app .duel-join-entry button { flex:none; width:auto; margin:0; min-height:48px; padding:12px; font-size:12px; }
.duel-join-error { font-size:12px; line-height:1.5; color:#ffc77a; margin:8px 0 0; }
.duel-join-error:empty { display:none; }
.duel-app input[aria-invalid="true"] { border-color:#c09251; }
.duel-notice { font-size:13px; color:var(--mut); line-height:1.5; overflow-wrap:anywhere; }
.duel-notice:empty { display:none; }
.duel-notice.error,.duel-warning { color:#ffc77a; }
.duel-room-list { margin-top:32px; }
.duel-room-list h2 { margin:0 0 12px; font-size:12px; font-weight:550; color:var(--mut); text-transform:none; letter-spacing:0; }
.duel-app .duel-room { width:100%; display:flex; align-items:center; gap:8px; margin:8px 0 0; padding:4px 8px 4px 4px; border:0; border-radius:12px; background:var(--card2,#171b26); text-align:left; }
.duel-app .duel-room-open { display:flex; align-items:center; gap:12px; flex:1; min-width:0; margin:0; padding:12px; background:none; border:0; color:var(--ink); text-align:left; letter-spacing:0; }
.duel-app .duel-room-leave { flex:none; width:auto; min-height:44px; margin:0; padding:10px; background:none; border:0; color:var(--mut); font-size:12px; letter-spacing:0; }
.duel-room-name { flex:1; min-width:0; }
.duel-room strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.duel-room small { display:block; color:var(--mut); font-size:11px; margin-top:4px; }
.duel-room-action { flex:none; font-size:12px; font-weight:550; color:#8bb5ff; }
.duel-history { margin-top:20px; }
.duel-history > summary,.duel-rules > summary { min-height:44px; padding:14px 2px; font-size:12px; font-weight:500; color:var(--mut); cursor:pointer; }
.duel-rules { margin-top:16px; }
.duel-rules .duel-note { margin:0 0 12px; }
.duel-versus { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid #232632; }
.duel-versus > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.duel-versus > div:last-child { text-align:right; }
.duel-versus strong { font-size:17px; overflow-wrap:anywhere; }
.duel-eyebrow { font-size:9px; font-weight:700; letter-spacing:1.6px; color:var(--mut); }
.duel-vs { font-size:11px; font-weight:700; color:#646d84; }
.duel-copy-fallback { margin:12px 0; text-align:center; letter-spacing:3px; }
.duel-invite-share { width:100%; max-width:440px; margin:24px auto 0; }
.duel-invite-share > .duel-primary { margin:0; }
.duel-invite-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:0; }
.duel-app .duel-invite-actions button { flex:0 0 auto; width:auto; max-width:100%; min-height:44px; margin:0; padding:11px 16px; border:0; background:none; box-shadow:none; color:var(--mut); font-size:13px; font-weight:550; letter-spacing:0; }
.duel-app .duel-invite-actions button:hover { color:var(--ink); }
.duel-app .duel-invite-actions .duel-copy-invite { flex:1 1 180px; min-height:48px; padding:13px 16px; border-radius:12px; background:#1764ed; color:#fff; font-size:14px; font-weight:650; }
.duel-app .duel-copy-invite[aria-busy="true"] { opacity:.7; cursor:wait; }
.duel-incoming .duel-title { margin-top:44px; text-align:center; overflow-wrap:anywhere; }
.duel-incoming .duel-subtitle { margin-bottom:24px; text-align:center; }
.duel-preview-explanation { max-width:310px; margin:0 auto 20px; font-size:14px; line-height:1.6; color:var(--mut); text-align:center; }
.duel-incoming .duel-link { width:100%; }
.duel-invite-code { margin:12px 0 4px; text-align:center; }
.duel-invite-code:empty { display:none; }
.duel-short-code { display:block; margin:24px 0 8px; color:var(--ink); font-family:ui-monospace,Menlo,monospace; font-size:clamp(34px,9vw,48px); font-weight:650; letter-spacing:4px; user-select:all; }
.duel-code-expiry { margin:8px auto 16px; max-width:330px; font-size:12px; font-weight:400; line-height:1.5; color:var(--mut); }
/* The duel owns its state; the draft reuses the ordinary game's visual classes. */
.duel-app.duel-drafting { max-width:none; }
.duel-draft .draft-progress { min-height:44px; margin-bottom:14px; }
.duel-draft .progress-dots { margin-left:auto; }
.duel-friend-status { color:var(--mut); font-size:11px; font-weight:500; white-space:nowrap; }
.duel-draft .drawbox { margin-bottom:20px; }
.duel-draft-controls { min-width:0; }
.duel-spin-wrap { padding-top:4px; text-align:center; }
.duel-app .duel-spin-button { font-size:16px; letter-spacing:3px; padding:20px; }
.duel-pick-hint { text-align:center; font-weight:700; margin:0 0 8px; font-size:12px; }
.duel-app #duelSearch { padding:12px 14px; min-height:0; background:var(--card2); border-color:var(--line2); font-weight:700; }
.duel-player-text { min-width:0; flex:1; }
.duel-slot:focus-visible { outline:2px solid var(--acc); outline-offset:4px; border-radius:12px; }
.duel-draft .pslot .chip { background:var(--card2); }
.duel-draft .pslot .rr { color:var(--ink); }
.duel-draft:not(.draft-in-progress) .pslot[data-slot="FWD"],
.duel-draft:not(.draft-in-progress) .pslot[data-slot="DEF"],
.duel-draft:not(.draft-in-progress) .pslot[data-slot="GK"] { width:min(180px,70%); }
.duel-lock-note { text-align:center; margin:4px 0 14px; }
.duel-draft-stats .duel-squad { padding:4px 0; }
/* Native solo's full formation is a flowing layout; keep its exact geometry here. */
.duel-native .duel-draft:not(.draft-in-progress) .pitch { --pitch-surface:#10131b; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); align-content:space-between; justify-items:center; column-gap:16px; row-gap:14px; height:auto; min-height:420px; padding:24px 18px; background:var(--pitch-surface); box-shadow:none; border:0; }
.duel-native .duel-draft:not(.draft-in-progress) .pitch::before,
.duel-native .duel-draft:not(.draft-in-progress) .pitch::after,
.duel-native .duel-draft:not(.draft-in-progress) .pitch > .circle,
.duel-native .duel-draft:not(.draft-in-progress) .pitch > .box { opacity:.55; pointer-events:none; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot { position:relative; left:auto!important; top:auto!important; transform:none; align-self:center; width:100%; max-width:190px; min-width:0; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot[data-slot="FWD"] { grid-area:1/1/2/3; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot[data-slot="MID"] { grid-area:2/1; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot[data-slot="FLEX"] { grid-area:2/2; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot[data-slot="DEF"] { grid-area:3/1/4/3; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot[data-slot="GK"] { grid-area:4/1/5/3; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot .chip { width:48px; height:48px; border-radius:50%; margin-bottom:7px; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot .nm,
.duel-native .duel-draft:not(.draft-in-progress) .pslot .offrole { position:relative; background:var(--pitch-surface); border-radius:3px; box-shadow:0 0 0 2px var(--pitch-surface); }
.duel-native .duel-draft:not(.draft-in-progress) .pslot .nm { font-size:13px; white-space:normal; overflow-wrap:break-word; line-height:1.25; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot .offrole { margin-top:3px; font-size:10px; font-weight:600; line-height:1.35; }
.duel-native .duel-draft:not(.draft-in-progress) .pslot .pstats,
.duel-native .duel-draft:not(.draft-in-progress) .pslot .stat-scope,
.duel-native .duel-draft:not(.draft-in-progress) .progress-dots { display:none; }
@media(max-width:359px){.duel-native .duel-draft:not(.draft-in-progress) .pitch{column-gap:12px}.duel-native .duel-draft:not(.draft-in-progress) .pslot .nm{font-size:12px}}
@media(max-width:899px) and (max-height:740px){.duel-app:not(.duel-native) .duel-draft:not(.draft-in-progress) .pitch{height:390px}.duel-app:not(.duel-native) .duel-draft:not(.draft-in-progress) .pslot .chip{width:42px;height:42px;border-radius:12px}.duel-app:not(.duel-native) .duel-draft:not(.draft-in-progress) .pslot .nm{font-size:10px}.duel-native .duel-draft:not(.draft-in-progress) .pitch{height:auto;min-height:380px;padding-top:20px;padding-bottom:20px;row-gap:10px}.duel-native .duel-draft:not(.draft-in-progress) .pslot .chip{width:42px;height:42px;border-radius:50%}}
@media(min-width:900px){.duel-native .duel-draft:not(.draft-in-progress) .pitch{min-height:520px;padding:30px 24px}.duel-native .duel-draft:not(.draft-in-progress) .pslot .chip{width:60px;height:60px}}
.duel-warning { font-size:12px; line-height:1.5; }
.duel-squad-details { margin:18px 0; border-top:1px solid #222632; }
.duel-squad-details summary { min-height:44px; padding:14px 4px; color:var(--mut); font-size:13px; cursor:pointer; }
.duel-squad-details h3 { font-size:14px; margin:22px 0 4px; }
.duel-squad > div { display:flex; flex-direction:column; gap:4px; padding:14px 0; border-bottom:1px solid #222632; }
.duel-squad strong { font-size:14px; }
.duel-squad span { font-size:12px; color:#adb6c9; line-height:1.5; }
.duel-squad small { color:var(--mut); font-size:10px; }
.duel-room-options { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:26px; border-top:1px solid #222632; padding-top:10px; }
.duel-cancel { width:100%; text-align:center; font-size:12px; color:var(--mut); }
.duel-cancel summary { min-height:44px; padding:14px; cursor:pointer; }
.duel-app .duel-danger { min-height:44px; padding:12px; background:none; border:1px solid #493033; border-radius:10px; font-size:12px; color:#f3aeb4; margin:0 0 12px; }
.duel-result { text-align:center; padding:16px 0 0; }
.duel-verdict { margin:8px 0 20px; letter-spacing:.5px; font-size:clamp(21px,5.5vw,28px); font-weight:750; color:var(--ink); }
.duel-result.won .duel-verdict { color:#83adff; }
.duel-season-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0; text-align:center; }
.duel-season-column { min-width:0; padding:0 10px; font-variant-numeric:tabular-nums; }
.duel-season-column + .duel-season-column { border-left:1px solid #262b37; }
.duel-season-column .duel-eyebrow { display:block; margin-bottom:5px; }
.duel-season-name { display:block; min-height:34px; font-size:13px; font-weight:650; line-height:1.3; overflow-wrap:anywhere; margin-bottom:14px; }
.duel-season-points { display:block; font-size:clamp(45px,13vw,62px); font-weight:800; line-height:1.08; letter-spacing:-2px; }
.duel-result.won .duel-season-column:first-child .duel-season-points { color:#8bb5ff; }
.duel-season-unit { display:block; font-size:10px; font-weight:500; letter-spacing:1px; color:var(--mut); margin-top:5px; }
.duel-season-record { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-top:20px; }
.duel-season-record strong { display:block; font-size:22px; font-weight:650; line-height:1.2; letter-spacing:-.5px; }
.duel-season-record span { display:block; margin-top:5px; font-size:8px; font-weight:550; letter-spacing:.2px; color:var(--mut); }
.duel-season-reason { font-size:13px; color:var(--ink); line-height:1.5; margin:20px 0 0; }
.duel-result > .duel-note { margin:6px 0 10px; }
.duel-rematch { text-align:center; margin-bottom:20px; }
.duel-rematch .duel-primary { margin-top:12px; }
.duel-rematch .duel-primary:disabled { opacity:1; background:#18233a; color:#98a9c7; }
.duel-rematch .duel-note { margin:6px 0 12px; }
.duel-result-squads { margin:24px 0; }
.duel-squad-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; border-bottom:1px solid #262b37; }
.duel-app .duel-squad-tab { min-height:44px; margin:0; padding:12px 4px; font-size:13px; font-weight:600; letter-spacing:0; background:none; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--mut); }
.duel-app .duel-squad-tab[aria-pressed="true"] { color:var(--ink); border-bottom-color:#397eff; }
.duel-rated-squad { display:flex; flex-direction:column; gap:8px; }
.duel-rated-player { cursor:default; padding:12px; }
.duel-rated-text { min-width:0; }
.duel-rated-text .pname,.duel-rated-text .pmeta { overflow-wrap:anywhere; }
.duel-rated-text .pmeta { font-size:11px; font-weight:500; line-height:1.4; }
.duel-reel-rolling { animation:duel-reel-roll 1.45s cubic-bezier(.08,.85,.12,1) forwards; }
@keyframes duel-reel-roll { from { transform:translateY(0); } to { transform:translateY(-576px); } }
.duel-spinning { min-height:54px; text-align:center; padding-top:16px; }
@media(prefers-reduced-motion:reduce){.duel-reel-rolling{animation:none;transform:translateY(-576px)}}
.duel-season-clock { text-align:center; font-size:13px; color:var(--mut); margin:28px 0 12px; }
.duel-season-progress { display:block; width:100%; height:3px; border:0; border-radius:3px; overflow:hidden; accent-color:#397eff; background:#232632; }
.duel-season-progress::-webkit-progress-bar { background:#232632; }
.duel-season-progress::-webkit-progress-value { background:#397eff; }
.duel-season-progress::-moz-progress-bar { background:#397eff; }
.duel-season-opponent { min-height:2.6em; text-align:center; font-size:16px; line-height:1.3; font-weight:600; margin:20px 0 0; overflow-wrap:anywhere; }
.duel-round-result { font-size:14px; font-weight:600; min-height:20px; margin:24px 0 0; }
.duel-round-result.w,.duel-fixture-outcome.w { color:#80bba7; }
.duel-round-result.d,.duel-fixture-outcome.d { color:#a5acc1; }
.duel-round-result.l,.duel-fixture-outcome.l { color:#e5919c; }
.duel-fixtures { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
.duel-fixtures caption { text-align:left; padding:0 0 16px; font-size:12px; line-height:1.5; color:var(--mut); }
.duel-fixtures th,.duel-fixtures td { padding:12px 4px; border-bottom:1px solid #222632; font-size:12px; }
.duel-fixtures thead th { color:var(--mut); font-size:10px; font-weight:500; text-align:center; }
.duel-fixtures th:first-child { width:50%; text-align:left; }
.duel-fixtures td { text-align:center; }
.duel-fixture-number { display:inline-block; min-width:22px; color:var(--mut); font-size:10px; font-weight:400; }
.duel-fixture-opponent { font-weight:500; overflow-wrap:anywhere; }
.duel-fixture-outcome { display:inline-block; margin-right:5px; font-size:10px; font-weight:650; }
.duel-fixture-score { font-size:12px; white-space:nowrap; }
@media(max-width:359px){.duel-versus{gap:10px}.duel-versus strong{font-size:15px}.duel-nav{padding-right:30px}.duel-season-column{padding:0 7px}.duel-season-record strong{font-size:20px}.duel-season-record span{font-size:7px}.duel-rated-player .rbadge{min-width:38px;height:38px}.duel-rated-text .pname{font-size:13px}}
/* Private rooms use the existing draft; only the lobby and comparison differ. */
.friends-members { margin:24px 0 8px; }
.friends-member { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:10px 0; font-size:15px; font-weight:600; }
.friends-member > span { min-width:0; overflow-wrap:anywhere; }
.friends-member small { flex:none; color:var(--mut); font-size:9px; font-weight:600; letter-spacing:.8px; }
.friends-member.empty { color:var(--mut); font-weight:400; }
.friends-member.empty small { font-weight:400; }
.friends-room-note { text-align:center; margin:8px auto 18px; max-width:400px; }
.friends-waiting { text-align:center; margin:30px 0; font-size:15px; color:var(--mut); }
.friends-progress { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin:0 0 16px; color:var(--mut); font-size:11px; line-height:1.5; }
.friends-progress span { min-width:0; overflow-wrap:anywhere; }
.duel-app .friends-reroll:disabled { opacity:.25; }
.friends-rankings { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; text-align:left; }
.friends-rankings caption { text-align:left; font-size:12px; color:var(--mut); margin:0 0 12px; }
.friends-rankings thead th { color:var(--mut); font-size:10px; font-weight:500; padding:10px 4px; }
.friends-rankings tbody th,.friends-rankings tbody td { padding:18px 4px; font-size:14px; border-bottom:1px solid var(--line,#222632); }
.friends-rankings th:first-child,.friends-rankings td:first-child { width:24px; color:var(--mut); font-size:12px; }
.friends-rankings th:nth-child(2) { width:auto; font-weight:600; overflow-wrap:anywhere; }
.friends-rankings th:nth-child(3),.friends-rankings td:nth-child(3) { width:80px; text-align:center; font-size:12px; white-space:nowrap; }
.friends-rankings th:last-child,.friends-rankings td:last-child { width:48px; text-align:right; }
.friends-rankings td:last-child { font-size:22px; font-weight:750; }
.friends-rankings .you th,.friends-rankings .you td:last-child { color:#8bb5ff; }
.friends-squad-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.friends-squad-tabs button { min-width:0; overflow-wrap:anywhere; }
.friends-fixtures th:first-child { width:30%; }
.friends-fixtures th,.friends-fixtures td { font-size:10px; padding:12px 2px; overflow-wrap:anywhere; }
@media(max-width:359px){.friends-rankings th:nth-child(3),.friends-rankings td:nth-child(3){width:66px;font-size:11px}.friends-rankings tbody th{font-size:12px}.friends-rankings th:last-child,.friends-rankings td:last-child{width:40px}.friends-rankings td:last-child{font-size:20px}.friends-member{font-size:14px}}
.friends-player-options { text-align:center; margin-top:22px; }
.friends-player-options > summary { min-height:44px; padding:14px 2px; color:var(--mut); font-size:12px; cursor:pointer; }
.friends-player-options > button { width:auto; }
/* One quiet lobby column: room code, players, then the only primary action. */
.duel-app.friends-room-lobby { max-width:520px; }
.duel-app.friends-room-lobby.active { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; }
.friends-room-lobby > .duel-nav { grid-column:2; grid-row:1; justify-content:flex-end; min-height:44px; margin:0; padding:0; }
.friends-room-lobby .duel-back { min-width:0; padding:10px 0 10px 10px; color:var(--mut); font-size:12px; }
.friends-room-lobby > .duel-body { display:contents; }
.friends-room-lobby > .duel-body > *, .friends-room-lobby > .duel-notice, .friends-room-lobby > #duelRetry { grid-column:1 / -1; min-width:0; }
.friends-room-lobby > .duel-body > .friends-room-heading { grid-column:1; grid-row:1; }
.friends-room-heading { display:flex; align-items:center; gap:12px; min-height:44px; }
.friends-room-lobby .duel-title { margin:0; font-size:26px; line-height:1.2; letter-spacing:-.6px; }
.friends-room-count { color:var(--mut); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.friends-room-lobby .duel-invite-share { width:100%; max-width:none; margin:20px 0 18px; }
.friends-room-lobby .friends-code-available { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:center; }
.friends-room-lobby .duel-invite-code { min-width:0; margin:0; text-align:left; }
.friends-room-lobby .duel-short-code { margin:5px 0; font-size:30px; line-height:1.15; letter-spacing:2px; white-space:nowrap; }
.friends-room-lobby .duel-code-expiry { margin:0; font-size:11px; line-height:1.5; text-align:left; }
.friends-room-lobby .duel-invite-actions { justify-content:flex-start; margin:10px 0 0; }
.friends-room-lobby .friends-code-available .duel-invite-actions { margin:0; }
.friends-room-lobby .duel-invite-actions button,
.friends-room-lobby .duel-invite-actions .duel-copy-invite { flex:0 0 auto; width:auto; min-width:88px; min-height:44px; margin:0; padding:10px 13px; border:1px solid var(--line2,#303644); border-radius:10px; background:transparent; box-shadow:none; color:var(--ink); font-size:12px; font-weight:550; letter-spacing:0; }
.friends-room-lobby .duel-copy-fallback { grid-column:1 / -1; margin-top:12px; }
.friends-room-lobby .friends-members { margin:4px 0 20px; }
.friends-room-lobby .friends-member { min-height:48px; padding:10px 0; font-size:14px; border-bottom:1px solid var(--line,#222632); }
.friends-room-lobby .friends-member:last-child { border-bottom:0; }
.friends-room-lobby .friends-member small { font-size:10px; font-weight:500; letter-spacing:0; }
.friends-room-lobby .friends-member.empty { font-size:13px; }
.friends-room-lobby .friends-start { min-height:48px; margin:0; padding:14px; font-size:14px; letter-spacing:.4px; }
.friends-room-lobby .friends-start:disabled { background:var(--card2,#171b26); color:var(--mut); opacity:1; }
.friends-room-lobby .friends-room-note { margin:10px auto 0; font-size:11px; line-height:1.5; }
.friends-room-lobby .friends-away-note { max-width:none; margin-top:18px; }
.friends-room-lobby .friends-waiting { margin:0; font-size:14px; line-height:1.5; }
.friends-room-lobby .friends-player-options { margin-top:4px; }
@media(max-width:359px){.friends-room-lobby .friends-code-available{column-gap:10px}.friends-room-lobby .duel-short-code{font-size:27px;letter-spacing:1.5px}.friends-room-lobby .duel-invite-actions .duel-copy-invite{min-width:82px;padding-inline:10px}.friends-room-lobby .duel-title{font-size:24px}.friends-room-heading{gap:10px}}

/* Network waits keep the original labels, typography and dimensions. */
.duel-app button.duel-pending:disabled,.duel-app button.duel-opening:disabled,.duel-app [data-duel-was-disabled="false"]:disabled { opacity:1; }
.duel-app button.duel-pending,.duel-app button.duel-opening { cursor:wait; }
.duel-waiting::before { content:''; position:absolute; right:4px; top:calc(50% - 4px); width:8px; height:8px; box-sizing:border-box; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; pointer-events:none; animation:duel-entry-turn .8s linear infinite; }
.duel-app .duel-primary.duel-waiting::before,.friend-entry.duel-waiting::before { right:12px; width:10px; height:10px; top:calc(50% - 5px); }
.duel-a11y-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.duel-loading { display:flex; align-items:center; justify-content:center; gap:12px; min-height:260px; color:var(--mut,#959caf); font-size:14px; }
.duel-loading .duel-entry-spinner { visibility:hidden; animation:duel-entry-turn .8s linear infinite,duel-spinner-show 0s .3s forwards; }
.duel-reading .duel-body { cursor:progress; }
@keyframes duel-spinner-show { to { visibility:visible; } }
@media(prefers-reduced-motion:reduce){.duel-waiting::before{animation:none}.duel-loading .duel-entry-spinner{animation:duel-spinner-show 0s .3s forwards}}

/* Reserve the fixed sound target on Web and native: 44 px plus an 8 px gap. */
.friends-room-lobby > .duel-nav { margin-right:52px; }


/* Programmatic screen-heading focus stays accessible without an interactive ring. */
.duel-app h1[tabindex="-1"]:focus { outline:none; }

.friends-rematch { margin:18px 0 24px; }
.friends-rematch-main { display:flex; align-items:center; justify-content:center; min-height:64px; }
.duel-app .friends-rematch-main .duel-primary { margin:0; min-height:56px; font-size:17px; }
.friends-rematch .friends-rematch-waiting { display:flex; align-items:center; justify-content:center; min-height:56px; margin:0; color:var(--ink); font-size:18px; font-weight:550; line-height:1.45; overflow-wrap:anywhere; }
.friends-rematch > .duel-link { display:block; width:100%; min-height:44px; margin:4px 0 0; font-size:14px; }
.friends-rematch-players { margin:8px 0 0; text-align:left; }
.friends-rematch-players > summary { min-height:44px; padding:12px 4px; color:var(--mut); font-size:14px; line-height:20px; cursor:pointer; }
.friends-rematch-members { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; padding:0 4px; margin:8px 0 12px; list-style:none; text-align:left; }
.friends-rematch-members li { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; font-size:13px; line-height:1.5; }
.friends-rematch-members li > span:first-child { min-width:0; overflow-wrap:anywhere; }
.friends-rematch-state { flex:none; color:var(--mut); font-size:12px; }
.friends-rematch-members .ready .friends-rematch-state { color:var(--acc2); }
.duel-squad-details .friends-room-note,.duel-squad-details .friends-result-scope { margin:8px 4px 12px; text-align:left; }
@media(max-width:359px){.friends-rematch-members{grid-template-columns:minmax(0,1fr)}}

/* Room actions stay readable without adding a second toolbar or shrinking targets. */
.friends-room-date { font-variant-numeric:tabular-nums; }
.friends-name-action { display:block; margin:0 auto 8px!important; }
.friends-member small,.friends-room-lobby .friends-member small,
.friends-room-lobby .duel-code-expiry,.friends-room-lobby .friends-room-note,
.friends-rematch-state { font-size:12px; line-height:1.5; }
.friends-progress { font-size:12px; gap:4px 12px; margin-bottom:10px; }
.friends-rematch-members li { font-size:13px; }
.friends-leave-note,.friends-result-scope { font-size:12px; line-height:1.5; text-align:center; margin:16px auto 8px; max-width:480px; }
.friends-result-scope { margin-top:-8px; }
@media(max-width:600px){
  .duel-draft .draft-progress { min-height:28px; margin-bottom:6px; }
  .duel-draft .friends-progress { justify-content:flex-start; margin-bottom:6px; }
  .duel-draft .friends-rerolls { margin-bottom:8px; }
  .duel-draft .drawbox { margin-bottom:12px; }
  .duel-draft.draft-in-progress .draftgrid { gap:12px; }
  .duel-draft.draft-in-progress .pitch { padding-block:8px; min-height:104px; }
  .duel-draft.draft-in-progress .pslot { min-height:88px; }
  .duel-draft.draft-in-progress .pslot .nm { font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
  .duel-draft.draft-in-progress .pslot .offrole { font-size:11px; line-height:1.4; }
  .friends-rematch-members { gap:8px 12px; }
}

/* Search and its existing statistics explanation share one compact row. */
.duel-draft .player-tools { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:6px; margin-bottom:8px; }
.duel-draft .player-tools #duelSearch { margin:0; min-width:0; }
.duel-draft .player-tools .stats-help { width:44px; min-height:44px; padding:0; margin:0; color:var(--mut); }
@media(max-width:600px){
  .duel-draft.draft-in-progress .pitch.empty-squad { min-height:68px; padding:8px 6px; }
  .duel-draft.draft-in-progress .pitch.empty-squad .pslot { min-height:44px; }
}

/* iPhone rooms: readable controls and names without changing the Web layout. */
@media(max-width:600px){
  .duel-native .friends-rerolls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .duel-native .friends-rerolls .mini-btn { min-width:0; min-height:48px; padding:12px 8px; font-size:14px; line-height:1.3; letter-spacing:0; }
  .duel-native .duel-draft.draft-in-progress .pslot .nm { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:2.6em; max-height:2.6em; font-size:13px; line-height:1.3; white-space:normal; overflow:hidden; overflow-wrap:anywhere; text-overflow:clip; }
  .duel-native .duel-draft.draft-in-progress .pslot:not(.empty) { min-height:104px; }
  .duel-native .duel-draft.draft-in-progress .pslot .offrole { font-size:12px; line-height:1.35; }
  .duel-native .duel-player .pname,.duel-native .duel-rated-text .pname { font-size:15px; line-height:1.35; }
  .duel-native .duel-player .pmeta,.duel-native .duel-rated-text .pmeta { font-size:13px; line-height:1.45; }
  .duel-native .duel-player .postag,.duel-native .duel-player .stat-scope,.duel-native .duel-stats-caption { font-size:12px; line-height:1.45; }
  .duel-native.friends-room-lobby .friends-member { font-size:16px; }
  .duel-native.friends-room-lobby .friends-member small,.duel-native.friends-room-lobby .duel-code-expiry,.duel-native.friends-room-lobby .friends-room-note { font-size:13px; line-height:1.5; }
  .duel-native.friends-room-lobby .duel-invite-actions .duel-copy-invite { min-height:48px; font-size:14px; }
  .duel-native.friends-room-lobby .friends-start { min-height:52px; font-size:16px; }
  .duel-native.friends-room-lobby .friends-waiting { font-size:16px; }
  .duel-native .duel-join label,.duel-native .duel-room small { font-size:13px; line-height:1.5; }
  .duel-native .duel-room strong { font-size:16px; }
  .duel-native .duel-join-entry button { min-height:48px; font-size:14px; }
  .duel-native .friends-rankings thead th { font-size:12px; }
  .duel-native .friends-rankings tbody th { font-size:15px; }
  .duel-native .friends-rankings th:nth-child(3),.duel-native .friends-rankings td:nth-child(3) { font-size:13px; }
  .duel-native .duel-squad-tab { min-height:48px; font-size:14px; }
  .duel-native .duel-squad-details > summary,.duel-native .friends-player-options > summary { font-size:14px; }
}

/* Series stays within the existing draft and rematch flow. */
.friends-series { margin:0 0 14px; text-align:center; }
.friends-series-title { margin:0 0 10px; color:var(--mut); font-size:13px; font-weight:600; line-height:1.4; }
.friends-series.complete .friends-series-title { color:var(--acc2); font-size:24px; font-weight:800; letter-spacing:-.5px; overflow-wrap:anywhere; }
.friends-series-scores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; max-width:440px; padding:0; margin:0 auto; list-style:none; }
.friends-series-scores li { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; color:var(--mut); font-size:13px; line-height:1.4; text-align:left; }
.friends-series-scores li > span { min-width:0; overflow-wrap:anywhere; }
.friends-series-scores strong { color:var(--ink); font-size:24px; font-variant-numeric:tabular-nums; }
.friends-series-scores .you > span { color:var(--ink); }
.friends-series-note { margin:8px 0 0; color:var(--mut); font-size:12px; line-height:1.5; }
.friends-series.compact { margin:0 0 10px; text-align:left; }
.friends-series.compact .friends-series-title { margin-bottom:3px; font-size:12px; }
.friends-series.compact .friends-series-scores { max-width:none; gap:2px 16px; }
.friends-series.compact .friends-series-scores li { font-size:12px; }
.friends-series.compact .friends-series-scores strong { font-size:14px; }
@media(max-width:359px){.friends-series-scores{gap:4px 12px}.friends-series.complete .friends-series-title{font-size:22px}}

/* Show the identity used for friends rooms beside its existing edit action. */
.friends-identity { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 6px; margin:0 0 12px; color:var(--mut); font-size:14px; line-height:1.5; }
.friends-identity > span { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.friends-identity strong { color:var(--ink); font-size:inherit; font-weight:600; overflow-wrap:anywhere; }
.duel-app .friends-identity .friends-name-action { display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:44px; min-height:44px; margin:0!important; padding:8px 6px; font-size:14px; font-weight:550; line-height:1.5; letter-spacing:0; color:var(--acc2); }

/* A second game shares the existing friends room and presence lifecycle. */
.friends-mode-chooser { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 20px; }
.duel-app .friends-mode { display:flex; flex-direction:column; gap:7px; min-width:0; padding:17px 12px; border:1px solid var(--line2,#303644); border-radius:14px; background:var(--card2,#171b26); color:var(--ink); text-align:left; letter-spacing:0; }
.friends-mode strong { font-size:16px; line-height:1.25; }
.friends-mode span { font-size:12px; line-height:1.45; color:var(--mut); }
.duel-app .friends-mode[aria-pressed="true"] { border-color:#538dff; box-shadow:inset 0 0 0 1px #538dff; background:#182742; }
.friends-mode-caption { margin:0 0 16px; color:var(--mut); font-size:14px; line-height:1.5; text-align:center; }
.duel-app.legend-room-draft { max-width:920px; }
.legend-room-draft .duel-title { margin-top:8px; }
.legend-room-draft .duel-subtitle { margin-bottom:14px; }
.legend-builder-shell { width:100%; min-width:0; }
.legend-builder-frame { display:block; width:100%; height:900px; min-height:300px; border:0; border-radius:16px; background:transparent; }
.legend-room-progress .friends-progress { justify-content:flex-start; }
.legend-rankings th:last-child,.legend-rankings td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.legend-rankings tbody td:last-child { color:var(--ink); font-size:24px; font-weight:750; }
.legend-profile { padding:18px 0; }
.legend-profile h2 { margin:0 0 8px; font-size:22px; line-height:1.3; overflow-wrap:anywhere; }
.legend-profile-overall { margin:0 0 18px; color:var(--acc2,#81aaff); font-size:22px; font-weight:700; }
.legend-profile-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.legend-profile-groups > div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; padding:10px; border:1px solid var(--line2,#303644); border-radius:10px; font-size:12px; }
.legend-profile-groups span { color:var(--mut); overflow-wrap:anywhere; }
.legend-profile-groups strong { font-size:18px; font-variant-numeric:tabular-nums; }
.legend-profile-nearest { font-size:14px; line-height:1.5; }
.legend-profile-skills { margin:20px 0 0; }
.legend-profile-skills > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line2,#303644); }
.legend-profile-skills dt { min-width:0; }
.legend-profile-skills dt strong,.legend-profile-skills dt span { display:block; overflow-wrap:anywhere; }
.legend-profile-skills dt strong { font-size:14px; line-height:1.4; }
.legend-profile-skills dt span { margin-top:3px; color:var(--mut); font-size:12px; line-height:1.4; }
.legend-profile-skills dd { margin:0; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
@media(max-width:400px){.legend-profile-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.friends-mode strong{font-size:15px}.friends-mode span{font-size:12px}}

/* The room provides status; the embedded builder provides the game controls. */
.legend-room-draft .duel-title{font-size:30px;margin-bottom:6px}
.legend-room-draft .duel-subtitle{font-size:14px;line-height:1.5;margin-bottom:14px}
.legend-room-progress{margin-bottom:12px}
.legend-friends-progress{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px}
.legend-friends-progress>span{min-width:0;max-width:100%;padding:6px 10px;border-radius:8px;background:#121722;color:var(--mut);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.legend-friends-progress>span.ready{color:var(--acc2,#81aaff)}
.legend-profile-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.legend-profile-top h2{margin:0;max-width:70%}
.legend-profile-overall{margin:0;text-align:right;flex-shrink:0;line-height:1}
.legend-profile-overall strong{display:block;font-size:40px;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.legend-profile-overall span{display:block;margin-top:7px;font-size:9px;letter-spacing:.8px;font-weight:600;color:var(--mut)}
.legend-profile-nearest{color:var(--mut);font-size:13px;line-height:1.6;margin:16px 0}
.legend-profile-details{margin-top:18px;border-top:1px solid var(--line2,#303644)}
.legend-profile-details summary{padding:16px 0;min-height:44px;cursor:pointer;color:var(--mut);font-size:14px}
.legend-profile-details summary:focus-visible{outline:2px solid var(--acc2,#81aaff);outline-offset:3px}
.legend-profile-details .legend-profile-skills{margin:0}
@media(max-width:500px){.legend-room-draft .duel-title{font-size:25px}.legend-room-draft .duel-subtitle{font-size:12px}.legend-profile-top h2{font-size:21px}.legend-profile-overall strong{font-size:36px}.legend-room-progress .friends-series.compact{margin-bottom:8px}.legend-room-progress .friends-series-scores{gap:2px 12px}.legend-friends-progress>span{font-size:11px}}