[hidden] { display:none !important; }

:root, :root[data-theme="dark"] {
  --bg:#17191B; --surface:#212427; --surface-2:#2C3034; --card:#2A2E32;
  --text:#ECE8E1; --muted:#A8A39C; --accent:#C8875A; --on-accent:#1B120C; --accent-2:#5F7566;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.22);
  --shadow:0 14px 32px rgba(0,0,0,0.45); --back-line:rgba(236,232,225,0.55);
  --bronze:#B07A52; --silver:#A9ADB1; --gold:#D3AE62; --plat:#9DB4C0;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F6F1EC; --surface:#FFFFFF; --surface-2:#EEE5DD; --card:#FFFFFF;
    --text:#3A2F2B; --muted:#7A6A62; --accent:#D4917F; --on-accent:#3A1F18; --accent-2:#AEBFAD;
    --line:rgba(70,45,35,0.10); --line-strong:rgba(70,45,35,0.25);
    --shadow:0 14px 32px rgba(120,80,60,0.14); --back-line:rgba(255,255,255,0.85);
    --bronze:#A8714A; --silver:#8E9296; --gold:#B8903F; --plat:#7E98A6;
  }
}
:root[data-theme="light"] {
  --bg:#F6F1EC; --surface:#FFFFFF; --surface-2:#EEE5DD; --card:#FFFFFF;
  --text:#3A2F2B; --muted:#7A6A62; --accent:#D4917F; --on-accent:#3A1F18; --accent-2:#AEBFAD;
  --line:rgba(70,45,35,0.10); --line-strong:rgba(70,45,35,0.25);
  --shadow:0 14px 32px rgba(120,80,60,0.14); --back-line:rgba(255,255,255,0.85);
  --bronze:#A8714A; --silver:#8E9296; --gold:#B8903F; --plat:#7E98A6;
}
:root { box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html { scroll-padding-top:env(safe-area-inset-top,0px); }
*, *::before, *::after { box-sizing:inherit; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans', 'Helvetica Neue', Arial, sans-serif; font-size:16px; line-height:1.5; transition:background .4s ease, color .4s ease; -webkit-font-smoothing:antialiased; }
button { font-family:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
a { color:var(--accent); }
.display { font-family:'Outfit', sans-serif; font-weight:300; letter-spacing:-0.02em; }
.label { font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.muted { color:var(--muted); }

.btn { min-height:48px; padding:0 24px; border-radius:999px; font-size:16px; font-weight:600; border:1px solid var(--line-strong); background:transparent; color:var(--text); transition:background .3s ease, transform .2s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:700; }
.btn.big { min-height:56px; font-size:17px; padding:0 32px; }
.btn.small { min-height:40px; padding:0 16px; font-size:14px; }
.btn[disabled] { opacity:.45; cursor:default; }

.toggle { display:inline-flex; padding:4px; gap:4px; border-radius:999px; background:var(--surface-2); }
.toggle button { width:46px; height:40px; border-radius:999px; border:none; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease; }
.toggle button[aria-pressed="true"] { background:var(--surface); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.12); }
:root[data-theme="dark"] .toggle button[aria-pressed="true"] { background:#3A3F44; }

/* Welcome */
#welcome { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; text-align:center; gap:28px; }
.hero { position:relative; width:260px; height:190px; }
.hero > div { position:absolute; left:50%; top:50%; }
.pcard { width:96px; height:136px; border-radius:15px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; justify-content:space-between; }
.pcard .num { font-family:'Outfit', sans-serif; font-size:28px; line-height:1; }
.pcard .pip { align-self:center; width:22px; height:22px; border-radius:50%; background:var(--accent); }
.pcard .num.flip { align-self:flex-end; transform:rotate(180deg); }
.pback { width:96px; height:136px; border-radius:15px; background:var(--accent-2); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; }
.ring { border-radius:50%; border:1.5px solid var(--back-line); display:flex; align-items:center; justify-content:center; }
.die { width:70px; height:70px; border-radius:18px; background:var(--surface-2); box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(3,1fr); padding:13px; gap:3px; }
.die i { width:10px; height:10px; border-radius:50%; background:var(--text); justify-self:center; align-self:center; }
.die i.c { background:var(--accent); }
.die i.e { background:transparent; }
.brand { display:flex; flex-direction:column; align-items:center; gap:8px; }
.brand h1 { margin:0; font-family:'Outfit', sans-serif; font-weight:300; font-size:clamp(52px, 12vw, 84px); letter-spacing:-0.03em; line-height:1; }
.brand p { margin:0; max-width:340px; color:var(--muted); }
.w-actions { display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px; }
.note { font-size:14px; color:var(--muted); max-width:340px; }

/* App shell */
#app { display:none; min-height:100%; }
.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); transition:background .4s ease; }
.top-inner { max-width:760px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { display:flex; align-items:center; gap:10px; font-family:'Outfit', sans-serif; font-size:22px; font-weight:400; letter-spacing:-0.02em; }
.logo-mark { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; }
.logo-mark span { width:12px; height:12px; border-radius:50%; background:var(--accent); }
main { max-width:760px; margin:0 auto; padding:8px 20px 120px; }
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:6; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, var(--bg) 70%, transparent); }
.tabs-inner { max-width:480px; margin:0 auto; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:6px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.tabs button { min-height:52px; border:none; border-radius:999px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:background .3s ease, color .3s ease; }
.tabs button[aria-current="page"] { background:var(--surface-2); color:var(--text); }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:22px; }
.section { margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.section h2 { margin:0; font-family:'Outfit', sans-serif; font-weight:400; font-size:24px; letter-spacing:-0.02em; }
.greet { margin:12px 0 0; font-family:'Outfit', sans-serif; font-weight:300; font-size:clamp(34px, 7vw, 46px); letter-spacing:-0.03em; line-height:1.05; }

.tokenav { flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Outfit', sans-serif; font-weight:500; color:#1B1712; }
.stats3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.stat .v { font-family:'Outfit', sans-serif; font-size:30px; line-height:1.1; letter-spacing:-0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat .k { font-size:13px; color:var(--muted); }

.games { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.game { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.game .art { height:118px; border-radius:20px; background:var(--surface-2); position:relative; overflow:hidden; }
/* Game covers (covers.js): each game's own "moment in play" artwork, drawn with the theme tokens below. */
.game .art.cover { height:auto; aspect-ratio:8 / 5; background:var(--surface); }
.art.cover { outline:1px solid var(--line); outline-offset:-1px; }
.art.cover .cover-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.vote .art.cover { background:var(--surface); }
:root, :root[data-theme="dark"] { --cv-line:rgba(255,255,255,0.10); --cv-red:#D99A70; --cv-blue:#86A3C4; --cv-amber:#D8AE5A; --cv-sq:#B8A891; --cv-pw:#ECE8E1; --cv-pb:#141618; --cv-ps:rgba(0,0,0,0.35); --cv-shc:#000000; --cv-sho:0.45; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --cv-line:rgba(70,45,35,0.14); --cv-red:#B0604A; --cv-blue:#4E6E94; --cv-amber:#B08024; --cv-sq:#EADCCB; --cv-pw:#FFFFFF; --cv-pb:#3A2F2B; --cv-ps:rgba(58,47,43,0.55); --cv-shc:#78503C; --cv-sho:0.18; }
}
:root[data-theme="light"] { --cv-line:rgba(70,45,35,0.14); --cv-red:#B0604A; --cv-blue:#4E6E94; --cv-amber:#B08024; --cv-sq:#EADCCB; --cv-pw:#FFFFFF; --cv-pb:#3A2F2B; --cv-ps:rgba(58,47,43,0.55); --cv-shc:#78503C; --cv-sho:0.18; }
.game h3 { margin:0; font-family:'Outfit', sans-serif; font-weight:400; font-size:22px; letter-spacing:-0.02em; }
.game p { margin:0; font-size:14px; color:var(--muted); }
.game .meta { font-size:13px; color:var(--muted); }
.game.soon { opacity:.7; }
.mini-card { position:absolute; width:52px; height:74px; border-radius:9px; background:var(--card); border:1px solid var(--line); box-shadow:0 8px 16px rgba(0,0,0,.25); }
.mini-card::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--accent); }
.mini-back { position:absolute; width:52px; height:74px; border-radius:9px; background:var(--accent-2); box-shadow:0 8px 16px rgba(0,0,0,.25); }
.mini-tile { position:absolute; width:40px; height:54px; border-radius:8px; background:var(--card); border:1px solid var(--line); box-shadow:0 8px 16px rgba(0,0,0,.22); font-family:'Outfit', sans-serif; font-size:22px; display:flex; align-items:center; justify-content:center; }

.seg { display:inline-flex; padding:4px; gap:4px; border-radius:999px; background:var(--surface-2); }
.seg button { min-height:40px; padding:0 16px; border:none; border-radius:999px; background:transparent; color:var(--muted); font-size:14px; font-weight:600; }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--text); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background:#3A3F44; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.lb { display:flex; flex-direction:column; }
.lb-row { display:grid; grid-template-columns:34px 44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid var(--line); }
.lb-row:last-child { border-bottom:none; }
.lb-row.me { background:var(--surface-2); border-radius:18px; border-bottom-color:transparent; padding-left:10px; padding-right:10px; }
.lb-pos { font-family:'Outfit', sans-serif; font-size:20px; text-align:center; color:var(--muted); }
.lb-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-sub { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-val { text-align:right; }
.lb-val .v { font-family:'Outfit', sans-serif; font-size:22px; line-height:1.1; }
.lb-val .k { font-size:12px; color:var(--muted); }
.podium { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }

.prof { display:flex; align-items:center; gap:16px; }
.prof h2 { margin:0; font-family:'Outfit', sans-serif; font-weight:400; font-size:30px; letter-spacing:-0.02em; line-height:1.1; }
.bar { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.bar span { display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .6s ease; }
.rows { display:flex; flex-direction:column; }
.rows .r { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.rows .r:last-child { border-bottom:none; }

.ach-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
.ach { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.ach.locked { opacity:.5; }
.ach .tier { width:34px; height:34px; border-radius:50%; border:2px solid var(--tc); display:flex; align-items:center; justify-content:center; }
.ach .tier span { width:12px; height:12px; border-radius:50%; background:var(--tc); }
.ach.locked .tier span { background:transparent; }
.ach b { font-weight:600; }
.ach .d { font-size:13px; color:var(--muted); }
.ach .pts { font-size:12px; color:var(--muted); font-weight:600; }

input.search { width:100%; min-height:52px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font:inherit; padding:0 20px; }
input.search::placeholder { color:var(--muted); }
.person { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.person:last-child { border-bottom:none; }
.person .who { flex:1; min-width:0; }
.cmp { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px 14px; align-items:center; }
.cmp .k { text-align:center; font-size:13px; color:var(--muted); }
.cmp .a, .cmp .b { font-family:'Outfit', sans-serif; font-size:22px; }
.cmp .a { text-align:right; }
.cmp .win { color:var(--accent); }
.empty { text-align:center; padding:28px 12px; color:var(--muted); }

#toasts { position:fixed; left:0; right:0; top:calc(12px + env(safe-area-inset-top,0px)); z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px; }
.toast { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:999px; padding:10px 20px 10px 10px; transform:translateY(-20px); opacity:0; transition:transform .4s ease, opacity .4s ease; max-width:420px; }
.toast.show { transform:none; opacity:1; }
.toast .tier { width:34px; height:34px; border-radius:50%; border:2px solid var(--tc); display:flex; align-items:center; justify-content:center; flex:none; }
.toast .tier span { width:12px; height:12px; border-radius:50%; background:var(--tc); }
.toast small { display:block; color:var(--muted); font-size:12px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

.field { display:flex; flex-direction:column; gap:8px; width:100%; text-align:left; }
.field input { width:100%; min-height:52px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font:inherit; padding:0 20px; }
.or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line-strong); }
.err { color:#D9826B; font-size:14px; }
.gbtn svg { flex:none; }
.linkbtn { background:none; border:none; color:var(--muted); text-decoration:underline; font-size:14px; padding:8px; }

.tabs button[hidden] { display:none; }
.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; min-height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--text); font-size:14px; font-weight:600; transition:background .3s ease, color .3s ease; }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.cat-tag { display:inline-block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.06em; }
.mini-die { position:absolute; width:56px; height:56px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:0 8px 16px rgba(0,0,0,.22); }
.mini-die::before, .mini-die::after { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--text); }
.mini-die::before { left:12px; top:12px; } .mini-die::after { right:12px; bottom:12px; background:var(--accent); }
.mini-board { position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:12px; overflow:hidden; display:grid; grid-template-columns:repeat(4,1fr); box-shadow:0 8px 16px rgba(0,0,0,.22); }
.mini-board i:nth-child(odd) { background:var(--card); } .mini-board i:nth-child(even) { background:var(--accent-2); }
.mini-board i:nth-child(4n+1), .mini-board i:nth-child(4n+3) { } 
.mini-tok { position:absolute; width:34px; height:34px; border-radius:50%; box-shadow:0 6px 12px rgba(0,0,0,.25); }

/* Play overlay */
#play { position:fixed; inset:0; z-index:30; display:none; flex-direction:column; background:var(--bg); padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); overscroll-behavior:contain; touch-action:manipulation; }
#play.open { display:flex; }
.play-bar { flex:none; display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px; border-bottom:1px solid var(--line); background:var(--surface); margin:0 calc(-1 * env(safe-area-inset-right,0px)) 0 calc(-1 * env(safe-area-inset-left,0px)); padding-left:calc(12px + env(safe-area-inset-left,0px)); padding-right:calc(12px + env(safe-area-inset-right,0px)); }
.play-bar b { font-family:'Outfit', sans-serif; font-weight:400; font-size:18px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Playtime counter: calm, tabular digits, tap to switch total / this round. The label hides on narrow phones. */
.play-time { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:500 13px/1 'DM Sans', sans-serif; cursor:pointer; }
.play-time[hidden] { display:none; }
.play-time .pt-v { color:var(--text); font-variant-numeric:tabular-nums; }
.play-time:hover { border-color:var(--muted); }
@media (max-width:440px) { .play-time { padding:0 8px; } .play-time .pt-label { display:none; } }
@media (max-width:380px) { .play-time { padding:0 6px; font-size:12px; border-color:transparent; } }
#play iframe { flex:1 1 0; min-height:0; display:block; width:100%; border:0; background:var(--bg); }
/* Mobile-first fit: the play overlay is exactly the visible screen (iOS 100vh = toolbars hidden), the page behind can't scroll or rubber-band,
   and the game iframe gets the safe areas from here (inside an iframe the game must not add them again). */
@supports (height:100dvh) { html #play { bottom:auto; height:100dvh; } html .chat-sheet { height:min(80dvh, 720px); } html .rb-list { max-height:40dvh; } html .ann-prompt { max-height:calc(100dvh - 32px - env(safe-area-inset-bottom,0px)); } }
html:has(#play.open), html:has(#play.open) body { overflow:hidden; overscroll-behavior:none; }
@media (max-width:440px) { .play-bar { gap:6px; padding-left:calc(8px + env(safe-area-inset-left,0px)); padding-right:calc(8px + env(safe-area-inset-right,0px)); } .play-bar .btn.small { padding:0 12px; } }
@media (pointer:coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size:max(16px, 1em) !important; } }
.play-msg { flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); padding:24px; text-align:center; }

/* Admin */
.form { display:flex; flex-direction:column; gap:14px; }
.form .two { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width:520px) { .form .two { grid-template-columns:1fr; } }
.input, select.input, textarea.input { width:100%; min-height:48px; border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font:inherit; padding:10px 16px; }
textarea.input { min-height:80px; resize:vertical; }
.file-drop { border:1.5px dashed var(--line-strong); border-radius:22px; padding:22px; text-align:center; color:var(--muted); cursor:pointer; }
.file-drop b { color:var(--text); }
.switch { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
.switch input { appearance:none; -webkit-appearance:none; width:52px; height:30px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-strong); position:relative; cursor:pointer; transition:background .3s ease; flex:none; }
.switch input::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--muted); transition:transform .3s ease, background .3s ease; }
.switch input:checked { background:var(--accent); border-color:transparent; }
.switch input:checked::after { transform:translateX(22px); background:var(--on-accent); }
.adm-game { display:flex; flex-direction:column; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.adm-game:last-child { border-bottom:none; }
.adm-head { display:flex; align-items:center; gap:12px; }
.adm-head .who { flex:1; min-width:0; }
.adm-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pill { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.live { background:var(--accent-2); color:#17191B; }
.pill.off { background:var(--surface-2); color:var(--muted); }
.icon-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--text); display:inline-flex; align-items:center; justify-content:center; }
.icon-btn[disabled] { opacity:.35; cursor:default; }
.progress { font-size:14px; color:var(--muted); }
.cat-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.cat-row:last-child { border-bottom:none; }
.danger { color:#D9826B !important; border-color:rgba(217,130,107,.5) !important; }
code.snip { display:block; white-space:pre-wrap; word-break:break-word; font-size:13px; background:var(--surface-2); border-radius:16px; padding:14px; }

/* Play with friends lobby */
#lobby { position:fixed; inset:0; z-index:40; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.45); padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
#lobby.open { display:flex; }
@media (min-width:640px) { #lobby { align-items:center; } }
.lobby-sheet { width:100%; max-width:480px; max-height:calc(100vh - 32px - env(safe-area-inset-top,0px)); overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:22px; animation:lobbyRise .35s ease; }
@keyframes lobbyRise { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
.lb-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.lb-head h2 { margin:2px 0 0; font-family:'Outfit', sans-serif; font-weight:400; font-size:28px; letter-spacing:-0.02em; }
.lb-h3 { margin:0; font-family:'Outfit', sans-serif; font-weight:400; font-size:19px; }
.keycard { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:18px; }
.keycard > div:first-child { display:flex; flex-direction:column; gap:8px; min-width:0; }
.bigkey { font-family:'Outfit', sans-serif; font-weight:400; font-size:clamp(28px, 8vw, 40px); letter-spacing:.1em; line-height:1; white-space:nowrap; }
.qr { flex:none; width:140px; height:140px; border-radius:16px; background:#FFFFFF; padding:4px; display:flex; align-items:center; justify-content:center; }
.qr img, .qr canvas { width:132px !important; height:132px !important; }
@media (max-width:400px) { .qr { width:96px; height:96px; } .qr img, .qr canvas { width:88px !important; height:88px !important; } .keycard { padding:16px; gap:12px; } }
.lb-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.keybox { text-align:center; font-family:'Outfit', sans-serif; font-size:22px; letter-spacing:.28em; text-transform:uppercase; }
.keybox::placeholder { letter-spacing:.28em; }
.joinpanel { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 18px; }
.joinrow { display:flex; gap:8px; flex:1; min-width:240px; max-width:340px; }
.joinrow input { min-height:48px; flex:1; min-width:0; }
.play-bar .btn.small { min-height:40px; }

/* Social */
.top-actions { display:flex; align-items:center; gap:8px; }
.top-actions[hidden] { display:none; }
.badge-wrap { position:relative; }
.badge { position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg); }
.badge[hidden] { display:none; }
.overlay { position:fixed; inset:0; z-index:46; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.45); padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
.overlay.open { display:flex; }
#chat { z-index:47; }
@media (min-width:640px) { .overlay { align-items:center; } }
.who-btn { flex:1; min-width:0; display:flex; align-items:center; gap:12px; background:none; border:none; padding:0; text-align:left; color:inherit; font:inherit; }
.who-btn .who { display:flex; flex-direction:column; min-width:0; }
.person .adm-actions { flex:none; }
.lb-row[data-profile] { cursor:pointer; border-radius:18px; transition:background .3s ease; }
.lb-row[data-profile]:hover { background:var(--surface-2); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none; }
.chat-sheet { display:flex; flex-direction:column; height:min(80vh, 720px); padding:0; overflow:hidden; }
.chat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.chat-title { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-list { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:6px; }
.msg { display:flex; flex-direction:column; align-items:flex-start; max-width:80%; }
.msg.mine { align-self:flex-end; align-items:flex-end; }
.msg-name { font-size:12px; color:var(--muted); margin:6px 0 2px 12px; }
.bubble { background:var(--surface); border:1px solid var(--line); border-radius:20px 20px 20px 6px; padding:9px 14px; white-space:pre-wrap; word-break:break-word; line-height:1.4; }
.msg.mine .bubble { background:var(--accent); color:var(--on-accent); border-color:transparent; border-radius:20px 20px 6px 20px; }
.chat-compose { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--bg); }
.chat-compose input { flex:1; min-width:0; min-height:48px; }
@media (max-width:420px) { .top-inner .toggle button { width:40px; } .logo { font-size:19px; } }
.ach-grid.compact { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
.ach-grid.compact .ach { padding:12px; gap:6px; }
.ach-grid.compact .tier { width:28px; height:28px; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent-2); margin-right:6px; vertical-align:middle; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 30%, transparent); }
:root[data-theme="dark"] .live-dot { background:#8FB39A; }
.lb-sub.wrap { white-space:normal; overflow:visible; }

/* Game pods */
#pod { z-index:42; }
.podpanel { display:flex; flex-direction:column; gap:12px; padding:18px; }
.podpanel .joinrow { max-width:none; }
.podpanel .joinrow .btn.primary { flex:1; }
.vote-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; margin-top:8px; }
.vote { display:flex; flex-direction:column; gap:6px; text-align:left; padding:10px; border-radius:20px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--text); font:inherit; transition:border-color .3s ease, background .3s ease; }
.vote .art { position:relative; height:70px; border-radius:14px; background:var(--surface-2); overflow:hidden; transform:scale(.8); transform-origin:top center; margin-bottom:-14px; }
.vote.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.vote[disabled] { opacity:.7; cursor:default; }
.wheel-wrap { position:relative; width:240px; height:240px; margin:18px auto 10px; }
.wheel { width:100%; height:100%; border-radius:50%; border:6px solid var(--surface); box-shadow:var(--shadow); }
.wheel.spinning { transition:transform 4.2s cubic-bezier(.15,.7,.1,1); }
.wheel-pin { position:absolute; left:50%; top:-10px; width:0; height:0; margin-left:-12px; border-left:12px solid transparent; border-right:12px solid transparent; border-top:22px solid var(--text); z-index:2; }
.legend { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; font-size:14px; }
.leg { display:flex; align-items:center; gap:6px; }
.leg i { width:12px; height:12px; border-radius:50%; display:inline-block; }
.champ { text-align:center; padding:20px; border-radius:24px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.champ-name { font-family:'Outfit', sans-serif; font-weight:300; font-size:40px; letter-spacing:-0.02em; line-height:1.1; }
.lb-actions .row-between { margin-top:6px; }
@media (prefers-reduced-motion: reduce) { .wheel.spinning { transition-duration:.01s; } }
@media (max-width:440px) { .top-inner:has(#pod-btn:not([hidden])) .logo-word { display:none; } .logo { white-space:nowrap; } }
.podask { padding:16px 18px; margin:10px 0; border-color:var(--accent); }

/* Round over bar and matchmaking */
.round-bar { flex:none; background:var(--surface); border-bottom:1px solid var(--line); padding:10px 12px; animation:lobbyRise .3s ease; }
.round-bar[hidden] { display:none; }
.rb-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.rb-list { margin-top:8px; max-height:40vh; overflow:auto; }
.rb-list .person { padding:8px 0; }
.rb-note { flex:1 1 auto; font-size:14px; color:var(--muted); }
.rb-games { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; }
.rb-game { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px; min-height:48px; border:1px solid var(--line); border-radius:16px; background:var(--bg); color:var(--text); font:inherit; cursor:pointer; }
.rb-game:hover, .rb-game:focus-visible { border-color:var(--accent); }
.rb-game .muted { font-size:12px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rb-ask { margin-top:8px; }
/* Round over: a sheet over the game (under the play bar) that waits for a choice. Taps on the game behind it and Escape
   don't close it; its own buttons do, or the room moving on. The game stays visible through a light scrim. */
.round-bar.rb-modal { position:absolute; left:0; right:0; bottom:0; top:calc(57px + env(safe-area-inset-top,0px)); z-index:4; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(0,0,0,.3); border:none; animation:fadeIn .25s ease; overscroll-behavior:contain; }
.round-bar.rb-modal[hidden] { display:none; }
.rb-sheet { width:100%; max-width:640px; margin:0 auto; min-height:0; max-height:100%; overflow:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); padding:16px; animation:lobbyRise .3s ease; }
.rb-sheet .rb-row > b { font-family:'Outfit', sans-serif; font-size:20px; font-weight:400; letter-spacing:-0.01em; }
.rb-idle { margin:10px 0 0; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rb-idle[hidden] { display:none; }
#play:has(> .round-bar.rb-modal:not([hidden])) > .idle-note { display:none; }
#play:has(> .round-bar.rb-modal:not([hidden])) > .play-bar { z-index:7; }
/* Idle table: a gentle countdown in the last 30 seconds at round over. */
.idle-note { position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); padding:8px 8px 8px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-size:14px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.idle-note[hidden] { display:none; }
#search { z-index:43; }
.searching { display:flex; justify-content:center; gap:10px; margin:22px 0 14px; }
.searching i { width:14px; height:14px; border-radius:50%; background:var(--accent); animation:pulse 1.2s infinite ease-in-out; }
.searching i:nth-child(2) { animation-delay:.2s; } .searching i:nth-child(3) { animation-delay:.4s; }
@keyframes pulse { 0%, 100% { opacity:.25; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
.game .row-between .adm-actions { flex-wrap:nowrap; }

/* Profile pictures and offline */
.av-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:10px; }
.av-pick { aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid transparent; padding:0; background:none; }
.av-pick.on { border-color:var(--accent); }
.av-edit { position:relative; border:none; background:none; padding:0; border-radius:50%; flex:none; }
.av-edit span { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; font-size:11px; font-weight:700; padding:1px 8px; color:var(--text); }
.offline-bar { max-width:760px; margin:0 auto; padding:10px 20px; font-size:14px; color:var(--on-accent); background:var(--accent-2); text-align:center; }
.offline-bar[hidden] { display:none; }

/* ---------- Ratings ---------- */
.stars { display:inline-flex; gap:1px; color:var(--line-strong); font-size:14px; vertical-align:-2px; }
.stars .st { display:inline-flex; }
.stars .st.on { color:var(--accent); }
.stars .st.half { color:var(--accent); opacity:.55; }
.rating { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.rating b { font-weight:600; }
.rating-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.rating-row .linkbtn, .rows .linkbtn { padding:0; font-size:13px; }
.rate-card { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:58; width:calc(100% - 32px); max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column; gap:12px; animation:lobbyRise .35s ease; }
.rc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.rc-head > div { display:flex; flex-direction:column; gap:4px; }
.rc-head b { font-family:'Outfit', sans-serif; font-weight:400; font-size:20px; letter-spacing:-0.02em; }
.rc-stars { display:flex; justify-content:center; gap:6px; }
.rc-stars button { width:52px; height:52px; border:none; background:transparent; color:var(--line-strong); font-size:40px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:50%; transition:color .2s ease, transform .2s ease; }
.rc-stars button.on { color:var(--accent); }
.rc-stars button:active { transform:scale(.92); }
.rc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* ---------- Game Master analytics ---------- */
.gm-tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
@media (max-width:640px) { .gm-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.gm-charts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:640px) { .gm-charts { grid-template-columns:1fr; } }
.gm-chart { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.gm-chart-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; }
.gm-bars { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; align-items:end; }
.gm-col { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.gm-v { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.gm-track { width:100%; max-width:28px; height:84px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line); }
.gm-track i { display:block; width:100%; background:color-mix(in srgb, var(--accent) 45%, transparent); border-radius:4px 4px 0 0; transition:height .4s ease; }
.gm-col.today .gm-track i { background:var(--accent); }
.gm-col.today .gm-v { color:var(--text); font-weight:600; }
.gm-d { font-size:11px; color:var(--muted); white-space:nowrap; }
.gm-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.gm-row:last-child { border-bottom:none; }
.gm-rank { width:24px; flex:none; font-family:'Outfit', sans-serif; color:var(--muted); text-align:center; }
.gm-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.gm-meter { height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.gm-meter i { display:block; height:100%; background:var(--accent); border-radius:999px; }

/* ---------- Rooms: At Home, table screen, resync ---------- */
.pick-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; }
.pick { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px 16px; border-radius:20px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font:inherit; }
.pick b { font-family:'Outfit', sans-serif; font-weight:400; font-size:18px; }
.pick .muted { font-size:13px; }
.pick.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.tv-help { display:flex; flex-direction:column; gap:14px; padding:18px; }
.tv-help p { margin:4px 0 10px; font-size:14px; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.95em; }
.resync { position:absolute; inset:0; top:calc(57px + env(safe-area-inset-top,0px)); z-index:5; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s ease; padding:24px; }
.resync.show { opacity:1; pointer-events:auto; }
/* Gentle note (no overlay): the game stays fully visible and playable underneath. */
.resync.soft { bottom:auto; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:8px 16px; align-items:flex-start; pointer-events:none !important; }
#tv-resync.soft { inset:auto 0 3vh 0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
#tv-resync.soft .resync-pill { font-size:1.1em; }
.resync-pill { font-size:13px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 14px; box-shadow:var(--shadow); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resync-card { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:26px 28px; box-shadow:var(--shadow); max-width:340px; }
.resync-card b { font-family:'Outfit', sans-serif; font-weight:400; font-size:21px; letter-spacing:-0.02em; display:flex; flex-direction:column; gap:6px; }
.resync-card small { font-family:'DM Sans', sans-serif; font-size:14px; color:var(--muted); }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--accent); animation:ohSpin 1s linear infinite; }
@keyframes ohSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:3s; } }
.lobby-sheet .person { flex-wrap:wrap; }
.lobby-sheet .person .adm-actions { margin-left:auto; }
.lobby-sheet .person .who-btn { flex:1 1 170px; }

/* ---------- Game night (At Home) ---------- */
.night-settings { display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; }
.ns-row { display:flex; flex-direction:column; gap:8px; }
.night-seg { display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; }
.night-seg button { flex:1 1 auto; min-width:44px; }
.night-seg button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.pick[aria-pressed="true"] b::after { content:" ✓"; color:var(--accent); }
.reel-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.reel { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 18px; transition:border-color .3s ease, transform .3s ease; }
.reel b { font-family:'Outfit', sans-serif; font-weight:400; font-size:22px; letter-spacing:-0.02em; color:var(--muted); }
.reel.landed { border-color:var(--accent); transform:scale(1.02); }
.reel.landed b { color:var(--text); }
.night-next { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:18px 0 6px; }
.night-next b { font-family:'Outfit', sans-serif; font-weight:300; font-size:40px; letter-spacing:-0.03em; line-height:1.05; }
.night-stand { padding:4px 18px; margin-top:10px; }
.night-stand .person { padding:8px 0; }
.night-w { font-family:'Outfit', sans-serif; font-weight:400; font-size:22px; margin-left:auto; }

/* ---------- Live session bar ---------- */
.session-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; max-width:720px; margin:8px auto 0; padding:10px 12px 10px 16px; background:var(--surface); border:1px solid var(--accent); border-radius:20px; box-shadow:var(--shadow); animation:lobbyRise .35s ease; }
.session-bar[hidden] { display:none; }
.session-bar .sb-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.session-bar .sb-text b { font-weight:600; }
.session-bar .sb-text span { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px) { .session-bar { margin:8px 16px 0; } }
#cast-btn.on { border-color:var(--accent); color:var(--accent); }

/* ---------- Games tab, cards and small screens ---------- */
.prefs { padding:14px 18px; }
.prefs-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; }
.prefs-head > span:first-child { display:flex; flex-direction:column; min-width:0; }
.prefs-head .lb-sub { white-space:normal; }
.game-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.game-foot .adm-actions { flex-wrap:nowrap; margin-left:auto; }
.mseats { display:flex; justify-content:center; gap:10px; margin:6px 0 2px; }
.mseat { width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); transition:background .3s ease, border-color .3s ease; }
.mseat.on { background:var(--accent); border-color:var(--accent); }
/* Use the visible screen height on phones (browser bars included), so nothing hides behind them. */
@supports (height: 100dvh) {
  .lobby-sheet { max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
}
#play { height:100%; }
@media (max-width:430px) {
  .tabs { padding-left:8px; padding-right:8px; }
  .tabs-inner { gap:2px; padding:5px; }
  .tabs button { font-size:10.5px; min-width:0; padding:0 2px; line-height:1.15; text-align:center; }
  .play-bar { gap:6px; padding-left:8px; padding-right:8px; }
  .play-bar b { font-size:16px; }
  .play-bar .btn.small { padding:0 12px; }
}
.prefs .night-seg { flex-wrap:nowrap; } .prefs .night-seg button { padding:0 8px; min-width:0; flex:1 1 0; white-space:nowrap; }
.prefs .night-seg button:first-child { flex:2.4 1 auto; }

/* ---------- Game night die ---------- */
.die3d-wrap { --s:110px; width:var(--s); height:var(--s); margin:26px auto 18px; perspective:600px; }
.die3d { position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-18deg) rotateY(24deg); }
.die3d .df { position:absolute; inset:0; border-radius:22%; background:var(--surface-2); border:1px solid var(--line-strong); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; backface-visibility:hidden; }
.die3d .front { transform:translateZ(calc(var(--s) / 2)); }
.die3d .back { transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die3d .right { transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die3d .left { transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d .top { transform:rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die3d .bottom { transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d .pips { width:70%; height:70%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); place-items:center; }
.die3d .pips i { width:58%; aspect-ratio:1; border-radius:50%; }
.die3d .pips i.on { background:var(--text); }
.die3d .pips i.on.c { background:var(--accent); }
.die3d .dnum { font-family:'Outfit', sans-serif; font-weight:400; font-size:calc(var(--s) * .5); color:var(--text); letter-spacing:-0.03em; }
.die3d.rolling { animation:dieRoll 2.3s cubic-bezier(.22,.7,.25,1) both; }
@keyframes dieRoll {
  0% { transform:translateY(-60%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  28% { transform:translateY(6%) rotateX(380deg) rotateY(250deg) rotateZ(120deg); }
  48% { transform:translateY(-22%) rotateX(560deg) rotateY(470deg) rotateZ(220deg); }
  68% { transform:translateY(3%) rotateX(660deg) rotateY(650deg) rotateZ(320deg); }
  84% { transform:translateY(-5%) rotateX(696deg) rotateY(730deg) rotateZ(352deg); }
  100% { transform:translateY(0) rotateX(702deg) rotateY(744deg) rotateZ(360deg); }
}
@media (prefers-reduced-motion: reduce) { .die3d.rolling { animation-duration:.01s; } }
.cand-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin-bottom:6px; }
.cand { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); transition:border-color .3s ease, transform .3s ease; }
.cand .cn { width:28px; height:28px; flex:none; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:'Outfit', sans-serif; font-size:16px; }
.cand b { font-weight:600; font-size:14px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cand .cn-game { font-size:12px; }
.cand.picked { border-color:var(--accent); }
.cand.picked .cn { background:var(--accent); color:var(--on-accent); }
/* On the table screen */
.tv-die .die3d-wrap { --s:min(26vh, 220px); margin:0; }
.tv-cands { grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:1vw; font-size:1.2em; }
.tv-cands .cand { padding:1.2vh 1.2vw; border-radius:20px; }
.tv-cands .cand .cn { width:2em; height:2em; font-size:1.1em; border-radius:10px; }
.tv-cands .cand b { font-size:1.1em; }
.tv-cands .cand .cn-game { font-size:.85em; color:var(--accent); }
.spin-card .spin-row { gap:5vw; padding:2vh 0 3vh; }
.tv-die { padding:2vh 3vw; }

/* ---------- Head to head + watching ---------- */
.h2h { display:flex; flex-direction:column; gap:2px; margin-top:10px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.h2h .label { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.h2h-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.h2h-row:last-child { border-bottom:none; }
.h2h-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h2h-row span:nth-child(3) { text-align:right; }
.h2h-row b { font-family:'Outfit', sans-serif; font-weight:400; font-size:18px; font-variant-numeric:tabular-nums; min-width:56px; text-align:center; }
.h2h-row .muted { font-size:12px; }
.watch-bar { flex:none; display:flex; flex-direction:column; gap:6px; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 14px; animation:lobbyRise .3s ease; }
.watch-bar[hidden] { display:none; }
.wb-row { display:flex; align-items:center; gap:10px; min-width:0; font-size:14px; }
.wb-row .muted { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.watch-bar .h2h { margin-top:0; padding:0; border:none; background:none; border-radius:0; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:16px; scrollbar-width:none; }
.watch-bar .h2h::-webkit-scrollbar { display:none; }
.watch-bar .h2h .label, .watch-bar .h2h p { display:none; }
.watch-bar .h2h-row { flex:none; display:flex; gap:6px; border:none; padding:0; font-size:13px; }
.watch-bar .h2h-row b { font-size:15px; min-width:0; }
.watch-bar .h2h-row .muted { display:none; }
.pod-tally { margin-top:10px; }

/* ---------- Game Night: join and scan ---------- */
.gn-join { display:flex; flex-direction:column; gap:10px; width:100%; }
.gn-join > .btn { align-self:flex-start; }
.scanner { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:lobbyRise .3s ease; }
.scan-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:12px; }
.scan-card b { font-family:'Outfit', sans-serif; font-weight:400; font-size:20px; }
.scan-view { position:relative; aspect-ratio:1; border-radius:22px; overflow:hidden; background:#111; }
.scan-view video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; inset:18%; border:3px solid var(--accent); border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.25); }
.scan-card p { margin:0; font-size:14px; }
.gn-row .btn { flex:1; white-space:nowrap; padding-left:12px; padding-right:12px; }

/* ---------- Game Master: compact game list ---------- */
.adm-game { padding:0; gap:0; }
.adm-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; background:none; border:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.adm-name { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.adm-name b { font-weight:600; }
.adm-name .muted { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-chev { display:inline-flex; color:var(--muted); transition:transform .25s ease; }
.adm-chev svg { width:18px; height:18px; }
.adm-game.open .adm-chev { transform:rotate(180deg); }
.adm-body { display:flex; flex-direction:column; gap:12px; padding:0 0 16px 36px; }
.adm-body .adm-actions { flex-wrap:wrap; }
.adm-order { display:inline-flex; gap:6px; margin-left:auto; }
@media (max-width:520px) { .adm-body { padding-left:0; } }

/* ---------- Me: game stats ---------- */
.gs-body { display:flex; flex-direction:column; gap:12px; padding:0 0 16px; }
.gs-label { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:4px; }
.gs-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.gs-tiles .stat { background:var(--surface-2); border-radius:16px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.gs-tiles .stat .v { font-family:'Outfit', sans-serif; font-size:22px; font-weight:400; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-tiles .stat .k { font-size:12px; color:var(--muted); }
@media (min-width:560px) { .gs-tiles { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.gs-body .rows .r { padding:8px 0; }
.gs-ach { display:flex; flex-direction:column; gap:6px; max-height:360px; overflow-y:auto; }
.gs-a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; background:var(--surface-2); }
.gs-a.locked { opacity:.45; }
.gs-at { flex:1; min-width:0; display:flex; flex-direction:column; font-size:14px; }
.gs-at .muted { font-size:12.5px; }
.gs-pts { font-size:12px; }
.gs-tier { width:28px; height:28px; flex:none; border-radius:50%; border:2px solid currentColor; display:grid; place-items:center; font-family:'Outfit', sans-serif; font-size:12px; font-weight:600; }
.gs-tier.bronze { color:#B98557; } .gs-tier.silver { color:var(--muted); } .gs-tier.gold { color:var(--accent); } .gs-tier.platinum { color:var(--accent-2); }
.gs-tiles.four { grid-template-columns:repeat(4, minmax(0,1fr)); }
.gs-tiles.four .stat .v { font-size:18px; }

/* ---------- Game Master: upload many ---------- */
.file-drop.over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
#bulk-drop { cursor:default; }
.bulk-list { display:flex; flex-direction:column; }
.bulk-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.bulk-row:last-child { border-bottom:none; }
.bulk-name { flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bulk-name b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bulk-name .muted { font-size:12.5px; }
.bulk-sel { flex:1 1 200px; max-width:100%; padding-top:8px; padding-bottom:8px; }
.bulk-st { font-size:13px; font-weight:600; color:var(--muted); }
.bulk-st.ok { color:var(--accent-2); } .bulk-st.bad { color:#C0634F; }
:root[data-theme="dark"] .bulk-st.ok { color:#8FB39A; }

/* ---------- Profile: head to head ---------- */
.h2h-cmp { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding-bottom:16px; border-bottom:1px solid var(--line); }
.h2h-cmp .k { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.h2h-cmp .muted { font-size:13px; }
.h2h-big { display:flex; align-items:baseline; gap:14px; font-family:'Outfit', sans-serif; }
.h2h-big b { font-weight:300; font-size:44px; line-height:1.1; font-variant-numeric:tabular-nums; }
.h2h-big b.win { color:var(--accent); }

/* ---------- Home: compact cards + find a match ---------- */
.home-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-areas:"pod night" "key key"; gap:12px; }
.hcard { display:flex; flex-direction:column; gap:8px; padding:16px; min-width:0; }
.hcard > b { font-size:16px; }
.hcard .lb-sub { font-size:13px; }
.hcard .btn { width:100%; }
.hc-pod { grid-area:pod; } .hc-key { grid-area:key; } .hc-night { grid-area:night; }
.hc-night .hc-stack { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.hc-pod .btn, .hc-key .btn { margin-top:auto; }
.hc-key .keybox { width:100%; min-width:0; text-align:center; }
.hc-night .keybox { width:100%; min-width:0; text-align:center; }
.hc-match .hc-row, .hcard .hc-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hc-match .hc-row .btn { width:auto; flex:1 1 140px; }
.mm-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.mm-chip { border:1px solid var(--line-strong); background:transparent; color:var(--text); border-radius:999px; padding:8px 14px; font:inherit; font-size:14px; cursor:pointer; }
.mm-chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.mm-status { display:flex; flex-direction:column; }
.mm-status .r { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
@media (max-width:360px) { .home-grid { grid-template-columns:1fr; grid-template-areas:"pod" "night" "key"; } }
.hc-night .btn { margin-top:auto; }
.hc-keyrow { display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; }
.hc-keyrow .keybox { flex:1 1 120px; width:auto; }
.hc-keyrow .btn { width:auto; flex:0 0 auto; padding-left:16px; padding-right:16px; }
.keybox.scanned { box-shadow:0 0 0 3px var(--accent, #c9826b); }
.hcard .lb-sub { white-space:normal; overflow:visible; }
.hcard .btn { font-size:14px; padding-left:10px; padding-right:10px; white-space:nowrap; min-height:44px; }
.hc-match .hc-row .btn { font-size:15px; }
.bulk-progress { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }

/* ---------- Offline play (one phone's hotspot) ---------- */
.off-overlay { z-index:48; }
.hc-offline .hc-row .btn { width:auto; flex:1 1 140px; }
/* Find a match (left) + Offline play (right) on one row, like Game pods + Game Night. */
.home-duo { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; align-items:stretch; }
.home-duo .hc-match.picking { grid-column:1 / -1; }
.home-duo .hc-match { grid-column:1; } .home-duo .hc-offline { grid-column:2; }
.home-duo .hc-offline .hc-cap { display:none; } /* wide screens already say it in the description */
.home-duo .hcard .hc-row { flex-direction:column; align-items:stretch; gap:6px; margin-top:auto; }
.home-duo .hcard .hc-row .btn { width:100%; flex:none; }
.hc-cap { display:block; text-align:center; font-size:13px; color:var(--muted); line-height:1.3; }
.linkbtn.hc-cap { min-height:32px; text-decoration:underline; text-underline-offset:3px; }
.offline-bar .linkbtn { color:inherit; font-weight:700; padding:0 0 0 6px; font-size:14px; }
.off-steps { margin:4px 0 14px; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:15px; }
.off-steps li::marker { color:var(--accent); font-weight:700; }
.off-qrwrap { display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 14px; }
.off-qr { width:248px; height:248px; max-width:100%; aspect-ratio:1; border-radius:20px; background:#FFFFFF; padding:8px; display:flex; align-items:center; justify-content:center; text-align:center; }
.off-qr img, .off-qr canvas { width:232px !important; height:232px !important; max-width:100%; image-rendering:pixelated; }
.off-qr .muted { color:#5A514C; }
.off-codeline { display:flex; gap:8px; width:100%; align-items:center; }
.off-codeline input { flex:1; min-width:0; min-height:44px; font-size:13px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.off-codeline .btn { flex:none; }
.off-paste { width:100%; }
.off-paste summary { cursor:pointer; color:var(--muted); font-size:14px; padding:6px 2px; list-style-position:inside; }
.off-paste .off-codeline { margin-top:8px; }
.off-more { display:flex; flex-direction:column; margin-top:18px; border-top:1px solid var(--line); }
.off-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 2px; border-bottom:1px solid var(--line); }
.off-row > div:first-child { flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.off-row .lb-sub { font-size:13px; white-space:normal; }
.off-ok { color:var(--accent-2); font-weight:700; }
:root[data-theme="dark"] .off-ok { color:#8FB39A; }
.off-bar { height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:6px; }
.off-bar i { display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .25s; }
.off-card { align-items:center; }
.off-card > .btn { flex:none; }
.off-card.lost b { font-family:'Outfit', sans-serif; font-weight:400; font-size:20px; }
.off-card .lb-sub { font-size:13px; }
@media (max-width:400px) { .off-card { flex-direction:column; align-items:stretch; } .off-card > .btn { width:100%; } }
.lobby-sheet .lb-actions details { align-self:stretch; }

/* Game cards: player range in line with the title; tap the stars to rate */
.game-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.game-title h3 { min-width:0; }
.players-tag { flex:none; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; white-space:nowrap; padding:3px 9px; border:1px solid var(--line); border-radius:999px; }
.rate-tap { background:none; border:0; padding:4px 6px; margin:-4px -6px; border-radius:10px; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.rate-tap:hover, .rate-tap:focus-visible { background:var(--surface-2); }

/* Share One Home (referrals) */
.share-card { display:flex; flex-direction:column; gap:12px; }
.ref-spots { display:flex; gap:10px; flex-wrap:wrap; }
.ref-spot { position:relative; width:52px; height:52px; border-radius:50%; border:2px dashed var(--line-strong); display:inline-flex; align-items:center; justify-content:center; background:none; padding:0; color:var(--muted); font:inherit; }
.ref-spot.filled { border:2px solid var(--accent); cursor:pointer; }
.ref-spot .ref-plus { font-size:13px; font-weight:600; }
.ref-spot .ref-pts { position:absolute; bottom:-6px; right:-8px; font-size:11px; font-weight:700; background:var(--accent); color:#fff; border-radius:999px; padding:1px 6px; }
.ref-init { font-size:18px; font-weight:600; }
.ref-note { margin:0 0 12px; padding:10px 12px; border-radius:12px; background:var(--surface-2); font-size:14px; }
.badge-chip { display:inline-block; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1.5px solid var(--accent); border-radius:999px; padding:2px 10px; }
.ach.badge-ach b::after { content:" ★"; color:var(--accent); }
.ach.hidden-ach b { font-style:italic; }

/* Game cards line up row by row: every card spans 7 rows of the grid and shares them (subgrid), so titles on one or two
   lines, descriptions, ratings, records and the buttons sit on the same lines across a row of cards. */
.games { row-gap:14px; }
.game { display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; align-content:start; }
.game > * { min-width:0; }
.game .art { margin-bottom:14px; }
.game .cat-tag { min-height:1.4em; }
.game .game-title { align-items:flex-start; margin:2px 0 6px; }
.game .game-title h3 { line-height:1.2; }
.game .players-tag { margin-top:3px; }
.game .game-desc { margin:0 0 10px; }
.game .rating-row { margin:0 0 6px; align-self:start; }
.game .meta { align-self:start; margin-bottom:14px; }
.game .game-foot { align-self:end; justify-content:flex-end; }
@supports not (grid-template-rows: subgrid) { .game { display:flex; flex-direction:column; } .game .game-foot { margin-top:auto; } }

/* ---------- Player communications (announcements, maintenance banner, Game Master → Communications) ---------- */
.ann-mark { width:24px; height:24px; flex:none; }
.ann-mark span { width:9px; height:9px; }
.mbanner { position:relative; z-index:7; background:var(--surface-2); color:var(--text); border-bottom:1px solid var(--line); font-size:14px; line-height:1.4; }
.mbanner.during { background:var(--accent); color:var(--on-accent); border-bottom-color:transparent; }
.mbanner.during .logo-mark { border-color:var(--on-accent); }
.mbanner.during .logo-mark span { background:var(--on-accent); }
.mb-inner { max-width:760px; margin:0 auto; padding:8px 12px 8px 20px; display:flex; align-items:center; gap:10px; }
.mb-text { flex:1; min-width:0; font-weight:500; }
.mb-x { flex:none; width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:inherit; display:inline-flex; align-items:center; justify-content:center; opacity:.8; }
.mb-x:hover { opacity:1; }
.ann-list { display:flex; flex-direction:column; gap:12px; }
.ann-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:18px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; text-align:left; }
.ann-card.unread { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.ann-from { display:flex; align-items:center; gap:10px; width:100%; }
.ann-src { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; font-size:13px; }
.ann-src b { font-size:14px; }
.ann-title { margin:4px 0 0; font-family:'Outfit', sans-serif; font-weight:400; font-size:21px; letter-spacing:-0.02em; line-height:1.2; overflow-wrap:anywhere; }
.ann-body { margin:0; color:var(--muted); font-size:15px; overflow-wrap:anywhere; }
.ann-when { margin:0; font-size:14px; font-weight:600; }
.ann-cta { margin-top:4px; }
.ann-pop-wrap { position:fixed; inset:0; z-index:59; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
@media (min-width:640px) { .ann-pop-wrap { align-items:center; } }
.ann-pop { width:100%; max-width:420px; background:var(--bg); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); padding:22px 24px 18px; display:flex; flex-direction:column; gap:10px; animation:lobbyRise .35s ease; }
.ann-pop-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.ann-pop-head .ann-mark { width:30px; height:30px; } .ann-pop-head .ann-mark span { width:12px; height:12px; }
.ann-word { flex:1; font-family:'Outfit', sans-serif; font-size:20px; letter-spacing:-0.02em; }
.ann-pop-title { margin:0; font-family:'Outfit', sans-serif; font-weight:300; font-size:30px; letter-spacing:-0.02em; line-height:1.1; overflow-wrap:anywhere; }
.ann-pop-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.ann-pop-actions .btn { flex:1 1 140px; }
.ann-pop-foot { margin:6px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.ann-prompt { position:fixed; left:0; right:0; margin:0 auto; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:58; width:calc(100% - 32px); max-width:440px; max-height:calc(100vh - 32px); overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column; gap:12px; animation:lobbyRise .35s ease; }
.cm-intro { display:flex; flex-direction:column; gap:14px; }
.cm-kinds { flex-wrap:wrap; overflow:visible; }
.cm-note { margin:-6px 0 0; font-size:13px; }
.cm-n { font-size:12px; } .cm-n.over { color:var(--accent); font-weight:700; }
.cm-ch { border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.cm-ch legend { padding:0; margin-bottom:8px; width:100%; }
.cm-chk { display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:15px; }
.cm-chk input { width:20px; height:20px; accent-color:var(--accent); }
.cm-hints { margin:0; padding:12px 16px 12px 32px; border-radius:16px; background:var(--surface-2); font-size:14px; display:flex; flex-direction:column; gap:4px; }
.cm-ok { margin:0; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.cm-ok .dot { background:var(--accent-2); }
.cm-preview { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; padding:14px; border-radius:24px; background:var(--surface-2); }
.cm-prev-col { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cm-live { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:18px; background:var(--surface-2); font-size:14px; }
.cm-live span:nth-child(2) { flex:1; min-width:160px; }
.cm-hist { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cm-hist:last-child { border-bottom:none; }
.cm-hist-main { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.cm-hist-sub { font-size:13px; }
.pushp { display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:12px 14px; font-size:13px; }
.pushp-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.35; }
.pushp-t > span:last-child { color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pushp-h { display:flex; justify-content:space-between; font-size:12px; }
/* The email preview keeps the light Porcelain look in both themes, the way inboxes show it. */
.em { background:#F6F1EC; color:#3A2F2B; border-radius:24px; padding:18px 16px 14px; display:flex; flex-direction:column; gap:12px; font-family:'DM Sans', 'Helvetica Neue', Arial, sans-serif; border:1px solid rgba(70,45,35,0.10); }
.em-top { display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Outfit', sans-serif; font-size:18px; letter-spacing:-0.02em; }
.em .logo-mark { border-color:#D4917F; } .em .logo-mark span { background:#D4917F; }
.em-card { background:#FFFFFF; border-radius:24px; padding:20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; box-shadow:0 8px 20px rgba(120,80,60,0.10); }
.em-kind { font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#7A6A62; }
.em-card h3 { margin:0; font-family:'Outfit', sans-serif; font-weight:400; font-size:22px; letter-spacing:-0.02em; line-height:1.2; overflow-wrap:anywhere; }
.em-card p { margin:0; font-size:15px; color:#7A6A62; overflow-wrap:anywhere; }
.em-card .em-when { color:#3A2F2B; font-weight:600; }
.em-btn { display:inline-block; margin-top:6px; background:#D4917F; color:#3A1F18; border-radius:999px; padding:10px 22px; font-weight:700; font-size:15px; }
.em-foot { font-size:11px; color:#7A6A62; text-align:center; line-height:1.6; }
.switch .sw-t { display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.switch .sw-t small { font-size:13px; line-height:1.4; }
.nt { display:flex; flex-direction:column; gap:10px; }
.nt .switch + .switch { border-top:1px solid var(--line); padding-top:10px; }

/* Game Master: compact "Your games" bar; the list and categories open in a pop-up window */
.gm-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.gm-bar-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.gm-bar-info h2 { margin:0; }
.gm-bar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.gm-modal { position:fixed; inset:0; z-index:60; background:rgba(20,16,14,.45); display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn .2s ease; }
.gm-modal-card { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); width:min(760px, 100%); max-height:min(86vh, 900px); display:flex; flex-direction:column; overflow:hidden; }
.gm-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 10px; }
.gm-modal-head h2 { margin:0; font-size:24px; } .gm-modal-head h2 .muted { font-size:14px; font-family:inherit; margin-left:6px; }
.gm-modal-body { overflow:auto; padding:4px 20px 20px; overscroll-behavior:contain; }
body.modal-open { overflow:hidden; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
/* Friends: online first, green dot by the name */
.person.online .lb-name { font-weight:600; }
.lb-name .live-dot { margin-right:6px; vertical-align:1px; }
/* Share card flash when arriving from the "Share One Home" note */
.share-card.flash { box-shadow:0 0 0 3px var(--accent); transition:box-shadow .3s ease; }
/* Online = a clear green dot (friends list and its header) */
.lb-name .live-dot, .friends-online .live-dot { background:#3E9B57; box-shadow:0 0 0 3px rgba(62,155,87,.22); }
:root[data-theme="dark"] .lb-name .live-dot, :root[data-theme="dark"] .friends-online .live-dot { background:#5CC77A; box-shadow:0 0 0 3px rgba(92,199,122,.22); }
.ann-prompt { z-index:70; } /* above the Game Master pop-up, where Make live is tapped */

/* Stats filters: All · Friends · Online · Solo (Me, gamer profile, You vs, Leaderboard) */
.stats-filter { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:10px 0 12px; }
.stats-filter .sf-seg { display:flex; width:100%; max-width:420px; }
.stats-filter .sf-seg button { flex:1 1 0; min-width:0; padding:0 8px; white-space:nowrap; }
.stats-filter .sf-seg button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.stats-filter .sf-note { font-size:13px; color:var(--muted); line-height:1.4; }
.lb-row.lb-none { opacity:.6; }
.lb-row.lb-none .lb-pos { color:var(--muted); }

/* Private sessions and invites (room lobby and pod sheet) */
.sess-tools { margin-top:14px; padding:6px 18px 10px; display:flex; flex-direction:column; }
.sess-tools .sw-t { display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.sess-tools .sw-t small { font-size:13px; line-height:1.4; }
.sess-tools .sess-inv { min-height:56px; gap:12px; flex-wrap:nowrap; }
.sess-tools .sess-inv .sw-t { flex:1 1 auto; }
.sess-tools .sess-inv .btn { flex:none; }
.lb-name.inv-name { white-space:normal; overflow:visible; }
.sess-tools .switch + .sess-inv { border-top:1px solid var(--line); }
.sess-note { margin:10px 0 4px; font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Sessions and pods: End session at the bottom of the sheet, the pod as a party, Join a Game Night, the paused-game card */
.sess-end { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.sess-end .btn { width:100%; }
.sess-end p { margin:0; font-size:13px; text-align:center; }
.lb-actions.sess-end { flex-direction:row; flex-wrap:wrap; }
.lb-actions.sess-end .btn { flex:1 1 140px; width:auto; }
.pod-what { margin:2px 0 10px; font-size:14px; line-height:1.45; }
.pod-away { margin:0 0 12px; gap:12px; }
.pod-away .inst-txt b { font-size:18px; letter-spacing:.04em; }
.pod-joinnight { display:flex; flex-direction:column; gap:4px; }
.pod-joinnight .hc-keyrow { display:flex; gap:8px; flex-wrap:wrap; }
.pod-joinnight .hc-keyrow .keybox { flex:1 1 120px; min-width:0; }
.pod-joinnight .inv-list { margin-top:8px; }
.mm-party { margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.mm-party .mm-pick { margin-top:4px; }
.resync-card small.pause-clock { font-family:'Outfit', sans-serif; font-size:30px; color:var(--text); letter-spacing:.02em; }
.inv-panel { display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line); padding-top:12px; margin-top:4px; }
.inv-panel .label { margin-top:4px; }
.inv-list { max-height:280px; overflow:auto; overscroll-behavior:contain; }
.inv-list .person { padding:8px 0; flex-wrap:nowrap; }
.inv-list .person .who-btn { flex:1 1 auto; min-width:0; }
.inv-list .lb-name, .inv-list .lb-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.inv-list .empty { padding:10px 0; font-size:14px; color:var(--muted); }
.invite-pop { position:fixed; left:0; right:0; margin:0 auto; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:61; width:calc(100% - 32px); max-width:420px; background:var(--surface); border:1px solid var(--accent); border-radius:28px; box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:12px; opacity:0; transform:translateY(16px); transition:opacity .35s ease, transform .35s ease; }
.invite-pop.show { opacity:1; transform:none; }
.invite-pop .ip-row { display:flex; align-items:center; gap:12px; min-width:0; }
.invite-pop .ip-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.invite-pop .ip-t b { font-size:16px; line-height:1.3; }
.invite-pop .ip-t .muted { font-size:13px; }
.invite-pop .ip-actions { display:flex; gap:10px; }
.invite-pop .ip-actions .btn { flex:1 1 0; }

/* One active device: the switch prompt and the stepped-back card */
.dev-card { position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); background:var(--bg); animation:fadeIn .3s ease; }
.dev-panel { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); padding:28px 24px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; animation:lobbyRise .35s ease; }
.dev-panel .dev-mark { width:44px; height:44px; margin-bottom:4px; }
.dev-panel .dev-mark span { width:18px; height:18px; }
.dev-panel h2 { margin:0; font-family:'Outfit', sans-serif; font-weight:400; font-size:26px; line-height:1.2; letter-spacing:-0.02em; overflow-wrap:anywhere; }
.dev-panel p { margin:0; line-height:1.5; }
.dev-actions { display:flex; flex-direction:column; gap:10px; width:100%; margin-top:8px; }
.dev-panel .dev-note { font-size:13px; }
/* Me → Get the One Home app */
.inst-card { flex-wrap:nowrap; }
.inst-icon { width:52px; height:52px; border-radius:14px; flex:none; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.inst-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.inst-txt .lb-sub { white-space:normal; overflow:visible; line-height:1.45; }
.inst-card .btn { flex:none; }
.inst-done { display:inline-flex; align-items:center; gap:6px; color:var(--text); }
.inst-done svg { color:var(--accent); width:20px; height:20px; }
@media (max-width:520px) { .inst-card { flex-wrap:wrap; } .inst-card .btn { width:100%; } }
.inst-head { display:flex; align-items:center; gap:14px; min-width:0; }
.inst-head h2 { margin:2px 0 0; }
.inst-steps { list-style:none; margin:4px 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:inst; }
.inst-steps li { counter-increment:inst; display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:20px; font-size:15px; line-height:1.4; }
.inst-steps li::before { content:counter(inst); flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
.inst-glyph { flex:none; width:40px; height:40px; border-radius:12px; background:var(--surface-2); color:var(--text); display:inline-flex; align-items:center; justify-content:center; }
.inst-note { margin:0 0 14px; padding:12px 14px; border-radius:18px; background:color-mix(in srgb, var(--accent) 14%, transparent); font-size:14px; line-height:1.45; }
.inst-foot { margin:-6px 0 14px; font-size:13px; }
.inst-ok { width:100%; }
/* Pod → Game Night on a TV */
.gn-podtv { flex-wrap:nowrap; }
.gn-tvglyph { flex:none; width:52px; height:52px; border-radius:16px; background:var(--surface-2); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.gn-podtv .btn { flex:none; }
@media (max-width:520px) { .gn-podtv { flex-wrap:wrap; } .gn-podtv .btn { width:100%; } }
.gn-pair { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:18px; border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gn-pair-txt { display:flex; flex-direction:column; gap:8px; min-width:0; }
.gn-pair-txt b { font-weight:500; line-height:1.4; }
/* Show the table on a TV (no Cast on this device: iPhone, iPad, Safari, Firefox) */
.tvs-sheet { display:flex; flex-direction:column; }
.tvs-step { display:flex; flex-direction:column; gap:6px; padding:14px 0; border-top:1px solid var(--line); }
.tvs-step:first-of-type { border-top:none; padding-top:0; }
.tvs-step > b { font-weight:600; }
.tvs-step p { margin:0; line-height:1.45; }
.tvs-pair { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; padding:14px 14px 14px 18px; background:var(--bg); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:22px; }
.tvs-key { font-size:clamp(34px, 11vw, 52px); }
.tvs-small { font-size:13px; }
@media (max-width:440px) { .tvs-pair { flex-direction:column; align-items:center; gap:10px; padding:14px; } }
@media (max-width:520px) { .gn-pair { flex-direction:column; align-items:stretch; } .gn-pair .qr { align-self:center; } }
body.dev-locked { overflow:hidden; }

/* ---------- Native-app feel on phones (no zoom, no sideways pan, thumb-sized targets) ---------- */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; overscroll-behavior:none; touch-action:manipulation; }
body { overflow-x:clip; overscroll-behavior:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
input, select, textarea { touch-action:manipulation; }
.tabs { padding-left:calc(16px + env(safe-area-inset-left,0px)); padding-right:calc(16px + env(safe-area-inset-right,0px)); }
@media (pointer:coarse) {
  .btn.small, .seg button, .play-bar .btn.small { min-height:44px; }
  .linkbtn { min-height:44px; }
  .toggle { padding:2px; } .toggle button { height:44px; }
  .tabs button { -webkit-user-select:none; user-select:none; }
}
@media (max-width:430px) {
  .tabs { padding-left:calc(8px + env(safe-area-inset-left,0px)); padding-right:calc(8px + env(safe-area-inset-right,0px)); }
  .play-bar { padding-left:calc(8px + env(safe-area-inset-left,0px)); padding-right:calc(8px + env(safe-area-inset-right,0px)); }
}
/* Table screen on this device (Use this device as the screen) and the cast note */
.tvhere { position:fixed; inset:0; z-index:55; background:var(--bg); }
.tvhere iframe { width:100%; height:100%; border:0; display:block; }
.cast-note { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:62; width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:12px 12px 12px 18px; font-size:15px; animation:lobbyRise .3s ease; }
.cast-note .cn-actions { display:flex; align-items:center; gap:8px; }
.cast-note .icon-btn { width:40px; height:40px; }

/* ---------- Tournaments (sheet, live bracket, groups table, dice over the game; the TV uses the same .tb-* bracket) ---------- */
#tour { z-index:47; }
.tourguide-overlay { z-index:48; }
.tour-sheet { max-width:560px; display:flex; flex-direction:column; gap:14px; }
.tour-sheet > div { display:flex; flex-direction:column; gap:14px; min-width:0; }
.tour-sheet .section { display:flex; flex-direction:column; gap:8px; min-width:0; }
.tour-sheet .lb-actions { display:flex; flex-direction:column; gap:10px; }
.tour-sheet .lb-head .icon-btn { flex:none; }
.tour-sheet .who { display:flex; flex-direction:column; min-width:0; flex:1; }
.tour-sheet .night-stand .lb-sub { font-size:12px; color:var(--muted); }
.tourguide-sheet { max-width:760px; width:100%; }
.tour-set { display:flex; flex-direction:column; gap:14px; }
.tour-seg { display:flex; flex-wrap:wrap; border-radius:22px; }
.tour-seg button { flex:1 1 auto; min-height:44px; }
.tour-seg button:disabled { opacity:.5; }
.tour-pool { display:flex; flex-wrap:wrap; gap:8px; }
.tour-chip { min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--text); font:600 14px 'DM Sans', sans-serif; display:inline-flex; align-items:center; gap:6px; }
.tour-chip.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tour-chip:disabled { opacity:.4; }
.tour-n { display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--on-accent); color:var(--accent); align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.tour-help, .tour-sub { margin:0; font-size:14px; }
.tour-me, .tour-stage { display:flex; flex-direction:column; gap:12px; padding:18px; }
.tour-stage { background:var(--text); color:var(--bg); border-color:var(--text); }
.tour-stage .label, .tour-stage .muted { color:color-mix(in srgb, var(--bg) 70%, transparent); }
.tour-stage .btn.primary { align-self:flex-start; }
.tour-vs { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; }
.tour-p { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 0; min-width:0; text-align:center; }
.tour-p b { flex:0 0 100%; font-family:'Outfit', sans-serif; font-weight:400; font-size:18px; line-height:1.2; letter-spacing:-0.02em; overflow-wrap:anywhere; min-width:0; }
.tour-p .tokenav + .tokenav { margin-left:-10px; }
.tour-vs-x { font-family:'Outfit', sans-serif; font-size:22px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tour-stage .tour-vs-x { color:inherit; }
.tour-roll { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.tour-roll .die3d-wrap { --s:84px; margin:14px auto 12px; }
.tour-cands { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.tour-cands .cand b { white-space:normal; line-height:1.25; }
.tour-preview { min-width:0; overflow:hidden; }
.tour-podcard .inst-txt { flex:1 1 220px; min-width:0; }
.tour-podcard .linkbtn { padding:0; font-size:13px; }
.tour-tools { border:1px solid var(--line); border-radius:22px; padding:10px 16px; }
.tour-tools summary { cursor:pointer; font-weight:600; min-height:32px; display:flex; align-items:center; }
.tour-award { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.tour-champ { align-items:center; }
.tour-champ .tokenav { margin:0 auto; }
/* Over the game between games of a match: the score and the die for the next game */
.tour-ov { position:absolute; inset:0; top:calc(57px + env(safe-area-inset-top,0px)); z-index:6; display:flex; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.tour-ov-card { width:min(420px, 100%); display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:20px; box-shadow:var(--shadow); text-align:center; }
.tour-ov-score { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; font-family:'Outfit', sans-serif; font-size:18px; }
.tour-ov-score span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tour-ov-score span:first-child { text-align:right; }
.tour-ov-score span:last-child { text-align:left; }
.tour-ov-score b { font-weight:400; font-size:28px; font-variant-numeric:tabular-nums; }
/* Live bracket: rounds side by side, scrolling inside their own frame; stage rounds are dark cards */
.tb-frame { overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:6px; margin:0 -4px; }
.tb-bracket { display:flex; gap:12px; align-items:flex-start; min-width:min-content; padding:0 4px; }
.tb-round { width:184px; flex:none; display:flex; flex-direction:column; gap:8px; }
.tb-rh { display:flex; flex-direction:column; gap:1px; padding:0 2px 6px; border-bottom:1px solid var(--line); }
.tb-rh b { font-family:'Outfit', sans-serif; font-weight:500; font-size:15px; }
.tb-rh span { font-size:12px; color:var(--muted); }
.tb-round.cur .tb-rh b { color:var(--accent); }
.tb-match { border:1px solid var(--line-strong); border-radius:14px; padding:8px 10px; background:var(--surface); display:flex; flex-direction:column; gap:3px; font-size:13px; }
.tb-match.live { border-color:var(--accent); }
.tb-match.mine { box-shadow:inset 3px 0 0 var(--accent); }
.tb-match.ghost { border-style:dashed; background:transparent; color:var(--muted); }
.tb-t { font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; display:flex; gap:6px; align-items:center; }
.tb-live { color:var(--accent); font-weight:700; }
.tb-side { display:flex; justify-content:space-between; gap:6px; font-variant-numeric:tabular-nums; }
.tb-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tb-side.won { font-weight:700; }
.tb-side.lost { color:var(--muted); }
.tb-side.me .tb-nm { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.tb-st { font-size:11px; color:var(--muted); }
.tb-watch { min-height:36px; margin-top:4px; align-self:flex-start; }
.tb-round.stage .tb-match:not(.ghost) { background:var(--text); color:var(--bg); border-color:var(--text); }
.tb-round.stage .tb-match:not(.ghost) .tb-t, .tb-round.stage .tb-match:not(.ghost) .tb-st, .tb-round.stage .tb-side.lost { color:color-mix(in srgb, var(--bg) 65%, transparent); }
.tb-round.stage .tb-match.live { box-shadow:0 0 0 2px var(--accent); }
.tb-round.tocome { opacity:.7; }
.tb-chip { display:inline-flex; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; width:fit-content; max-width:100%; background:var(--surface-2); color:var(--muted); }
.tb-chip.ll { background:color-mix(in srgb, var(--gold) 30%, transparent); color:var(--text); }
.tb-champ { font-family:'Outfit', sans-serif; font-size:22px; padding:10px 12px; border-radius:14px; background:var(--accent); color:var(--on-accent); }
.tb-groups { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.tb-group { border:1px solid var(--line); border-radius:18px; padding:10px 12px; background:var(--surface); min-width:0; }
.tb-gh { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.tb-gh b { font-family:'Outfit', sans-serif; font-weight:500; }
.tb-gh span { font-size:12px; color:var(--muted); }
.tb-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.tb-table th, .tb-table td { text-align:left; padding:5px 4px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tb-table td:nth-child(2) { max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.tb-table th { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.tb-table tr.adv td { font-weight:700; }
.tb-table tr.me td:nth-child(2) { color:var(--accent); }
.tb-note { font-size:12px; color:var(--muted); margin:6px 0 0; }
/* Tournament on the TV (tv.js): above the Game Night layers; the stage match fills the screen under a score strip */
.tvt { position:fixed; inset:0; z-index:12; background:var(--bg); display:flex; flex-direction:column; }
.tvt-body { flex:1; min-height:0; overflow:hidden; padding:4.5vh 5vw; display:flex; flex-direction:column; gap:3vh; }
.tvt-head { display:flex; flex-direction:column; gap:1vh; }
.tvt-head.center, .tvt .center { text-align:center; align-items:center; }
.tvt-people { display:flex; flex-wrap:wrap; gap:1.6vw 2vw; }
.tvt-person { display:flex; flex-direction:column; align-items:center; gap:.6vh; width:7.5vw; min-width:84px; text-align:center; animation:popIn .5s ease; }
.tvt-person span { font-family:'Outfit', sans-serif; font-size:1.05em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tvt-preview { min-height:0; overflow:hidden; font-size:15px; zoom:.88; }
.tvt-head.compact .tv-title, .tvt-body:has(.tvt-bracket) .tv-title { font-size:clamp(36px, 4vw, 84px); }
/* Big first rounds on the TV: matches in two (or three) columns so up to 24 players fit on one screen */
.tvt-bracket .tb-round:has(> .tb-match:nth-of-type(5)) { display:grid; grid-template-columns:1fr 1fr; width:clamp(340px, 30vw, 580px); align-content:start; }
.tvt-bracket .tb-round:has(> .tb-match:nth-of-type(9)) { grid-template-columns:1fr 1fr 1fr; width:clamp(480px, 42vw, 820px); }
.tvt-bracket .tb-round:has(> .tb-match:nth-of-type(5)) > :not(.tb-match) { grid-column:1 / -1; }
.tvt-bracket .tb-match.done .tb-st { display:none; }
.tvt-bracket .tb-round.tocome { display:flex !important; width:clamp(140px, 12vw, 250px) !important; }
.tvt-bracket .tb-round.tocome .tb-match.ghost:nth-of-type(n+3) { display:none; }
.tvt-groups .tb-groups { grid-template-columns:repeat(auto-fill, minmax(clamp(260px, 26vw, 520px), 1fr)); gap:1.2vw; }
.tvt-groups .tb-table th, .tvt-groups .tb-table td { padding:.22em .4em; }
.tvt-groups .tb-note { display:none; }
.tvt-live { display:flex; flex-direction:column; gap:1vh; }
.tvt-chips { display:flex; flex-wrap:wrap; gap:.8vw; }
.tvt-chip { display:flex; align-items:center; gap:.6em; background:var(--surface); border:1px solid var(--accent); border-radius:999px; padding:.35em 1em; font-size:clamp(13px, 1vw, 22px); }
.tvt-chip.done { border-color:var(--line); }
.tvt-chip b { font-weight:500; }
.tvt-chip b.won { font-weight:700; color:var(--accent); }
.tvt-chip .tvt-sc { font-size:1.1em; }
.tvt-bracket .tb-frame { overflow:hidden; }
.tvt-bracket .tb-round { width:clamp(170px, 15vw, 290px); }
.tvt-bracket .tb-match { font-size:clamp(13px, 1.05vw, 22px); padding:.6em .8em; }
.tvt-bracket .tb-rh b { font-size:clamp(15px, 1.25vw, 26px); }
.tvt-bracket .tb-rh span, .tvt-bracket .tb-t, .tvt-bracket .tb-st { font-size:clamp(11px, .8vw, 16px); }
.tvt-groups .tb-groups { grid-template-columns:repeat(auto-fill, minmax(clamp(220px, 20vw, 380px), 1fr)); }
.tvt-groups .tb-table { font-size:clamp(13px, 1vw, 20px); }
.tvt-vs { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:3vw; margin-top:2vh; }
.tvt-side { display:flex; flex-direction:column; align-items:center; gap:1.4vh; min-width:0; }
.tvt-side b { font-family:'Outfit', sans-serif; font-weight:300; font-size:clamp(32px, 3.4vw, 72px); letter-spacing:-0.03em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tvt-side .tokenav + .tokenav { margin-top:-40px; }
.tvt-x { font-family:'Outfit', sans-serif; font-weight:300; font-size:clamp(40px, 4.4vw, 96px); color:var(--accent); font-variant-numeric:tabular-nums; }
.tvt-roll { display:flex; flex-direction:column; align-items:center; gap:1.4vh; }
.tvt-roll .cand-list { width:min(70vw, 900px); }
.tvt-roll .tv-die .die3d-wrap { --s:min(18vh, 160px); margin:1vh auto; }
.tvt-champ { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4vh; text-align:center; }
.tvt-stage { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); }
.tvt-stage iframe { flex:1; min-height:0; width:100%; border:0; display:block; }
.tvt-strip { display:flex; align-items:center; gap:1.4vw; padding:1.4vh 5vw; border-bottom:1px solid var(--line); background:var(--surface); font-size:clamp(14px, 1.1vw, 24px); white-space:nowrap; overflow:hidden; }
.tvt-strip b { font-family:'Outfit', sans-serif; font-weight:400; font-size:1.3em; }
.tvt-sc { font-family:'Outfit', sans-serif; font-size:1.5em; color:var(--accent); font-variant-numeric:tabular-nums; }
.tvt-strip .muted { margin-left:auto; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
/* The stage match's own table screen inside the Game Night screen: only the game */
html.tv-stage-embed #tv-lobby, html.tv-stage-embed #corner, html.tv-stage-embed #hostchip, html.tv-stage-embed #tv-dock, html.tv-stage-embed #tv-toasts, html.tv-stage-embed #tv-note { display:none !important; }

/* ---------- Fitted phone layout (One Home shell, Oct 2026) ----------
   Phones get one fixed frame (header / view / bottom nav) the size of the visible screen. The page itself never scrolls;
   Home fits on one screen, and long screens (Games, Me, Game Master…) scroll inside the view box only. Tablet, desktop
   and TV keep their layout: everything below the shared rules sits in phone-only media queries. */
.tabs .ts { display:none; }
.pager-dots { display:none; }
.pb-more { display:none; }
.icon-btn { padding:0; line-height:1; flex:none; }
.icon-btn > svg { display:block; flex:none; }
.play-bar { position:relative; z-index:3; }
.pb-menu { position:absolute; top:calc(100% + 6px); right:8px; z-index:8; min-width:210px; display:flex; flex-direction:column; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); animation:lobbyRise .25s ease; }
.pb-menu[hidden] { display:none; }
.pb-menu button { min-height:48px; display:flex; align-items:center; gap:12px; padding:0 14px; border:none; border-radius:14px; background:transparent; color:var(--text); font:600 15px/1.2 'DM Sans', sans-serif; text-align:left; }
.pb-menu button:active, .pb-menu button:hover { background:var(--surface-2); }
.pb-menu button svg { flex:none; color:var(--muted); }

/* "Phone" = narrower than 600px, OR a touch screen shaped like a phone (taller than 5:3), so a phone set to a small
   display size (Galaxy Z Fold cover at 540-980 CSS px wide) still gets the fitted layout. Tablets (3:4, 10:16) and the
   Fold's open inner screen (near square) keep the wide layout. Landscape: phones under 500px tall, or 2:1 touch screens. */
@media (max-width:599px), (orientation:landscape) and (max-height:500px), (pointer:coarse) and (max-aspect-ratio:3/5), (pointer:coarse) and (min-aspect-ratio:2/1) and (max-height:760px) {
  html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
  /* The app frame: fixed to the visible screen (iOS toolbars and standalone included), notch padded at the top. */
  body { position:fixed; inset:0; display:flex; flex-direction:column; }
  body > .mbanner { flex:none; padding-top:env(safe-area-inset-top,0px); }
  #app[style*="block"] { display:flex !important; flex-direction:column; flex:1 1 0; position:relative; min-height:0; padding-top:env(safe-area-inset-top,0px); }
  .mbanner:not([hidden]) ~ #app { padding-top:0; }
  .mb-x { width:44px; height:44px; }
  .mb-inner { padding:4px 4px 4px 16px; }
  #app > .top { position:relative; top:auto; flex:none; }
  .top-inner { padding:6px max(16px, env(safe-area-inset-right,0px)) 6px max(16px, env(safe-area-inset-left,0px)); min-height:56px; }
  #app > .offline-bar, #app > .session-bar { flex:none; }
  #app > .session-bar { position:relative; top:auto; margin:2px 12px 6px; }
  #app > main#view { flex:1 1 0; min-height:0; width:100%; max-width:none; margin:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px max(16px, calc((100% - 728px) / 2), env(safe-area-inset-right,0px)) 16px max(16px, calc((100% - 728px) / 2), env(safe-area-inset-left,0px)); }
  #app > main#view::-webkit-scrollbar { display:none; }
  #view > .greet:first-child, #view > .section:first-child { margin-top:6px !important; }
  #view .section { margin-top:20px; }
  /* Bottom nav: a flat bar sitting right on the home-indicator safe area; no floating pill, no dead space under it. */
  #app > .tabs { position:relative; flex:none; z-index:6; padding:4px max(6px, env(safe-area-inset-right,0px)) max(4px, env(safe-area-inset-bottom,0px)) max(6px, env(safe-area-inset-left,0px)); background:var(--surface); border-top:1px solid var(--line); }
  .tabs-inner { max-width:520px; gap:2px; padding:0; background:transparent; border:none; border-radius:0; box-shadow:none; }
  .tabs button { min-height:52px; min-width:0; padding:0 2px; gap:3px; border-radius:16px; font-size:12px; line-height:1.1; white-space:nowrap; text-align:center; }
  .tabs button svg { width:22px; height:22px; flex:none; }
  /* Sheets and pop-ups: bottom sheets, edge to edge on the sides, scrolling inside themselves. */
  #lobby, .overlay { padding:8px; padding-top:calc(8px + env(safe-area-inset-top,0px)); padding-bottom:max(8px, env(safe-area-inset-bottom,0px)); }
  .lobby-sheet { padding:18px 16px; border-radius:26px; overscroll-behavior:contain; max-height:100%; }
  .lb-head { margin-bottom:10px; }
  .lb-head h2 { font-size:24px; }
  .av-edit span, .gm-d, .tb-t, .tb-st, .tb-table th, .tb-note, .tb-rh span { font-size:12px; }
  .tour-podcard .linkbtn { min-height:44px; display:inline-flex; align-items:center; }
  /* Welcome (signed out): its own fixed frame. */
  #welcome { position:fixed; inset:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; gap:20px; padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px)); justify-content:safe center; }
}
@media (max-width:599px), (pointer:coarse) and (max-aspect-ratio:3/5) {
  #welcome > * { flex:none; }
}
@media (max-width:599px) and (max-height:720px) {
  #welcome { gap:14px; }
  #welcome .hero { zoom:.7; }
}
@media (max-width:599px) and (max-height:600px) {
  #welcome { gap:10px; padding-top:calc(12px + env(safe-area-inset-top,0px)); padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
  #welcome .hero { zoom:.5; }
  #welcome .brand h1 { font-size:44px; }
}
@media (orientation:landscape) and (max-height:500px) {
  #welcome .hero { display:none; }
  #welcome { gap:14px; }
}

@media (max-width:599px), (pointer:coarse) and (max-aspect-ratio:3/5) {
  .tabs .tl { display:none; }
  .tabs .ts { display:inline; }
  .top-inner .top-actions { gap:6px; }
  .greet { font-size:30px; }
  /* Readable stat tiles everywhere on phones (no "1…" cut-offs). */
  .stats3 { gap:8px; }
  .stat { padding:10px 12px; border-radius:18px; }
  .stat .v { font-size:22px; }
  .stat .k { font-size:12px; line-height:1.3; }
  .gs-tiles .stat .v, .stats4 .stat .v { font-size:20px; }
  /* Leaderboard rows: the name gets the room, the value keeps its number. */
  .lb-row { grid-template-columns:26px 40px minmax(0,1fr) auto; gap:10px; }
  .lb-val .k { display:none; }
  .lb-val .v { font-size:20px; }

  /* ---- Home: one screen, no scrolling ---- */
  #view[data-view="home"] { display:flex; flex-direction:column; gap:10px; padding-bottom:10px; }
  #view[data-view="home"] > * { flex:none; margin:0 !important; }
  #view[data-view="home"] > .greet { font-size:24px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px !important; }
  #view[data-view="home"] > .greet + p { margin:0; font-size:14px; }
  #view[data-view="home"] .stats3 { display:flex; }
  #view[data-view="home"] .stat { flex:1 1 auto; flex-direction:row; align-items:baseline; justify-content:center; gap:5px; padding:9px 10px; border-radius:16px; }
  #view[data-view="home"] .stat .v { font-size:20px; flex:none; }
  #view[data-view="home"] .stat .k { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #view[data-view="home"] .stat:first-child .k { font-size:0; }
  #view[data-view="home"] .stat:first-child .k::after { content:"Score"; font-size:12px; }
  /* Pods, Game Night and the key box: one "play together" panel of buttons; the long descriptions stay on wider screens. */
  #view[data-view="home"] .home-grid { grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-areas:"pod night" "key key"; gap:8px; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:24px; }
  #view[data-view="home"] .hcard { padding:0; gap:6px; background:transparent; border:none; border-radius:0; }
  #view[data-view="home"] .hcard > b, #view[data-view="home"] .hcard > .row-between > b { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:6px; line-height:1.3; }
  #view[data-view="home"] .hcard .lb-sub { display:none; }
  #view[data-view="home"] .hcard .btn { margin-top:0; }
  #view[data-view="home"] .hc-keyrow { flex-wrap:nowrap; gap:6px; }
  #view[data-view="home"] .hc-keyrow .keybox { flex:1 1 0; min-width:0; min-height:44px; padding:6px 10px; letter-spacing:.12em; }
  #view[data-view="home"] .hc-keyrow .btn { padding:0 14px; }
  /* Find a match and Offline play: one compact panel each, buttons only. */
  #view[data-view="home"] > .section:has(.hc-match), #view[data-view="home"] > .section:has(.hc-offline) { gap:0; }
  #view[data-view="home"] .hc-match, #view[data-view="home"] .hc-offline { padding:0; flex-direction:row; align-items:center; gap:8px; background:transparent; border:none; border-radius:0; }
  #view[data-view="home"] .hc-match:has(.mm-pick) { flex-wrap:wrap; }
  #view[data-view="home"] .hc-match > .row-between, #view[data-view="home"] .hc-offline > .row-between { display:none; }
  #view[data-view="home"] .hc-match > .row-between:has(.pill), #view[data-view="home"] .hc-offline > .row-between:has(.pill) { display:flex; flex:none; padding-left:8px; }
  #view[data-view="home"] .hc-match .hc-row, #view[data-view="home"] .hc-offline .hc-row { flex:1 1 0; flex-wrap:nowrap; min-width:0; }
  #view[data-view="home"] .hc-match .hc-row .btn, #view[data-view="home"] .hc-offline .hc-row .btn { flex:1 1 0; min-width:0; font-size:15px; }
  #view[data-view="home"] .hc-match > .mm-podline { display:none; } /* the pod's 2-person limit shows in the search sheet and the pod sheet on phones */
  #view[data-view="home"] > .section:has(.hc-match) { order:1; }
  #view[data-view="home"] > .section:has(.hc-offline), #view[data-view="home"] > .home-top { order:2; }
  #view[data-view="home"] .hc-offline .btn.primary { background:transparent; color:var(--text); border-color:var(--line-strong); font-weight:600; }
  #view[data-view="home"] .hc-match .mm-pick { flex:1 1 100%; max-height:132px; overflow-y:auto; overscroll-behavior:contain; padding:2px; }
  #view[data-view="home"] .hc-match .mm-pick ~ .hc-row { flex:1 1 100%; }
  #view[data-view="home"] .mm-chip { min-height:40px; }
  /* Friends playing now: one row, swipe sideways when there are several. */
  #view[data-view="home"] > .section:has(> .panel .person) .panel { display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:8px; border-radius:24px; scrollbar-width:none; }
  #view[data-view="home"] > .section:has(> .panel .person) .person { flex:0 0 100%; scroll-snap-align:start; border:none; padding:0; }
  #view[data-view="home"] > .section > h2 { font-size:20px; }
  /* Your top games: a swipe pager, one cover card per page, dots underneath. It takes whatever height is left. */
  #view[data-view="home"] > .home-top { flex:1 1 0; min-height:208px; display:flex; flex-direction:column; gap:8px; }
  .home-top > .row-between { flex:none; flex-wrap:nowrap; }
  .home-top > .row-between h2 { font-size:20px; }
  .home-top .pager { flex:1 1 0; min-height:0; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; container-type:size; }
  .home-top .pager::-webkit-scrollbar { display:none; }
  .pager-dots { display:flex; flex:none; justify-content:center; gap:8px; height:8px; }
  .pager-dots i { width:7px; height:7px; border-radius:50%; background:var(--line-strong); transition:background .3s ease, transform .3s ease; }
  .pager-dots i.on { background:var(--accent); transform:scale(1.2); }
  /* Card in the pager, short space: cover thumbnail on the left, name, rating and record beside it, buttons along the bottom. */
  .pager > .game { flex:0 0 100%; height:100%; min-height:0; scroll-snap-align:start; scroll-snap-stop:always; grid-row:auto; padding:12px; border-radius:24px; overflow:hidden;
    display:grid; grid-template-columns:minmax(0,clamp(112px, 40%, 168px)) minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; grid-template-areas:"art title" "art rating" "art meta" "desc desc" "foot foot"; column-gap:12px; row-gap:2px; align-content:stretch; }
  .pager > .game > .art { grid-area:art; margin:0; border-radius:14px; align-self:start; }
  .pager > .game > .cat-tag { display:none; }
  .pager > .game > .game-title { grid-area:title; margin:0; }
  .pager > .game > .game-title h3 { font-size:19px; overflow-wrap:anywhere; }
  .pager > .game > .rating-row { grid-area:rating; margin:0; }
  .pager > .game > .meta { grid-area:meta; margin:0; }
  .pager > .game > .game-desc { grid-area:desc; margin:8px 0 0; align-self:start; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:14px; line-height:1.4; }
  .pager > .game > .game-foot { grid-area:foot; align-self:end; margin-top:6px; }
  .pager > .game .game-title { flex-wrap:wrap; gap:2px 8px; }
  @container (max-height:200px) { .pager > .game > .game-desc { display:none; } .pager > .game { row-gap:0; padding:10px 12px; } .pager > .game > .game-foot { margin-top:4px; } .pager > .game .players-tag { display:none; } .pager > .game .game-title h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
  @container (min-height:250px) { .pager > .game > .game-desc { -webkit-line-clamp:4; margin-top:12px; font-size:15px; } }
  /* Card in the pager, tall space: the full cover on top, then name, description, rating and buttons. */
  @container (min-height:400px) {
    .pager > .game { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,auto) auto auto auto auto minmax(0,1fr) auto; grid-template-areas:"art" "cat" "title" "desc" "rating" "meta" "foot"; padding:14px; row-gap:0; }
    .pager > .game > .art { width:100%; max-height:calc(100cqh - 230px); margin-bottom:12px; }
    .pager > .game > .cat-tag { display:block; grid-area:cat; }
    .pager > .game > .game-title { margin:0 0 4px; }
    .pager > .game > .game-title h3 { font-size:22px; }
    .pager > .game > .game-desc { margin:0 0 8px; }
    .pager > .game > .rating-row { margin:0 0 4px; }
  }

  /* ---- Games tab: one column of compact rows (cover thumbnail beside the name), scrolling inside the view ---- */
  .games:not(.pager) { grid-template-columns:minmax(0,1fr); gap:10px; }
  .games:not(.pager) > .game { grid-row:auto; padding:12px; border-radius:24px;
    display:grid; grid-template-columns:118px minmax(0,1fr); grid-template-rows:auto auto auto auto auto; grid-template-areas:"art title" "art rating" "art meta" "desc desc" "foot foot"; column-gap:12px; row-gap:2px; align-content:start; }
  .games:not(.pager) > .game > .art { grid-area:art; margin:0; border-radius:14px; align-self:start; }
  .games:not(.pager) > .game > .cat-tag { display:none; }
  .games:not(.pager) > .game > .game-title { grid-area:title; margin:0; flex-wrap:wrap; gap:2px 8px; }
  .games:not(.pager) > .game > .game-title h3 { font-size:19px; overflow-wrap:anywhere; }
  .games:not(.pager) > .game > .rating-row { grid-area:rating; margin:0; }
  .games:not(.pager) > .game > .meta { grid-area:meta; margin:0; }
  .games:not(.pager) > .game > .game-desc { grid-area:desc; margin:8px 0 0; font-size:14px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .games:not(.pager) > .game > .game-foot { grid-area:foot; margin-top:8px; }
  .game .rate-tap { min-height:32px; }

  /* ---- Play bar over a running game: title with the playtime under it, so the buttons never crowd it ---- */
  .play-bar { display:grid; grid-template-columns:44px minmax(0,1fr); grid-auto-flow:column; grid-auto-columns:auto; column-gap:6px; row-gap:0; align-items:center; padding-top:calc(6px + env(safe-area-inset-top,0px)); padding-bottom:6px; min-height:calc(57px + env(safe-area-inset-top,0px)); }
  .play-bar > * { grid-row:1 / span 2; }
  .play-bar > #play-title { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:17px; line-height:1.2; }
  .play-bar:has(> #play-time:not([hidden])) > #play-title { grid-row:1; align-self:end; }
  .play-bar > #play-time { grid-column:2; grid-row:2; align-self:start; justify-self:start; min-height:0; padding:0; border:none; border-radius:0; font-size:12px; line-height:1.35; position:relative; }
  .play-bar > #play-time::after { content:""; position:absolute; inset:-10px -12px; }
  .play-bar > #play-time .pt-label { display:inline; }
  .play-bar > .pb-menu { grid-row:auto; }
}
/* Short phones (iPhone SE, phones with browser bars): Home drops the small section labels; the Game Night button names itself. */
@media (max-width:599px) and (max-height:720px) {
  #view[data-view="home"] { gap:8px; }
  #view[data-view="home"] .hcard > b { display:none; }
  #view[data-view="home"] .home-grid { padding:8px; }
  #view[data-view="home"] [data-act="gncreate"] { font-size:0 !important; }
  #view[data-view="home"] [data-act="gncreate"]::after { content:"Game Night"; font-size:14px; }
  #view[data-view="home"] > .home-top { min-height:212px; gap:6px; }
  .home-top > .row-between .btn.small { min-height:40px; }
}
@media (max-width:599px) and (max-height:680px) {
  #view[data-view="home"] { gap:6px; padding-bottom:6px; }
  #view[data-view="home"] .home-grid { gap:6px; }
}
/* Very short (iPhone SE in Safari with its toolbars, ~548px): the greeting and score chips step aside (they live on Me). */
@media (max-width:599px) and (max-height:600px) {
  #view[data-view="home"] > .greet, #view[data-view="home"] > .section:has(> .stats3) { display:none; }
  #view[data-view="home"] > .home-top { min-height:188px; }
}
/* Narrow phones (Galaxy Z Fold cover, small Androids): Cast and Pod fold into the play bar's More menu. */
@media (max-width:380px) {
  .play-bar #cast-btn, .play-bar #pod-btn-play { display:none; }
  .play-bar:has(#cast-btn:not([hidden])) > .pb-more, .play-bar:has(#pod-btn-play:not([hidden])) > .pb-more { display:inline-flex; }
  .play-bar { column-gap:4px; }
  .play-bar .btn.small { padding:0 11px; font-size:13px; }
  .play-bar > #play-title { font-size:16px; }
  .top-inner { padding-left:12px; padding-right:12px; }
  .top-inner .toggle button { width:40px; }
}
/* Installed app (home-screen PWA): the frame already pads the notch; the nav rests on the home indicator inset. */
@media (display-mode: standalone) and (max-width:599px), (display-mode: standalone) and (pointer:coarse) and (max-aspect-ratio:3/5) {
  #app > .tabs { padding-bottom:max(4px, env(safe-area-inset-bottom,0px)); }
  #play { padding-bottom:env(safe-area-inset-bottom,0px); }
}

/* Home on phones: Find a match + Offline play share one compact panel row (after the fitted phone rules above). */
@media (max-width:599px), (pointer:coarse) and (max-aspect-ratio:3/5) {
  #view[data-view="home"] > .section.home-duo:has(.hcard) { order:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:24px; }
  #view[data-view="home"] .home-duo .hc-match, #view[data-view="home"] .home-duo .hc-offline { flex-direction:column; align-items:stretch; gap:4px; }
  #view[data-view="home"] .home-duo .hc-match.picking { grid-column:1 / -1; }
  #view[data-view="home"] .home-duo .hc-offline .hc-cap { display:flex; }
  #view[data-view="home"] .home-duo .hc-row { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px; }
  #view[data-view="home"] .home-duo .hc-row .btn { flex:none; width:100%; }
  #view[data-view="home"] .home-duo .hc-cap { font-size:12px; min-height:24px; display:flex; align-items:center; justify-content:center; }
}
@media (max-width:599px) and (max-height:600px) {
  #view[data-view="home"] > .section.home-duo:has(.hcard) { padding:8px; gap:6px; }
  #view[data-view="home"] .home-duo .hc-cap { min-height:22px; font-size:12px; }
}
/* ===== Sessions wave 2: picking style, Teams step, mirroring (One Home, Oct 2026) ===== */
.vib-set { display:flex; flex-direction:column; gap:10px; }
.night-pickhead { display:inline-flex; align-items:center; gap:10px; flex:none; }
.night-style-btn { white-space:nowrap; }
.night-style .pick b { font-size:16px; }
/* Team side picking (Game setup sheet): the sides side by side, each with its people as name chips and a Join button. */
.teams-sheet .tm-note { margin:0 0 10px; font-size:14px; line-height:1.45; }
.tm-teams { display:grid; grid-template-columns:repeat(var(--tmc, 2), minmax(0, 1fr)); gap:8px; margin:0 0 10px; }
.tm-team { border:1px solid var(--line); border-radius:20px; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--surface); min-width:0; transition:border-color .3s ease; }
.tm-team.mine { border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); }
.tm-t0 { border-top:4px solid var(--accent); } .tm-t1 { border-top:4px solid var(--accent-2, var(--muted)); } .tm-t2 { border-top:4px solid var(--muted); } .tm-t3 { border-top:4px solid var(--line-strong, var(--line)); }
.tm-team.mine.tm-t0, .tm-team.mine.tm-t1, .tm-team.mine.tm-t2, .tm-team.mine.tm-t3 { border-top-width:4px; }
.tm-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 6px; min-width:0; }
.tm-head b { font:400 19px/1.15 'Outfit', ui-sans-serif, system-ui, sans-serif; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-head .muted { font-size:12px; white-space:nowrap; flex:none; }
.tm-list { display:flex; flex-direction:column; gap:6px; min-height:0; }
.tm-teams.big .tm-list { max-height:min(34vh, 300px); max-height:min(34dvh, 300px); overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }
.tm-chip { display:flex; align-items:center; gap:8px; min-height:44px; width:100%; box-sizing:border-box; min-width:0; padding:4px 8px 4px 6px; border-radius:14px; border:1px solid var(--line-strong, var(--line)); background:transparent; color:var(--text); font:600 14px 'DM Sans', ui-sans-serif, system-ui, sans-serif; text-align:left; transition:background .25s ease, border-color .25s ease; }
button.tm-chip { cursor:pointer; } button.tm-chip:hover { background:var(--surface-2); }
.tm-chip .tm-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-chip:not(.ok):not(.cpu):not(.open) .tm-name { color:var(--muted); }
.tm-chip .tokenav { flex:none; }
.tm-chip .tm-ok { flex:none; width:16px; display:grid; place-items:center; color:var(--accent); }
.tm-chip .tm-ok svg { display:block; }
.tm-chip.me { border-color:var(--accent); }
.tm-chip.sel { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tm-chip.sel .tm-name, .tm-chip.sel .tm-ok, .tm-chip.sel .muted { color:var(--on-accent); }
.tm-chip.cpu, .tm-chip.open { border-style:dashed; color:var(--muted); font-weight:500; }
.tm-chip .tm-cpu { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); flex:none; }
.tm-teams.big span.tm-chip { min-height:36px; padding:3px 8px 3px 5px; }
.tm-teams.big .tm-chip .tm-cpu { width:24px; height:24px; }
.tm-chip:focus-visible, .tm-join:focus-visible, .tm-fill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-join { min-height:44px; width:100%; margin-top:auto; padding:0 10px; border-radius:999px; border:1px solid var(--accent); background:transparent; color:var(--accent); font:600 14px 'DM Sans', ui-sans-serif, system-ui, sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.tm-join.on { background:var(--accent); color:var(--on-accent); }
.tm-join.here { border-color:var(--line-strong, var(--line)); color:var(--text); cursor:default; }
.tm-join:disabled { opacity:.55; background:transparent; color:var(--muted); border-color:var(--line); cursor:default; }
.tm-hint { margin:0 0 10px; font-size:14px; font-weight:600; }
.tm-need { margin:0 0 8px; font-size:14px; font-weight:600; line-height:1.4; color:#D9826B; }
.tm-fill { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; margin:0 0 10px; padding:8px 14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.tm-fill b { display:block; font-weight:600; font-size:15px; } .tm-fill small { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.tm-fill i { flex:none; position:relative; width:46px; height:28px; border-radius:999px; background:var(--line-strong, var(--line)); transition:background .2s ease; }
.tm-fill i::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--bg); transition:transform .2s ease; }
.tm-fill[aria-checked="true"] i { background:var(--accent); } .tm-fill[aria-checked="true"] i::after { transform:translateX(18px); }
.tm-fillro { font-size:13px; }
.su-fold > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; min-height:44px; }
.su-fold > summary::-webkit-details-marker { display:none; }
.setup-sheet .su-fold .su-h { margin:0; flex:none; }
.su-fold .su-sum { flex:1; min-width:0; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-fold > summary::after { content:"Show"; flex:none; font-size:13px; font-weight:600; color:var(--accent); }
.su-fold[open] > summary::after { content:"Hide"; }
.su-fold[open] > summary { margin-bottom:6px; }
@media (max-width:420px) { .tm-team { padding:8px; gap:6px; } .tm-chip { gap:6px; font-size:13px; } .tm-head b { font-size:17px; } .tm-teams[style*="--tmc:3"] .tm-chip img, .tm-teams[style*="--tmc:3"] .tm-chip .tokenav { display:none; } }
@media (prefers-reduced-motion: reduce) { .tm-team, .tm-chip, .tm-fill i, .tm-fill i::after { transition:none; } }
/* A phone held sideways: the sides get the height. The intro lines go, and Start, what's needed and the clock share one strip. */
@media (orientation:landscape) and (max-height:500px) {
  .setup-sheet .su-by, .setup-sheet .tm-sec > .tm-note:first-of-type { display:none; }
  .setup-sheet .lb-head { margin-bottom:2px; } .setup-sheet .lb-head h2 { font-size:22px; }
  .setup-sheet .lb-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 14px; padding-top:8px; padding-bottom:8px; text-align:left; }
  .setup-sheet .lb-actions .btn.big { order:2; flex:none; width:auto; min-height:44px; padding:0 30px; margin:0; }
  .setup-sheet .lb-actions .tm-need { order:0; flex:1 1 100%; margin:0; font-size:13px; }
  .setup-sheet .lb-actions .progress, .setup-sheet .lb-actions #tm-count { order:1; flex:1 1 180px; margin:0; font-size:13px; }
  .tm-teams.big .tm-list { max-height:max(84px, calc(100vh - 290px)); max-height:max(84px, calc(100dvh - 290px)); }
  .setup-sheet .tm-sec > .su-h { display:none; }
}
.mirror-steps { margin:4px 0 12px; padding-left:22px; display:flex; flex-direction:column; gap:6px; line-height:1.45; }
.mirror-opt { display:flex; flex-direction:column; gap:6px; }
.mirror-opt p { margin:0; }
.mirror-warn { border-top:none; padding-top:0; }
.tvhere.mirror { z-index:90; background:#000; }
/* ===== Me → Input settings, and the Game setup step (One Home, Oct 2026) ===== */
.inp-set { display:flex; flex-direction:column; gap:12px; }
.inp-row { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:12px; }
.inp-row .sw-t { display:flex; flex-direction:column; gap:2px; }
.inp-row .sw-t small { font-size:13px; line-height:1.4; }
.inp-seg { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; }
.inp-seg button, .su-seg button, .su-pl button { min-height:44px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong, var(--line)); background:transparent; color:var(--text); font:600 14px 'DM Sans', ui-sans-serif, system-ui, sans-serif; cursor:pointer; transition:background .3s ease, border-color .3s ease, color .3s ease; }
.inp-seg button[aria-checked="true"], .su-seg button[aria-checked="true"], .su-pl button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.inp-seg button:focus-visible, .su-seg button:focus-visible, .su-pl button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.inp-pad { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:12px; }
.inp-pad #inp-pad { font-size:14px; line-height:1.4; min-width:0; }
.inp-pad .btn { flex:none; min-height:44px; }
/* Me → Input settings → Controller buttons (gamepad button map, STANDARD.md K) */
.pad-set { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:12px; min-width:0; }
.pad-set > .sw-t { display:flex; flex-direction:column; gap:2px; }
.pad-set > .sw-t small { font-size:13px; line-height:1.4; }
.pad-pick { display:flex; align-items:center; gap:8px; }
.pad-pick .icon-btn { flex:none; width:44px; height:44px; display:grid; place-items:center; padding:0; line-height:1; }
.pad-pick .icon-btn[disabled] { opacity:.35; }
.pad-name { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px; }
.pad-name b { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pad-name small { font-size:12px; }
.pad-list { display:flex; flex-direction:column; gap:6px; max-height:min(52vh, 420px); overflow:auto; overscroll-behavior:contain; padding:2px; margin:-2px; }
.pad-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; width:100%; padding:6px 8px 6px 16px; border-radius:18px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); text-align:left; font:inherit; cursor:pointer; transition:background .3s ease, border-color .3s ease; }
.pad-row:hover { border-color:var(--line-strong, var(--line)); }
.pad-row.cap { border-color:var(--accent); background:var(--surface); }
.pad-l { display:flex; flex-direction:column; gap:1px; min-width:0; }
.pad-l b { font-weight:600; font-size:15px; }
.pad-l small { font-size:12px; }
.pad-b { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px 0 6px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-weight:600; font-size:13px; }
.pad-cap { border:1px dashed var(--accent); border-radius:18px; padding:10px 12px 12px; }
.pad-cap p { margin:0 0 8px; font-size:14px; line-height:1.4; }
.pad-chips { display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:6px; }
.pad-chips button { min-height:44px; display:grid; place-items:center; border-radius:14px; border:1px solid var(--line); background:var(--surface); cursor:pointer; padding:0; }
.pad-chips button[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.pad-chips .ohp-g { width:auto; height:24px; }
.pad-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pad-note { margin:0; font-size:13px; line-height:1.4; min-width:0; }
.pad-foot .btn { flex:none; min-height:44px; }
.ohp-g { display:block; flex:none; }
/* While a controller is in use: LB / RB badges at the ends of the tab bar (the focus ring itself is drawn by the engine) */
.tabs-inner { position:relative; }
.pad-tabhint { display:none; position:absolute; top:-11px; z-index:1; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.pad-tabhint:first-child { left:6px; }
.pad-tabhint:last-child { right:6px; }
html.ohp-on .pad-tabhint { display:block; }
.setup-sheet .su-sec { margin:0 0 14px; }
.setup-sheet .su-h { display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 8px; }
.su-card { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:4px 14px; }
.su-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; padding:10px 0; border-top:1px solid var(--line); }
.su-row:first-child { border-top:0; }
.su-row > b { font-weight:600; font-size:15px; flex:1 1 120px; min-width:0; }
.su-seg, .su-pl { display:flex; flex-wrap:wrap; gap:6px; }
.setup-sheet { padding-bottom:0; }
.setup-sheet .lb-actions { position:sticky; bottom:0; z-index:1; background:var(--bg); margin:0 -22px; padding:12px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); }
.setup-sheet .lb-actions .tm-note { margin:0; }
@media (max-width:599px) { .setup-sheet .lb-actions { margin:0 -16px; padding:10px 16px 14px; } .su-row { padding:8px 0; } .setup-sheet .su-sec { margin-bottom:10px; } .setup-sheet .lb-head { margin-bottom:4px; } }
.su-ro .su-seg button:not([aria-checked="true"]), .su-ro .su-pl button:not([aria-pressed="true"]) { opacity:.55; }
.su-ro .su-seg button, .su-ro .su-pl button { cursor:default; }
.su-by { margin:0 0 12px; font-size:14px; }
/* Colors and sides: named swatches in the Game setup sheet (each option's --sw is its dark-theme color, --swl its light one). */
.col-sec .col-note { margin:0 0 8px; font-size:14px; }
.col-row { display:grid; grid-template-columns:repeat(var(--coln, 4), minmax(0, 1fr)); gap:6px; }
@media (max-width:560px) { .col-row.wide { grid-template-columns:repeat(var(--coln2, 4), minmax(0, 1fr)); } }
.col-sw { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:58px; padding:5px 2px 4px; border-radius:16px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:600 12px/1.15 'DM Sans', ui-sans-serif, system-ui, sans-serif; cursor:pointer; transition:border-color .25s ease, opacity .25s ease, background .25s ease; -webkit-tap-highlight-color:transparent; }
.col-sw i { position:relative; display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--sw); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); color:#fff; font:700 14px/1 'DM Sans', ui-sans-serif, system-ui, sans-serif; font-style:normal; }
.col-sw i span, .col-sw i svg { display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.col-sw b { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.col-sw:hover { background:var(--surface-2); }
.col-sw.mine { border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }
.col-sw.taken { opacity:.42; cursor:not-allowed; }
.col-sw.taken i { box-shadow:inset 0 0 0 2px rgba(0,0,0,.18); }
.col-sw.held b { color:var(--muted); }
.col-sw[aria-disabled="true"]:not(.taken) { cursor:default; }
.col-sw:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-team.tm-col { border-top-color:var(--sw); }
.tm-head .col-dot { flex:none; align-self:center; width:14px; height:14px; border-radius:50%; background:var(--sw); }
.tm-team.tm-col .tm-head { justify-content:flex-start; } .tm-team.tm-col .tm-head .muted { margin-left:auto; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .col-sw i, :root:not([data-theme="dark"]) .tm-head .col-dot { background:var(--swl, var(--sw)); } :root:not([data-theme="dark"]) .tm-team.tm-col { border-top-color:var(--swl, var(--sw)); } }
:root[data-theme="light"] .col-sw i, :root[data-theme="light"] .tm-head .col-dot { background:var(--swl, var(--sw)); } :root[data-theme="light"] .tm-team.tm-col { border-top-color:var(--swl, var(--sw)); }
@media (orientation:landscape) and (max-height:500px) { .setup-sheet .col-note { display:none; } .col-sw { min-height:52px; } }
@media (prefers-reduced-motion: reduce) { .col-sw { transition:none; } }
.pl-card { position:fixed; left:0; right:0; margin:0 auto; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60; width:min(520px, calc(100% - 32px)); background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:12px 16px; display:flex; flex-direction:column; gap:2px; pointer-events:none; animation:lobbyRise .35s ease; }
.pl-card .label { font-size:12px; }
.pl-card b { font-weight:600; font-size:15px; }
.pl-card span.muted { font-size:13px; }
.lb-pl { margin:0 0 12px; }
.mm-pl { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 6px 12px; flex-basis:100%; }
.mm-pl button { min-height:36px; padding:0 12px; border-radius:999px; border:1px dashed var(--line-strong, var(--line)); background:transparent; color:var(--muted); font:600 13px 'DM Sans', ui-sans-serif, system-ui, sans-serif; cursor:pointer; }
.mm-pl button[aria-pressed="true"] { border-style:solid; border-color:var(--accent); color:var(--text); background:var(--surface-2); }
@media (max-width:599px) { .mm-pl button { min-height:44px; } }
/* Find a match's game picker on phones (Home, picking): one column, chips at their own height, the actions in a row. */
@media (max-width:599px), (pointer:coarse) and (max-aspect-ratio:3/5) {
  #view[data-view="home"] .home-duo .hc-match.picking { flex-wrap:nowrap; }
  #view[data-view="home"] .home-duo .hc-match.picking .mm-pick { flex:none; align-items:flex-start; align-content:flex-start; max-height:min(38dvh, 250px); }
  #view[data-view="home"] .home-duo .hc-match.picking .mm-pick ~ .hc-row { flex:none; flex-direction:row; align-items:center; gap:12px; }
  #view[data-view="home"] .home-duo .hc-match.picking .mm-pick ~ .hc-row .btn { width:auto; }
}

/* ---------- Game picker rails: three tiles high, swipe sideways (Game Night picks, Host picks, pod votes) ---------- */
.pick-cats { margin:2px 0 10px; }
.pick-rail-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pick-rail { display:grid; grid-auto-flow:column; grid-template-rows:repeat(3, auto); grid-auto-columns:calc((100% - 8px) / 2); gap:8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x pan-y; }
.pick-rail::-webkit-scrollbar { display:none; }
.pick-rail > * { scroll-snap-align:start; min-width:0; height:100%; }
.pick-rail .pick b, .pick-rail .vote b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
@media (min-width:620px) { .pick-rail { grid-auto-columns:calc((100% - 16px) / 3); } }
.rail-foot { display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; }
.rail-foot .rail-nav { flex:none; }

/* ---------- Game Night: the TV box (status, ways to cast, TV look) next to the QR code ---------- */
.keycard.gn-key { flex-wrap:wrap; margin-bottom:12px; }
.gn-pair { flex-wrap:wrap; }
.gn-tvbox { flex:1 1 100%; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:14px; min-width:0; }
.gn-tvhead, .gn-tvlook, .gn-tvcasting { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.gn-tvstat { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); }
.gn-tvbox .adm-actions { margin:0; }
/* Small game tiles (pickers): one star + average + count, kept on one line inside the card */
.rating.rating-1 { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; max-width:100%; }

/* ===== Home promotions (the banner at the top of Home) and Free to play (One Home, Oct 2026) ===== */
.promo { position:relative; }
#view > .promo:first-child { margin:12px 0 20px; }
.promo-track { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; border-radius:28px; }
.promo-track::-webkit-scrollbar { display:none; }
.promo-slide { flex:0 0 100%; min-width:0; position:relative; height:232px; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; border:1px solid var(--line); border-radius:28px;
  background:radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--accent-2) 26%, transparent) 0%, transparent 46%), linear-gradient(115deg, color-mix(in srgb, var(--accent) 24%, var(--surface)) 0%, var(--surface) 60%); }
/* Wide screens: the cover sits as a framed card on the right, slightly turned, like a card laid on the table. */
.promo-art.art { position:absolute; top:50%; right:32px; width:auto; height:calc(100% - 48px); aspect-ratio:8 / 5; margin:0; border-radius:20px; background:var(--surface); overflow:hidden;
  outline:1px solid var(--line); outline-offset:-1px; box-shadow:0 18px 36px color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.12)); transform:translateY(-50%) rotate(-2deg); }
.promo-art .cover-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.promo-copy { position:relative; z-index:1; width:calc(100% - 380px); height:100%; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; gap:6px; padding:26px 28px 80px; }
.promo-kicker { display:inline-flex; align-items:center; gap:8px; padding-left:4px; font-size:12px; line-height:1.3; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:color-mix(in srgb, var(--accent) 62%, var(--text)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.promo-kicker::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.promo .promo-name, .section .promo-name { margin:0; font-family:'Outfit', sans-serif; font-weight:300; font-size:40px; line-height:1.05; letter-spacing:-0.03em; color:var(--text); overflow-wrap:anywhere; }
.promo-tag { margin:0; font-size:15px; line-height:1.4; color:var(--muted); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.promo-play { position:absolute; z-index:2; left:28px; bottom:22px; min-width:120px; box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.promo-dots { position:absolute; z-index:3; right:12px; bottom:10px; display:flex; padding:0 4px; border-radius:999px; background:color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.promo-dot { width:32px; height:32px; display:grid; place-items:center; padding:0; border:none; background:transparent; cursor:pointer; }
.promo-dot i { display:block; width:8px; height:8px; border-radius:999px; background:color-mix(in srgb, var(--text) 30%, transparent); transition:width .35s ease, background-color .35s ease; }
.promo-dot.on i { width:22px; background:var(--accent); }
/* Motion: when a slide comes in, its cover drifts into place and the words rise. Never on a plain redraw, never with reduced motion. */
@keyframes promoDrift { from { transform:scale(1.08) translateX(14px); } to { transform:none; } }
@keyframes promoRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.promo.anim .promo-slide.on .promo-art > * { animation:promoDrift 6.5s cubic-bezier(.2,.7,.2,1) both; }
.promo.anim .promo-slide.on .promo-copy > * { animation:promoRise .6s cubic-bezier(.2,.7,.2,1) both; }
.promo.anim .promo-slide.on .promo-copy > :nth-child(2) { animation-delay:.07s; }
.promo.anim .promo-slide.on .promo-copy > :nth-child(3) { animation-delay:.14s; }
@media (prefers-reduced-motion: reduce) { .promo .promo-art > *, .promo .promo-copy > * { animation:none !important; } }
.promo.preview { margin:0; }
/* Free to play: the badge on game covers, and the "Free this week" row on the Games tab. */
.free-badge { position:absolute; z-index:2; left:8px; bottom:8px; display:inline-flex; align-items:center; height:26px; max-width:calc(100% - 16px); padding:0 11px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 12px rgba(0,0,0,.16); }
.free-badge .fb-short { display:none; }
.free-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; background:color-mix(in srgb, var(--accent) 20%, var(--surface)); color:var(--text); font-size:13px; font-weight:600; white-space:nowrap; }
.free-row > .row-between { flex-wrap:wrap; gap:6px 12px; }
.free-strip { display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:2px 2px 8px; scrollbar-width:thin; }
.free-tile { flex:0 0 172px; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:8px 8px 10px; border:1px solid var(--line); border-radius:22px; background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; scroll-snap-align:start; transition:transform .2s ease, border-color .2s ease; }
.free-tile:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.free-tile .ft-art { position:relative; display:block; aspect-ratio:8 / 5; border-radius:15px; overflow:hidden; background:var(--surface-2); }
.free-tile .ft-art > .mini-card, .free-tile .ft-art > .mini-back, .free-tile .ft-art > .mini-tile, .free-tile .ft-art > .mini-die, .free-tile .ft-art > .mini-tok, .free-tile .ft-art > .mini-board { transform-origin:50% 0; scale:.8; }
.free-tile .ft-name { padding:2px 4px 0; font-family:'Outfit', sans-serif; font-size:17px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.free-tile .ft-sub { padding:0 4px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-preview .free-row { margin:0; }
/* Game Master: Promotions and Free to play */
.pr-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.pr-fields { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fp-wave { display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--line); border-radius:22px; }
.fp-wave > .row-between { flex-wrap:wrap; gap:6px 10px; }
.fp-status { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; font-size:13px; }
.fp-list { display:flex; flex-direction:column; max-height:min(52vh, 420px); overflow-y:auto; overscroll-behavior:contain; }
.fp-game { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.fp-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.fp-seg button { min-height:36px; padding:0 12px; font-size:13px; }
.fp-count.over { color:#B4483A; font-weight:700; }
.fp-msgs { display:flex; flex-direction:column; gap:4px; padding:10px 14px; border-radius:16px; }
.fp-msgs p { margin:0; font-size:14px; line-height:1.4; }
.fp-msgs.bad { background:color-mix(in srgb, #C0392B 14%, var(--surface)); }
.fp-msgs.warn { background:color-mix(in srgb, var(--cv-amber, #D9A441) 20%, var(--surface)); }
@media (max-width:520px) {
  .pr-row { grid-template-columns:auto minmax(0,1fr); }
  .pr-row > .adm-order { grid-column:2; justify-self:end; }
  .fp-game { grid-template-columns:minmax(0,1fr) auto; }
  .fp-game > .fp-seg { grid-column:1; grid-row:2; justify-self:start; }
  .fp-game > .icon-btn { grid-column:2; grid-row:1 / span 2; }
  .fp-wave { padding:12px; }
}
/* Phones (the fitted layout): a compact banner first on Home; the rest of Home makes room for it. */
@media (max-width:599px), (orientation:landscape) and (max-height:500px), (pointer:coarse) and (max-aspect-ratio:3/5), (pointer:coarse) and (min-aspect-ratio:2/1) and (max-height:760px) {
  #view[data-view="home"] > .promo { order:-1; }
  .promo-track, .promo-slide { border-radius:22px; }
  .promo-slide { height:112px; }
  .promo-art.art { top:0; right:0; bottom:0; width:58%; height:auto; aspect-ratio:auto; border-radius:0; outline:none; box-shadow:none; transform:none; background:transparent;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%); mask-image:linear-gradient(90deg, transparent 0%, #000 42%); }
  .promo-art .cover-svg { scale:1.5; transform-origin:50% 50%; } /* the cover's middle (the moment in play) fills the banner */
  .promo-copy { width:62%; justify-content:center; gap:2px; padding:10px 0 10px 14px; }
  .promo .promo-name { font-size:21px; font-weight:400; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .promo-tag { font-size:14px; line-height:1.3; }
  .promo-play { left:auto; right:12px; bottom:12px; min-width:0; min-height:44px; padding:0 20px; }
  .promo-dots { top:4px; right:8px; bottom:auto; padding:0; }
  .promo-dot { width:32px; height:32px; }
  .promo.preview .promo-slide { height:112px; }
  /* With a banner, the greeting steps aside on all but the tallest phones (the score chips stay), and Your top games gets a compact one-row card when space is short. */
  #view[data-view="home"] > .home-top { min-height:0; }
  #view[data-view="home"]:not(:has(> .promo)) > .home-top { min-height:208px; }
  .home-top .pager { min-height:72px; }
  @container (max-height:150px) {
    .pager > .game { grid-template-columns:96px minmax(0,1fr) auto; grid-template-rows:auto auto; grid-template-areas:"art title foot" "art meta foot"; align-items:center; align-content:center; padding:8px 10px; row-gap:0; }
    .pager > .game > .art { align-self:center; border-radius:12px; }
    .pager > .game > .rating-row, .pager > .game > .game-desc, .pager > .game .players-tag, .pager > .game [data-findmatch] { display:none; }
    .pager > .game > .game-foot { align-self:center; margin:0; }
    .pager > .game > .game-title h3 { font-size:18px; }
    .pager > .game > .meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  }
  .games:not(.pager) > .game .fb-long, .pager > .game .fb-long { display:none; } /* phone thumbnails say "Free"; the row above says until when */
  .games:not(.pager) > .game .fb-short, .pager > .game .fb-short { display:inline; }
  .free-badge { left:6px; bottom:6px; height:24px; padding:0 9px; }
  .free-tile { flex-basis:148px; }
}
@media (max-width:599px) and (max-height:879px) {
  #view[data-view="home"]:has(> .promo) > .greet { display:none; }
}
@media (orientation:landscape) and (max-height:500px) {
  .promo-copy { width:46%; }
  .promo-art.art { width:56%; }
}
@media (max-width:599px) and (max-height:720px) {
  #view[data-view="home"]:not(:has(> .promo)) > .home-top { min-height:212px; }
  .promo-slide { height:100px; }
  .promo-tag { -webkit-line-clamp:2; font-size:14px; }
}
@media (max-width:599px) and (max-height:600px) {
  #view[data-view="home"]:not(:has(> .promo)) > .home-top { min-height:188px; }
  #view[data-view="home"]:has(> .promo) > .home-top > .row-between { display:none; } /* Games is in the bottom nav */
  .promo-slide { height:92px; }
  .promo-tag { -webkit-line-clamp:1; }
}
/* Membership: the upgrade sheet, locked play buttons, Me → Membership and Game Master → Members */
.mem-pop-wrap { z-index:96; }
.mem-pop { max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow:auto; overscroll-behavior:contain; }
.mem-pill { margin-left:auto; font-size:12px; font-weight:600; letter-spacing:.06em; padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--text); }
.mem-pop .ann-pop-head .icon-btn { margin-left:4px; }
.mem-pop .ann-pop-title { font-size:28px; }
.mem-pop .ann-body { margin:0; font-size:15px; line-height:1.45; color:var(--muted); }
.mem-list { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mem-list li { display:flex; gap:12px; align-items:flex-start; }
.mem-list li > span:last-child { display:flex; flex-direction:column; gap:2px; font-size:15px; line-height:1.35; }
.mem-list .muted { font-size:14px; }
.mem-tick { flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; line-height:1; background:var(--accent); color:var(--on-accent); margin-top:1px; }
.mem-soon { margin:6px 0 0; padding:12px 14px; border-radius:18px; border:1px dashed var(--line); font-size:14px; text-align:center; color:var(--text); }
.mem-locked { position:relative; }
.mem-lk { display:inline-grid; place-items:center; line-height:1; margin-right:6px; vertical-align:-2px; }
.btn.mem-locked:not(.primary) { opacity:.92; }
.btn.primary.mem-locked { background:transparent; color:var(--text); border:1px solid var(--line); }
.mem-cardnote { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-right:auto; white-space:nowrap; }
.game-foot:has(.mem-cardnote) { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mem-card { display:flex; flex-direction:column; gap:12px; padding:18px; }
.mem-card.on { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mem-card-top { display:flex; gap:12px; align-items:flex-start; }
.mem-plan { display:block; font-family:'Outfit', sans-serif; font-weight:400; font-size:24px; letter-spacing:-0.02em; margin:2px 0; }
.mem-badge { flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; line-height:1; background:var(--accent); color:var(--on-accent); }
.mem-badge svg { width:18px; height:18px; }
.mem-card-act { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mem-card-act .lb-sub { flex:1 1 220px; }
.mem-mini { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.mem-mini li { font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); }
.mem-note-card { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; margin-top:12px; }
.mem-note-card .inst-txt { flex:1 1 180px; min-width:0; }
.mem-gm { display:flex; flex-direction:column; gap:12px; padding:16px 18px; }
.mem-gm .lb-h3 { margin:6px 0 0; }
.mem-results, .mem-current { display:flex; flex-direction:column; }
.mem-row { gap:10px; flex-wrap:wrap; }
.mem-row .who-btn { flex:1 1 200px; min-width:0; }
.mem-row .adm-actions { margin:0; }
.mem-hint { margin:4px 0; font-size:14px; }
.mem-grant { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:20px; border:1px solid var(--line); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.mem-segs { display:flex; flex-wrap:wrap; gap:8px; }
.mem-seg { min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
.mem-seg[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.mem-grant .btn.primary { align-self:flex-start; }
/* Game Master → Members: download, member card; Players: View more analytics (analytics page styles live in gm-analytics.js) */
.gm-anarow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gm-anarow .muted { font-size:13px; flex:1 1 220px; min-width:0; }
.mem-dl { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mem-dl .muted { font-size:13px; flex:1 1 200px; min-width:0; }
.mem-view { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:20px; border:1px solid var(--line-strong); background:var(--surface); }
.mem-view-top { display:flex; align-items:center; gap:12px; }
.mem-view-who { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.mem-view-who b { font-size:17px; overflow-wrap:anywhere; }
.mem-view-sub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
.mem-pill { display:inline-flex; align-items:center; min-height:22px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--surface-2); color:var(--text); }
.mem-pill.member { background:var(--accent); color:var(--on-accent); }
.mem-kvs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; }
@media (min-width:700px) { .mem-kvs { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.mem-kv { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mem-kv .label { font-size:12px; letter-spacing:.08em; }
.mem-v { font-size:14px; overflow-wrap:anywhere; }
.mem-view-act { display:flex; gap:8px; flex-wrap:wrap; }
/* Helpful tips: the first-time question, a strip under the play bar (never over the game) */
.tips-ask { flex:none; display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 12px; animation:lobbyRise .3s ease; }
.tips-ask p { margin:0; flex:1 1 200px; min-width:0; font-size:14px; line-height:1.35; }
.tips-ask .tips-ask-btns { display:flex; align-items:center; gap:8px; margin-left:auto; }
.tips-ask .btn.small { min-height:40px; }
.tips-ask .tips-ask-note { color:var(--muted); }
/* Offline: saved games only, the empty state, and Auto-save games for offline mode */
.saved-empty { display:flex; flex-direction:column; gap:6px; align-items:center; }
.saved-empty b { color:var(--text); font-weight:600; }
.saved-empty span { max-width:42ch; font-size:14px; line-height:1.4; }
.autosave-panel { margin-top:10px; }
.autosave-row { display:flex; align-items:flex-start; gap:12px; cursor:pointer; min-height:44px; }
.autosave-row input { width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--accent); }
.autosave-row b { display:block; font-weight:600; }
.autosave-row .mem-lk { align-self:center; }
.off-autosave { border-top:1px solid var(--line); }

/* ---------- Game Master on a desktop ----------
   body.gm-desk is set by render() while Game Master is open on a landscape screen 1024px+ wide with a mouse or trackpad
   (or 1280px+ wide and 761px+ tall). Phones never get it, so the fitted phone layout above is untouched.
   The bottom tab bar becomes a left rail; Game Master gets a sticky side navigation and a grid of section cards. */
body.gm-desk { --gmd-top:72px; --gmd-rail:96px; }
body.gm-desk .top-inner { max-width:none; padding-left:calc(24px + env(safe-area-inset-left,0px)); padding-right:calc(28px + env(safe-area-inset-right,0px)); }
body.gm-desk main { max-width:none; margin:0 0 0 calc(var(--gmd-rail) + env(safe-area-inset-left,0px)); padding:0 32px 56px 12px; }
body.gm-desk .tabs { top:calc(var(--gmd-top) + env(safe-area-inset-top,0px)); bottom:auto; right:auto; width:var(--gmd-rail); padding:8px 0 16px calc(16px + env(safe-area-inset-left,0px)); background:none; }
body.gm-desk .tabs-inner { max-width:none; margin:0; display:flex; flex-direction:column; gap:4px; padding:6px; border-radius:26px; box-shadow:none; }
body.gm-desk .tabs button { min-height:62px; border-radius:20px; padding:6px 2px; line-height:1.2; text-align:center; }
body.gm-desk .gmd { display:grid; grid-template-columns:208px minmax(0,1fr); gap:28px; align-items:start; }
body.gm-desk .gmd-nav { position:sticky; top:calc(var(--gmd-top) + env(safe-area-inset-top,0px) + 8px); margin-top:8px; display:flex; flex-direction:column; gap:2px; padding:8px; max-height:calc(100vh - var(--gmd-top) - 24px); overflow:auto; overscroll-behavior:contain; border-radius:24px; background:var(--surface); border:1px solid var(--line); }
body.gm-desk .gmd-nav-h { padding:8px 12px 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
body.gm-desk .gmd-link { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 12px 0 14px; border-radius:14px; color:var(--muted); text-decoration:none; font-size:15px; font-weight:600; transition:background .2s ease, color .2s ease; }
body.gm-desk .gmd-link:hover { background:var(--surface-2); color:var(--text); }
body.gm-desk .gmd-link[aria-current] { background:var(--surface-2); color:var(--text); }
body.gm-desk .gmd-link[aria-current]::before { content:""; position:absolute; left:3px; top:11px; bottom:11px; width:3px; border-radius:3px; background:var(--accent); }
body.gm-desk .gmd-n { font-size:12px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
body.gm-desk .gmd-main { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 24px; align-items:start; min-width:0; }
body.gm-desk .gmd-head, body.gm-desk .gmd-full, body.gm-desk #gmd-maint { grid-column:1 / -1; }
@media (min-width:1600px) { body.gm-desk .gmd-main { grid-template-columns:repeat(3, minmax(0,1fr)); } body.gm-desk #gmd-maint { grid-column:auto; } }
body.gm-desk .gmd-head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
body.gm-desk .gmd-head .greet { margin:8px 0 0; font-size:38px; }
body.gm-desk .gmd-head .progress { margin:0; }
body.gm-desk .gmd-sec { min-width:0; scroll-margin-top:calc(var(--gmd-top) + env(safe-area-inset-top,0px) + 4px); }
body.gm-desk .gmd-sec > .section:first-child { margin-top:20px; }
body.gm-desk .gmd-sec h2[tabindex]:focus:not(:focus-visible) { outline:none; }
body.gm-desk .gmd .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
body.gm-desk select:focus-visible, body.gm-desk textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Overview: the KPI tiles and charts across the top, Most played beside Game ratings. */
body.gm-desk .gmd-overview { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 24px; align-items:start; }
body.gm-desk .gmd-overview > .section:first-child { grid-column:1 / -1; }
body.gm-desk .gmd-overview .gm-d { font-size:12px; }
/* Games: the full list as a table. */
body.gm-desk .gmd-games { padding:6px 0 4px; }
body.gm-desk .gmd-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 20px 12px; }
body.gm-desk .gmd-tools .input { flex:1 1 220px; max-width:380px; min-height:44px; }
body.gm-desk .gmt-wrap { overflow-x:auto; overscroll-behavior-x:contain; }
body.gm-desk .gmt { width:100%; border-collapse:collapse; font-size:15px; }
body.gm-desk .gmt th { text-align:left; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px; border-bottom:1px solid var(--line); white-space:nowrap; }
body.gm-desk .gmt td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
body.gm-desk .gmt tbody tr:last-child td { border-bottom:none; }
body.gm-desk .gmt th:first-child, body.gm-desk .gmt td:first-child { padding-left:20px; }
body.gm-desk .gmt th:last-child, body.gm-desk .gmt td:last-child { padding-right:20px; }
body.gm-desk .gmt-n { width:28px; text-align:center; color:var(--muted); font-family:'Outfit', sans-serif; }
body.gm-desk td.gmt-game { width:100%; max-width:0; }
body.gm-desk .gmt-game b, body.gm-desk .gmt-game .muted { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.gm-desk .gmt-game b { font-weight:600; } body.gm-desk .gmt-game .muted { font-size:13px; }
body.gm-desk .gmt-cat, body.gm-desk .gmt-pl, body.gm-desk .gmt-on, body.gm-desk .gmt-ver { white-space:nowrap; }
body.gm-desk td.gmt-cat, body.gm-desk td.gmt-pl, body.gm-desk td.gmt-on, body.gm-desk td.gmt-ver { color:var(--muted); font-size:14px; }
body.gm-desk .gmt-act { white-space:nowrap; text-align:right; }
body.gm-desk .gmt-act .btn + .btn { margin-left:6px; }
body.gm-desk .gmt-manage { display:inline-flex; align-items:center; gap:4px; }
body.gm-desk .gmt-manage .adm-chev svg { width:16px; height:16px; }
body.gm-desk .gmt-row.open .adm-chev { transform:rotate(180deg); }
body.gm-desk .gmt-row:hover > td, body.gm-desk .gmt-row.open > td, body.gm-desk .gmt-detail > td { background:color-mix(in srgb, var(--surface-2) 55%, transparent); }
body.gm-desk .gmt-row.open > td { border-bottom:none; }
body.gm-desk .gmt-detail > td { padding:0 20px 16px 58px; }
body.gm-desk .gmt-detail .adm-body { padding:0; }
body.gm-desk .gmt-none { margin:0; padding:14px 20px; }
@media (max-width:1279px) { body.gm-desk .gmt-on, body.gm-desk .gmt-ver { display:none; } }
/* Upload: two choices, or the open forms. */
body.gm-desk .gmd-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; padding:16px; }
body.gm-desk .gmd-choice { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-height:96px; padding:14px 18px; border-radius:22px; border:1px dashed var(--line-strong); background:var(--bg); color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s ease; }
body.gm-desk .gmd-choice:hover { border-color:var(--accent); }
body.gm-desk .gmd-choice b { font-family:'Outfit', sans-serif; font-weight:500; font-size:18px; }
body.gm-desk .gmd-choice .muted { font-size:14px; line-height:1.35; }
body.gm-desk .gmd-tip { grid-column:1 / -1; margin:0; font-size:13px; }
/* Maintenance */
body.gm-desk .gmd-maint { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
body.gm-desk .gmd-maint .cm-live { align-self:stretch; }
body.gm-desk .gmd-mrow { align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px solid var(--line); }
body.gm-desk .gmd-mwhen { display:flex; flex-direction:column; gap:2px; } body.gm-desk .gmd-mwhen .muted { font-size:13px; }
/* Promotions, Free to play and the Communications composer: the editor on the left, its preview beside it. */
body.gm-desk .gmd-split2 .gm-promos > .panel, body.gm-desk .gmd-split2 .gm-free > .panel, body.gm-desk .gmd-split2 .cm { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; row-gap:0; align-items:start; }
body.gm-desk .gmd-split2 .gm-promos > .panel > *, body.gm-desk .gmd-split2 .gm-free > .panel > *, body.gm-desk .gmd-split2 .cm > * { grid-column:1; margin-top:0; margin-bottom:14px; }
body.gm-desk .gmd-split2 .gm-promos > .panel > .label, body.gm-desk .gmd-split2 .gm-free > .panel > .label, body.gm-desk .gmd-split2 .cm > .label { grid-column:2; grid-row:1; margin-bottom:8px; }
body.gm-desk .gmd-split2 .gm-promos > .panel > #pr-preview, body.gm-desk .gmd-split2 .cm > #cm-preview { grid-column:2; grid-row:2 / span 60; }
body.gm-desk .gmd-split2 .gm-free > .panel > .fp-preview { grid-column:2; grid-row:2; }
body.gm-desk .gmd-split2 .gm-free > .panel > .fp-preview ~ .label { grid-row:3; }
body.gm-desk .gmd-split2 .gm-free > .panel > .fp-preview ~ .fp-preview { grid-row:4; }
body.gm-desk .gmd-split2 .gm-free > .panel > .fp-preview:last-child { grid-row-end:span 60; }
body.gm-desk .gmd-split2 .fp-list { max-height:none; }
@media (max-width:1399px) { body.gm-desk .gmd-split2 .gm-promos > .panel { display:flex; } body.gm-desk .gmd-split2 .gm-promos > .panel > * { margin-bottom:0; } } /* the banner preview needs Home's width */
@media (min-width:1400px) { body.gm-desk .gmd-split2 .gm-promos > .panel { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); } }
/* Members: search and results on the left, the member card beside them. */
body.gm-desk .gmd-mem { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.mem-all { margin-top:12px; }
body.gm-desk .gmd-memleft { display:flex; flex-direction:column; gap:20px; min-width:0; }
body.gm-desk .gmd-memleft .mem-all { margin-top:0; }
body.gm-desk .gmd-memcard { padding:12px; position:sticky; top:calc(var(--gmd-top) + env(safe-area-inset-top,0px) + 12px); }
body.gm-desk .gmd-memcard .mem-view { border:none; padding:6px; }
body.gm-desk .gmd-memnone { display:flex; flex-direction:column; align-items:center; gap:6px; padding:32px 16px; text-align:center; }
body.gm-desk .gmd-memnone .muted { font-size:14px; max-width:36ch; }
/* View more analytics: the whole width of the screen. */
body.gm-desk .ana-top, body.gm-desk .ana-scroll { max-width:none; padding-left:32px; padding-right:32px; }
@media (min-width:1600px) { body.gm-desk .ana-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }