/* One invitation surface for every game; the game retains geometry and rules.
   Three weights: the invite area (one solid action), two "play here" pictures,
   and one quiet line for the friend who is joining. */
/* No outline: the shadow lifts the card. Inner radii step down concentrically (26 → 16 → 12). */
.react-invitation[data-invitation-card] { padding:12px; border-color:transparent; border-radius:26px; color:var(--invite-code); box-shadow:0 2px 4px #312d210d,0 18px 36px #312d211f; font-family:var(--sans); }
.react-invitation.invite-panel { top:52%; bottom:auto; }
.react-invitation[hidden], .react-invitation [hidden] { display:none!important; }
.react-invitation .react-invitation-mount, .react-invitation .react-invitation-body { width:100%; min-width:0; }
.react-invitation .react-invitation-body { padding:0; font:400 14px/1.4 var(--sans); color:var(--invite-text); }
.react-invitation h2 { margin:0; color:var(--invite-code); font:600 20px/26px var(--serif); letter-spacing:-.01em; text-align:left; }
.react-invitation h2:focus { outline:none; }
.react-invitation p { margin:8px 0; }
/* Visually hidden but announced. Zero margin and min-height keep it from adding scroll height
   at the card's bottom (it used to add 16px and a scrollbar on short windows). */
.react-invitation .invitation-sr { position:absolute; width:1px; height:1px; min-height:0; margin:0!important; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.react-invitation button, .react-invitation input, .react-invitation select { min-width:var(--control-target); min-height:var(--control-target); border:1px solid var(--invite-line); border-radius:12px; padding:10px 12px; color:var(--invite-text); background:var(--invite-surface); font:500 15px/1.35 var(--sans); }
.react-invitation button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.react-invitation button:active:not(:disabled) { transform:scale(.985); }
.react-invitation button:focus-visible, .react-invitation input:focus-visible, .react-invitation select:focus-visible { outline:3px solid var(--invite-action); outline-offset:2px; }
.react-invitation button:disabled { cursor:default; }
.react-invitation button svg { display:block; flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.react-invitation .invitation-art { display:block; flex:none; width:108px; height:60px; object-fit:contain; user-select:none; }

/* Primary actions */
.react-invitation .invite-primary { display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; border:0; border-radius:12px; color:#fff; background:var(--invite-action); font-size:16px; font-weight:650; box-shadow:0 1px 2px #1f3b3040; transition:transform .08s; }
/* No colour transition: enabling a just-revealed action must not fade in from the disabled colour. */
.react-invitation .invite-primary:hover:not(:disabled) { background:var(--invite-action-hover); }
.react-invitation .invite-primary:disabled { color:var(--invite-muted); background:var(--paper-deep); box-shadow:none; opacity:1; }
.react-invitation .invite-primary svg { width:18px; height:18px; }
.react-invitation svg.invitation-play-icon { width:15px; height:15px; fill:currentColor; stroke:none; }
.react-invitation .invite-secondary { color:var(--invite-code); background:var(--invite-surface); box-shadow:inset 0 0 0 1.5px var(--invite-line); }
.react-invitation .invite-secondary svg { color:var(--invite-action); }
.react-invitation .invite-secondary:hover:not(:disabled) { color:var(--invite-code); background:var(--surface); }

/* 1 · Invite area: the only tinted surface; nothing inside it has a border. */
.react-invitation .invitation-zone { padding:10px 12px 6px; border-radius:16px; background:var(--invite-soft); }
.react-invitation .invitation-lead { display:flex; align-items:center; gap:8px; margin:0 0 10px -6px; }
.react-invitation .invite-actions { display:flex; align-items:stretch; gap:8px; margin:0; }
.react-invitation .mp-connection-share { padding-top:0; border-top:0; }
.react-invitation #copy-link { flex:1 1 auto; min-width:0; padding:0 12px; }
.react-invitation #copy-link[data-copied] { background:var(--invite-action-hover); }
.react-invitation .invitation-share { display:grid; flex:0 0 52px; width:52px; height:52px; place-items:center; padding:0; border:0; border-radius:12px; color:var(--invite-action); background:var(--invite-surface); }
.react-invitation .invitation-share:hover:not(:disabled) { background:var(--surface); }
.react-invitation .invitation-alt { display:flex; align-items:center; justify-content:center; gap:2px; margin:2px 0 0; }
.react-invitation .invitation-alt > button { display:inline-flex; align-items:center; gap:7px; min-width:0; padding:0 12px; border:0; border-radius:10px; background:transparent; color:var(--invite-text); font:600 14px/1 var(--sans); white-space:nowrap; }
.react-invitation .invitation-alt > button:hover:not(:disabled) { background:#ffffff8c; }
.react-invitation .invitation-alt > button:disabled { opacity:1; }
.react-invitation .invitation-alt svg { width:17px; height:17px; color:var(--invite-action); }
.react-invitation #qr-toggle[aria-expanded="true"] { color:var(--invite-action); background:var(--invite-surface); }
.react-invitation .invitation-alt-divider { flex:none; width:1px; height:16px; background:#cfdbd2; }
/* Two fixed columns: the code's preparing, ready and failed states never shift the row. */
.react-invitation .invitation-alt-pair { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); }
.react-invitation .invitation-alt-pair > button { justify-content:center; width:100%; }
/* The code needs no "Code" label: mono letters plus the copy mark already say what it is. */
.react-invitation #room-code { min-height:0; color:var(--invite-text); font:500 14.5px/1 var(--mono); letter-spacing:.06em; user-select:all; }
.react-invitation .invite-code-row > svg { width:15px; height:15px; color:var(--invite-muted); }
.react-invitation .invite-code-row[data-copied] > svg { color:var(--invite-action); }
.react-invitation .invite-code-row[data-state="failed"] #room-code, .react-invitation .invite-code-row[data-state="expired"] #room-code { font:500 14px/1.4 var(--sans); letter-spacing:0; user-select:auto; }
.react-invitation .invite-code-loading { display:grid; width:16px; height:16px; place-items:center; color:var(--invite-action); }
.react-invitation .invite-code-loading > span { width:13px; height:13px; border:2px solid #c3cfc7; border-top-color:currentColor; border-radius:50%; animation:invite-code-spin 1s linear infinite; }
.react-invitation #invite-qr { display:flex; flex-direction:column; align-items:center; gap:4px; margin:2px 0 6px; padding:12px 12px 8px; border-radius:12px; background:var(--invite-surface); }
.react-invitation #invite-qr p { margin:0; color:var(--invite-muted); font-size:13px; }
.react-invitation #invite-qr canvas { width:min(100%,216px); height:auto; image-rendering:pixelated; }
.react-invitation .invite-link-fallback { display:block; width:100%; min-width:0; min-height:var(--control-target); margin:6px 0; padding:10px 12px; border:1px solid var(--invite-line); border-radius:12px; background:var(--invite-surface); color:var(--invite-code); font:400 14px/1.4 var(--sans); }
/* Group QR is a square icon beside Share (same size and style as Share). */
.react-invitation .invite-share-row > #qr-toggle[aria-expanded="true"] { box-shadow:inset 0 0 0 2px var(--invite-action); }
.react-invitation #copy-link { height:52px; }

/* Group lobby, after the first friend joins: the same row steps back (44px, pale tint), nothing moves. */
.react-invitation [data-compact] .invite-share-row > button { height:44px; min-height:44px; border-radius:11px; }
.react-invitation [data-compact] .invite-share-row > .invitation-share { flex-basis:44px; width:44px; }
.react-invitation [data-compact] .invite-share-row svg { width:18px; height:18px; }
.react-invitation [data-compact] #copy-link { height:44px; min-height:44px; color:var(--invite-action); background:var(--invite-tint); font-size:14.5px; font-weight:600; box-shadow:none; }
.react-invitation [data-compact] #copy-link:hover:not(:disabled), .react-invitation [data-compact] #copy-link[data-copied] { background:var(--invite-tint-hover); }
.react-invitation [data-compact] #copy-link:disabled { color:var(--invite-muted); background:var(--paper-deep); }
/* Transitions run only while the lobby changes state, so loading or enabling never fades in. */
.react-invitation [data-settling] .invite-share-row > button { transition:height .4s var(--invite-ease), min-height .4s var(--invite-ease), flex-basis .4s var(--invite-ease), width .4s var(--invite-ease), border-radius .4s var(--invite-ease), background-color .4s var(--invite-ease), color .4s var(--invite-ease), font-size .4s var(--invite-ease), box-shadow .4s var(--invite-ease); }
.react-invitation [data-settling] .invite-share-row svg { transition:width .4s var(--invite-ease), height .4s var(--invite-ease); }

/* Seats: you (green), friends (warm), open seats dashed. Text sits right so seat changes never push it. */
.react-invitation { --invite-ease:cubic-bezier(.3,.7,.2,1); }
.react-invitation .invitation-seats { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:28px; margin:-4px 2px 10px; color:var(--invite-text); font:500 13.5px/1.35 var(--sans); }
.react-invitation .invitation-seats strong { color:var(--invite-code); font-weight:650; }
/* Seats never shrink; on narrow cards the text wraps to its own line, still right-aligned, instead of overlapping. */
.react-invitation .invitation-seat-row { display:flex; flex:none; align-items:center; }
.react-invitation .invitation-seat { flex:none; width:26px; height:26px; margin-left:4px; transition:width .4s var(--invite-ease) .28s, margin .4s var(--invite-ease) .28s, opacity .2s .5s; }
.react-invitation .invitation-seat:first-child { margin-left:0; }
.react-invitation [data-mode="stack"] .invitation-seat:not(:first-child) { margin-left:-6px; }
.react-invitation .invitation-seat svg { display:block; width:26px; height:26px; overflow:visible; }
.react-invitation .seat-fill { fill:var(--invite-friend); transform:scale(0); transform-box:fill-box; transform-origin:center; transition:transform .45s cubic-bezier(.3,1.35,.5,1); }
.react-invitation .seat-ring { fill:none; stroke:var(--invite-seat-open); stroke-width:2; stroke-dasharray:4.5 3.04; transition:stroke .4s, stroke-dasharray .4s; }
.react-invitation .invitation-seat[data-you] .seat-fill { fill:var(--invite-action); }
.react-invitation .invitation-seat[data-filled] .seat-fill { transform:scale(1); }
.react-invitation .invitation-seat[data-filled] .seat-ring { stroke:var(--invite-soft); stroke-dasharray:7.54 0; }
.react-invitation .invitation-seat[data-next]:not([data-filled]) .seat-ring { animation:invite-seat-wait 2s ease-in-out infinite; }
/* Large tables: a new seat splits off the "+N" pill, then fills; a leaving seat empties, then merges back. */
.react-invitation .invitation-seat[data-new] { animation:invite-seat-split .4s var(--invite-ease) both; }
.react-invitation .invitation-seat[data-new] .seat-fill { animation:invite-seat-fill .45s cubic-bezier(.3,1.35,.5,1) .22s both; }
.react-invitation .invitation-seat[data-new] .seat-ring { animation:invite-seat-close .4s .22s both; }
.react-invitation .invitation-seat[data-leaving] { width:0; margin-left:0!important; opacity:0; }
.react-invitation .invitation-seat[data-leaving] .seat-fill { transform:scale(0); }
.react-invitation .invitation-seat[data-leaving] .seat-ring { stroke:var(--invite-seat-open); stroke-dasharray:4.5 3.04; }
.react-invitation .invitation-seat-pill { flex:none; display:inline-grid; place-items:center; box-sizing:border-box; height:26px; min-width:34px; margin-left:4px; padding:0 7px; border:2px dashed var(--invite-seat-open); border-radius:13px; color:var(--invite-action); font:700 11.5px/1 var(--sans); overflow:hidden; transition:min-width .4s var(--invite-ease), padding .4s var(--invite-ease), margin .4s var(--invite-ease), border-width .4s var(--invite-ease), opacity .25s; animation:invite-pill-wait 2s ease-in-out infinite; }
.react-invitation .invitation-seat-pill[data-gone] { min-width:0; width:0; padding:0; margin-left:0; border-width:0; opacity:0; }
.react-invitation .invitation-seats-text { margin-left:auto; text-align:right; white-space:nowrap; }
@keyframes invite-seat-wait { 50% { stroke:var(--invite-action); } }
@keyframes invite-pill-wait { 50% { border-color:var(--invite-action); } }
@keyframes invite-seat-split { from { width:0; margin-left:0; opacity:0; } }
@keyframes invite-seat-fill { from { transform:scale(0); } }
@keyframes invite-seat-close { from { stroke:var(--invite-seat-open); stroke-dasharray:4.5 3.04; } }

/* Text that changes in place: numbers roll (up on join, down on leave), phrases crossfade. */
.react-invitation .invitation-roll { display:inline-grid; vertical-align:bottom; overflow:hidden; }
.react-invitation .invitation-seats-text > .invitation-roll { justify-items:end; }
.react-invitation .invitation-roll > * { grid-area:1/1; white-space:nowrap; }
.react-invitation .invitation-roll > .in { animation:var(--roll-in) .32s var(--invite-ease) both; }
.react-invitation .invitation-roll > .out { animation:var(--roll-out) .32s var(--invite-ease) both; }
.react-invitation .invitation-roll[data-kind="num"] { --roll-in:invite-roll-in-up; --roll-out:invite-roll-out-up; }
.react-invitation .invitation-roll[data-kind="num"][data-dir="down"] { --roll-in:invite-roll-in-down; --roll-out:invite-roll-out-down; }
.react-invitation .invitation-roll[data-kind="fade"] { --roll-in:invite-fade-in; --roll-out:invite-fade-out; }
@keyframes invite-roll-in-up { from { transform:translateY(70%); opacity:0; } }
@keyframes invite-roll-out-up { to { transform:translateY(-70%); opacity:0; } }
@keyframes invite-roll-in-down { from { transform:translateY(-70%); opacity:0; } }
@keyframes invite-roll-out-down { to { transform:translateY(70%); opacity:0; } }
@keyframes invite-fade-in { from { opacity:0; transform:translateY(3px); } }
@keyframes invite-fade-out { to { opacity:0; transform:translateY(-3px); } }

/* Collapsible regions: the tiles + Join give their space to Start; a full table folds the invite row away. */
.react-invitation .invitation-swap, .react-invitation .invitation-collapse { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; }
.react-invitation .invitation-swap > div, .react-invitation .invitation-collapse > div { min-width:0; min-height:0; overflow:hidden; }
/* Open regions inherit visibility, so a hidden pane (Computer page) still hides them. */
.react-invitation .invitation-swap[data-open], .react-invitation .invitation-collapse[data-open] { grid-template-rows:1fr; opacity:1; visibility:inherit; }
/* overflow:hidden would clip focus rings and the press scale; open regions let them show. */
.react-invitation .invitation-swap[data-open]:not(:is([data-settling] *)) > div, .react-invitation .invitation-collapse[data-open] > div { overflow:visible; }
.react-invitation [data-settling] .invitation-swap { transition:grid-template-rows .4s var(--invite-ease), opacity .2s, visibility 0s .4s; }
.react-invitation [data-settling] .invitation-swap[data-open] { transition:grid-template-rows .4s var(--invite-ease), opacity .3s .12s, visibility 0s; }
.react-invitation .invitation-collapse { transition:grid-template-rows .4s var(--invite-ease), opacity .25s, visibility 0s .4s; }
.react-invitation .invitation-collapse[data-open] { transition:grid-template-rows .4s var(--invite-ease), opacity .3s .1s, visibility 0s; }
.react-invitation .invitation-start { width:100%; margin-top:8px; }

/* 2 · Play here: two equal pictures. ▶ starts at once, › opens settings. */
.react-invitation .invitation-play-here { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:8px; margin-top:8px; }
/* 2 · Tiles: a pale tint of the invite green, no outline. Grey would read as disabled
   (disabled Copy uses --paper-deep), so the fill, dark label and solid marks all say "available". */
.react-invitation .invitation-play-here > button { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:8px; border:0; border-radius:16px; background:var(--invite-tile); box-shadow:none; transition:background-color .15s,transform .1s; }
.react-invitation .invitation-play-here > button:hover { background:var(--invite-tile-hover); }
.react-invitation .invitation-play-here > button:active:not(:disabled) { transform:scale(.97); }
.react-invitation .invitation-play-here .invitation-art { width:92px; height:51px; }
.react-invitation .invitation-play-here > button:only-child { flex-direction:row; justify-content:flex-start; gap:12px; padding:6px 14px 6px 8px; }
.react-invitation .invitation-play-here > button:only-child .invitation-tile-label { flex:1; justify-content:space-between; }
.react-invitation .invitation-tile-label { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--invite-code); font:600 14px/20px var(--sans); white-space:nowrap; }
.react-invitation .invitation-play-badge { display:grid; flex:none; width:20px; height:20px; place-items:center; border-radius:50%; color:#fff; background:var(--invite-action); }
.react-invitation .invitation-play-badge svg.invitation-play-icon { width:9px; height:9px; margin-left:1px; }
.react-invitation .invitation-chevron { width:17px; height:17px; color:var(--invite-muted); }
/* › on a tile is a solid disc, a sibling of ▶: both read as "tap"; the shape still says start vs open. */
.react-invitation .invitation-play-here .invitation-chevron { width:20px; height:20px; padding:3px; border-radius:50%; background:var(--invite-action); color:#fff; stroke-width:3; }

/* 3 · The friend's way in */
.react-invitation .invitation-join-line { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:4px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--invite-muted); font:600 14px/1.3 var(--sans); }
.react-invitation .invitation-join-line:hover { color:var(--invite-code); background:var(--paper); }
.react-invitation .invitation-join-line .invitation-chevron { margin-left:-3px; }

/* Single-task pages: Join, Computer, local player count */
.react-invitation .invitation-back { display:inline-flex; align-items:center; gap:2px; margin:-4px 0 2px -4px; padding:0 12px 0 4px; border:0; border-radius:12px; background:transparent; color:var(--invite-text); font:600 14px/1 var(--sans); }
.react-invitation .invitation-back:hover { background:var(--paper); }
.react-invitation .invitation-back svg { color:var(--invite-code); }
.react-invitation .invitation-page-title { margin:0 4px 14px; font-size:22px; line-height:28px; }
.react-invitation[data-invitation-card]:has([data-panel="join"], [data-panel="local"]) { padding:14px 16px 16px; }
/* Invite and Computer share one grid cell: switching keeps the card height, so the board never moves. */
.react-invitation .invitation-panes { display:grid; }
.react-invitation .invitation-panes > .invitation-pane { grid-area:1/1; min-width:0; }
.react-invitation .invitation-pane[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.react-invitation .invitation-computer { display:flex; flex-direction:column; padding:2px 4px 0; }
.react-invitation .invitation-computer #computer-start { margin-top:auto; }
.react-invitation .invitation-scan-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; border:0; border-radius:14px; background:var(--invite-soft); color:var(--invite-code); font:650 16px/1 var(--sans); }
.react-invitation .invitation-scan-button:hover { background:#e2eae4; }
.react-invitation .invitation-scan-button svg { color:var(--invite-action); }
.react-invitation .invitation-camera { position:relative; height:236px; overflow:hidden; border-radius:16px; background:#1a201d; }
.react-invitation .invitation-camera video { width:100%; height:100%; object-fit:cover; }
.react-invitation .invitation-camera-frame { position:absolute; left:50%; top:50%; width:150px; height:150px; transform:translate(-50%,-50%); border-radius:18px; box-shadow:0 0 0 999px #0000004d; outline:3px solid #ffffffe6; outline-offset:-3px; }
.react-invitation .invitation-camera-close { position:absolute; top:8px; right:8px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#0000008c; color:#fff; }
.react-invitation .invitation-scan-note { margin:8px 4px 0; color:var(--invite-muted); font-size:13px; text-align:center; }
.react-invitation .invitation-scan-note:empty { display:none; }
.react-invitation .invitation-scan-hint { display:flex; align-items:center; gap:10px; margin:0; padding:14px; border-radius:14px; background:var(--invite-soft); color:var(--invite-text); font-size:14px; }
.react-invitation .invitation-scan-hint svg { flex:none; width:20px; height:20px; fill:none; stroke:var(--invite-action); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.react-invitation .invitation-or { display:flex; align-items:center; gap:10px; margin:14px 6px; color:var(--invite-muted); font:600 12.5px/1 var(--sans); }
.react-invitation .invitation-or::before, .react-invitation .invitation-or::after { content:''; flex:1; height:1px; background:var(--invite-line); }
.react-invitation #join-form { display:grid; gap:8px; }
.react-invitation .invitation-join-entry { display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:8px; }
.react-invitation #invite-input { width:100%; min-height:52px; border-width:1.5px; border-radius:14px; color:var(--invite-code); }
.react-invitation #invite-input:focus { border-color:var(--invite-action); outline:0; box-shadow:0 0 0 3px #2e5a4722; }
.react-invitation #invite-input[data-code="true"] { font:600 19px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; }
.react-invitation #invite-input::placeholder { color:var(--invite-muted); font:500 15px/1 var(--sans); letter-spacing:0; text-transform:none; opacity:.85; }
.react-invitation #join-button { padding:0; }
.react-invitation .invite-error { margin:0 4px; }
.react-invitation .invitation-settings { margin:0 0 14px; border:1px solid var(--invite-line); border-radius:18px; }
.react-invitation #invite-computer > .invite-primary, .react-invitation #play-local { width:100%; }
.react-invitation #invite-computer .computer-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; min-height:64px; padding:6px 12px; }
.react-invitation #invite-computer .computer-row > span { flex:none; color:var(--invite-muted); font-size:14px; font-weight:600; }
.react-invitation #invite-computer #level-options { display:flex; flex-wrap:nowrap; gap:2px; padding:3px; border-radius:12px; background:var(--paper-deep); }
.react-invitation #invite-computer #level-options button { min-width:44px; min-height:44px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--invite-muted); font:500 14px/1 var(--sans); }
.react-invitation #invite-computer #level-options button[aria-checked="true"] { color:var(--invite-code); font-weight:650; background:var(--invite-surface); box-shadow:0 1px 2px #503c1e24; }
.react-invitation #invite-computer .computer-side-row { min-height:56px; border-top:1px solid var(--invite-line); }
.react-invitation #computer-side { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px; min-width:0; min-height:44px; padding:6px 0; border:0; background:none; color:var(--invite-muted); font:500 14px/1.3 var(--sans); }
.react-invitation #computer-side:hover strong { color:var(--invite-action-hover); }
.react-invitation #computer-side .side-pip { flex:none; width:18px; height:18px; }
.react-invitation #computer-side strong { color:var(--invite-code); font-weight:650; }
.react-invitation #computer-side .side-symbol[data-color="o"] { color:var(--accent); }
.react-invitation #computer-side #side-order { min-width:0; color:var(--invite-muted); font-size:13px; }
.react-invitation #computer-side .side-swap { flex:none; margin-left:2px; color:var(--invite-text); font-size:20px; }
.react-invitation #local-options { display:grid; gap:8px; margin:0 4px 16px; }
.react-invitation #local-options > span { color:var(--invite-muted); font-size:14px; font-weight:600; }
.react-invitation #player-count, .react-invitation #level-options { display:flex; flex-wrap:wrap; gap:4px; }
.react-invitation #player-count button[aria-checked="true"] { color:var(--invite-action); border-color:var(--invite-action); background:var(--invite-soft); }

.react-invitation #invite-status { margin:8px 4px 0; color:var(--invite-muted); font:400 14px/1.4 var(--sans); text-align:center; }
.react-invitation #invite-status:empty { display:none; }
.react-invitation #invite-status[role="alert"], .react-invitation .invite-error { color:var(--warn-ink); }
.react-invitation .invite-retry { width:100%; margin-top:8px; }

/* Card width varies by game (Battleship's board is narrower), so adapt to the card, not the viewport. */
.react-invitation .react-invitation-body { container-type:inline-size; }
@container (max-width:320px) {
  .react-invitation .invitation-alt > button { gap:6px; padding:0 6px; font-size:13.5px; }
}
@container (max-width:280px) {
  .react-invitation .invitation-zone .invitation-art { width:84px; height:47px; }
  .react-invitation .invitation-lead h2 { font-size:18px; }
}
/* Taller reference controls stay reachable without reducing their targets. */
@media (max-height:680px) {
  .react-invitation[data-invitation-card] { max-height:calc(100dvh - 88px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .react-invitation.invite-panel:has(.invite-qr:not([hidden])) { position:fixed; top:64px; bottom:auto; left:50vw; width:min(var(--invitation-card-width),calc(100vw - 32px)); }
}
@media (max-height:520px) {
  .mp-connection-stage > .react-invitation[data-invitation-card] { position:fixed; top:64px; bottom:auto; left:50vw; width:min(var(--invitation-card-width),calc(100vw - 32px)); margin:0; transform:translateX(-50%); }
  .react-invitation.invite-panel { position:fixed; top:64px; bottom:auto; left:50vw; width:min(var(--invitation-card-width),calc(100vw - 32px)); }
}
@media (min-height:681px) {
  .mp-connection-stage > .react-invitation { align-self:start; margin-top:clamp(120px,26vw,240px); }
}
@media (prefers-reduced-motion:reduce) {
  .react-invitation *, .react-invitation *::before, .react-invitation *::after { scroll-behavior:auto!important; transition:none!important; }
  .react-invitation button:active:not(:disabled) { transform:none; }
  .react-invitation .invite-code-loading > span, .react-invitation .invitation-seats *, .react-invitation .invitation-roll > * { animation:none!important; }
}
@keyframes invite-code-spin { to { transform:rotate(360deg); } }