.friend-game-lobby {width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #44464e;border-radius:18px;background:#161616;color:#eee;font-family:inherit;box-shadow:0 24px 90px #0009}
.friend-game-lobby::backdrop {background:#000b;backdrop-filter:blur(5px)}
.fl-header {display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid #ffffff12;background:#202020}
.fl-header h2 {margin:6px 0 0;font-size:24px;line-height:1.3;overflow-wrap:anywhere}
.fl-status {font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.1em;color:#d8bd84}
#fl-close {width:40px;height:40px;flex:none;border:1px solid #ffffff20;border-radius:10px;color:#eee;background:transparent;font-size:26px;cursor:pointer}
.fl-body {display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px 28px}
.friend-game-lobby h3 {margin:0 0 16px;font-size:15px}
#fl-details {margin:0} #fl-details>div {display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #ffffff0c;font-size:13px}
#fl-details dt,.fl-muted {color:#a8abb6} #fl-details dd {margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.fl-muted {font-size:12px;line-height:1.6;margin:16px 0}
.fl-roster-heading {display:flex;justify-content:space-between;gap:12px} #fl-count {font-size:12px;color:#a8abb6}
#fl-roster {list-style:none;padding:0;margin:0} #fl-roster li {display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #ffffff0c;font-size:13px} #fl-roster strong {flex:1;overflow-wrap:anywhere} #fl-roster li>span:last-child {color:#a8abb6;font-size:11px}
.fl-seat {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffffff0b;color:#d8bd84;flex:none}
.fl-footer {padding:20px 28px;border-top:1px solid #ffffff12;background:#202020} #fl-note {margin:0 0 12px;font-size:13px;color:#b4b4b4}
.fl-actions {display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.friend-game-lobby button {font-family:inherit}.fl-primary,.fl-secondary {min-height:42px;padding:10px 20px;border-radius:9px;border:1px solid #ffffff25;font-weight:700;cursor:pointer}.fl-primary {background:#d8bd84;color:#191711;border-color:#d8bd84}.fl-secondary {background:#2b2b2b;color:#e1e2e8}.friend-game-lobby button:hover:not(:disabled){filter:brightness(1.1)}.friend-game-lobby button:disabled{opacity:.45;cursor:default}
#fl-error {color:#f8a19c;font-size:13px;line-height:1.5} #fl-error:empty {display:none}
#fl-password-form {margin:12px 0 18px} #fl-password-form label {display:block;font-size:13px;margin-bottom:8px} #fl-password-form>div {display:flex;gap:10px} #fl-password {min-width:0;flex:1;background:#141414;color:#fff;border:1px solid #686a77;border-radius:8px;padding:10px;font-size:16px}
.friend-game-lobby [hidden] {display:none!important}
.fl-empty {padding:24px;border:1px solid #ffffff15;border-radius:12px;color:#b4b4b4}.fl-empty h3 {color:#eee;margin:0 0 8px}.fl-empty p {margin:0;font-size:13px}
@media(max-width:600px){.friend-game-lobby{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:6px}.fl-header,.fl-body,.fl-footer{padding:18px}.fl-body{grid-template-columns:1fr;gap:24px}.fl-header h2{font-size:20px}.fl-actions>button{flex:1}.fl-players{min-width:0}#fl-password-form>div{flex-wrap:wrap}#lg-list-body .fm-card-footer{flex-wrap:wrap;gap:12px}#lg-list-body .fm-variant{white-space:normal}}

#profile-section-tabs {display:flex;gap:6px;margin:0 0 22px;border-bottom:1px solid #ffffff18;padding-bottom:10px;flex-wrap:wrap}
#profile-section-tabs[hidden] {display:none}
#profile-section-tabs button {border:1px solid #ffffff15;border-radius:8px;background:#ffffff05;color:#aaaeb9;padding:10px 15px;font:600 13px/1.3 sans-serif;cursor:pointer}
#profile-section-tabs button[aria-pressed="true"] {background:#d8bd8420;color:#e7c28a;border-color:#d8bd8470}
#profile-body :is(#profile-mystats,#profile-handreviews) {margin:0;width:100%;border:0}
#profile-body [hidden] {display:none!important}
#s2-profile-hero {cursor:pointer} #s2-profile-hero:focus-visible {outline:2px solid #e7c28a;outline-offset:3px}
#btn-sidebar-mystats,#btn-sidebar-handreviews {display:none!important}
.hr-summary-only {cursor:default!important}

.friend-game-lobby {margin:auto;box-sizing:border-box}

/* The Overview wrapper retains the original profile's section spacing. */
#profile-body {gap:24px}
#profile-section-tabs {margin:0;padding-bottom:12px;gap:8px;align-items:center}
#profile-section-tabs button {min-height:40px;line-height:18px}
#profile-section-tabs button:focus-visible {outline:2px solid #e7c28a;outline-offset:-3px}
#profile-overview {display:flex;flex-direction:column;gap:24px;min-width:0;width:100%}
#profile-overview .profile-stats {gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
#profile-overview .profile-badges-section {gap:18px}
#profile-overview .profile-badges-grid {gap:16px}
#profile-overview .ach-grid {gap:12px}
@media(max-width:600px) {
 #profile-body,#profile-overview {gap:20px}
 #profile-section-tabs {gap:6px}
 #profile-section-tabs button {padding:10px 12px}
 #profile-overview .profile-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #profile-overview .ach-grid {grid-template-columns:minmax(0,1fr)}
}

/* Friend games sit between the introduction and bot-table picker. */
#lg-panel #lg-list-body {margin:24px 0!important}
@media(max-width:600px) {
 #lg-panel #lg-list-body {margin:20px 0!important}
}

#lg-list-body [data-action="game-lobby"] {min-height:38px;padding:0 1.1rem;border-radius:8px}

/* The invite, front and centre (Shaun, 2026-10-08): one screen for next steps after creating a game, with the treatment
   the old "Game link ready" page had: a big gold Copy Link, Enter Table beside it as the secondary button, the link
   itself, and who you're still waiting for. Shown while you're in and seats are open (assets/friend-lobby.js). */
.fl-share {padding:28px 28px 24px;text-align:center;border-bottom:1px solid #ffffff12;background:radial-gradient(ellipse at 50% 0%,#a970ff14,transparent 70%)}
.fl-share-icon {display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid #a970ff66;background:#2a1d44;color:#e9dcff;font-size:24px}
.friend-game-lobby .fl-share h3 {margin:14px 0 6px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.fl-share > p {margin:0 auto;max-width:46ch;color:#b4b4b4;font-size:13.5px;line-height:1.5}
.fl-share-actions {display:grid;grid-template-columns:1.4fr 1fr;gap:12px;max-width:560px;margin:20px auto 12px}
.fl-share-actions > button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:12px;font-size:16px}
.fl-share-actions .fl-primary {background:var(--muck-gold-cta,linear-gradient(#ffdf72,#ffcc3e));border-color:transparent;color:var(--muck-gold-ink,#0b1117)}
.fl-share-actions .fl-primary:hover:not(:disabled) {background:var(--muck-gold-cta-hover,linear-gradient(#ffe68f,#ffda62));filter:none}
.fl-share-actions .fl-secondary {background:transparent;border-color:#d8bd8480;color:#f2e6c9}
.fl-share-actions .material-symbols-rounded {font-size:20px}
.fl-linkbox {display:flex;align-items:center;gap:8px;max-width:560px;margin:0 auto;padding:6px 6px 6px 14px;border:1px solid #ffffff1a;border-radius:12px;background:#0f0f0f}
.fl-linkbox input {flex:1;min-width:0;border:0;background:none;color:#cfd2d6;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;text-overflow:ellipsis}
.fl-linkbox button {flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff1a;border-radius:9px;background:#1f1f1f;color:#e1e2e8;cursor:pointer}
.fl-linkbox button .material-symbols-rounded {font-size:18px}
.fl-share-pass {margin:10px auto 0!important;color:#e9dcff!important}
.fl-share-pass b {color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fl-waiting {display:inline-flex!important;align-items:center;gap:8px;margin:16px auto 0!important;padding:8px 16px;border:1px solid #d8bd8455;border-radius:999px;color:#d8bd84!important;font-size:11.5px!important;letter-spacing:.08em;text-transform:uppercase}
.fl-waiting b {font-weight:800}
.fl-waiting > span {width:7px;height:7px;border-radius:50%;background:#d8bd84;animation:fl-pulse 1.6s ease-in-out infinite}
@keyframes fl-pulse {50%{opacity:.25}}
@media(max-width:600px){.fl-share{padding:22px 18px 18px}.fl-share-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fl-waiting > span{animation:none}}
/* Leave table / Close table (open tables, 2026-10-12): a quiet text button at the left of the footer actions */
.fl-text{margin-right:auto;min-height:42px;padding:0 4px;border:0;background:none;color:#a7a9b0;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fl-text:hover{color:#f2f2f2}
.fl-text:focus-visible{outline:2px solid #ffd34f;outline-offset:2px}

/* The table's own waiting screen (includes/table-screen.php #waiting-overlay, table.js renderWaitingOverlay, 2026-10-12):
   N of M seated, the seated names, Fill with bots (host), Copy invite link, and a quiet Close / Leave table. */
#waiting-overlay .wt-count {margin:6px 0 0;font:700 13px/1.4 var(--muck-font);letter-spacing:.02em;color:var(--muck-gold-muted)}
#waiting-overlay .wt-seated {display:flex;flex-direction:column;gap:6px;margin:14px 0 0;padding:0;list-style:none;text-align:left}
#waiting-overlay .wt-seat {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:8px 12px;border:1px solid var(--muck-line);border-radius:var(--muck-radius);background:var(--muck-surface-2)}
#waiting-overlay .wt-seat-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px/1.3 var(--muck-font);color:var(--muck-text)}
#waiting-overlay .wt-seat-tag {flex:none;font:700 11px/1 var(--muck-font);letter-spacing:.06em;text-transform:uppercase;color:var(--muck-text-3)}
#waiting-overlay .wt-note {margin:10px 0 0;font:500 13px/1.45 var(--muck-font);color:var(--muck-text-2);overflow-wrap:anywhere}
#waiting-overlay .wt-note[hidden] {display:none}
#waiting-overlay .wt-actions {display:flex;flex-direction:column;gap:8px;margin-top:18px}
#waiting-overlay .wt-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:var(--muck-radius);font:800 14px/1 var(--muck-font);cursor:pointer}
#waiting-overlay .wt-btn .material-symbols-rounded {font-size:18px}
#waiting-overlay .wt-btn--gold {background:var(--muck-gold-cta);color:var(--muck-gold-ink)}
#waiting-overlay .wt-btn--gold:hover:not(:disabled) {background:var(--muck-gold-cta-hover);border-color:var(--muck-gold-cta-hover-line)}
#waiting-overlay .wt-btn--gold:disabled {cursor:progress;opacity:.75}
#waiting-overlay .wt-btn--ghost {border-color:var(--muck-line-strong);background:var(--muck-surface-3);color:var(--muck-text)}
#waiting-overlay .wt-btn--ghost:hover {border-color:var(--muck-gold-muted)}
#waiting-overlay .wt-text {align-self:center;min-height:40px;margin-top:2px;padding:0 6px;border:0;background:none;font:600 13px/1 var(--muck-font);color:var(--muck-text-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#waiting-overlay .wt-text:hover {color:var(--muck-text)}
#waiting-overlay :is(.wt-btn,.wt-text):focus-visible {outline:2px solid var(--muck-gold);outline-offset:2px}
#waiting-overlay :is(.wt-btn,.wt-text)[hidden] {display:none}
/* As a page (friend-lobby.js pageMode, 2026-10-17): under the lobby's Game Link Ready header, in the page's flow like the
   share box it replaced; the header above carries the title, so no title bar or close button of its own (Back to lobby). */
.friend-game-lobby.fl-page{position:static;inset:auto;width:auto;max-width:none;max-height:none;margin:var(--muck-space-4) 0 var(--muck-space-5);
  border-radius:var(--muck-radius-card);box-shadow:none;overflow:visible}
.friend-game-lobby.fl-page>.fl-header{display:none}
@media(max-width:719px){.friend-game-lobby.fl-page{margin:var(--muck-space-3) 0 var(--muck-space-4)}}
/* Phones: the game page's header without its card art, so the title and the strip read cleanly (as the sign-in panel) */
@media(max-width:719px){body #lobby-invite-view .invite-hero>.ls-hero-art{display:none}}

/* Compact (friend-lobby.js tags(); Shaun, 2026-10-18: "didnt we have a more compact design of this? this still uses old
   site artwork"): the old Game Link Ready hero goes; this card's own header leads, the game's name and one row of tags,
   with the setup page's lounge art small beside it. The invite sits right under it, without its icon and heading. */
.friend-game-lobby.fl-page>.fl-header{display:flex;align-items:center;gap:var(--muck-space-5);padding:22px 24px;background:var(--muck-surface-1)}
.friend-game-lobby.fl-page>.fl-header>div:first-child{flex:1 1 auto;min-width:0}
.friend-game-lobby.fl-page .fl-status,.friend-game-lobby.fl-page #fl-close{display:none}
.friend-game-lobby.fl-page .fl-header h2{margin:0;font:800 30px/1.15 var(--muck-font);letter-spacing:-.02em;color:var(--muck-text)}
.fl-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.fl-tags li{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-pill);background:var(--muck-surface-2);font:700 13px/1 var(--muck-font);color:var(--muck-text-2);white-space:nowrap}
.fl-tags .material-symbols-rounded{font-size:16px;color:var(--muck-gold)}
.fl-head-art{display:none}
.friend-game-lobby.fl-page .fl-head-art{display:grid;place-items:center;flex:none;width:220px;height:104px;border:1px solid var(--muck-warm-line);border-radius:var(--muck-radius);background:linear-gradient(#14201a88,#19251bee),url('lobby-art/lounge-objects-v9.webp') center/cover}
.fl-head-table{display:grid;place-items:center;width:132px;height:62px;border:5px solid #6a5135;border-radius:50%;background:radial-gradient(ellipse,#355947,#203c30);box-shadow:0 0 0 2px #998466,0 10px 14px #0008}
.fl-head-table b{font:900 15px/1 var(--muck-font);letter-spacing:.04em;color:#ffffff40}
.friend-game-lobby.fl-page .fl-share-icon,.friend-game-lobby.fl-page .fl-share h3,.friend-game-lobby.fl-page #fl-share-sub{display:none}
.friend-game-lobby.fl-page .fl-share-actions{margin-top:0}
#lobby-invite-view:has(>.friend-game-lobby.fl-page[open])>.invite-hero{display:none}
.friend-game-lobby.fl-page .fl-share{padding:24px 24px 20px}
.friend-game-lobby.fl-page .fl-share-actions{margin-top:14px}
@media(max-width:719px){.friend-game-lobby.fl-page>.fl-header{padding:18px}.friend-game-lobby.fl-page .fl-header h2{font-size:24px}.friend-game-lobby.fl-page .fl-head-art{display:none}.friend-game-lobby.fl-page .fl-share{padding:18px}}

/* The game page laid out like the tournament lobby (friend-lobby.js cards(); freeroll.css .frx-*): the old body and
   footer go, their pieces live in the cards now */
.friend-game-lobby.fl-page{border:0;background:none;padding:0}
.friend-game-lobby.fl-page>.fl-header{margin-bottom:16px;border:1px solid var(--muck-line);border-radius:var(--muck-radius-lg)}
.friend-game-lobby.fl-page>.fl-body,.friend-game-lobby.fl-page>.fl-footer,.friend-game-lobby.fl-page #fl-copy,.friend-game-lobby.fl-page #fl-start-note{display:none}
.fl-frx .frx-bottom{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.fl-frx .frx-cta{display:flex;flex-direction:column;gap:10px}
.friend-game-lobby.fl-page .fl-frx .fl-share{padding:0;border:0;background:none;text-align:left}
.fl-frx .fl-share-actions{grid-template-columns:1fr;gap:10px;max-width:none;margin:0}
.fl-frx .fl-share-actions>button{min-height:48px;font-size:15px}
.fl-frx .fl-linkbox{max-width:none;margin:10px 0 0}
.fl-frx .fl-waiting{margin:10px 0 0;justify-content:center;white-space:nowrap}
.fl-frx .fl-waiting b{font-size:11px;letter-spacing:.08em}
.fl-frx #fl-action{min-height:48px}
.fl-frx #fl-note,.fl-frx #fl-error{margin:0;font-size:12.5px;color:var(--muck-text-3)}
.fl-frx #fl-error:empty,.fl-frx #fl-note:empty{display:none}
.fl-frx #fl-error{color:var(--muck-red)}
.fl-frx .fl-seats .fl-players{min-width:0}
.fl-frx .fl-open-seat strong{color:var(--muck-text-3);font-weight:600}
.fl-frx .fl-hostcard[hidden]{display:none}
.fl-frx .fl-host-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fl-frx .fl-host-actions>button{min-height:44px}
.fl-frx .fl-host-actions>button[hidden]{display:none}
@media(max-width:980px){.fl-frx .frx-bottom{grid-template-columns:1fr}}
/* Phones and narrow screens: the invite first (Copy Link, Enter Table), then the details, then the buy-in */
@media(max-width:760px){.fl-frx .frx-side{order:-3}.fl-frx .frx-info{order:-2}}
/* Two columns (761-1180px): the invite and the buy-in side by side, the details full width under them */
@media(min-width:761px) and (max-width:1180px){.fl-frx .frx-side{order:-3}.fl-frx .frx-prize{order:-2}.fl-frx .frx-info{order:-1;grid-column:1/-1}}
/* ...and there the start box sits at the foot of the buy-in card, beside the taller invite card, not in the details */
.fl-when-alt{display:none}
@media(min-width:761px) and (max-width:1180px){.fl-frx .fl-when-alt{display:block;margin-top:auto;padding-top:16px}.fl-frx #fl-when{display:none}}
.fl-frx .fl-hostcard .frx-list-head{padding:0}
