/* Participant information stays outside the game stage and its render lifecycle. */
.participant-join-links { display:flex; flex-wrap:wrap; justify-content:center; gap:0 16px; flex:none; max-width:420px; font:400 12px/1.4 var(--font-body); }
.participant-join-links a { display:flex; align-items:center; min-height:36px; color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; }
.participant-game-link { display:grid; place-items:center; width:36px; min-width:36px; height:44px; margin-block:-6px; flex:none; color:var(--text-dim); border-radius:8px; }
.participant-game-link svg { width:22px; height:22px; }
.phone-styled .game-top:has(.participant-game-link) { gap:10px; }
.phone-styled .game-top:has(.participant-game-link) .me-tag { min-width:0; }
.participant-recovery-link { display:flex; align-items:center; justify-content:center; min-height:36px; color:var(--text-dim); font:400 13px/1.4 var(--font-body); text-align:center; }
.player-connection:has(.participant-recovery-link) { align-items:safe center; }
.participant-game-link:hover,.participant-join-links a:hover,.participant-recovery-link:hover { color:var(--text); }
:is(.participant-game-link,.participant-join-links a,.participant-recovery-link):focus-visible { outline:2px solid var(--text); outline-offset:2px; }
.pi-dialog { width:min(640px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:20px; border:1px solid var(--line-strong); border-radius:var(--phone-radius,12px); background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.pi-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.pi-dialog::backdrop { background:rgba(var(--tint-ink,24,21,22),.78); }
.phone-styled[data-phone-layout='ewc26'] .pi-dialog { border-radius:4px; background:var(--bg); }
.pi-header { display:flex; align-items:center; gap:16px; flex:none; }
.pi-title { margin:0; font:700 22px/1.25 var(--font-body,system-ui); text-transform:none; letter-spacing:0; overflow-wrap:anywhere; }
.pi-close { margin-inline-start:auto; flex:none; }
.pi-nav { display:flex; flex-wrap:wrap; gap:6px 14px; flex:none; }
.pi-nav a { display:flex; align-items:center; min-height:36px; padding:3px 0; color:var(--text-dim); text-decoration:none; font:600 14px/1.4 var(--font-body,system-ui); border-bottom:2px solid transparent; }
.pi-nav a[aria-current='page'] { color:var(--text); border-bottom-color:var(--text); }
.pi-status { flex:none; margin:0; color:var(--text-dim); font:400 13px/1.45 var(--font-body,system-ui); overflow-wrap:anywhere; }
.pi-status:empty { display:none; }
:is(.pi-close,.pi-retry) { min-height:40px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface-2); color:var(--text); font:600 14px/1.4 var(--font-body,system-ui); cursor:pointer; }
.pi-retry { align-self:flex-start; flex:none; }
.pi-retry[hidden] { display:none; }
.pi-content { min-height:0; min-width:0; overflow-y:auto; overscroll-behavior:contain; font:400 15px/1.55 var(--font-body,system-ui); }
.pi-content h2 { margin:0 0 14px; font:700 20px/1.3 var(--font-body,system-ui); text-transform:none; letter-spacing:0; }
.pi-content h3 { margin:22px 0 6px; font:700 16px/1.4 var(--font-body,system-ui); text-transform:none; letter-spacing:0; }
.pi-content p { margin:0 0 12px; overflow-wrap:anywhere; }
.pi-content ul { margin:0 0 18px; padding-inline-start:20px; }
.pi-content li { margin-bottom:10px; overflow-wrap:anywhere; }
.pi-content a,.pi-back { color:var(--text); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.pi-back { display:inline-flex; align-items:center; min-height:36px; }
.pi-organiser-text { white-space:pre-wrap; }
.pi-contact-name { font-weight:700; }
:is(.pi-close,.pi-retry,.pi-nav a,.pi-content a,.pi-back):focus-visible { outline:2px solid var(--text); outline-offset:2px; }
.participant-page { min-height:100dvh; margin:0; background:var(--bg); color:var(--text); --font-body:system-ui,Arial,sans-serif; }
.pi-page-shell { width:min(100% - 40px,720px); margin:0 auto; padding:24px 0 40px; }
.pi-page-shell .pi-title { margin:24px 0 16px; }
.pi-page-shell .pi-status { margin:16px 0; }
.pi-page-shell .pi-retry { margin-bottom:16px; }
.pi-page-shell .pi-content { overflow:visible; }
.participant-page.phone-styled { --font-body:'Arena Phone',system-ui,Arial,sans-serif; }
.participant-page.phone-styled[data-phone-layout='ewc26'] { --font-body:'EWC Board','Arena Phone',Arial,sans-serif; }
.participant-page.phone-styled::before { position:fixed; }
.participant-page.phone-styled .pi-page-shell { position:relative; }
.participant-page.phone-styled .pi-title { font-size:30px; line-height:1.2; }
.participant-page.phone-styled .pi-back { font:600 14px/1.4 var(--font-body); padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); text-decoration:none; }
.participant-page.phone-styled .pi-nav { padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.participant-page.phone-styled .pi-content { padding:22px; border:1px solid var(--line); border-radius:var(--phone-radius); background:var(--surface); }
.participant-page.phone-styled[data-phone-layout='ewc26'] :is(.pi-back,.pi-content) { border-radius:4px; }
.participant-page.phone-styled[data-phone-layout='ewc26'] .pi-content { background:var(--bg); }
@media(max-height:450px) { .pi-dialog { padding:14px; gap:8px; } .pi-dialog .pi-nav a { min-height:32px; } }