/* Noir / daylight palette, role-aware navigation and accessible modal controls. */
:root,[data-theme="dark"]{--surface-0:#13181d;--surface-1:#1b2228;--surface-2:#28323b;--surface-3:#384550;--on:#f2ece0;--muted:#c2bdb4;--border:#687075;--gold:#e4c17f;--gold-strong:#efd393;--primary:#a82333;--primary-on:#fff5e8;--red-soft:#ffb3b9;--ui-accent-bg:#3a3020;--ui-danger-bg:#54212b;--ui-focus:#efd393;--green:#9bd8b2;--blue:#9dccf3}
[data-theme="light"]{--surface-0:#f5efe3;--surface-1:#fffdf7;--surface-2:#eae1d2;--surface-3:#dbd0bd;--on:#242a2e;--muted:#535b60;--border:#8c8272;--gold:#76551f;--gold-strong:#725017;--primary:#a32030;--primary-on:#fffaf2;--red-soft:#9c2030;--ui-accent-bg:#ecdfbd;--ui-danger-bg:#f3d4d4;--ui-focus:#77541e;--green:#22603b;--blue:#255980;--warning:#76521b}
.primary-action,.bottom-sheet>button.primary-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;background:var(--primary);color:var(--primary-on);border:1px solid var(--primary);border-radius:12px;padding:12px 16px;text-align:center;box-shadow:inset 0 1px 0 #ffffff22}
.primary-action small{color:var(--primary-on);opacity:.9}
.bottom-sheet>button,.bottom-sheet>button:first-of-type,.bottom-sheet .secondary-wide{background:var(--surface-2);color:var(--on);border:1px solid var(--border);border-radius:12px;margin-top:12px;padding:12px 16px;text-align:center;min-height:48px}
.text-action,.exit-button{background:var(--surface-2);color:var(--on)}
.exit-button#endGameBtn{color:var(--red-soft);border-color:var(--red-soft)}
.bottom-sheet{padding:20px;box-shadow:0 12px 60px #0006}
.bottom-sheet h2{font-size:22px;line-height:1.7}
.bottom-sheet p{color:var(--muted)}
.bottom-nav{grid-template-columns:repeat(var(--tabs,3),minmax(0,1fr));gap:4px;border-radius:16px;box-shadow:0 -6px 24px #0002}
.bottom-nav button{min-width:0;padding:8px 2px;min-height:56px}
.bottom-nav button b{font-size:13px;white-space:normal}
.bottom-nav button.active{border:1px solid var(--gold);background:var(--ui-accent-bg)}
.game-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:12px}
.game-top>div:first-child{margin-inline-end:auto}
.game-top .phase-chip{order:3;width:100%;background:var(--surface-2);border:1px solid var(--border);min-height:44px;color:var(--on)}
.header-actions{gap:8px;flex-wrap:wrap}
.header-actions button{font-size:13px;padding:8px}
.audio-panel{padding-block:12px;margin:12px 0;border-block:1px solid var(--border)}
.audio-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.audio-controls button{background:var(--surface-2);border:1px solid var(--gold);color:var(--on);min-height:76px;padding:10px;border-radius:12px}
.audio-controls button:first-child{background:var(--primary);color:var(--primary-on)}
.audio-controls button:first-child small{color:var(--primary-on)}
.audio-controls button small{font-size:12px;line-height:1.5}
.audio-panel .text-action{margin-top:8px;min-height:44px}
.phase-progress{display:flex;justify-content:center;gap:12px;margin:12px 0;color:var(--muted)}
.phase-progress span{padding:6px 10px;border:1px solid var(--border);border-radius:8px}
.phase-progress .active{color:var(--gold);background:var(--ui-accent-bg);border-color:var(--gold)}
.player-choice{background:var(--surface-2);color:var(--on);border-color:var(--border);min-height:72px}
.player-choice .target-role{display:block;color:var(--muted);grid-column:2/-1;font-size:14px}
.player-choice.selected{background:var(--ui-accent-bg);border-color:var(--gold)}
.wake-person small{display:block;color:var(--gold)}
.night-step,.control-card,.odds-card{border:1px solid var(--border)}
.night-step .wake-instruction{background:var(--surface-2);border:1px solid var(--gold)}
.event-odds{display:block;color:var(--gold);padding-top:8px;border-top:1px solid var(--border);line-height:1.8}
.record-row{border-top:1px solid var(--border);padding:16px 0}
.record-row time{display:block;color:var(--muted);font-size:14px}
.settings-screen .secondary-wide{margin-top:12px;width:100%}
.settings-screen input[type="range"]{width:100%;min-height:48px;accent-color:var(--primary)}
.cinema-art{background-image:url('/images/noir-home-v2.webp');background-position:center 45%;height:210px}
.home-copy{padding:16px;background:var(--surface-1)}
.home-copy .spade{display:none}.home-copy h1{margin:0;font-family:Georgia,serif;font-size:40px;color:var(--gold)}
.home-copy h1 em{color:var(--red-soft)}
.home-hero{border-color:var(--gold);margin-bottom:16px}
.home-links{display:grid;grid-template-columns:repeat(3,1fr)}
.home-links button{min-height:48px;padding:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--on);font-size:13px}
.role-card{border:1px solid var(--gold);overflow:hidden}
.role-art{width:min(100%,240px);aspect-ratio:1;margin:0 auto 16px;background-image:url('/images/role-atlas.webp');background-size:400% 500%;border-radius:12px;border:1px solid var(--gold)}
.role-revealed{background:var(--surface-1)}
.role-revealed .role-glyph.large{display:none}
.role-hidden{min-height:360px;display:flex;flex-direction:column;justify-content:center}
.hold-button{background:var(--surface-2);color:var(--on);border:1px solid var(--gold);min-height:72px}
[data-theme="light"] .vote-row,[data-theme="light"] .player-row,[data-theme="light"] .status-card,[data-theme="light"] .winner-card,[data-theme="light"] .odds-card,[data-theme="light"] .role-guide-row,[data-theme="light"] .method-card,[data-theme="light"] .summary-section,[data-theme="light"] .code-choice button,[data-theme="light"] .balance-summary{background:var(--surface-1);color:var(--on);border-color:var(--border)}
[data-theme="light"] .vote-row.selected,[data-theme="light"] .code-choice button.selected{background:var(--ui-accent-bg)}
[data-theme="light"] .field-help,[data-theme="light"] .role-guide-row p,[data-theme="light"] .method-card small{color:var(--muted)}
.is-busy #cancelEndGame{pointer-events:auto}
.home-copy p,.seat-badge{color:var(--muted)}
html,body{touch-action:pan-x pan-y}
button,a,input,select{touch-action:manipulation}
.game-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0 10px max(8px,env(safe-area-inset-bottom));overflow:hidden}
.game-top{flex:none;margin:0;padding:8px 0;gap:6px}
.game-top .phase-chip{min-height:32px;padding:3px 8px;font-size:13px}
.game-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 12px;scrollbar-width:thin}
.bottom-nav{position:static;transform:none;flex:none;width:100%;margin:0;padding:3px;border-radius:12px;min-height:58px}
.control-card,.night-step,.vote-card,.status-card,.role-card,.odds-card,.setup-card{padding:12px;border-radius:12px;margin-bottom:10px}
.control-card h1,.night-step h1,.vote-card h2{font-size:20px;margin:4px 0;line-height:1.5}
.control-card p,.night-step p,.vote-help{margin:6px 0;font-size:14px;line-height:1.6}
.control-card .card-heading .overline{font-size:12px}
.audio-panel{padding:8px 0;margin:8px 0}
.audio-controls button{min-height:52px;padding:6px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.audio-controls button small{flex-basis:100%}.audio-controls button>span{font-size:18px;width:auto;height:auto;background:none}
.audio-panel .text-action{min-height:36px;padding:4px 8px;font-size:13px}
.phase-progress{margin:6px 0;gap:8px}.phase-progress span{padding:2px 10px;font-size:12px}
.private-vote-list,.host-count-list,.player-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.private-vote-list .vote-row{grid-template-columns:minmax(0,1fr) 24px;min-height:48px;padding:8px;gap:6px;border-radius:8px}
.private-vote-list .vote-row small{display:none}.vote-check{width:24px;height:24px;font-size:16px;border-radius:6px}
.private-vote-list .vote-row b{font-size:14px}.player-vote-private #submitVote{position:static;min-height:48px;margin-top:10px}
.my-vote-status{display:block;font-size:12px;margin-top:8px;color:var(--muted)}
.host-count-list .vote-row{min-height:38px;grid-template-columns:1fr 28px;padding:5px;gap:5px}.host-count-list .vote-row b{font-size:13px}
.host-vote-live .vote-help{display:none}.live-ballots{padding:8px;margin-top:8px}.live-ballots p{margin:4px 0;font-size:13px}
.host-totals>summary,.live-ballots>summary{min-height:36px;font-size:13px}
.player-choice{min-height:52px;padding:8px;display:block;text-align:start}.player-choice b{font-size:14px}.target-role{font-size:12px!important}
.night-step .wake-instruction{padding:8px;margin:8px 0}.wake-person{padding:0}.night-actions{gap:8px;margin-top:10px}
.role-card,.hold-button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.role-stage{height:min(480px,calc(100dvh - 265px));min-height:270px;position:relative;overflow:hidden}
.role-hidden,.role-revealed{position:absolute;inset:0;min-height:0;margin:0;padding:8px;overflow-y:auto}
.role-revealed{display:none}.role-revealed.show{display:block}
.role-art{width:140px;margin-bottom:8px}.role-revealed h2{font-size:22px;margin:4px 0}.role-revealed p{font-size:14px;margin:8px 0}
.hold-button{position:relative;display:block;width:100%;min-height:56px;margin-top:8px;touch-action:none}
.knowledge{font-size:13px}.knowledge span{display:block;padding:3px}
.candidate-results article,.operation-row{padding:10px 0;border-bottom:1px solid var(--border)}
.candidate-results ul{margin:6px 0;padding-inline-start:24px;line-height:1.8}
.operation-row p{margin:4px 0}.operation-row small{color:var(--gold)}
.phone-status{font-size:12px!important;color:var(--muted)}
.bottom-sheet{max-height:85dvh}.bottom-sheet .primary-action{min-height:48px}
@media(max-height:700px){.role-art{width:105px}.control-card p{font-size:13px}.phase-progress{display:none}}
@media(max-width:360px){.home-copy h1{font-size:34px}.cinema-art{height:170px}.header-actions{gap:6px}.audio-controls button b{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}



.role-art[data-role=citizen]{background-position:0% 0%}
.role-art[data-role=detective]{background-position:33.333333333333336% 0%}
.role-art[data-role=doctor]{background-position:66.66666666666667% 0%}
.role-art[data-role=vigilante]{background-position:100% 0%}
.role-art[data-role=bodyguard]{background-position:0% 25%}
.role-art[data-role=seer]{background-position:33.333333333333336% 25%}
.role-art[data-role=gunslinger]{background-position:66.66666666666667% 25%}
.role-art[data-role=tough_guy]{background-position:100% 25%}
.role-art[data-role=mayor]{background-position:0% 50%}
.role-art[data-role=ocean]{background-position:33.333333333333336% 50%}
.role-art[data-role=mafia]{background-position:66.66666666666667% 50%}
.role-art[data-role=godfather]{background-position:100% 50%}
.role-art[data-role=natasha]{background-position:0% 75%}
.role-art[data-role=shadow]{background-position:33.333333333333336% 75%}
/* 2.8.1: the Psychologist has its own portrait. */
.role-art[data-role=psychologist]{background-image:url('/images/role-psychologist.webp');background-size:cover;background-position:center}
.role-art[data-role=saboteur]{background-position:66.66666666666667% 75%}
.role-art[data-role=bomber]{background-position:100% 75%}
.role-art[data-role=illusionist]{background-position:0% 100%}
.role-art[data-role=arsonist]{background-position:33.333333333333336% 100%}
.role-art[data-role=joker]{background-position:66.66666666666667% 100%}
.role-art[data-role=hitman]{background-position:100% 100%}

/* Keep content at its natural height; grid stretching inflated every ballot. */
.game-content{display:block}
.night-controls .card-heading,.night-controls>p,.night-controls .phase-progress{display:none}
.night-controls .bot-mode{display:block;font-size:11px}
.night-controls .audio-panel{margin:4px 0 0;padding:0;border:0;display:grid;grid-template-columns:1fr 44px;gap:6px;align-items:stretch}
.night-controls .audio-panel .text-action{margin:0;min-height:48px;padding:4px;font-size:11px;border:1px solid var(--border);border-radius:8px}
.night-controls .audio-controls{gap:6px}
.night-step .step-progress{margin-bottom:4px}
.night-step .selection-title{margin:8px 0 6px}
.night-step .night-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.night-step .night-actions .primary-action{grid-column:1/-1;min-height:48px;padding:8px}
.night-step .night-actions .text-action{min-height:44px;margin:0;font-size:12px}
.night-step .phone-status{margin:4px 0;line-height:1.5}
.night-step>.overline{display:none}
.game-top{padding-top:max(8px,env(safe-area-inset-top))}
.god-dashboard{flex:none;padding:6px 2px;border-bottom:1px solid var(--border)}
.god-context{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;line-height:1.6}
.god-context>small{font-size:10px;color:var(--muted);margin-inline-start:auto}
.god-dashboard .odds-track{height:6px;margin:4px 0}
.compact-audio{display:flex;gap:6px;align-items:center}
.compact-audio button{min-height:44px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--muted);padding:4px 10px;font-size:12px}
.compact-audio button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.compact-audio #audioOptionsBtn{margin-inline-start:auto;min-width:44px}
.compact-audio button[aria-busy=true]{opacity:.65}
.night-controls{padding:0;border:0;margin:0;background:none}
.night-controls .bot-mode{font-size:10px;margin-bottom:4px;color:var(--muted)}
.night-step .wake-instruction{margin:4px 0;padding:5px 8px}
.wake-list{gap:4px}.wake-list span{padding:3px 5px;font-size:12px}
.night-step .wake-person small{color:var(--muted);font-size:14px}
.night-step h1{font-size:20px}.night-step .narrator-caption{font-size:12px;line-height:1.5}
.night-step .phone-status{font-size:11px!important}
#audioSheet input[type=range]{width:100%;min-height:44px}
.game-top .phase-chip{min-height:44px}

.player-choice b,.vote-row b,.wake-list span,.god-context span{overflow-wrap:anywhere}

.role-revealed p{color:var(--muted)}

/* UI3: remove obsolete seat columns, and size the entire safe-area shell. */
html,body{height:100%;min-height:0;overscroll-behavior-y:none}
body{padding-bottom:0}
.game-shell{height:100dvh;min-height:0;padding-top:env(safe-area-inset-top);padding-bottom:max(6px,env(safe-area-inset-bottom))}
.game-top{position:relative;top:auto;padding:4px 0;min-height:0}
.public-bar{height:auto;min-height:calc(56px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);position:relative;z-index:2;flex-shrink:0}
.app-shell{min-height:100dvh;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.player-row{grid-template-columns:minmax(0,1fr) 44px;min-height:56px;padding:6px 10px;gap:8px}
.player-row>div{min-width:0}.player-row .godOverride{width:44px;height:44px;min-width:44px;max-width:44px;padding:4px}
.player-row small{margin:0;line-height:1.4}.tab-head{padding:2px 0}.tab-head h1{font-size:20px;margin:4px 0}
.wake-person{display:flex;gap:10px;min-width:0}.wake-person>div{min-width:0}.wake-person .wake-art{flex:0 0 48px;width:48px;height:48px;margin:0;border-radius:8px}
.wake-person small{margin:0}.wake-instruction>small{display:none}
.night-step .selection-title{margin:5px 0}.night-step .player-choice{min-height:44px;padding:5px 8px}
.night-step .narrator-caption{margin:4px 0}.night-step .step-progress{margin:0}.night-step{padding:8px}
.bot-tools{display:flex;gap:4px;flex-wrap:wrap}.bot-tools button{padding:4px;min-width:44px;min-height:44px}
.setup-card .card-heading{flex-wrap:wrap}.setup-card .balance-summary{display:none}
.role-stepper small{display:none}.role-stepper{padding-block:5px}.role-accordion{margin-block:6px}
.game-content{overflow-y:auto;overscroll-behavior:none;gap:0;padding-top:4px}
.winner-card{padding:14px}.winner-card>span{font-size:28px}.winner-card h1{font-size:24px;margin:8px 0}
.review-row{border-bottom:1px solid var(--border);padding:8px 0}.review-row summary{min-height:44px;cursor:pointer;font-size:14px}.review-row p{font-size:13px;margin:5px 0}
.timeline-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px;margin:10px 0;align-items:center;font-size:12px}.timeline-row .odds-track{margin:0;height:18px}.timeline-row small{grid-column:2;line-height:1.4;color:var(--muted)}
.report-role-list{display:flex;flex-wrap:wrap;gap:6px}.report-role-list span{padding:4px 6px;background:var(--surface-2);border-radius:6px;font-size:12px}

/* UI4: warm noir surfaces, clear daylight contrast and compact natural-height rows. */
:root,[data-theme="dark"]{
  --surface-0:#101722;--surface-1:#192536;--surface-2:#26384b;--surface-3:#344b61;
  --on:#f2eee5;--muted:#bfccda;--border:#718397;
  --gold:#edca84;--gold-strong:#f4dba9;--primary:#af263e;--primary-on:#fff7ef;
  --red-soft:#ffa6b9;--green:#a0dfb8;--blue:#99d5ff;--warning:#edca84;
  --ui-accent-bg:#3c3223;--ui-danger-bg:#4d2636;--ui-focus:#f4dba9;
  --card-top:#223145;--card-shadow:0 2px 8px #0003,inset 0 1px 0 #ffffff0b;
  --control-shadow:inset 0 1px 0 #ffffff12,0 1px 3px #0002;
  --chart-city:#99d5ff;--chart-mafia:#ffa6b9;--chart-independent:#edca84;
}
[data-theme="light"]{
  --surface-0:#f3eee5;--surface-1:#fffdf8;--surface-2:#e9e7e1;--surface-3:#d7dbe0;
  --on:#182b3b;--muted:#4c5b69;--border:#858a92;
  --gold:#785419;--gold-strong:#69440b;--primary:#a41f39;--primary-on:#fffaf4;
  --red-soft:#a32340;--green:#22643e;--blue:#1b608b;--warning:#785419;
  --ui-accent-bg:#f5e7c5;--ui-danger-bg:#f8e1e5;--ui-focus:#69440b;
  --card-top:#ffffff;--card-shadow:0 1px 2px #2132450c,0 4px 12px #2132450d;
  --control-shadow:inset 0 1px 0 #fff,0 1px 2px #21324512;
  --chart-city:#1b608b;--chart-mafia:#a32340;--chart-independent:#785419;
}
html,body{background:var(--surface-0);color:var(--on);line-height:1.45;scroll-behavior:auto}
button,input,select{line-height:1.35}
/* Change the whole palette together; animating only backgrounds briefly hides text. */
button{transition:transform var(--motion-press) ease-out}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.game-shell{background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 45%),var(--surface-0)}
.game-top{background:var(--surface-0);gap:6px;border-color:var(--border)}
.game-top .phase-chip{padding:4px 8px;box-shadow:var(--control-shadow)}
.game-content{padding:6px 0;overflow-anchor:none}
.game-content>section:last-child,.game-content>div:last-child{margin-bottom:0}
.bottom-nav{height:auto;min-height:58px;border-color:var(--border);background:var(--surface-1);box-shadow:0 -2px 12px #0002;gap:4px}
.bottom-nav button{min-height:48px;padding:4px 2px;color:var(--muted);border:1px solid transparent}
.bottom-nav button.active{color:var(--gold-strong);box-shadow:inset 0 2px 0 var(--gold)}
.bottom-nav button span{font-size:18px;line-height:1.1}.bottom-nav button b{font-size:12px}
.control-card,.night-step,.vote-card,.status-card,.role-card,.odds-card,.setup-card,.winner-card,.game-review{
  background:linear-gradient(160deg,var(--card-top),var(--surface-1) 75%);border:1px solid var(--border);
  border-radius:12px;padding:10px;margin:0 0 8px;box-shadow:var(--card-shadow);
}
.night-controls{background:none;border:0;box-shadow:none;padding:0;margin:0}
.control-card h1,.night-step h1,.vote-card h2,.game-review h2{font-size:20px;line-height:1.35;margin:2px 0 6px}
.control-card p,.night-step p,.status-card p,.vote-help{font-size:14px;line-height:1.5;margin:4px 0}
.overline{margin-bottom:4px;line-height:1.35}.tab-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:2px 0 6px}.tab-head h1{margin:0}.tab-head .overline{margin:0}
.primary-action,.primary-action.compact,.bottom-sheet>button.primary-action{min-height:48px;padding:8px 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 90%,white),var(--primary));color:var(--primary-on);border-color:var(--primary);box-shadow:var(--control-shadow)}
.text-action,.secondary-wide,.exit-button,.mini-action,.icon-btn,.compact-audio button{min-height:44px;background:var(--surface-2);color:var(--on);border:1px solid var(--border);box-shadow:var(--control-shadow)}
.text-action,.secondary-wide{margin-block:4px;padding:7px 10px;border-radius:9px}
.header-actions button{min-width:44px;padding:6px 8px}.code-copy{min-height:28px}
button:disabled{opacity:.6}.player-choice.selected,.vote-row.selected,.code-choice button.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:var(--ui-accent-bg);color:var(--on)}
.field-label{margin:10px 0 4px}.text-field{min-height:48px;padding:8px 12px;background:var(--surface-1)}
.screen-card{padding:4px 0 12px}.screen-intro{margin:8px 0 14px}.screen-intro p{margin:6px 0}.screen-intro h1{font-size:26px}
.player-list{gap:6px}.player-row{min-height:52px;padding:4px 8px;box-shadow:var(--card-shadow);background:var(--surface-1)}
.player-row>div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}.player-row b{font-size:15px;line-height:1.4}.player-row small{font-size:12px;color:var(--muted)}
.player-row.dead{opacity:1;background:var(--surface-0);border-style:dashed}.player-row.dead small{color:var(--muted)}
.death-name{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:2px 4px;border:0;border-radius:6px;background:transparent;color:var(--on);text-align:start;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px;white-space:normal;overflow-wrap:anywhere}
.death-name:active{background:var(--ui-accent-bg)}.death-detail{font-size:16px;line-height:1.5;text-align:start;padding:8px 0}
.player-choice-grid,.private-vote-list{gap:8px}.player-choice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 6px;min-height:44px;padding:5px 8px;border-radius:8px;box-shadow:var(--control-shadow)}
.player-choice b{font-size:14px;line-height:1.35}.player-choice .target-role{font-size:12px!important;line-height:1.3;grid-column:auto;white-space:normal}
.private-vote-list .vote-row{min-height:44px;padding:6px 8px}.vote-list{margin:8px 0;gap:8px}.host-count-list .vote-row{min-height:36px}.vote-help{font-size:14px}
.night-step .wake-instruction{padding:6px 8px;margin:4px 0 6px;border-color:var(--gold);background:var(--surface-2);border-radius:8px}
.wake-person{align-items:center;gap:8px}.wake-person .wake-art{width:40px;height:40px;flex-basis:40px}.wake-person small{font-size:14px;line-height:1.4}
.night-step .selection-title{margin:6px 0;font-size:14px}.night-step .narrator-caption{font-size:14px;line-height:1.45}.night-step .night-actions{margin-top:8px;gap:8px}.night-step .night-actions .text-action{font-size:13px}
.god-dashboard{padding:4px 0 6px}.god-context{gap:4px 8px;line-height:1.4}.god-context>small,.night-controls .bot-mode{font-size:12px}.compact-audio{gap:8px}.compact-audio button{font-size:12px}
.role-stepper{padding-block:4px;gap:8px}.role-stepper b{font-size:14px}.role-accordion{margin-block:4px}.setup-total{padding:8px 0}.bot-tools{gap:8px}
.accordion-head{min-height:44px}.role-stepper .stepper{grid-template-columns:44px 28px 44px;gap:4px}.role-stepper .stepper button{background:var(--surface-2);border-color:var(--border)}
.role-card{padding:8px}.role-hidden h2{margin:4px 0;font-size:24px}.role-revealed h2{font-size:24px;line-height:1.3}.role-revealed p{line-height:1.45;margin:4px 0}.knowledge{margin-top:8px;padding-top:8px;gap:4px 8px}.team-tag{margin-top:6px;padding:3px 8px}
.timeline article{padding-bottom:10px}.timeline p{color:var(--on);font-size:14px;line-height:1.45}.event-odds{padding-top:4px;line-height:1.4;font-size:12px}
.candidate-results article,.operation-row{padding:6px 0}.candidate-results ul{display:flex;flex-wrap:wrap;gap:2px 16px;margin:4px 0;padding-inline-start:18px;font-size:13px;line-height:1.4}
.bottom-sheet{background:var(--surface-1);padding:12px;border-radius:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:start}
.bottom-sheet h2{font-size:20px;line-height:1.4;margin:4px 0}.bottom-sheet p{line-height:1.45;margin:6px 0}.sheet-handle{margin-bottom:10px}.bottom-sheet>button,.bottom-sheet>button:first-of-type{margin-top:8px;min-height:44px;padding:8px 12px}
.result-icon{width:44px;height:44px;font-size:24px;margin:0 auto 8px}.summary-section{padding:6px 0;margin:6px 0}.summary-row{padding-block:4px}.summary-row small{font-size:12px;line-height:1.4}
.mafia-modal-open{overflow:hidden}.mafia-modal-open .game-content{overflow-y:hidden}.sheet-backdrop{overscroll-behavior:none}

/* Separate the exact public announcement from private operational notes. */
.public-readout{padding:10px 12px;background:var(--ui-accent-bg);border:1px solid var(--gold);border-inline-start-width:4px;border-radius:10px;margin:0 0 8px;text-align:start}
.public-readout>.overline,.public-readout>small{display:block;color:var(--gold-strong);font-size:12px;font-weight:700;margin:0 0 5px}
.public-readout blockquote{padding:0;margin:0;font-size:18px;line-height:1.55;font-weight:700;color:var(--on)}
.private-night-summary{padding:8px;margin:8px 0 0;background:var(--surface-0);border:1px dashed var(--border);border-radius:8px;color:var(--muted);text-align:start}
.private-night-summary h2,.private-night-summary h3,.private-night-summary>.overline{font-size:13px;line-height:1.4;color:var(--muted);margin:0 0 6px}
.private-night-summary p,.private-night-summary .operation-row,.private-night-summary b{font-size:13px;line-height:1.45;margin:3px 0}.private-night-summary small{font-size:12px;color:var(--muted)}
.private-night-summary .operation-row{padding:5px 0}.private-night-summary .summary-section{background:transparent}.private-night-summary .summary-row b{font-size:13px}

/* The winning side has a distinctive emblem and an explicit, high-contrast title. */
.winner-card{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:22px 14px;border-color:var(--gold)}
.winner-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 13%,transparent),transparent 60%);pointer-events:none}
.winner-city{--winner-color:var(--chart-city)}.winner-mafia{--winner-color:var(--chart-mafia)}.winner-independent,.winner-none{--winner-color:var(--gold)}
.winner-card[class*="winner-"]{border-color:var(--winner-color,var(--gold))}.winner-card .winner-emblem{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 10px;font-size:42px;line-height:1;border-radius:50%;color:var(--winner-color,var(--gold));border:1px solid currentColor;background:var(--surface-0);box-shadow:0 0 0 6px color-mix(in srgb,var(--winner-color,var(--gold)) 9%,transparent)}
.winner-card .winner-team,.winner-card h1{font-size:30px;font-weight:850;line-height:1.25;margin:8px 0;color:var(--winner-color,var(--gold))}
.winner-card .winner-survivors{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 14px;font-size:14px;color:var(--on)}
.winner-survivors span{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2)}
.winner-card .primary-action{margin-top:14px}

/* A visible report table, with no disclosure accordions. */
.game-review{padding:10px}.game-review h2{margin:8px 0;font-size:18px}.review-table{width:100%;display:block;border-top:1px solid var(--border)}
.review-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:start;margin:0;padding:8px 0;border-bottom:1px solid var(--border)}
.review-period{font-size:12px;font-weight:800;color:var(--gold-strong);line-height:1.4;padding:4px 3px;background:var(--ui-accent-bg);border-radius:6px;text-align:center}
.review-content{min-width:0}.review-action,.review-row p{font-size:13px;line-height:1.45;margin:0 0 4px;overflow-wrap:anywhere}.review-action:last-child{margin-bottom:0}
.review-deaths{margin:5px 0 0;padding:4px 6px;border-inline-start:3px solid var(--red-soft);border-radius:4px;color:var(--on);background:var(--ui-danger-bg);font-size:13px;line-height:1.45}
.report-role-list{gap:6px;margin:8px 0}.report-role-list span{padding:5px 7px;border:1px solid var(--border);line-height:1.4;font-size:12px;background:var(--surface-2)}
.win-line-chart{display:block;width:100%;max-width:100%;margin:8px 0;padding:4px 2px;border:1px solid var(--border);border-radius:10px;background:var(--surface-0);overflow:hidden}
svg.win-line-chart,.win-line-chart svg{display:block;width:100%;height:auto;overflow:visible;color:var(--muted);font-family:inherit;direction:ltr}
.chart-grid{stroke:var(--border);stroke-opacity:.4;stroke-dasharray:3 4;fill:none}.chart-axis{stroke:var(--border);fill:none}.chart-axis text,text.chart-axis{stroke:none;fill:var(--muted);font-size:12px}
.chart-line{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.chart-line.city{stroke:var(--chart-city)}.chart-line.mafia{stroke:var(--chart-mafia)}.chart-line.independent{stroke:var(--chart-independent);stroke-dasharray:5 3}
.chart-marker{stroke:var(--surface-0);stroke-width:2;fill:var(--gold);vector-effect:non-scaling-stroke}.chart-marker.city{fill:var(--chart-city)}.chart-marker.mafia{fill:var(--chart-mafia)}.chart-marker.independent{fill:var(--chart-independent)}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;margin:6px 0;font-size:12px;color:var(--on)}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}.chart-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gold)}
.chart-legend .city{color:var(--chart-city)}.chart-legend .mafia{color:var(--chart-mafia)}.chart-legend .independent{color:var(--chart-independent)}
.chart-legend .city i,i.city{background:var(--chart-city)}.chart-legend .mafia i,i.mafia{background:var(--chart-mafia)}.chart-legend .independent i,i.independent{background:var(--chart-independent)}
.census-card{padding:8px 10px;margin:0 0 8px;border:1px solid var(--gold);border-radius:10px;background:var(--surface-1);box-shadow:var(--card-shadow)}
.census-card h2{font-size:17px;margin:0 0 5px}.census-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-size:13px}.census-card button{min-height:44px}
.census-readout{padding:8px;border-radius:8px;background:var(--ui-accent-bg);color:var(--on);font-size:16px;font-weight:700;line-height:1.45;margin:6px 0}
@media(min-width:600px){.game-review{padding:14px}.review-row{grid-template-columns:74px minmax(0,1fr)}.review-action,.review-row p{font-size:14px}}
@media(max-width:360px){.game-shell{padding-inline:8px}.header-actions{gap:6px}.header-actions button{font-size:12px}.review-row{grid-template-columns:48px minmax(0,1fr);gap:6px}.winner-card .winner-team,.winner-card h1{font-size:26px}.game-content .player-choice{padding-inline:6px}}
@media(prefers-contrast:more){:root,[data-theme="dark"]{--border:#a9bbcd;--muted:#d8e3ec}[data-theme="light"]{--border:#5c6370;--muted:#354654}.control-card,.night-step,.vote-card,.status-card,.setup-card{border-width:2px}}

/* Native text editing stays usable; game controls do not open long-press callouts. */
body,button,a,.game-shell,.app-shell{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
.setup-card .balance-summary{display:block;margin:8px 0;padding:8px;background:var(--surface-0);border-radius:10px;box-shadow:var(--control-shadow)}
.setup-card .balance-summary>div{margin:6px 0;height:8px}.setup-card .balance-summary small{line-height:1.4}
.team-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
.player-team{--team-color:var(--gold);min-width:0;border:1px solid var(--team-color);border-radius:10px;overflow:hidden;background:var(--surface-1);box-shadow:var(--card-shadow)}
.player-team.city{--team-color:var(--chart-city)}.player-team.mafia{--team-color:var(--chart-mafia)}.player-team.independent{--team-color:var(--chart-independent);grid-column:1/-1}
.team-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:3px 6px;min-height:42px;padding:6px 8px;color:var(--team-color);background:color-mix(in srgb,var(--team-color) 10%,var(--surface-0));border-bottom:1px solid var(--team-color);font-size:14px;font-weight:800}
.team-score{font-size:12px;font-weight:650;color:var(--on)}
.player-team .player-list{display:block;padding:0 6px}.player-team .player-row{grid-template-columns:minmax(0,1fr) auto;min-height:48px;padding:3px 0;margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;gap:4px;background:transparent}
.player-team .player-row:last-child{border-bottom:0}.player-team .player-row>div{gap:0 4px}.player-team .player-row b{font-size:14px}.player-team .player-row small{font-size:12px}.player-team .death-name{padding-inline:0;min-width:0;min-height:44px;font-size:14px}
.player-team .player-row.dead{background:color-mix(in srgb,var(--surface-0) 70%,transparent);border-bottom-style:dashed}.player-team .player-row.dead b{color:var(--muted)}
.player-team .godOverride{min-width:44px!important;width:44px!important;border-radius:8px;flex-shrink:0}
.player-team.independent .player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
.home-role-strip{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 0 8px;margin:6px 0;scrollbar-width:thin}
.home-role-card{display:flex;flex:0 0 84px;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface-1);color:var(--on);box-shadow:var(--card-shadow);font-size:12px;text-align:center;min-height:44px}
.home-role-card .role-art{width:68px;height:68px;aspect-ratio:1;margin:0;border-radius:7px}.home-role-card b{font-size:12px;line-height:1.35}
.role-art[data-role="shapeshifter"]{position:relative;background-position:0% 0%;filter:saturate(.55)}
.role-art[data-role="shapeshifter"]:after{content:"◈";position:absolute;inset:auto 6% 6% auto;display:grid;place-items:center;width:35%;height:35%;font-size:clamp(16px,4vw,28px);line-height:1;color:#f4dba9;background:#182334e8;border:1px solid #edca84;border-radius:50%;box-shadow:0 1px 4px #0008}
.home-quote{margin:10px 0;padding:8px 10px;border-inline-start:3px solid var(--gold);color:var(--on);font-size:15px;line-height:1.5;background:var(--surface-1);border-radius:6px}
.home-quote small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.build-version{display:block;font-size:12px;line-height:1.4;color:var(--muted);text-align:center;margin:8px 0}
.public-rooms{margin:12px 0}.public-rooms h2{font-size:18px;margin:0 0 6px}.public-room{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:6px 8px;margin:6px 0;border:1px solid var(--border);border-radius:10px;background:var(--surface-1);box-shadow:var(--card-shadow);font-size:14px}
.public-room>div{min-width:0}.public-room b{overflow-wrap:anywhere}.public-room small{font-size:12px;color:var(--muted)}.public-room button{flex-shrink:0;min-width:44px;min-height:44px;padding:6px 10px}
@media(max-width:360px){.team-players{gap:6px}.team-heading{padding-inline:6px;font-size:13px}.player-team .player-list{padding-inline:4px}.player-team .player-row b,.player-team .death-name{font-size:13px}.home-role-card{flex-basis:78px}.home-role-card .role-art{width:62px;height:62px}}

/* A whole compact roster row opens details; destructive controls live in its sheet. */
.player-list .player-row{display:block;min-height:44px}
.player-row>div{width:100%;min-width:0}
.roster-name{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 5px;width:100%;min-height:44px;padding:4px 5px!important;text-align:start;text-decoration:none!important;color:var(--on)!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:5px!important}
.roster-name b{min-width:0;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.roster-name small{grid-column:1;font-size:12px;line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
.roster-score{grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;min-width:23px;padding:3px;border-radius:6px;color:var(--team-color,var(--gold));background:var(--surface-0);font-size:13px}
.roster-dead{grid-column:2;grid-row:1;color:var(--danger);font-size:14px;font-weight:bold;transform:translateY(-12px)}
.roster-name:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.player-team .player-row.dead .roster-name b{color:var(--muted)}
.team-heading{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:13px}.team-heading .team-score{grid-column:1/-1;font-size:12px}
.chart-point{stroke:var(--surface-0);stroke-width:1.2;vector-effect:non-scaling-stroke}.chart-point.city{fill:var(--chart-city)}.chart-point.mafia{fill:var(--chart-mafia)}.chart-point.independent{fill:var(--chart-independent)}
g.chart-marker{stroke:none;fill:none}g.chart-marker line{stroke:var(--gold);stroke-width:1;stroke-opacity:.35;stroke-dasharray:3 4}g.chart-marker circle{fill:var(--surface-0);stroke:var(--gold);stroke-width:1}g.chart-marker text{fill:var(--gold);stroke:none;font-size:10px;font-weight:700}
.chart-event-list{padding-inline-start:20px;margin:8px 0;font-size:12px;color:var(--muted);line-height:1.45}.chart-event-list li{margin:3px 0}.chart-event-list b{color:var(--gold)}
.gun-card{padding:8px 10px;margin:0 0 8px;border:1px solid var(--gold);border-radius:10px;background:var(--surface-1);box-shadow:var(--card-shadow)}
.gun-card h2{font-size:17px;margin:0 0 5px}.gun-targets{margin:6px 0}.private-label{display:block;font-size:12px;color:var(--gold)}
.ammo-choice{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;padding:6px 8px 8px;border:1px solid var(--border);border-radius:9px;min-width:0}.ammo-choice legend{font-size:12px;color:var(--gold)}
.ammo-choice button{flex:1;min-height:44px;min-width:72px;border:1px solid var(--border);border-radius:7px;color:var(--on);background:var(--surface-2);padding:5px 8px;font-size:14px}.ammo-choice button.selected{background:var(--ui-accent-bg);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.score-breakdown p{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:6px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}.score-breakdown strong{color:var(--gold);text-align:center;direction:ltr}
.history-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.history-stat-grid span{padding:6px 2px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;text-align:center;font-size:12px}.history-stat-grid b{display:block;font-size:18px;color:var(--gold)}
.history-screen h1{font-size:22px;margin:4px 0 10px}.history-screen h2{font-size:18px;margin:12px 0 6px}.history-screen p{font-size:13px;margin:6px 0;line-height:1.45}
.history-leaderboard{display:grid;gap:6px}.history-leaderboard article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-1);box-shadow:var(--card-shadow);font-size:14px}.history-leaderboard article>strong{color:var(--gold);font-size:13px}.history-leaderboard small{grid-column:1/-1;font-size:12px;color:var(--muted)}
.history-screen .record-row{padding:8px 0;font-size:14px}.history-screen .record-row time{font-size:12px}.history-screen .record-row p{margin:2px 0}
@media(max-width:360px){.roster-name b{font-size:13px}.roster-score{font-size:12px;min-width:21px}.team-heading{font-size:12px}.player-team .player-list{padding-inline:3px}}

/* UI5: compact phone layouts, scoped so gameplay choices retain touch targets. */
.public-bar .icon-btn{width:auto;min-width:64px;padding:6px 10px;font-size:13px;line-height:1.2;white-space:nowrap}
.home-hero{margin:4px 0 8px;border-radius:18px}.home-hero .cinema-art{height:110px}
.home-copy{padding:8px 12px}.home-copy .spade{display:none}.home-copy h1{font-size:32px;line-height:1.1;margin:0}.home-copy p{font-size:12px;line-height:1.35;margin:5px 0 0}
.home-actions{gap:6px}.home-actions .primary-action,.home-actions .secondary-action{min-height:48px;padding:7px 12px;gap:10px;border-radius:12px}
.home-actions .action-icon{font-size:22px;width:26px}.home-actions b{font-size:16px}.home-actions small{display:none}.home-actions .secondary-wide{min-height:44px;margin:0;padding:6px 10px}
.home-links{gap:6px;margin-top:4px}.home-links button{font-size:12px;padding:6px;min-height:44px}
.home-role-gallery h2{font-size:15px;margin:4px 0}.home-role-strip{margin:3px 0;padding-bottom:4px;gap:6px}.home-role-card{flex-basis:64px;padding:4px;gap:3px}.home-role-card .role-art{width:52px;height:52px}.home-role-card b{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.build-version{font-size:10px;margin:5px 0}.public-rooms{margin:6px 0}.public-rooms h2{font-size:15px}.public-rooms p{font-size:12px;margin:4px 0}
.screen-card:has(#createForm){padding:10px}.screen-card:has(#createForm) .screen-intro{margin:0 0 6px}.screen-card:has(#createForm) h1{font-size:22px;margin:3px 0}.screen-card:has(#createForm) .screen-intro p{display:none}
#createForm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 8px}
#createForm>*{grid-column:1/-1;min-width:0}#createForm .field-label{font-size:12px;margin:3px 0 0}#createForm .text-field{min-height:44px;padding:7px 10px;margin:0;font-size:16px}
#createForm .mode-field{padding:5px 8px;margin:0}#createForm legend{font-size:12px}#createForm .mode-choice button,#createForm .privacy-choice button{min-height:44px;padding:6px;gap:4px;display:flex;align-items:center;justify-content:center}
#createForm .mode-choice small,#createForm .privacy-choice small{display:none}#createForm .mode-choice b,#createForm .privacy-choice b{font-size:12px;line-height:1.3}#createForm .mode-choice span,#createForm .privacy-choice span{font-size:16px}
#createForm .field-help{font-size:11px;margin:0;line-height:1.3}#createForm .public-room-optin{font-size:12px;margin:0;min-height:40px}#createForm .primary-action{min-height:44px;margin:3px 0 0;padding:8px}
.roles-screen h1{font-size:22px;margin:3px 0 8px}.role-guide-group{border:1px solid var(--border);border-radius:12px;background:var(--surface-1);box-shadow:var(--card-shadow);margin:8px 0;overflow:hidden}
.role-guide-group summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 12px;font-size:16px;font-weight:700;cursor:pointer;color:var(--gold)}.role-guide-group summary:after{content:'＋'}.role-guide-group[open] summary:after{content:'−'}.role-guide-group summary span{margin-inline-start:auto;padding-inline:10px;font-size:12px}
.role-guide-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;padding:8px;margin:0;scroll-margin-top:65px}.role-guide-row .role-art{width:54px;height:64px;margin:0}.role-guide-row b{font-size:15px;line-height:1.35}.role-guide-row p{font-size:12px;line-height:1.5;margin:3px 0;overflow-wrap:anywhere}
.role-art[data-role="shapeshifter"]{background-image:url('/images/shapeshifter-ui5.png');background-size:cover;background-position:center;filter:none}.role-art[data-role="shapeshifter"]:after{display:none}
.inline-role .role-card{padding:5px;margin:0 0 6px}.inline-role .role-stage{height:66px;min-height:66px}.inline-role .role-hidden{padding:4px;flex-direction:row;align-items:center;gap:8px}.inline-role .role-hidden .role-lock{font-size:22px;margin:0}.inline-role .role-hidden h2{font-size:15px}.inline-role .role-hidden p{display:none}.inline-role .hold-button{min-height:44px;padding:6px;font-size:13px;margin:0}
.inline-role .role-stage:has(.role-revealed.show){height:190px}.inline-role .role-revealed{padding:6px}.inline-role .role-revealed .role-art{float:inline-start;width:54px;height:64px;margin-inline-end:8px}.inline-role .role-revealed h2{font-size:17px}.inline-role .role-revealed p{font-size:12px;line-height:1.4}.inline-role .team-tag{font-size:11px;margin:0;padding:2px 6px}
.vote-result-sheet{display:flex;flex-direction:column;max-height:80dvh;padding:12px}.vote-result-sheet .result-icon{font-size:22px;margin:0}.vote-result-sheet h2{font-size:18px;line-height:1.4;margin:5px 0}.vote-result-sheet .candidate-results{overflow:auto;min-height:0;font-size:13px}.vote-result-sheet #closeResult{flex-shrink:0;margin-top:8px;min-height:44px}.candidate-results ul{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0;padding-inline-start:18px}
#confirmLiveChoice{width:100%;min-height:44px;justify-content:center;font-size:14px}

/* UI5 follow-up: cinematic home, vote announcement, compact score empty state. */
.theme-quick-btn{min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:999px;background:var(--surface-1);color:var(--gold);font-size:18px;font-weight:750;display:grid;place-items:center;padding:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.home-hero.home-hero-cinematic{height:205px;margin:4px 0 10px;border-radius:20px;border-color:rgba(217,182,107,.32);position:relative;overflow:hidden;isolation:isolate;background:#0b0d12;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.home-hero.home-hero-cinematic .cinema-art{position:absolute;inset:0;height:100%;background-image:url('/images/noir-home-v2.webp');background-position:center 42%;background-size:cover;transform:scale(1.015)}
.home-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,9,13,.04) 12%,rgba(7,9,13,.18) 46%,rgba(7,9,13,.9) 100%),linear-gradient(90deg,rgba(4,5,8,.24),transparent 42%,rgba(4,5,8,.1))}
.home-copy.home-copy-overlay{position:absolute;z-index:2;inset:auto 0 0;padding:16px 16px 14px;text-align:start;background:transparent;text-shadow:0 2px 12px rgba(0,0,0,.72)}
.home-copy.home-copy-overlay .home-kicker{display:block;color:#e5c77f;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.home-copy.home-copy-overlay h1{font-size:38px;line-height:.98;margin:0;color:#f4e6c0;letter-spacing:-.025em}.home-copy.home-copy-overlay h1 em{color:#df5b61}
.home-copy.home-copy-overlay p{font-size:13px;line-height:1.3;margin:5px 0 0;color:#f1e6cf;font-weight:550}
.vote-result-sheet{gap:8px}.vote-result-hero{display:grid;place-items:center;text-align:center;padding:12px 10px 10px;margin:0 -2px 2px;border-radius:14px;background:linear-gradient(180deg,rgba(191,65,72,.16),rgba(191,65,72,.05));border:1px solid rgba(226,106,112,.28)}
.vote-result-hero>span{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--red-soft)}.vote-result-hero>strong{font-size:30px;line-height:1.05;color:var(--on);margin:2px 0 3px}.vote-result-hero>small{font-size:13px;color:var(--muted)}
.vote-result-hero.no-target{background:var(--surface-2);border-color:var(--border)}.vote-result-hero.no-target>strong{font-size:22px;color:var(--gold)}
.vote-voters{display:flex;flex-wrap:wrap;gap:5px 7px;margin-top:6px}.vote-voters span{display:inline-flex;align-items:center;min-height:26px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-size:12px;color:var(--muted)}
.vote-result-waiting{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:13px;text-align:center;line-height:1.45}
.score-breakdown .score-empty{display:block;grid-template-columns:none;text-align:center;padding:8px 4px;margin:0;color:var(--muted);line-height:1.35;white-space:normal;overflow-wrap:normal}
.mayor-card{margin-top:8px}.mayor-card.resolved{border-color:rgba(103,184,141,.3)}
@media(max-width:360px){.home-hero.home-hero-cinematic{height:180px}.home-copy.home-copy-overlay{padding:13px 13px 12px}.home-copy.home-copy-overlay h1{font-size:34px}.home-copy.home-copy-overlay p{font-size:12px}.vote-result-hero>strong{font-size:26px}}
.morning-sequence{display:block;margin:0 0 6px;padding:7px 9px;border-radius:9px;background:rgba(217,182,107,.1);color:var(--gold);font-size:12px;font-weight:750;text-align:center}


/* UI5R3: lobby/create/bot controls */
.public-rooms-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.public-rooms-head h2{margin:0}
.refresh-public{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:5px 9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-1);color:var(--on);box-shadow:var(--control-shadow);font-size:12px;font-weight:750;white-space:nowrap}
.refresh-public span{font-size:18px;line-height:1}.refresh-public b{font-size:11px}
.host-mode-field .mode-choice button{gap:8px}
.god-mode-icon{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:10px;background:var(--ui-accent-bg);border:1px solid color-mix(in srgb,var(--gold) 60%,var(--border));color:var(--gold-strong)}
.god-mode-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.setup-mode{display:block;margin-bottom:3px}
.setup-player-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.setup-player-row h2{margin:0;white-space:nowrap;font-size:18px}
.bot-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:nowrap;min-width:0}
.bot-tools .bot-tool{display:grid;place-items:center;width:39px;min-width:39px;height:39px;min-height:39px;padding:3px;border-radius:10px}
.bot-tool svg{width:34px;height:29px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.bot-vote-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:7px}
.bot-vote-head>div{min-width:0}.bot-vote-head .field-help{margin:2px 0 0}
.bot-auto-vote{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:42px;flex:0 0 auto;padding:6px 9px;border-radius:10px;border:1px solid var(--gold);background:var(--ui-accent-bg);color:var(--on);font-size:12px}
.bot-auto-vote span{font-size:20px;line-height:1}.bot-auto-vote b{font-size:11px;white-space:nowrap}
@media(max-width:350px){.setup-player-row h2{font-size:16px}.bot-tools{gap:3px}.bot-tools .bot-tool{width:36px;min-width:36px;height:36px;min-height:36px}.bot-tool svg{width:31px;height:27px}.refresh-public b{display:none}.refresh-public{width:38px;padding:4px}.bot-auto-vote b{font-size:10px}}

/* UI5R5: phone-only presentation on every viewport + stable role reveal + host utilities. */
.game-identity{display:flex;align-items:flex-end;gap:10px;min-width:0}.game-identity>div{min-width:0}.own-name{display:grid;line-height:1.1}.own-name small{font-size:9px;color:var(--muted)}.own-name b{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--on)}
.inline-role .role-stage,.inline-role .role-stage:has(.role-revealed.show){height:190px;min-height:190px}.inline-role .role-hidden{height:100%;justify-content:center}.inline-role .hold-button{position:relative;inset:auto;display:block;width:100%;margin:0}
.roster-main{display:grid;min-width:0;width:100%}.role-limit{display:block;padding:0 5px 4px;color:var(--gold);font-size:11px;line-height:1.3}.kick-player{min-width:58px;min-height:36px;padding:5px 8px;border:1px solid rgba(226,106,112,.38);border-radius:9px;background:rgba(191,65,72,.12);color:var(--red-soft);font-size:11px;font-weight:750}.player-list .player-row{display:flex;align-items:center;gap:6px}.player-row>.roster-main{flex:1}.player-team .player-row{display:flex;grid-template-columns:none}
.ocean-allies-god{display:block;margin-top:3px;color:var(--gold);font-size:11px;font-weight:750}.gun-pending{margin:6px 0 8px}.private-result{border-color:rgba(106,169,216,.38);background:color-mix(in srgb,var(--chart-city) 7%,var(--surface-1))}
@media(min-width:540px){.mode-choice,.privacy-choice,.entry-methods,.mini-target-grid{grid-template-columns:1fr}}
@media(min-width:600px){
 body{display:block}.app-shell,.game-shell{width:min(100%,430px)!important;max-width:430px!important;margin-inline:auto!important;padding-inline:12px!important}
 .game-shell{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;grid-template-rows:none!important;column-gap:0!important;padding-bottom:92px!important}
 .game-top{display:flex!important;grid-column:auto!important;margin:0 -12px!important;padding-left:12px!important;padding-right:12px!important}
 .game-content{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:none!important;padding-top:8px!important}
 .bottom-nav{position:fixed!important;left:50%!important;right:auto!important;bottom:0!important;top:auto!important;transform:translateX(-50%)!important;width:min(100%,430px)!important;height:72px!important;min-height:72px!important;display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;gap:6px!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;border-radius:18px 18px 0 0!important;background:color-mix(in srgb,var(--surface-1) 94%,transparent)!important;backdrop-filter:blur(14px)!important}
 .bottom-nav button{min-height:54px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;padding:5px 2px!important;gap:2px!important}.bottom-nav button span,.bottom-nav button b{grid-row:auto!important;font-size:inherit}.bottom-nav button.active{box-shadow:inset 0 2px 0 var(--gold)!important}
 [dir="rtl"] .bottom-nav button.active{box-shadow:inset 0 2px 0 var(--gold)!important}
 .toast{bottom:86px!important}
}
/* UI5R6: compact, phase-labelled event history and clearer God controls.
/* UI5R7: endgame parity logic only; no visual layout change. */ */
.event-timeline{gap:0}
.event-timeline article{padding:7px 10px 7px 16px;margin:0 0 5px 7px;border-left:3px solid var(--border);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--surface-1) 90%,transparent)}
[dir="rtl"] .event-timeline article{padding:7px 16px 7px 10px;margin:0 7px 5px 0;border-left:0;border-right:3px solid var(--border);border-radius:10px 0 0 10px}
.event-timeline article:before{left:-7px;top:14px;width:10px;height:10px;background:var(--border)}
[dir="rtl"] .event-timeline article:before{left:auto;right:-7px}
.event-timeline time{display:inline-flex;align-items:center;min-height:22px;padding:2px 7px;border-radius:999px;background:var(--surface-2);font-size:11px;font-weight:800;color:var(--gold);letter-spacing:0}
.event-timeline p{font-size:13px;line-height:1.4;margin:4px 0 0}
.event-timeline article.event-death{border-color:var(--red-soft);background:color-mix(in srgb,var(--ui-danger-bg) 54%,var(--surface-1))}.event-timeline article.event-death:before{background:var(--red-soft)}
.event-timeline article.event-save{border-color:var(--green)}.event-timeline article.event-save:before{background:var(--green)}
.event-timeline article.event-mafia{border-color:var(--primary)}.event-timeline article.event-mafia:before{background:var(--primary)}
.event-timeline article.event-city{border-color:var(--blue)}.event-timeline article.event-city:before{background:var(--blue)}
.event-timeline article.event-independent{border-color:var(--gold)}.event-timeline article.event-independent:before{background:var(--gold)}
.review-action.event-death{border-inline-start:3px solid var(--red-soft);padding-inline-start:8px}.review-action.event-save{border-inline-start:3px solid var(--green);padding-inline-start:8px}.review-action.event-mafia{border-inline-start:3px solid var(--primary);padding-inline-start:8px}.review-action.event-city{border-inline-start:3px solid var(--blue);padding-inline-start:8px}
.dead-turn-status{display:flex;align-items:center;gap:10px;margin:8px 0;padding:9px 11px;border:1px solid var(--red-soft);border-radius:10px;background:var(--ui-danger-bg);color:var(--on)}
.dead-turn-status>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red-soft);color:var(--surface-0);font-size:22px;font-weight:900;line-height:1}
.dead-turn-status div{display:grid;gap:1px}.dead-turn-status b{font-size:14px}.dead-turn-status small{color:var(--red-soft);font-weight:800}
.census-card .primary-action,.census-card .secondary-wide{margin-bottom:8px}
.control-card [data-controller="resolve-night"]{margin-top:12px;margin-bottom:8px}
.finished-exit{margin-top:12px!important;min-height:58px}.finished-exit span{display:grid;gap:2px;text-align:center}.finished-exit small{font-size:12px}

/* UI5R8: weighted balance, Impact, and role-adjusted rating. */
.roster-metrics{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:4px;align-items:center}.roster-metrics strong,.roster-metrics small{font-size:11px;line-height:1.2}.roster-metrics .positive,.advanced-score-grid .positive{color:var(--success,#7bcf9a)}.roster-metrics .negative,.advanced-score-grid .negative{color:var(--danger,#e27474)}
.advanced-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}.advanced-score-grid span{display:flex;flex-direction:column;gap:3px;padding:10px 6px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);text-align:center}.advanced-score-grid b{font-size:16px}.advanced-score-grid small{font-size:10px;color:var(--muted)}
.balance-summary>small+small{display:block;margin-top:4px;opacity:.8}.odds-card .power-breakdown>p{font-size:12px;line-height:1.55;margin:10px 0}
@media(max-width:350px){.advanced-score-grid{gap:5px}.advanced-score-grid span{padding:8px 4px}.advanced-score-grid b{font-size:14px}}

/* UI5R9: weighted setup, explicit bot tools, manual vote control, dead-player dashboard. */
.bot-tools{gap:5px;flex:0 1 auto}
.bot-tools .bot-tool{width:52px;min-width:52px;height:51px;min-height:51px;padding:3px 2px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden}
.bot-tool svg{width:31px;height:27px;flex:0 0 27px;stroke-width:2.15}
.bot-tool small{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;font-size:8.5px;line-height:1;color:var(--muted);white-space:nowrap;font-weight:800}
.bot-tool small b{font-size:10px;line-height:1;color:currentColor}
.bot-add{border-color:color-mix(in srgb,var(--chart-city) 55%,var(--border))!important;background:color-mix(in srgb,var(--chart-city) 9%,var(--surface-1))!important}.bot-add small{color:var(--chart-city)}
.bot-fill{border-color:color-mix(in srgb,var(--gold) 55%,var(--border))!important;background:var(--ui-accent-bg)!important}.bot-fill small{color:var(--gold-strong)}
.bot-clear{border-color:rgba(226,106,112,.42)!important;background:rgba(191,65,72,.10)!important}.bot-clear small{color:var(--red-soft)}
.bot-manage{border-color:color-mix(in srgb,var(--muted) 45%,var(--border))!important}.bot-manage small{color:var(--on)}
.bot-badge{fill:var(--surface-1);stroke:currentColor}.bot-badge-mark{stroke:currentColor}
.manual-vote-controls{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);display:grid;gap:8px}.manual-vote-controls>div:first-child{display:grid;gap:2px}.manual-vote-controls small{color:var(--muted);font-size:11px}.manual-vote-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.danger-outline{border-color:rgba(226,106,112,.48)!important;color:var(--red-soft)!important;background:rgba(191,65,72,.08)!important}
.dead-dashboard-card .dead-stage{min-height:250px;height:250px}.dead-dashboard-hidden{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.dead-dashboard{height:100%;overflow:auto;padding:13px}.dead-dashboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.dead-dashboard-head h2{margin:2px 0 0}.dead-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:24px;font-weight:900;color:var(--red-soft);background:rgba(191,65,72,.12);border:1px solid rgba(226,106,112,.38)}.dead-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:9px 0}.dead-stat-grid span{display:grid;place-items:center;padding:6px 2px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}.dead-stat-grid b{font-size:16px}.dead-stat-grid small{font-size:8px;color:var(--muted)}.dead-feed{display:grid;gap:5px}.dead-feed> b{font-size:11px;color:var(--muted)}.dead-feed .event-card{margin:0;padding:6px 8px;border-radius:8px;border-inline-start:3px solid var(--border);background:var(--surface-2)}.dead-feed .event-card small{font-size:8px;color:var(--muted)}.dead-feed .event-card p{margin:1px 0 0;font-size:10px;line-height:1.35}.dead-feed .event-death{border-inline-start-color:var(--red-soft)}.dead-feed .event-save{border-inline-start-color:var(--chart-city)}.dead-feed .event-mafia{border-inline-start-color:var(--red-soft)}.dead-feed .event-city{border-inline-start-color:var(--chart-city)}.dead-feed .event-independent{border-inline-start-color:var(--gold)}.dead-hold{position:relative!important;inset:auto!important;display:block!important;width:100%!important;margin:0!important}
@media(max-width:350px){.bot-tools{gap:3px}.bot-tools .bot-tool{width:45px;min-width:45px;height:49px;min-height:49px}.bot-tool svg{width:28px;height:25px;flex-basis:25px}.bot-tool small{font-size:7.5px}.setup-player-row h2{font-size:15px}.manual-vote-actions{grid-template-columns:1fr}.dead-dashboard-card .dead-stage{min-height:238px;height:238px}}

/* UI5R10: compact player details, bomb announcement gate, Arsonist mode choice. */
.player-detail-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}.player-detail-head h2{margin:0;margin-inline-end:auto;min-width:0}.player-detail-head>strong{font-size:12px;white-space:nowrap}.player-detail-status{display:inline-flex;align-items:center;min-height:24px;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:850;border:1px solid var(--border)}.player-detail-status.alive{color:var(--success,#7bcf9a);background:color-mix(in srgb,var(--success,#7bcf9a) 10%,transparent)}.player-detail-status.dead{color:var(--red-soft);background:rgba(191,65,72,.10);border-color:rgba(226,106,112,.38)}
.arson-mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:7px 0 10px}.arson-mode-choice button{min-height:48px;padding:8px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--on);font-size:12px;font-weight:800}.arson-mode-choice button.selected{border-color:var(--gold);background:var(--ui-accent-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}
.bomb-result{border-color:rgba(226,106,112,.42);background:color-mix(in srgb,var(--ui-danger-bg) 62%,var(--surface-1))}.bomb-result h2{font-size:18px;line-height:1.45}
@media(max-width:350px){.arson-mode-choice{grid-template-columns:1fr}.player-detail-head{gap:5px}.player-detail-head>strong{font-size:11px}}

/* UI5R11: sabotage signalling, mandatory Godfather and safer host exit. */
.blocked-god-step,.blocked-action{border-color:rgba(226,106,112,.48);background:color-mix(in srgb,var(--ui-danger-bg) 55%,var(--surface-1))}
.blocked-hands{display:flex;align-items:center;justify-content:center;min-height:58px;margin:2px 0 7px;border:1px dashed rgba(226,106,112,.55);border-radius:13px;background:rgba(191,65,72,.10);color:var(--red-soft);font-size:30px;font-weight:900;letter-spacing:6px}
.disabled-choice-grid{opacity:.58}.disabled-choice-grid .player-choice{cursor:not-allowed;filter:saturate(.45)}
.blocked-action h1,.blocked-god-step h1{margin-bottom:5px}.blocked-god-step .overline.danger{color:var(--red-soft)}

/* UI5R12: Ocean history dedupe, Shapeshifter deferral, compact results copy and God signal prompts. */

/* UI5R13: fixed-width responsive probability chart, gun announcement gate, rescue audit detail. */
.win-line-chart svg{max-width:100%;height:204px}.gun-result-sheet h2{font-size:18px;line-height:1.55}

/* UI5R14: grouped events, owner-only score history, lighter live estimates. */
.event-groups{display:grid;gap:12px}.event-period-group{display:grid;gap:5px}.event-period-group>header{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}.event-period-group>header b{font-size:13px;color:var(--gold)}.event-period-group>header small{font-size:12px;color:var(--muted)}.event-period-group .event-timeline article{margin-bottom:5px}.event-period-group .event-timeline p{margin-top:0}
.my-scores-screen .score-hero{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}.score-hero>div{display:grid;gap:2px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.score-hero small{font-size:12px;color:var(--muted)}.score-hero strong{font-size:25px;line-height:1.1;color:var(--gold)}.score-hero em{font-size:12px;font-style:normal;color:var(--muted)}.owner-stats span{display:grid;gap:2px;align-content:center;min-height:72px}.owner-stats span b{font-size:22px;color:var(--gold)}.my-score-list{display:grid;gap:8px}.my-score-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-1)}.my-score-list article>div{display:grid;min-width:0}.my-score-list article b{font-size:15px}.my-score-list article small,.my-score-list article p{font-size:12px;color:var(--muted)}.my-score-list article p{grid-column:1/-1;margin:0}.my-score-list article>strong{font-size:13px;align-self:start}.positive{color:var(--green)!important}.negative{color:var(--red-soft)!important}
@media(max-width:340px){.my-scores-screen .score-hero{grid-template-columns:1fr}.event-period-group>header{padding-inline:8px}}

/* UI5R16: creator-owned game management. */
.owned-home-link{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:inherit}
.owned-home-link small{opacity:.72}
.owned-game-list{display:grid;gap:12px;margin-top:14px}
.owned-game-card{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;padding:14px;background:var(--panel,rgba(255,255,255,.04))}
.owned-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.owned-game-head small{display:block;opacity:.68}.owned-game-head b{font-size:1.25rem;letter-spacing:.12em}
.owned-game-head>span{font-size:.78rem;padding:5px 9px;border-radius:999px;border:1px solid currentColor}
.owned-game-head>span.open{color:#7fcf9e}.owned-game-head>span.finished{color:#b9b9b9}
.owned-game-actions{display:grid;gap:8px;margin-top:12px}.owned-game-actions .primary-action,.owned-game-actions .secondary-wide{width:100%}

/* UI5R17: Auto God narrator-only host console. */
.auto-god-shell .game-content{display:grid;align-items:center;min-height:calc(100dvh - 150px)}
.auto-god-shell .bottom-nav{grid-template-columns:1fr}
.auto-god-console{width:min(100%,520px);margin:auto;display:grid;justify-items:center;gap:12px;text-align:center;padding:22px 16px;border:1px solid color-mix(in srgb,var(--gold) 42%,var(--border));border-radius:22px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--gold) 10%,transparent),transparent 45%),var(--surface-1)}
.auto-god-orb{width:78px;height:78px;display:grid;place-items:center;border-radius:50%;font-size:34px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--gold) 55%,var(--border));box-shadow:0 0 28px color-mix(in srgb,var(--gold) 12%,transparent)}
.auto-god-console h1{margin:0;font-size:clamp(24px,7vw,36px)}
.auto-god-console>p{max-width:430px;margin:0;color:var(--muted);line-height:1.65}
.auto-god-console>small{color:var(--muted);line-height:1.55}
.auto-god-status{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}
.auto-god-status i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.auto-god-status i.live{background:var(--green,#79c89b);box-shadow:0 0 0 5px color-mix(in srgb,var(--green,#79c89b) 12%,transparent)}
.auto-wait-seen{margin:8px 0 0;color:var(--muted);font-variant-numeric:tabular-nums}.auto-wait-seen span{color:var(--text);font-weight:700}
.auto-god-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.auto-god-actions .primary-action:only-child{grid-column:1/-1}
.auto-human-only{display:block;color:var(--gold-strong);font-size:11px;line-height:1.45}
@media(max-width:390px){.auto-god-console{padding:18px 12px;gap:10px}.auto-god-orb{width:68px;height:68px;font-size:30px}.auto-god-actions{grid-template-columns:1fr}.auto-god-actions .primary-action{grid-column:auto}.auto-god-shell .game-top{gap:6px}.auto-god-shell .phase-chip{font-size:10px;padding-inline:7px}}

/* UI5R20 isolated Test Lab player preview */
.simulator-banner{position:sticky;top:0;z-index:30;padding:6px 10px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.12em;background:#8d6d31;color:#fff}

/* UI5R22: Auto God is a real player device; keep narrator and private player UI distinct. */
.auto-player-zone{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.auto-player-zone>.overline{display:block;text-align:center;color:var(--gold-strong)}
.auto-player-zone .inline-role,.auto-player-zone .role-card{margin:0}

/* UI5R22: shared player layout and non-obstructing feedback. */
.auto-god-shell .game-content{display:block;min-height:0}
.auto-god-shell .bottom-nav{grid-template-columns:repeat(var(--tabs),1fr)}
.auto-god-console{padding:12px;gap:8px;margin:12px 0}
.auto-god-orb{display:none}
.auto-god-console h1{font-size:20px}
.auto-god-console>p:nth-of-type(2){display:none}
.toast{position:static!important;bottom:auto!important;left:auto!important;transform:none!important;width:100%;max-width:480px;margin:0 auto;padding:8px 12px;box-shadow:none;pointer-events:none}
#toast:not(.hidden){position:relative!important}

/* UI5R23: all player devices, in both game modes. Colours describe UI functions,
   never the player's unrevealed role or team. */
.player-shell{--player-violet:#a58af5;--player-teal:#57cbb8;--player-blue:#76aff5;--player-coral:#f08d99}
.player-shell .game-top{background:linear-gradient(115deg,color-mix(in srgb,var(--player-violet) 13%,var(--surface-1)),var(--surface-1));border-bottom:1px solid color-mix(in srgb,var(--player-violet) 35%,var(--border))}
.player-shell .phase-chip{background:color-mix(in srgb,var(--player-blue) 13%,var(--surface-2));border-color:color-mix(in srgb,var(--player-blue) 45%,var(--border))}
.player-shell .game-content{display:grid;align-content:start;gap:12px}
.player-shell .game-content>section,.player-shell .game-content>.inline-role{margin-block:0}
.player-shell .role-card{background:radial-gradient(ellipse at 80% 0,color-mix(in srgb,var(--player-violet) 23%,transparent),transparent 70%),var(--surface-1);border-color:color-mix(in srgb,var(--player-violet) 52%,var(--border));box-shadow:0 7px 24px #00000012}
.player-shell .role-hidden .role-lock{color:var(--player-violet);background:color-mix(in srgb,var(--player-violet) 12%,var(--surface-2));border-color:color-mix(in srgb,var(--player-violet) 40%,var(--border))}
.player-shell .hold-button{background:color-mix(in srgb,var(--player-violet) 17%,var(--surface-2));border-color:color-mix(in srgb,var(--player-violet) 45%,var(--border));min-height:46px}
.player-shell .status-card,.player-shell .private-night-result,.player-shell .night-step,.player-shell .spectator-dashboard{background:linear-gradient(125deg,color-mix(in srgb,var(--player-teal) 12%,var(--surface-1)),var(--surface-1) 75%);border:1px solid color-mix(in srgb,var(--player-teal) 38%,var(--border));border-radius:18px;padding:16px}
.player-shell .night-step{border-inline-start:4px solid var(--player-teal)}
.player-shell .player-choice{background:color-mix(in srgb,var(--player-blue) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--player-blue) 30%,var(--border));min-height:48px}
.player-shell .player-choice.selected{background:color-mix(in srgb,var(--player-teal) 25%,var(--surface-2));border-color:var(--player-teal);box-shadow:inset 0 0 0 1px var(--player-teal)}
.player-shell .vote-card{background:linear-gradient(130deg,color-mix(in srgb,var(--player-blue) 16%,var(--surface-1)),var(--surface-1));border-color:color-mix(in srgb,var(--player-blue) 45%,var(--border))}
.player-shell .auto-god-console{background:linear-gradient(140deg,color-mix(in srgb,var(--gold) 14%,var(--surface-1)),var(--surface-1));border-inline-start:4px solid var(--gold)}
.player-shell .day-gun-card,.player-shell .gun-card{background:color-mix(in srgb,var(--player-coral) 10%,var(--surface-1));border-color:color-mix(in srgb,var(--player-coral) 40%,var(--border))}
.player-shell .bottom-nav{background:linear-gradient(110deg,color-mix(in srgb,var(--player-violet) 10%,var(--surface-1)),var(--surface-1));box-shadow:0 -6px 24px #00000012}
.player-shell .bottom-nav button.active{background:color-mix(in srgb,var(--player-violet) 22%,var(--surface-2));border-color:var(--player-violet)}
.player-shell .event-card{border-inline-start:3px solid var(--player-blue)}
.player-shell .event-card.danger{border-inline-start-color:var(--player-coral)}
.player-shell .event-card.success{border-inline-start-color:var(--player-teal)}
.spectator-dashboard{width:100%;height:auto;max-height:none;text-align:start;overflow:visible}
.spectator-dashboard .dead-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spectator-dashboard h2{font-size:24px;margin:5px 0}.spectator-dashboard h3{font-size:16px;margin:14px 0 10px}
.spectator-dashboard .dead-dashboard-head p{font-size:14px;margin:4px 0;color:var(--muted)}
.spectator-dashboard .dead-mark{font-size:34px;color:var(--player-teal)}
.spectator-dashboard .dead-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}
.spectator-dashboard .dead-stat-grid span{display:grid;gap:5px;padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}
.spectator-dashboard .dead-stat-grid b{font-size:26px;line-height:1.2;color:var(--on)}
.spectator-dashboard .dead-stat-grid small{font-size:13px;color:var(--muted)}
.spectator-dashboard .dead-feed{display:grid;gap:8px;max-height:none;overflow:visible}
.spectator-dashboard .dead-feed .event-card{padding:12px;border-radius:12px;background:var(--surface-2)}
.spectator-dashboard .dead-feed .event-card p{font-size:14px;line-height:1.8;margin:5px 0;white-space:normal;overflow:visible}
.spectator-dashboard .dead-feed .event-card small{font-size:12px}
.player-shell .god-handover-card{border:1px solid var(--player-teal);background:color-mix(in srgb,var(--player-teal) 15%,var(--surface-1))}
@media(prefers-reduced-motion:reduce){.player-shell *{scroll-behavior:auto}}

[data-theme="light"] .player-shell{--player-violet:#7751b5;--player-teal:#287f72;--player-blue:#376fa7;--player-coral:#b3475d}
.player-shell .public-readout{border-inline-start:4px solid var(--player-blue);border-radius:14px;background:color-mix(in srgb,var(--player-blue) 10%,var(--surface-1));padding:14px}
.player-shell .census-card{border-color:color-mix(in srgb,var(--player-blue) 50%,var(--border));background:color-mix(in srgb,var(--player-blue) 8%,var(--surface-1))}
.player-shell .event-card.death{border-inline-start-color:var(--player-coral)}
.player-shell .event-card.save{border-inline-start-color:var(--player-teal)}
.player-shell .bottom-nav button.active{color:var(--on);box-shadow:inset 0 2px 0 var(--player-violet)!important}

/* RC12: spoken instructions and silent moderator notes cannot be confused. */
.spoken-script{margin:14px 0;padding:16px;border:1px solid #c9ac67;border-inline-start:5px solid #e5c478;border-radius:18px;background:linear-gradient(130deg,#243449,#122237);color:#fff8e8;text-align:start}
.spoken-label{display:block;font-size:12px;letter-spacing:.02em;color:#f1d798;margin-bottom:10px}
.spoken-cue{font-family:Vazirmatn,Tahoma,Arial,sans-serif;font-size:clamp(20px,5.6vw,25px);font-weight:700;line-height:1.9;margin:8px 0;letter-spacing:0}
.speech-pause{display:block;font:500 12px/1.7 Tahoma,Arial,sans-serif;color:#b8c9dc;border-inline-start:2px dotted #8196ae;padding-inline-start:8px;margin:10px 0}
.god-private,.private-night-summary{margin:12px 0;padding:12px;border:1px dashed var(--line,#546175);border-radius:12px;font-size:14px;text-align:start}
.god-private summary,.private-night-summary summary{cursor:pointer;font-size:13px;color:var(--muted,#b6c4d6);list-style:revert}
.god-private .private-result-value{font-size:21px;line-height:1.8;padding:8px 0}
.god-private p{margin:8px 0}.night-step .spoken-script{margin-top:8px}.result-sheet .spoken-script{text-align:start}
[data-theme="light"] .spoken-script{background:linear-gradient(130deg,#fff6dc,#eef5ff);color:#152b42;border-color:#ac862e}
[data-theme="light"] .spoken-label{color:#70500d}[data-theme="light"] .speech-pause{color:#4e637c}

/* Critical Night 1 action stays above all tabs and narrator panels. */
.mafia-recognition-control{border:2px solid var(--gold,#dcb768)!important;margin:0 0 14px!important;background:linear-gradient(125deg,#3a2636,#162e43)!important;color:#fff8e8}.mafia-recognition-control h2{font-size:18px!important}.mafia-recognition-control button{margin-top:8px;min-height:52px;width:100%}
/* Human God: which player a private prompt concerns. Visual only, never narrated. */
.god-addressee{display:flex;flex-direction:column;gap:2px;margin:8px 0;padding:8px 12px;border:1px solid var(--gold);border-inline-start-width:3px;border-radius:10px;background:var(--ui-accent-bg)}
.god-addressee .overline{color:var(--gold);font-size:11px;letter-spacing:.04em}
.god-addressee b{color:var(--on);font-size:17px;line-height:1.35;overflow-wrap:anywhere}
/* Saboteur-blocked turn on the blocked player's phone */
.blocked-action .blocked-hand{font-size:56px;line-height:1;text-align:center;margin:6px 0 2px}
.blocked-action h1{text-align:center}
/* Settings, narrator and background-music controls */
.settings-screen h1{margin-bottom:4px}
.settings-group{margin-top:14px;padding:14px;border:1px solid color-mix(in srgb,var(--border) 55%,transparent);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 70%,transparent),var(--surface-1))}
.settings-group h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:17px;line-height:1.4;color:var(--on)}
.settings-group h2>span{color:var(--gold);font-size:18px;width:22px;text-align:center}
.settings-group .field-label{display:block;margin:12px 0 6px;font-size:13px;color:var(--muted)}
.settings-foot{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.6}
.settings-foot .build-version{display:inline-block;margin-inline-start:6px;opacity:.8}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-0);border:1px solid color-mix(in srgb,var(--border) 45%,transparent)}
.seg button{flex:1 1 0;min-width:0;min-height:44px;padding:6px 8px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:1.25;cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-checked=true],.seg button[aria-selected=true]{background:var(--ui-accent-bg);color:var(--gold-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent);font-weight:700}
.audio-note{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.audio-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.audio-buttons .secondary-wide,.settings-screen .audio-buttons .secondary-wide{margin:0;min-height:44px}
.music-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.music-head h2{margin:0}
.audio-switch{position:relative;flex:none;width:56px;height:32px;min-height:32px;padding:0;border-radius:999px;border:1px solid var(--border);background:var(--surface-3);cursor:pointer;transition:background .2s,border-color .2s}
.audio-switch span{position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--on);box-shadow:0 2px 6px #0006;transition:transform .2s}
.audio-switch[aria-checked=true]{background:var(--primary);border-color:var(--gold)}
.audio-switch[aria-checked=true] span{transform:translateX(24px);background:var(--gold-strong)}
[dir=rtl] .audio-switch[aria-checked=true] span{transform:translateX(-24px)}
.audio-status{margin:8px 0 4px;min-height:1.5em;font-size:13px;color:var(--gold)}
.track-list{display:grid;gap:6px;margin-top:8px}
.track-row{display:flex;align-items:stretch;gap:6px}
.track-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--border) 50%,transparent);background:var(--surface-0);color:var(--on);font:inherit;text-align:start;cursor:pointer}
.track-pick[aria-checked=true]{border-color:var(--gold);background:var(--ui-accent-bg)}
.track-row.is-off .track-pick[aria-checked=true]{border-style:dashed}
.track-text{display:grid;min-width:0}
.track-text b{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.track-text small{font-size:12px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.track-preview{flex:none;width:52px;min-height:52px;border-radius:12px;border:1px solid color-mix(in srgb,var(--border) 50%,transparent);background:var(--surface-2);color:var(--gold);font-size:16px;cursor:pointer}
.track-preview[aria-pressed=true]{background:var(--primary);color:var(--primary-on);border-color:var(--gold)}
.track-eq{flex:none;display:inline-flex;align-items:flex-end;gap:2px;width:16px;height:16px}
.track-eq i{width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.45}
.track-pick .track-eq{color:var(--muted)}
.track-pick[aria-checked=true] .track-eq{color:var(--gold)}
.track-row.is-playing .track-eq i,.music-toggle[data-playing=true] .track-eq i{opacity:1;animation:eq 1s ease-in-out infinite}
.track-eq i:nth-child(2){animation-delay:-.35s!important}.track-eq i:nth-child(3){animation-delay:-.7s!important}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
@media (prefers-reduced-motion:reduce){.track-eq i{animation:none!important;height:10px!important}}
.audio-slider{display:flex;align-items:center;gap:10px}
.audio-slider input[type=range]{flex:1;min-width:0;min-height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
.audio-slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--gold) var(--fill,30%),var(--surface-3) var(--fill,30%))}
[dir=rtl] .audio-slider input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to left,var(--gold) var(--fill,30%),var(--surface-3) var(--fill,30%))}
.audio-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--gold-strong);border:3px solid var(--surface-0);box-shadow:0 1px 6px #0007}
.audio-slider input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--surface-3)}
.audio-slider input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--gold)}
.audio-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold-strong);border:3px solid var(--surface-0)}
.audio-slider output{min-width:3.2em;text-align:end;font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700}
.audio-credit{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.audio-sheet .settings-group:first-of-type{margin-top:8px}
.audio-sheet>#closeAudio{margin-top:12px;width:100%}
.music-toggle{display:inline-flex;align-items:center;gap:6px;max-width:48vw}
.music-toggle .music-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-toggle[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.auto-audio-dock{justify-content:center;margin:10px 0 4px;flex-wrap:wrap}
.auto-audio-dock button{padding:6px 12px}
.auto-audio-dock #audioOptionsBtn{margin-inline-start:0}
.waiting-player small{display:block;margin:6px 0 10px;color:var(--muted);font-size:13px;line-height:1.55}
/* Human God: player's choice + what to tell them; blocking day-shot notice */
.player-choice-received h3{font-size:22px;line-height:1.4;margin:4px 0 8px;overflow-wrap:anywhere}
.god-feedback{margin:10px 0 12px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:var(--ui-accent-bg);color:var(--on);font-size:14px;line-height:1.6}
.god-feedback b{display:block;color:var(--gold);font-size:12px;letter-spacing:.03em;margin-bottom:2px}
.god-feedback p{margin:0;color:var(--on)}
.gun-pending-sheet{border-top:3px solid var(--primary)}
.gun-pending-sheet .result-icon{font-size:40px;display:block;text-align:center}
.gun-pending-sheet h2{text-align:center;overflow-wrap:anywhere}
.narrator-voice{margin:4px 0 0}.narrator-voice b{display:block;color:var(--on);font-size:15px}.narrator-voice small{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.6}
/* Lobby management by the game creator: rename / remove */
.lobby-manage{display:flex;gap:6px;align-items:center;flex:none}
.rename-player{min-width:58px;min-height:36px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:9px;background:var(--ui-accent-bg);color:var(--gold);font-size:11px;font-weight:750}
.bot-count{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0}
.bot-count button{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--on);font-size:24px}
.bot-count output{min-width:3ch;text-align:center;font-size:30px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
/* Lobby guide */
.lobby-guide{margin:12px 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:16px;background:var(--surface-1)}
.lobby-guide summary{cursor:pointer;font-weight:800;color:var(--gold);font-size:16px;min-height:32px;display:flex;align-items:center;gap:8px}
.lobby-guide h3{margin:12px 0 4px;font-size:15px;color:var(--on)}
.guide-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.guide-list li{display:flex;gap:10px;align-items:flex-start}
.guide-list li>span{flex:none;width:26px;text-align:center;font-size:18px;line-height:1.5}
.guide-list li p{margin:0;font-size:14px;line-height:1.7;color:var(--on)}
.settings-hint{display:block;margin-top:6px;color:var(--muted,#9a9aa6);font-size:.8rem;line-height:1.5}
/* Global ranking */
.records-seg{margin:0 0 12px}
.ranking-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.ranking-list li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line,#2a2a33);border-radius:14px;background:var(--surface,rgba(255,255,255,.03))}
.ranking-list li.is-me{border-color:var(--accent,#c0392b);box-shadow:inset 0 0 0 1px var(--accent,#c0392b)}
.rank-no{font-weight:800;font-size:1.1rem;text-align:center}
.rank-name{min-width:0}.rank-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-name small,.rank-points small{display:block;color:var(--muted,#9a9aa6);font-size:.78rem}
.rank-points{text-align:end}.rank-points strong{font-size:1.2rem}
.ranking-note,.ranking-empty{color:var(--muted,#9a9aa6);font-size:.9rem}
/* Human God: inquiry result shown by hand — large sign, one word */
.inquiry-badge{display:grid;justify-items:center;gap:4px;margin:12px 0;padding:14px;border-radius:16px;border:1px solid var(--line,#2a2a33);background:var(--surface,rgba(255,255,255,.04));text-align:center}
.inquiry-sign{font-size:4.2rem;line-height:1}
.inquiry-badge b{font-size:1.35rem}
.inquiry-badge small{color:var(--muted,#9a9aa6)}
/* Saboteur-blocked turn: blocking message with crossed hands */
.blocked-sheet{text-align:center}
.blocked-sign{display:block;font-size:4.4rem;line-height:1;margin:10px 0}
/* Pressed action while the request is on its way */
button.is-sending{opacity:.78;pointer-events:none;cursor:progress}
button.is-sending b::after,button.is-sending:not(:has(b))::after{content:'';display:inline-block;width:.8em;height:.8em;margin-inline-start:.45em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;vertical-align:-.1em;animation:sendSpin .7s linear infinite}
@keyframes sendSpin{to{transform:rotate(360deg)}}
/* Connection dot: green = live updates, yellow = backup refresh */
.live-dot{width:9px;height:9px;border-radius:50%;background:#d6a531;align-self:center;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
html[data-live="live"] .live-dot{background:#3ecf6e}
/* Lobby rows with Rename / Remove: the name keeps the remaining width on one line (it was squeezed to 0 and
   broke letter by letter); the two small buttons stay at their own size. */
.player-row:has(.lobby-manage){display:flex!important;align-items:center;gap:8px;min-height:52px;padding:6px 10px}
.player-row:has(.lobby-manage)>.roster-main{flex:1 1 auto;min-width:0;width:auto}
.player-row:has(.lobby-manage) .roster-name{display:block;width:100%;min-width:0;text-align:start}
.player-row:has(.lobby-manage) .roster-name b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-row .lobby-manage{flex:0 0 auto!important;width:auto!important}
.player-row .lobby-manage button{min-width:0;min-height:34px;padding:4px 9px}
/* Lobby guide: team totals and the roles in this game */
.guide-teams{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin:8px 0 12px}
.guide-teams span{display:grid;justify-items:center;padding:8px 4px;border-radius:12px;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.guide-teams b{font-size:22px;line-height:1.2;color:var(--text,inherit)}
.guide-teams .team-city{border-color:color-mix(in srgb,#4f8fd6 55%,transparent)}.guide-teams .team-mafia{border-color:color-mix(in srgb,#d64f5f 55%,transparent)}.guide-teams .team-independent{border-color:color-mix(in srgb,#b08bd9 55%,transparent)}
.guide-roles{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.guide-roles li{padding:8px 10px;border-radius:12px;border:1px solid var(--border);border-inline-start-width:4px}
.guide-roles li.team-city{border-inline-start-color:#4f8fd6}.guide-roles li.team-mafia{border-inline-start-color:#d64f5f}.guide-roles li.team-independent{border-inline-start-color:#b08bd9}
.guide-roles b{display:block;font-size:14px}.guide-roles small{display:block;color:var(--muted);font-size:12px;line-height:1.6}
/* New game: mode cards with two short points each */
.mode-choice button .mode-points{margin:6px 0 0;padding-inline-start:16px;text-align:start;color:var(--muted);font-size:12px;line-height:1.7}
.mode-choice button .mode-points li{margin:0}
/* Home: tiles under "New game" and one games list (this device's games first, then public lobbies) */
.home-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.home-tile{display:flex;align-items:center;gap:10px;min-height:74px;padding:12px;border-radius:18px;border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);background:linear-gradient(160deg,var(--surface-2),var(--surface-1));color:inherit;text-align:start}
.home-tile b{display:block;font-size:15px}.home-tile small{display:block;color:var(--muted);font-size:11.5px;line-height:1.5}
.home-tile .tile-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 38%,transparent)}
.home-mini .home-tile{flex-direction:column;justify-content:center;text-align:center;min-height:96px;padding:10px 6px;border-color:var(--border)}
.home-mini .home-tile .tile-ic{background:color-mix(in srgb,var(--text,#fff) 6%,transparent);border-color:var(--border)}
.games-seg{display:flex;gap:6px;align-items:center}
.games-seg button{min-height:34px;padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12.5px}
.games-seg button[aria-pressed=true]{background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold)}
.game-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;margin-bottom:8px;border-radius:16px;border:1px solid var(--border);background:var(--surface-1)}
.game-row.mine{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 9%,var(--surface-1)),var(--surface-1))}
.gr-av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
.gr-main{min-width:0}.gr-main b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gr-main small{display:block;color:var(--muted);font-size:12px}
.gr-badge{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:999px;font-size:10.5px;background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold);vertical-align:middle}
.gr-acts{display:flex;gap:6px}
.gr-btn{min-height:36px;padding:6px 12px;border-radius:12px;font-size:13px;border:1px solid var(--border);background:var(--surface-2);color:inherit}
.gr-btn.go{background:linear-gradient(180deg,#c3304f,#a51f3c);border-color:#e0415f;color:#fff}
.gr-btn.x{background:transparent;color:var(--red-soft,#f39aa3);border-color:color-mix(in srgb,#e26a70 45%,transparent)}
.gr-btn:disabled{opacity:.55}
.games-empty{color:var(--muted)}
/* Roles page: team icon and colour on each group */
.role-guide-group{border-inline-start:4px solid var(--border)}
.role-guide-group.team-city{border-inline-start-color:#4f8fd6}.role-guide-group.team-mafia{border-inline-start-color:#d64f5f}.role-guide-group.team-independent{border-inline-start-color:#b08bd9}
.role-guide-group .team-ic{font-style:normal;margin-inline-end:8px}
/* How to play */
.flow-screen h1{margin-bottom:2px}.flow-sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.flow-mode{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:14px}
.flow-mode button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0;padding:8px 4px;border-radius:14px;border:1px solid var(--border);background:var(--surface-1);color:inherit;font-size:12.5px;font-weight:700;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.flow-mode button i{font-style:normal;font-size:20px;line-height:1.2}
.flow-mode button small{display:block;color:var(--muted);font-size:10px;font-weight:400;line-height:1.35}
@media (max-width:359px){.flow-mode button small{display:none}}
.flow-mode button[aria-selected=true]{border-color:color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow-steps li{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start}
.flow-dot{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:linear-gradient(160deg,var(--surface-2),var(--surface-1));border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.flow-steps li>div{padding:10px 12px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border)}
.flow-steps b{display:block;font-size:15px}.flow-steps p{margin:3px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.flow-tag{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:999px;font-size:10.5px;background:rgba(185,28,60,.25);color:#fecdd3;vertical-align:middle}
.flow-screen h2{font-size:17px;margin:18px 0 10px}
.flow-extras{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.flow-extras article{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border)}
.flow-extras article>span{font-size:20px}.flow-extras b{display:block;font-size:13.5px}.flow-extras small{display:block;color:var(--muted);font-size:11.5px;line-height:1.6}
.flow-signs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.flow-signs div{text-align:center;padding:10px 4px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border);font-size:12px;color:var(--muted)}.flow-signs span{display:block;font-size:30px}
/* 0929a: Dynamic God host sees only how many ballots are in */
.host-vote-count .vote-progress{display:block;height:6px;border-radius:3px;background:var(--surface-3,#2b323d);overflow:hidden;margin-top:10px}
.host-vote-count .vote-progress i{display:block;height:100%;background:var(--gold,#d9b66b);border-radius:3px;transition:width .3s}
/* 0929a: music player — mini dock above the bottom menu, full player and collapsible sound settings */
.ic{width:20px;height:20px;display:block}
.music-dock{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0 10px 8px;padding:8px 10px;border-radius:18px;background:linear-gradient(135deg,var(--surface-2,#222832),var(--surface-1,#191d24));border:1px solid rgba(217,182,107,.35);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.music-dock .md-open{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;padding:0;text-align:start;cursor:pointer}
.music-dock .md-art,.player-head .ph-art{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--gold,#d9b66b);background:radial-gradient(circle at 30% 30%,#3a2a4a,#141820)}
.music-dock .md-text{flex:1;min-width:0;display:block}
.music-dock .md-text b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-dock .md-text small{display:block;font-size:11px;color:var(--muted,#aaaeb7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-bar,.ph-bar{display:block;height:3px;border-radius:2px;background:var(--surface-3,#2b323d);overflow:hidden;margin-top:5px}
.md-bar i,.ph-bar i{display:block;height:100%;background:var(--gold,#d9b66b);transition:width 1s linear}
.md-btn,.pc{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--surface-3,#2b323d);background:var(--surface-2,#222832);color:var(--on,#eee9df);cursor:pointer;padding:0}
.md-btn.main,.pc.main{width:44px;height:44px;border:0;background:var(--gold,#d9b66b);color:#111318}
.md-btn:focus-visible,.pc:focus-visible,.pl-row button:focus-visible,.audio-acc summary:focus-visible{outline:2px solid var(--gold,#d9b66b);outline-offset:2px}
.player-head{padding:4px 0 10px}
.player-head .ph-now{display:flex;align-items:center;gap:12px}
.player-head .ph-art{width:56px;height:56px;border-radius:16px}.player-head .ph-art .ic{width:26px;height:26px}
.player-head .ph-now b{display:block;font-size:17px}.player-head .ph-now small{color:var(--muted,#aaaeb7);font-size:12px}
.player-head .ph-progress{margin-top:10px}.player-head .ph-bar{height:4px}
.player-head .ph-time{display:flex;justify-content:space-between;direction:ltr;font-size:11px;color:var(--muted,#aaaeb7);margin-top:4px;font-variant-numeric:tabular-nums}
.player-head .ph-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:8px;direction:ltr}
.player-head .pc{width:44px;height:44px}.player-head .pc.main{width:60px;height:60px}.player-head .pc.main .ic{width:28px;height:28px}
.player-head .pc.on{color:var(--gold,#d9b66b);border-color:rgba(217,182,107,.6)}
.sound-panel .audio-acc{border:1px solid var(--surface-3,#2b323d);border-radius:14px;background:var(--surface-0,#111318);margin-top:8px;overflow:hidden}
.sound-panel .audio-acc>summary{display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer;list-style:none;min-height:48px}
.sound-panel .audio-acc>summary::-webkit-details-marker{display:none}
.sound-panel .audio-acc>summary b{flex:1;font-size:15px}
.sound-panel .audio-acc>summary small{color:var(--muted,#aaaeb7);font-size:12px;white-space:nowrap}
.sound-panel .aa-chev{width:8px;height:8px;border-inline-end:2px solid var(--gold,#d9b66b);border-bottom:2px solid var(--gold,#d9b66b);transform:rotate(45deg);transition:transform .2s;margin-inline-start:4px}
.sound-panel .audio-acc[open] .aa-chev{transform:rotate(-135deg)}
.sound-panel .aa-body{padding:4px 12px 12px;border-top:1px solid var(--surface-2,#222832)}
.sound-panel .audio-slider{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin:10px 0}
.sound-panel .audio-slider .as-label{grid-column:1/-1;font-size:13px;color:var(--muted,#aaaeb7)}
.sound-panel .audio-slider input{width:100%;accent-color:var(--gold,#d9b66b)}
.sound-panel .audio-slider output{min-width:3.2em;text-align:end;font-variant-numeric:tabular-nums}
.sound-panel .music-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.pl-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.pl-row{display:flex;align-items:center;gap:8px;padding:4px;border-radius:10px}
.pl-row.now{background:rgba(217,182,107,.12)}
.pl-check{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.pl-check span{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--gold,#d9b66b);display:block}
.pl-check[aria-checked="true"] span{background:var(--gold,#d9b66b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111318' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pl-name{flex:1;min-width:0;background:none;border:0;color:inherit;text-align:start;padding:4px 0;cursor:pointer}
.pl-name b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-name small{display:block;font-size:11px;color:var(--muted,#aaaeb7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-preview{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--surface-3,#2b323d);background:var(--surface-2,#222832);color:var(--on,#eee9df);display:grid;place-items:center;padding:0;cursor:pointer}
.pl-preview .ic{width:16px;height:16px}
.pl-eq{display:flex;gap:2px;align-items:flex-end;height:16px;width:34px;justify-content:center}
.pl-eq i{width:3px;background:var(--gold,#d9b66b);animation:pleq .9s ease-in-out infinite alternate}
.pl-eq i:nth-child(2){animation-delay:.2s}.pl-eq i:nth-child(3){animation-delay:.4s}
@keyframes pleq{from{height:4px}to{height:16px}}
@media (prefers-reduced-motion:reduce){.pl-eq i{animation:none;height:10px}.md-bar i,.ph-bar i{transition:none}}
/* 0929a: Persian narrator voice picker */
.voice-seg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px}
.voice-seg button b{font-size:15px}
.voice-seg button small{font-size:11.5px;font-weight:400;color:var(--muted)}
/* 0929b: taller God-mode cards with an illustration each */
.mode-art,.mode-tag{display:none}
#createForm .host-mode-field .mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#createForm .host-mode-field .mode-choice button{min-height:188px;padding:8px 8px 12px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;border-radius:18px;text-align:center;transition:transform .15s,border-color .15s,box-shadow .15s}
#createForm .host-mode-field .mode-choice button .mode-art{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#createForm .host-mode-field .mode-choice button .god-mode-icon,#createForm .host-mode-field .mode-choice button .mode-points{display:none}
#createForm .host-mode-field .mode-choice button b{font-size:15px;line-height:1.3}
#createForm .host-mode-field .mode-choice button .mode-tag{display:block;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--muted)}
#createForm .host-mode-field .mode-choice button.selected{transform:translateY(-1px);box-shadow:0 0 0 2px var(--gold),0 10px 22px rgba(0,0,0,.18)}
#createForm .host-mode-field .mode-choice button:not(.selected) .mode-art{filter:saturate(.55) brightness(.85)}
@media(max-width:340px){#createForm .host-mode-field .mode-choice button{min-height:170px}#createForm .host-mode-field .mode-choice button .mode-tag{font-size:10.5px}}
/* 1001a: inquiry results in the end-of-game report; sealed reminder after "Seen". */
.report-inquiries{margin:10px 0;padding:10px 12px;border:1px solid var(--line,#333);border-radius:12px}
.report-inquiries h3{margin:0 0 6px;font-size:14px}.report-inquiries ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.report-inquiries li{font-size:13px;line-height:1.5}.report-inquiries li b{margin-inline-end:6px;color:var(--gold,#c9a45c)}
.private-result.sealed p{margin:4px 0 0;opacity:.85}
.role-limits{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.role-limits .role-limit{display:inline-block;padding:2px 7px;border-radius:999px;border:1px solid var(--line,#333);background:#ffffff0a;font-size:11px;line-height:1.5;white-space:nowrap}
/* 1001a: iPhone — the sticky blurred top bar slowly rendered black over scrolled content on iOS Safari. Use a solid
   surface without backdrop blur, on its own compositing layer, and paint the status-bar area with the page colour. */
@supports (-webkit-touch-callout:none){
 .game-top{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--surface-0)!important;transform:translateZ(0)}
 .simulator-banner{transform:translateZ(0)}
}
/* 2.21.19: iOS 27 colours the status bar of the installed app from a real strip at the top of the page (at least 6 px tall,
   80% wide, within 4 px of the top); the deprecated black-translucent setting made it blur over the top bar instead.
   --sb-bg is the top bar's own colour (--surface-0) in each theme. */
:root{--sb-bg:var(--surface-0)}
.sb-sampler{display:none}@media (display-mode:standalone){.sb-sampler{display:block;position:fixed;top:0;left:0;right:0;height:8px;background:var(--sb-bg);z-index:2147483647;pointer-events:none}}
/* 2.4.0: what's new — one quiet card on the home screen, once per version. */
.release-card{margin:0 0 12px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));background:color-mix(in srgb,var(--gold) 9%,var(--surface-1));color:var(--on)}
.release-card header{display:flex;align-items:center;gap:8px}.release-card header b{font-size:15px}.release-card header small{color:var(--muted);font-size:12px;margin-inline-start:auto}
.release-card .release-close{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--on);font-size:13px;line-height:1}
.release-card ul{margin:8px 0 0;padding-inline-start:18px;display:grid;gap:4px;font-size:13px;line-height:1.5}
/* What's new floats in the middle of the screen over a soft dimmed backdrop. */
.release-backdrop{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(8,10,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:releaseFade .2s ease-out}
.release-modal{width:min(420px,100%);max-height:80dvh;overflow:auto;margin:0;padding:18px 18px 16px;border-radius:22px;background:var(--surface-1);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:releaseRise .24s ease-out}
.release-modal header b{font-size:17px}
.release-modal ul{font-size:14px;gap:6px;margin-top:12px}
.release-ok{display:block;width:100%;margin-top:16px;min-height:46px;border-radius:14px;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 22%,var(--surface-1));color:var(--on);font-weight:800;font-size:15px}
@keyframes releaseFade{from{opacity:0}to{opacity:1}}@keyframes releaseRise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.release-backdrop,.release-modal{animation:none}}
.count-sheet{text-align:center}.count-sheet header{justify-content:center}
.count-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0 6px}
.count-row output{min-width:64px;font-size:40px;font-weight:800;color:var(--on)}
.count-step{width:52px;height:52px;border-radius:50%;font-size:26px;font-weight:800;border:1px solid var(--border);background:var(--surface-2);color:var(--on)}
.count-step:disabled{opacity:.4}
.count-cancel{display:block;width:100%;margin-top:8px;min-height:40px;background:transparent;border:0;color:var(--muted)}
/* 2.4.2: runoff defence card and the vote-result "Seen" count. */
.runoff-defense .runoff-candidates{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.runoff-defense .runoff-candidates b{padding:6px 12px;border-radius:999px;background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--line,rgba(255,255,255,.12))}
[data-vote-seen-count]{opacity:.8;font-size:.9em}
/* 2.5.0: joint Mafia turn — the leader's checklist and the kill suggestions. */
.mafia-steps{margin:0 0 12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line,rgba(255,255,255,.12));background:var(--surface-2,rgba(255,255,255,.04))}
.mafia-steps ol{margin:6px 0 0;padding-inline-start:20px}
.mafia-steps li.current{font-weight:700}
.mafia-steps li.done{opacity:.6}
.mafia-suggestions{margin-top:10px;font-size:.92em;opacity:.9}
/* 2.6.0: ranking — rating first, "new" badge, wins against expectation. */
.rank-new{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:999px;font-size:.72em;font-style:normal;border:1px solid var(--line,rgba(255,255,255,.2));opacity:.8}
.rank-name .positive{color:var(--good,#4caf7d)}.rank-name .negative{color:var(--bad,#e0645c)}
/* 2.6.0: game-mode icon next to the game code. */
.game-identity .mode-ic{margin-inline-start:6px;font-size:1.05em;vertical-align:middle}
/* 2.8.0 offline God assistant */
.offline-banner{margin:0 16px 12px;padding:10px 12px;border-radius:12px;background:var(--surface-1);border:1px solid var(--border);font-size:14px;line-height:1.6}
.home-offline-tile{grid-column:1/-1}
.home-actions button[disabled]{opacity:.45;pointer-events:none}
.offline-setup{display:grid;gap:12px}
.offline-setup .field{display:grid;gap:6px}
.offline-setup textarea{width:100%;min-height:180px;resize:vertical;font:inherit;line-height:1.7;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-1);color:inherit}
.offline-reveal summary{display:grid;gap:4px;cursor:pointer;list-style:none}
.offline-reveal summary::-webkit-details-marker{display:none}
.offline-reveal-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.offline-reveal-name{min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface-1);color:inherit;font:inherit}
.offline-reveal-name.seen{opacity:.55}
.offline-reveal-sheet{text-align:center;display:grid;gap:10px;justify-items:center}
.offline-reveal-sheet .role-art{width:160px;height:160px;border-radius:16px}
.offline-reveal-team.team-mafia{color:#d65a64}.offline-reveal-team.team-city{color:#6fb3e0}.offline-reveal-team.team-independent{color:#d9b25c}
.offline-vote-list{display:grid;gap:8px;margin:10px 0}
.offline-vote-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:6px 10px;border-radius:12px;background:var(--surface-1);border:1px solid var(--border)}
.offline-vote-row b{overflow-wrap:anywhere}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2,transparent);color:inherit;font-size:22px;line-height:1}
.stepper output{min-width:2ch;text-align:center;font-size:18px;font-variant-numeric:tabular-nums}
.offline-sync{margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--surface-1);font-size:14px;line-height:1.6}
/* 2.8.1: the offline assistant is the third host mode; it spans the row under the two online modes. */
#createForm .host-mode-field .mode-choice button[data-game-mode="offline"]{grid-column:1/-1;min-height:0}
#createForm .host-mode-field .mode-choice button .mode-art.mode-art-offline{display:grid;place-items:center;aspect-ratio:auto;height:64px;font-size:34px;border-radius:12px;background:radial-gradient(circle at 50% 40%,#2a3442,#10151c)}
#createForm .mode-choice button[disabled]{opacity:.45}
.mode-net{font-style:normal;font-size:11px;color:var(--red-soft)}
#createForm .offline-setup{display:grid;gap:10px;margin-top:10px}
.offline-rank-pick summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.offline-rank-list{display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow:auto;margin-top:8px}
.rank-pick{min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-1);color:inherit;font:inherit;font-size:14px}
.rank-pick.picked{background:var(--ui-accent-bg);border-color:var(--gold)}
/* 2.9.0: blocking messages for the buttons that end a wait */
.blocking-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));background:rgba(5,8,12,.86);backdrop-filter:blur(3px)}
.blocking-card{width:min(100%,440px);max-height:100%;overflow:auto;display:grid;gap:12px;padding:20px;border-radius:18px;background:var(--surface-1);border:1px solid var(--gold);box-shadow:0 18px 60px #000a;text-align:center}
.blocking-card h2{margin:0}.blocking-card p{margin:0;line-height:1.7}
.blocking-card .primary-action{min-height:60px}
.mafia-summary-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:start}
.mafia-summary-list li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.mafia-summary-list li span{grid-row:span 2;font-size:22px;align-self:center}
.mafia-summary-list li em{font-style:normal;color:var(--muted);overflow-wrap:anywhere}
/* 2.9.0: roles of this game in the Players tab */
.game-roles-card summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;min-height:44px}
.game-roles-card summary::-webkit-details-marker{display:none}
.game-roles-team h3{margin:10px 0 6px;font-size:14px}
.game-roles-team.team-city h3{color:var(--blue)}.game-roles-team.team-mafia h3{color:var(--red-soft)}.game-roles-team.team-independent h3{color:var(--gold)}
.game-roles-list{display:flex;flex-wrap:wrap;gap:6px}
.game-role{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);min-width:0}
.game-role[open]{flex-basis:100%}
.game-role summary{padding:8px 12px;cursor:pointer;list-style:none;min-height:40px;display:flex;align-items:center;gap:4px}
.game-role summary::-webkit-details-marker{display:none}
.game-role p{margin:0;padding:0 12px 10px;font-size:13px;line-height:1.7;color:var(--muted)}
/* 2.9.3: each ranking row has two lines; the signed figure keeps its sign in front of the number in Persian. */
.rank-name .rank-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-name .rank-line2{margin-top:2px}
.rank-name bdi{unicode-bidi:isolate;direction:ltr}
/* 2.9.3: a horizontal drag on a volume slider moves the slider; only a vertical swipe scrolls the page. */
.audio-slider input[type=range],#audioSheet input[type=range]{touch-action:pan-y}
/* 2.10: scoring guide and per-game score details */
.score-guide{margin:10px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.score-guide>summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none}.score-guide>summary::-webkit-details-marker{display:none}
.score-guide-body{padding:0 14px 12px}.score-guide-body h3{margin:12px 0 6px;font-size:.95rem}.score-guide-body p{margin:0;color:var(--muted);line-height:1.7}
.score-items{list-style:none;margin:0;padding:0;display:grid;gap:4px}.score-items li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}.score-items li span{min-width:0}.score-items li b{white-space:nowrap;color:var(--gold)}
.my-score-game>summary{list-style:none;cursor:pointer}.my-score-game>summary::-webkit-details-marker{display:none}
.score-detail{padding:4px 12px 12px}.score-meta,.score-total{margin:6px 0;color:var(--muted)}.score-total b,.score-meta b{color:var(--text)}
/* 2.10: host hand-over */
.host-picker{display:grid;gap:10px}.host-picker h2{margin:0}.host-picker p{margin:0;color:var(--muted);line-height:1.7}
.host-picker-list{display:grid;gap:8px;max-height:46vh;overflow:auto}.host-pending{color:var(--gold)!important;font-weight:700}
/* 2.11: speaking turns and challenges */
.talk-card{margin:12px 0;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);display:grid;gap:8px}
.talk-card.is-speaker{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.talk-card h2{margin:0;font-size:1.35rem}.talk-card h2 em{font-style:normal;font-size:.85rem;color:var(--gold)}.talk-card p{margin:0;color:var(--muted);line-height:1.7}
.talk-sub{font-size:.9rem}
.talk-timer{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}.talk-timer span{font-size:2.6rem;font-weight:800;line-height:1}.talk-timer small{color:var(--muted)}.talk-timer.low span{color:var(--bad,#e0645c)}
.talk-order{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.talk-order li{padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:.85rem;color:var(--muted)}.talk-order li.now{border-color:var(--gold);color:var(--text);font-weight:700}.talk-order li.spoken{opacity:.6}
.talk-actions{display:grid;gap:8px}
.talk-ask>summary{cursor:pointer;font-weight:700;padding:6px 0}.talk-ask small{color:var(--muted);font-weight:400}.talk-targets{display:grid;gap:6px;margin-top:6px}
.talk-out{font-size:.9rem}.talk-out.accepted{color:var(--good,#4caf7d)!important}.talk-out.declined{color:var(--bad,#e0645c)!important}
.talk-setup{margin:10px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.talk-setup>summary{cursor:pointer;padding:12px 14px;font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}.talk-setup>summary small{color:var(--muted);font-weight:400}
.talk-setup-body{display:grid;gap:10px;padding:0 14px 12px}.talk-switch{display:flex;gap:8px;align-items:center}
.talk-num{display:flex;justify-content:space-between;align-items:center;gap:10px}.talk-num .count-row{display:flex;align-items:center;gap:8px}.talk-num output{min-width:3.5em;text-align:center;font-variant-numeric:tabular-nums}
/* 2.12 remote game */
.remote-card{margin:12px 0;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);display:grid;gap:8px}
.remote-card.paused{border-color:var(--gold)}
.remote-card p{margin:0;line-height:1.7}
.remote-narrator{font-size:1.05rem;color:var(--text)}
.remote-paused,.remote-missed{color:var(--gold)}
.remote-clock{display:inline-block;min-width:4.2ch;padding:2px 8px;border-radius:10px;background:var(--surface);font-variant-numeric:tabular-nums;text-align:center}
.remote-clock.urgent{background:#8f2630;color:#fff;animation:remotePulse 1s ease-in-out infinite}
@keyframes remotePulse{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.remote-clock.urgent{animation:none}}
.remote-mine{font-weight:600}
.remote-host{display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.remote-actions{display:flex;flex-wrap:wrap;gap:8px}
.remote-absent{display:grid;gap:6px}
.remote-absent-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.remote-absent-row bdi{flex:1 1 100%;font-weight:600}
.remote-online{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.85rem;color:var(--muted)}
.remote-online li{display:flex;align-items:center;gap:5px}
.remote-online i{width:8px;height:8px;border-radius:50%;background:var(--border)}
.remote-online li.on{color:var(--text)}.remote-online li.on i{background:#3aa66a}
/* 2.14 voice panel: who is in the channel, who is talking (green ring), three big buttons, the host's controls */
.vc{margin:12px 0 0;padding:14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border);color:var(--on)}
.vc.live{border-color:#3fbf7f;box-shadow:0 0 0 3px color-mix(in srgb,#3fbf7f 18%,transparent)}
.vc.vc-mafia{border-color:#8a3a44}.vc.vc-dead{border-color:#6a5aa8}
.vc-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.vc-head b{font-size:1rem}
.vc-pill{display:inline-flex;gap:6px;align-items:center;font-size:.78rem;padding:2px 10px;border-radius:999px;background:var(--surface-0);color:var(--muted);white-space:nowrap}
.vc-pill i{width:8px;height:8px;border-radius:50%;background:#3fbf7f}.vc-mafia .vc-pill i{background:#d0505c}
.vc-chan{margin:8px 0 10px;font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}.vc-chan b{color:var(--gold)}.vc-chan .vc-you{color:#3fbf7f}
.vc-mafia .vc-chan b{color:#f0a3aa}.vc-chan [data-countdown-end]{font-variant-numeric:tabular-nums;color:var(--on)}
.vc-wave{display:inline-flex;gap:2px;align-items:flex-end;height:12px}.vc-wave i{width:3px;background:#3fbf7f;border-radius:2px;animation:vcWave .9s ease-in-out infinite}
.vc-wave i:nth-child(1){height:6px}.vc-wave i:nth-child(2){height:12px;animation-delay:.15s}.vc-wave i:nth-child(3){height:8px;animation-delay:.3s}
@keyframes vcWave{50%{transform:scaleY(.4)}}
.vc-ppl{list-style:none;margin:0 0 12px;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.vc-p{width:60px;text-align:center;font-size:.72rem;color:var(--muted);display:grid;justify-items:center;gap:2px;line-height:1.3}.vc-p bdi{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-p small{font-size:.66rem;color:var(--muted)}
.vc-av{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#111;font-size:1rem;background:var(--av,#9aa5b1);transition:box-shadow .15s}
.vc-av.sm{width:30px;height:30px;font-size:.8rem;flex:none}
.vc-p.speaking .vc-av{box-shadow:0 0 0 3px #3fbf7f,0 0 14px 2px rgba(63,191,127,.55)}.vc-p.speaking bdi{color:var(--on)}
.vc-p.off .vc-av{opacity:.3;filter:grayscale(1)}.vc-p.novc .vc-av{opacity:.55;box-shadow:inset 0 0 0 2px var(--surface-2),0 0 0 2px var(--border)}.vc-p.novc small{color:var(--muted)}
.vc-mini-ppl{display:flex;gap:0;margin-top:4px}.vc-av.xs{width:24px;height:24px;font-size:.68rem;font-style:normal;border:2px solid var(--surface-2);margin-inline-end:-6px}
.remote-online .vc-in{font-size:.8em}
.vc-bd{position:absolute;bottom:-3px;inset-inline-end:-3px;width:20px;height:20px;border-radius:50%;background:var(--surface-1);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.vc-bd svg{width:12px;height:12px}.vc-bd.on{color:#3fbf7f}
.vc-ctl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vc-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;min-height:64px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border);font:inherit;font-size:.75rem;color:var(--muted);cursor:pointer}
.vc-btn svg{width:26px;height:26px}.vc-btn.on{background:color-mix(in srgb,#3fbf7f 14%,var(--surface-1));border-color:#3fbf7f;color:var(--on)}
.vc-btn.mute{background:color-mix(in srgb,#d0505c 12%,var(--surface-1));border-color:#d0505c;color:var(--on)}.vc-btn.dis,.vc-btn:disabled{opacity:.5;cursor:default}
.vc-btn.leave svg{color:#d0505c}
.vc-state{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--surface-0);font-size:.83rem;color:var(--muted);line-height:1.6}
.vc.live .vc-state{color:var(--on)}
.vc-join{padding:12px 14px}.vc-join-btn{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:0;color:var(--on);font:inherit;text-align:start;cursor:pointer}
.vc-join-btn>span:last-child{display:grid;gap:2px}.vc-join-btn small{font-size:.83rem;color:var(--muted)}
.vc-big{width:56px;height:56px;flex:none;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center}.vc-big svg{width:28px;height:28px}
.vc-host{margin:8px 0 0;padding:12px 14px;border-radius:16px;border:1px dashed var(--border);display:grid;gap:8px}.vc-host>b{font-size:.85rem;color:var(--gold)}
.vc-hrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem}
.vc-switch{width:46px;height:26px;border-radius:999px;border:0;background:var(--border);position:relative;cursor:pointer;flex:none;padding:0}
.vc-switch:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.vc-switch[aria-checked="true"]{background:var(--gold)}.vc-switch[aria-checked="true"]:after{inset-inline-start:23px;background:#111}
.vc-mics>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem}.vc-mics>summary::-webkit-details-marker{display:none}
.vc-mini{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:.78rem;color:var(--muted)}.vc-mini svg{width:14px;height:14px}
.vc-mrow{display:flex;align-items:center;gap:8px;margin-top:8px}.vc-mrow bdi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-chip{display:inline-flex;align-items:center;gap:4px;min-height:36px;border:1px solid var(--border);border-radius:999px;padding:4px 12px;background:var(--surface-1);color:var(--on);font:inherit;font-size:.8rem;cursor:pointer}
.vc-chip svg{width:16px;height:16px}.vc-chip.off{border-color:#d0505c;color:#f0a3aa}
.vc-announce-btn{min-height:48px;border-radius:14px;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--surface-1));color:var(--on);font:inherit;font-weight:700;cursor:pointer}.vc-announce-btn:disabled{opacity:.55;cursor:default}
.vc-announce{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--gold) 18%,var(--surface-1));border:1px solid var(--gold);font-weight:700;text-align:center}
/* someone you hear is talking: their row in the player lists lights up too */
.player-row.speaking{box-shadow:inset 3px 0 0 #3fbf7f,0 0 0 1px color-mix(in srgb,#3fbf7f 45%,transparent)}
.player-row.speaking .roster-name b:after,.remote-online li.speaking bdi:after,.talk-order li.speaking:after{content:" 🎙";font-size:.85em}
.remote-online li.speaking i{background:#3fbf7f;box-shadow:0 0 0 3px color-mix(in srgb,#3fbf7f 35%,transparent)}
/* 2.14 the speaker's last ten seconds: a red number that pops every second */
.talk-timer.low.mine span{color:#ff5a5f;animation:talkCount 1s ease-out infinite;display:inline-block}
.remote-clock.urgent[data-mine]{color:#ff5a5f;animation:talkCount 1s ease-out infinite;display:inline-block}
@keyframes talkCount{0%{transform:scale(1.35);text-shadow:0 0 14px rgba(255,90,95,.6)}60%,100%{transform:scale(1);text-shadow:none}}
@media (prefers-reduced-motion:reduce){.talk-timer.low.mine span,.remote-clock.urgent[data-mine],.vc-wave i{animation:none}}
/* 2.14 text chat: floating button + bottom sheet */
.chat-layer{position:fixed;inset:0;pointer-events:none;z-index:80}.chat-layer [hidden]{display:none!important}
.chat-fab{pointer-events:auto;position:fixed;bottom:calc(86px + env(safe-area-inset-bottom));inset-inline-start:16px;display:flex;align-items:center;gap:8px;background:var(--gold);color:#111;border:0;border-radius:999px;padding:12px 18px;min-height:48px;font:inherit;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer}
.chat-fab em{font-style:normal;background:#c0535e;color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.78rem;padding:0 6px}
.chat-peek{pointer-events:auto;position:fixed;bottom:calc(148px + env(safe-area-inset-bottom));inset-inline:16px;max-width:520px;margin-inline:auto;background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:8px 12px;font:inherit;font-size:.85rem;color:var(--muted);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.chat-peek b{color:var(--gold)}
.chat-dim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s;pointer-events:none}
.chat-sheet{position:fixed;inset-inline:0;bottom:var(--kb,0px);margin-inline:auto;max-width:560px;height:min(78dvh,calc(var(--vvh,100dvh) - 16px));background:var(--surface-1);border-radius:22px 22px 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;transform:translateY(105%);transition:transform .22s ease;pointer-events:none;padding-bottom:env(safe-area-inset-bottom)}
.chat-layer.open .chat-dim{opacity:1;pointer-events:auto}.chat-layer.open .chat-sheet{transform:none;pointer-events:auto;visibility:visible;transition:transform .22s ease}
/* 2.14.1: a closed sheet is hidden outright (never half on screen if the keyboard offset is stale) */
.chat-layer:not(.open) .chat-sheet{visibility:hidden;bottom:0;transition:transform .22s ease,visibility 0s linear .22s}.chat-layer.open .chat-fab,.chat-layer.open .chat-peek{display:none}
html.chat-open,html.chat-open body{overflow:hidden}
.chat-grab{width:44px;height:5px;border-radius:9px;background:var(--border);margin:8px auto 4px;flex:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:4px 14px 10px;flex:none}.chat-head b{font-size:1.05rem}
.chat-x{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:0;color:var(--muted);font-size:1rem;cursor:pointer}
.chat-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0 14px 8px;background:var(--surface-0);border-radius:12px;padding:4px;flex:none}
.chat-tabs button{border:0;background:none;padding:8px 0;border-radius:9px;font:inherit;font-size:.88rem;color:var(--muted);cursor:pointer;min-height:36px}
.chat-tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--on);box-shadow:inset 0 -2px 0 var(--gold)}
.chat-tabs button.t-mafia[aria-selected="true"]{box-shadow:inset 0 -2px 0 #c0535e}.chat-tabs button.t-ocean[aria-selected="true"]{box-shadow:inset 0 -2px 0 #3aa6b9}.chat-tabs button.t-dead[aria-selected="true"]{box-shadow:inset 0 -2px 0 #8f7ad6}
.chat-tabs i{font-style:normal;margin-inline-start:4px;background:#c0535e;color:#fff;border-radius:999px;padding:0 6px;font-size:.7rem}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:6px 14px 10px;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
.cm-sys{align-self:center;font-size:.76rem;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 12px;text-align:center}.cm-sys.mafia{color:#f0a3aa}.cm-sys.ocean{color:#8fd3df}.cm-sys.dead{color:#c3b6f0}
.cm{max-width:82%;display:flex;gap:8px;align-items:flex-end;align-self:flex-start}
.cm-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#111;flex:none;background:var(--av,#9aa5b1)}
.cm-bub{background:var(--surface-2);border:1px solid var(--border);border-radius:16px 16px 16px 4px;padding:7px 12px;min-width:0}
[dir="rtl"] .cm-bub{border-radius:16px 16px 4px 16px}
.cm-bub b{display:block;font-size:.78rem;color:var(--av,var(--gold))}.cm-bub span{display:block;font-size:.95rem;line-height:1.6}.cm-bub small{display:block;text-align:end;color:var(--muted);font-size:.68rem;margin-top:2px;font-variant-numeric:tabular-nums}
.cm.mine{align-self:flex-end}.cm.mine .cm-bub{background:var(--ui-accent-bg,#3a3120);border-color:color-mix(in srgb,var(--gold) 45%,var(--border));border-radius:16px 16px 4px 16px}
[dir="rtl"] .cm.mine .cm-bub{border-radius:16px 16px 16px 4px}
[data-theme="light"] .cm-bub b{color:var(--on)}
.chat-foot{flex:none;border-top:1px solid var(--border);background:var(--surface-1)}
.chat-quick{display:flex;gap:6px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none}.chat-quick::-webkit-scrollbar{display:none}
.chat-quick button{white-space:nowrap;border:1px solid var(--border);background:var(--surface-2);color:var(--on);border-radius:999px;padding:4px 12px;font:inherit;font-size:.82rem;min-height:32px;cursor:pointer}
.chat-bar{display:flex;gap:8px;align-items:flex-end;padding:8px 12px 12px}
.chat-bar textarea{flex:1;min-width:0;min-height:48px;max-height:120px;resize:none;border-radius:24px;background:var(--surface-0);border:1px solid var(--border);padding:12px 16px;font:inherit;font-size:16px;line-height:1.4;color:var(--on)}
.chat-bar textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.chat-send{width:48px;height:48px;flex:none;border-radius:50%;border:0;background:var(--gold);color:#111;display:grid;place-items:center;cursor:pointer}.chat-send svg{width:22px;height:22px}
.chat-send.t-mafia{background:#c0535e;color:#fff}.chat-send.t-dead{background:#8f7ad6;color:#fff}.chat-send.t-ocean{background:#3aa6b9;color:#fff}
.chat-lock{margin:0;display:flex;gap:8px;align-items:center;justify-content:center;padding:16px 12px;color:var(--muted);font-size:.9rem;text-align:center}
html.has-chat .game-content{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
/* 2.13.1 create screen: photo mode cards in two rows, a detail panel for the chosen mode, compact settings boxes */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#createForm .host-mode-field{border:0;padding:0;margin:4px 0 0}
#createForm .mode-group{margin:14px 0 6px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
#createForm .mode-group:after{content:"";flex:1;height:1px;background:var(--border)}
#createForm .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#createForm .mode-card{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface-1,var(--surface-2));color:var(--text);text-align:start;min-height:0}
#createForm .mode-card .mode-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0}
#createForm .mode-card .mode-text{display:grid;gap:2px;padding:8px 10px 10px}
#createForm .mode-card b{font-size:15px;line-height:1.3}
#createForm .mode-card .mode-tag{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted)}
#createForm .mode-card.selected{border:2px solid var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)}
#createForm .mode-card.selected:after{content:"✓";position:absolute;top:8px;inset-inline-end:8px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;font-size:13px;font-weight:700}
#createForm .mode-card[disabled]{opacity:.45}
#createForm .mode-detail{margin:10px 0;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
#createForm .mode-detail>b{color:var(--gold-strong,var(--gold))}
#createForm .mode-detail .mode-points{margin:6px 0 0;padding-inline-start:18px;color:var(--muted);font-size:.86rem;line-height:1.7}
#createForm .setting-box,.r-settings .setting-box{margin:10px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
#createForm .setting-box>summary,.r-settings .setting-box>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
#createForm .setting-box>summary::-webkit-details-marker,.r-settings .setting-box>summary::-webkit-details-marker{display:none}
#createForm .setting-box>summary b,.r-settings .setting-box>summary b{font-size:.95rem;white-space:nowrap}#createForm .setting-box>summary span,.r-settings .setting-box>summary span{color:var(--muted);font-size:.76rem;text-align:end}
#createForm .setting-box .mode-field,.r-settings .setting-box .mode-field{border:0;margin:0;padding:0 14px 12px}
#createForm .setting-body,.r-settings .setting-body{display:grid;gap:9px;padding:0 14px 12px}
#createForm .setting-sub,.r-settings .setting-sub{font-size:.8rem;color:var(--gold);margin-top:2px}
#createForm .setting-row,.r-settings .setting-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.88rem}
#createForm .chips,.r-settings .chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
#createForm .chips button,.r-settings .chips button{min-width:36px;border:1px solid var(--border);background:var(--surface-1,var(--surface-2));color:var(--text);border-radius:999px;padding:3px 10px;font:inherit;font-size:.82rem;min-height:30px}
#createForm .chips button.on,.r-settings .chips button.on{background:var(--gold);border-color:var(--gold);color:#111}
#createForm input.switch,.r-settings input.switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;background:var(--border);position:relative;cursor:pointer;margin:0;flex:none;transition:background .15s}
#createForm input.switch:after,.r-settings input.switch:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
#createForm input.switch:checked,.r-settings input.switch:checked{background:var(--gold)}#createForm input.switch:checked:after,.r-settings input.switch:checked:after{inset-inline-start:21px;background:#111}
#createForm .public-room-optin,.r-settings .public-room-optin{margin-top:6px}
@media(max-width:340px){#createForm .chips button{min-width:30px;padding:3px 7px}}
/* 2.15 end-of-game review */
.review-heading.winner-mafia{background:linear-gradient(135deg,color-mix(in srgb,#c0535e 22%,var(--surface-2)),var(--surface-2))}
.review-heading.winner-city{background:linear-gradient(135deg,color-mix(in srgb,#6fb3e0 20%,var(--surface-2)),var(--surface-2))}
.review-heading.winner-independent{background:linear-gradient(135deg,color-mix(in srgb,#8f7ad6 22%,var(--surface-2)),var(--surface-2))}
.review-key,.review-badges,.review-me,.review-stats,.review-timeline{margin:12px 0;padding:12px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border)}
.review-key{border-color:var(--gold);background:linear-gradient(135deg,var(--ui-accent-bg,#3a3020),var(--surface-2))}.review-key p{margin:4px 0 0;line-height:1.7}
.review-badges h3,.review-stats h3,.review-timeline h3{margin:0 0 8px;font-size:1rem}
.rb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.rb{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:var(--surface-1);border:1px solid var(--border)}.rb>span{font-size:1.2rem}.rb small{color:var(--muted);font-size:.78rem}.rb.mine{border-color:var(--gold)}
.review-me .rm-head{display:flex;gap:10px;align-items:center}.review-me .rm-head small{display:block;color:var(--muted);font-size:.8rem}.review-me p{margin:6px 0 0;font-size:.86rem;color:var(--muted)}
.review-me .city{color:var(--blue,#6fb3e0)}.review-me .mafia{color:#e0676f}.review-me .independent{color:#b9a6ef}
.rm-chip{display:inline-block;margin:6px 4px 0 0;border:1px solid var(--border);border-radius:999px;padding:1px 10px;font-size:.78rem}
.review-stats>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}.review-stats>div>div{background:var(--surface-1);border-radius:10px;padding:6px 2px}.review-stats b{display:block;font-size:1.15rem}.review-stats small{font-size:.7rem;color:var(--muted)}
.review-rematch-note{color:var(--muted);font-size:.86rem;text-align:center;margin:10px 0}
.review-timeline ol{list-style:none;margin:0;padding:0 0 0 0;padding-inline-start:16px;position:relative}
.review-timeline ol:before{content:"";position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:2px;background:var(--border)}
.review-timeline li{position:relative;margin-bottom:8px}.review-timeline li:before{content:"";position:absolute;inset-inline-start:-15px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--gold)}.review-timeline li.night:before{background:#8f7ad6}
.review-timeline details{background:var(--surface-1);border:1px solid var(--border);border-radius:12px}.review-timeline li.key details{border-color:var(--gold)}
.review-timeline summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;min-height:44px}.review-timeline summary::-webkit-details-marker{display:none}.review-timeline summary small{color:var(--muted);font-size:.78rem}
.review-timeline .rt-body{padding:0 12px 10px;font-size:.86rem}.review-timeline .rt-body p{margin:4px 0}
/* 2.18: compact online game screen — top bar, narrator line, one "now" card, player grid, dock, sheets. */
.remote-shell .r-top{display:flex;align-items:center;gap:8px;padding:8px 0 6px}
.remote-shell .r-code{display:flex;align-items:center;gap:4px;background:none;border:0;padding:4px 2px;font:700 15px/1 ui-monospace,monospace;color:var(--gold);letter-spacing:.5px;min-height:36px}
.remote-shell .r-code .mode-ic{font-size:15px}
.r-pill{margin-inline:auto;display:inline-flex;align-items:center;gap:5px;max-width:62%;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-pill.night{background:color-mix(in srgb,#4b5585 30%,var(--surface-1));border-color:#5a6596}
.r-pill.mine{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 30%,transparent)}
.r-pill .remote-clock{font:700 13.5px ui-monospace,monospace;color:var(--gold);direction:ltr;unicode-bidi:isolate}.r-pill .r-clock{font-weight:700;color:var(--gold);unicode-bidi:isolate}
.r-pill .remote-clock.urgent,.r-pill .r-clock.mine{color:#ff8b92}
.remote-shell .r-top .live-dot{flex:none}
.remote-shell .r-menu{width:38px;height:38px;min-height:38px;border-radius:12px;flex:none}
.r-narr{display:flex;gap:8px;align-items:flex-start;width:100%;margin:0 0 8px;background:var(--surface-1);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:12px;padding:8px 11px;font:inherit;font-size:13.5px;line-height:1.65;color:var(--muted);text-align:start}
button.r-narr{cursor:pointer}.r-narr b{color:var(--on);font-weight:700}.r-narr u{color:var(--gold);text-decoration:none}
.r-narr.paused{border-color:var(--gold);color:var(--gold)}.r-narr.warn{border-color:#7b3a44;color:var(--red-soft)}
.r-narr.dead{border-color:#7b3a44;background:color-mix(in srgb,#54212b 35%,var(--surface-1))}
.r-sound{margin-bottom:8px}
.r-step,.r-now{background:linear-gradient(160deg,var(--surface-2),var(--surface-1));border:1px solid var(--gold);border-radius:16px;padding:12px;margin-bottom:10px}
.r-step .overline{display:block;margin-bottom:6px}.r-step .primary-action,.r-step .secondary-wide{width:100%;margin-top:6px}
.r-now h2{margin:0;font-size:19px}.r-now p{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6}
.r-row{display:flex;gap:8px;margin-top:10px}.r-row>*{flex:1}
.r-grid{margin-bottom:10px}
.r-grid-h{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:0 2px 6px}
.r-grid ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.r-p{position:relative;background:var(--surface-1);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:13px;padding:7px 3px 6px;text-align:center;font-size:12.5px;min-width:0}
.r-p bdi{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-av{width:32px;height:32px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--av,var(--surface-3));color:#111}
.r-p.spk{border-color:var(--gold)}.r-p.spk .r-av{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent)}
.r-p.dead{opacity:.45}.r-p.dead .r-av{filter:grayscale(1)}
.r-p.me{border-style:dashed}
.r-p.speaking .r-av,.r-p[data-speaking] .r-av{box-shadow:0 0 0 3px var(--green)}
.r-on{position:absolute;top:6px;inset-inline-end:7px;width:7px;height:7px;border-radius:50%;background:var(--green)}.r-on.off{background:#5d666d}
.r-mk{position:absolute;top:2px;inset-inline-start:4px;font-size:10.5px;line-height:1.3}
.r-dock{flex:none;display:flex;justify-content:space-around;align-items:stretch;gap:2px;padding:6px 2px 2px;border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.r-d{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--muted);font:inherit;font-size:11px;padding:2px 0;cursor:pointer}
.r-d i{font-style:normal;width:44px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:19px;background:var(--surface-1);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.r-d span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.r-d.v-on i{background:color-mix(in srgb,var(--green) 22%,var(--surface-1));border-color:var(--green)}
.r-d.v-off i{background:color-mix(in srgb,#a82333 25%,var(--surface-1));border-color:#7b3a44}
.r-d.host i{background:var(--gold);color:#2a2112;border-color:var(--gold)}
.r-d em{position:absolute;top:-3px;inset-inline-start:calc(50% + 8px);background:var(--primary);color:#fff;border-radius:99px;font-style:normal;font-size:10.5px;padding:0 5px;min-width:16px}
.r-backdrop{position:fixed;inset:0;background:rgba(5,7,9,.6);z-index:60}
.r-sheet{position:fixed;inset-inline:0;bottom:0;z-index:61;max-height:86dvh;display:flex;flex-direction:column;background:var(--surface-1);border-top:1px solid var(--border);border-radius:22px 22px 0 0;padding:8px 14px max(14px,env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.5);max-width:620px;margin-inline:auto}
.r-grab{width:44px;height:5px;border-radius:9px;background:var(--surface-3);margin:0 auto 6px}
.r-sheet-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.r-sheet-h b{font-size:16px}
.r-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:inherit;font:inherit;cursor:pointer;margin-inline-start:auto}
.r-sheet-b{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.r-sheet-b>section,.r-sheet-b .vc{margin-bottom:0}
.r-sheet h3{margin:0 0 4px;font-size:17px}
.r-grp{margin-top:12px}.r-grp>small{display:block;color:var(--gold);font-size:12px;margin-bottom:6px}
.r-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.r-chip{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:9px 4px;color:inherit;font:inherit;font-size:12.5px;line-height:1.35;cursor:pointer;min-height:58px}
.r-chip i{font-style:normal;font-size:17px}.r-chip.danger{border-color:#7b3a44;color:var(--red-soft)}
.r-note{color:var(--muted);font-size:13px;margin:0}
.r-back{margin-top:10px}
.remote-shell .r-sheet .vc-host{margin-top:0;border:0;padding:0;background:none}
.remote-shell .talk-card .talk-order{display:none}
.remote-shell .talk-card,.remote-shell .vote-card,.remote-shell .status-card,.remote-shell .ocean-card{margin-bottom:10px}
.remote-shell .talk-card.is-speaker{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}
html.remote-ui .chat-fab{display:none}
html.remote-ui .chat-peek{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (max-width:359px){.r-grid ul{grid-template-columns:repeat(3,minmax(0,1fr))}.r-d span{font-size:10px}.r-pill{font-size:12.5px;padding:4px 9px}}
.remote-shell .r-sheet .vc-host>b{display:none}.r-sheet-h .r-x{order:2}
/* 2.18.1: what's new across several versions — one section per version, older ones folded. */
.release-modal .rel-v+.rel-v,.release-modal .rel-older{margin-top:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.release-modal .rel-v h3{margin:0;font-size:14.5px;color:var(--gold);display:flex;gap:8px;align-items:baseline}.release-modal .rel-v h3 small{color:var(--muted);font-size:12px;font-weight:400}
.release-modal .rel-v ul{margin-top:6px}
.release-modal .rel-older summary{cursor:pointer;color:var(--gold);font-size:13.5px;padding:4px 0}
.release-all-btn{margin-top:12px}
.r-step p{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6}.r-host-out{border-color:#7b3a44}
.talk-ask-off{margin-top:8px;display:flex;flex-direction:column;gap:4px}.talk-ask-off button{opacity:.55}.talk-ask-off small{color:var(--muted);font-size:12.5px;line-height:1.5}
/* 2.18.3: the speaking turn on top of the open chat; turn lines; send on the right; icon quick replies in one row. */
.chat-turn{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:0 12px 8px;padding:7px 11px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;line-height:1.5}
.chat-turn b{font-weight:700}.chat-turn [data-countdown-end]{font-weight:700;color:var(--gold)}
.chat-turn.next{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--surface-2))}.chat-turn-me{color:var(--gold);font-weight:700}
.chat-turn.mine{border-color:#c0535e;background:color-mix(in srgb,#a82333 30%,var(--surface-2));animation:chatTurnPulse 1.4s ease-in-out 3}
.chat-turn-go{border:0;border-radius:999px;padding:6px 12px;background:var(--primary);color:var(--primary-on);font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
@keyframes chatTurnPulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,#c0535e 45%,transparent)}}
@media(prefers-reduced-motion:reduce){.chat-turn.mine{animation:none}}
.cm-turn{list-style:none;text-align:center;color:var(--muted);font-size:11.5px;margin:6px 0;opacity:.85}
[dir="rtl"] .chat-bar{flex-direction:row-reverse}
.chat-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));grid-template-rows:40px;grid-auto-rows:0;overflow:hidden;gap:0 8px;padding:8px 14px 0;justify-items:center}
.chat-quick button{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;font-size:20px;line-height:1;display:grid;place-items:center}
.r-settings{margin-bottom:10px}.r-settings fieldset{border:0;margin:0;padding:0;min-width:0}.r-settings.readonly .chips button:not(.on),.r-settings.readonly .switch{opacity:.55}
.chat-turn-t{margin-inline-start:6px;white-space:nowrap}

/* 2.18.4: lobby timings look like the create page, a bit tighter: chips become one-piece segments under their
   label, short pairs sit side by side, and the summary says "Change". */
.r-settings .setting-box>summary{flex-wrap:nowrap}.r-settings .setting-box>summary>span{flex:1;min-width:0;text-align:start}
.r-settings .setting-chev{flex:none;font-style:normal;color:var(--muted);font-size:.78rem;border:1px solid var(--border);border-radius:999px;padding:2px 10px;white-space:nowrap}
.r-settings .setting-chev .close,.r-settings details[open] .setting-chev .open{display:none}.r-settings details[open] .setting-chev .close{display:inline}
.r-settings .setting-body{grid-template-columns:1fr 1fr;column-gap:10px;text-align:start}
.r-settings .setting-body>*{grid-column:1/-1}.r-settings .setting-body>.setting-row.half{grid-column:auto}
.r-settings .setting-sub{font-weight:700;margin-top:6px}
.r-settings .setting-row:has(.chips){flex-direction:column;align-items:stretch;gap:5px}
.r-settings .chips{flex-wrap:nowrap;justify-content:stretch;gap:3px;background:var(--surface-1,#13181d);border:1px solid var(--border);border-radius:12px;padding:3px}
.r-settings .chips button{flex:1;min-width:0;border:0;border-radius:9px;background:transparent;padding:3px 0;min-height:30px;color:var(--muted)}
.r-settings .chips button.on{color:#111;font-weight:700}
.r-settings .switch-row{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);padding-top:7px}
#createForm .setting-chev{display:none}
.r-settings.readonly .setting-chev{display:none}
/* 2.18.4: replies and reactions in the chat */
.cm-bub[data-chat-msg]{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cm.flash .cm-bub{animation:cmFlash 1.2s ease}@keyframes cmFlash{0%,60%{box-shadow:0 0 0 2px var(--gold)}100%{box-shadow:none}}
.cm-q{display:block;width:100%;text-align:start;border:0;border-inline-start:3px solid var(--av,var(--gold));background:rgba(255,255,255,.07);border-radius:8px;padding:3px 8px;margin:2px 0 5px;font:inherit;color:var(--muted);cursor:pointer}
.cm-q b{display:block;font-size:.72rem;color:var(--av,var(--gold))}.cm-q span{display:block;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.cm-re{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.cm-re button{border:1px solid var(--border);background:rgba(255,255,255,.07);color:var(--text);border-radius:999px;padding:1px 8px;font:inherit;font-size:.8rem;cursor:pointer;min-height:26px}
.cm-re button i{font-style:normal;font-size:.75rem}.cm-re button.me{background:color-mix(in srgb,var(--gold) 24%,transparent);border-color:var(--gold)}
.cm-menu-layer{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
.cm-menu-dim{position:absolute;inset:0;background:rgba(5,7,9,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cm-menu-box{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;max-width:360px}
.cm-menu-box.mine{align-items:flex-end}
.cm-ebar{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 6px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:100%}
.cm-ebar button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;font-size:23px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.cm-ebar button.me{background:color-mix(in srgb,var(--gold) 28%,transparent)}
.cm-menu-msg{background:var(--surface-2);border:1px solid var(--gold);border-radius:16px;padding:8px 12px;max-width:88%;font-size:.92rem;line-height:1.55}.cm-menu-msg b{display:block;font-size:.75rem;color:var(--gold)}.cm-menu-msg span{display:block;max-height:30vh;overflow:auto;overflow-wrap:anywhere}
.cm-menu-acts{display:flex;flex-direction:column;min-width:180px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cm-menu-acts button{border:0;background:transparent;color:var(--text);font:inherit;font-size:.95rem;text-align:start;padding:11px 14px;cursor:pointer}.cm-menu-acts button+button{border-top:1px solid var(--border)}
.chat-reply{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-inline-start:3px solid var(--gold);border-radius:10px;padding:5px 10px;margin-bottom:8px;font-size:.8rem}
.chat-reply[hidden]{display:none}.chat-reply div{flex:1;min-width:0}.chat-reply b{display:block;color:var(--gold);font-size:.76rem}.chat-reply small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply button{border:0;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer;width:32px;height:32px}

/* 2.19: the standalone solo collection, outside an active match. */
.night-cases-entry{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text,#f2eee5);padding:18px;margin:18px 0;border:1px solid var(--gold,#edca84);border-radius:18px;background:linear-gradient(110deg,#192536dd,#101722cc),url('/night-cases/assets/art/night-mansion.png') center/cover}.night-cases-entry b{font-size:18px;color:#edca84}.night-cases-entry small{display:block;font-size:12px;color:#d5dce6;margin-top:5px}.night-cases-entry>span:last-child{margin-inline-start:auto;color:#edca84}.night-case-mark{font-size:32px;color:#edca84}.night-cases-entry:focus-visible{outline:3px solid #edca84;outline-offset:3px}

/* 2.19.1: retain the original red home design, fitted to the available phone height. */
.home-shell{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding-bottom:calc(6px + var(--safe-bottom));overflow:hidden;gap:6px}

.home-shell>.public-bar{flex:none}
.home-shell>*{min-width:0}

.home-shell .home-hero.home-hero-cinematic{height:clamp(100px,18dvh,170px);min-height:100px;flex:none;margin:0;border-radius:18px}

.home-shell .home-copy.home-copy-overlay{padding:12px 16px}
.home-shell .home-copy.home-copy-overlay h1{font-size:36px}
.home-shell .home-copy.home-copy-overlay p{font-size:13px;margin-top:4px}
.home-shell .home-copy.home-copy-overlay .home-kicker{font-size:9px}

.home-shell>.night-cases-entry{flex:none;min-height:62px;margin:0;padding:9px 13px;border-radius:14px;gap:10px}
.home-shell>.night-cases-entry b{font-size:17px}
.home-shell>.night-cases-entry small{font-size:11px;line-height:1.4;margin-top:3px}
.home-shell>.night-cases-entry .night-case-mark{font-size:26px}

.home-shell>.home-role-gallery{flex:none}
.home-shell .home-role-gallery h2{font-size:13px;margin:0 0 3px}
.home-shell .home-role-strip{margin:0;gap:6px;padding:0 0 2px}
.home-shell .home-role-card{flex-basis:56px;padding:3px;gap:3px;border-radius:10px;min-height:0}
.home-shell .home-role-card .role-art{width:48px;height:48px}
.home-shell .home-role-card b{font-size:10px;line-height:1.2}

.home-shell>.home-actions{flex:none;display:grid;gap:6px;margin:0}
.home-shell .home-actions .primary-action{min-height:48px;background:linear-gradient(180deg,#bc354f,#a9203e);border:1px solid #d44961;color:#fff;box-shadow:inset 0 1px 0 #ffffff14}
.home-shell .home-actions .primary-action b{font-size:17px}
.home-shell .home-actions .home-tiles,.home-shell .home-actions .home-mini{gap:6px}
.home-shell .home-actions .home-tile{min-height:54px;border-radius:13px;padding:7px 10px;gap:8px}
.home-shell .home-actions .home-tile b{font-size:14px;line-height:1.4}
.home-shell .home-actions .home-tile small{font-size:10px;line-height:1.4}
.home-shell .home-actions .home-tile .tile-ic{width:30px;height:30px;border-radius:10px;font-size:18px}
.home-shell .home-mini .home-tile{min-height:64px;padding:6px;gap:3px}
.home-shell .home-mini .home-tile small{display:none}
.home-shell .home-mini .home-tile b{font-size:12px}

.home-shell>.games-list{display:flex;flex:1 1 auto;flex-direction:column;min-height:68px;margin:0;overflow:hidden}
.home-shell .public-rooms-head{flex:none;min-height:44px;gap:6px;margin:0}
.home-shell .public-rooms-head h2{font-size:15px;margin:0}
.home-shell .games-seg{gap:4px}
.home-shell .games-seg button{min-height:40px;font-size:11px;padding:4px 9px}
.home-shell #publicRoomsList{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.home-shell .games-empty{font-size:12px;line-height:1.5;margin:5px 0}
.home-shell>.build-version{flex:none;font-size:9px;line-height:1.3;margin:0;opacity:.7}
.home-shell .game-row{padding:8px;margin-bottom:6px;border-radius:12px}
.home-shell .gr-main b{font-size:14px}

@media(max-height:740px){.home-shell{gap:5px}
.home-shell .home-hero.home-hero-cinematic{height:110px;min-height:90px}
.home-shell .home-copy.home-copy-overlay{padding:8px 12px}
.home-shell .home-copy.home-copy-overlay h1{font-size:32px}
.home-shell .home-role-gallery h2{display:none}
.home-shell .home-role-card .role-art{width:42px;height:42px}
.home-shell .home-role-card{flex-basis:50px}
.home-shell .home-role-card b{font-size:10px}
.home-shell>.night-cases-entry{min-height:58px;padding-block:6px}
.home-shell .home-actions .home-tile small{display:none}
.home-shell .home-actions .home-tiles .home-tile{min-height:48px}
.home-shell .home-mini .home-tile{min-height:52px;flex-direction:row;gap:4px}
.home-shell .home-mini .home-tile .tile-ic{width:24px;height:26px;font-size:16px}
.home-shell .home-mini .home-tile b{font-size:11px}
}

@media(max-height:600px){.home-shell .home-hero.home-hero-cinematic{height:90px}
.home-shell .home-copy.home-copy-overlay h1{font-size:29px}
.home-shell .home-copy.home-copy-overlay .home-kicker{display:none}
.home-shell .home-role-card .role-art{width:34px;height:34px}
.home-shell .home-role-card{flex-basis:44px}
.home-shell{gap:4px}
}

/* Very short landscape/keyboard viewports retain access by scrolling, without scaling the app. */
@media(max-height:520px){.home-shell{overflow-y:auto}
.home-shell>.games-list{flex:none;min-height:110px}
.home-shell #publicRoomsList{max-height:180px}
}

.home-shell>.home-actions{padding:0}
.home-shell .home-actions .primary-action .action-icon{min-height:0;height:32px;line-height:32px}

@media(max-height:740px){.home-shell .home-hero.home-hero-cinematic{height:100px}
.home-shell .home-role-strip .role-art{min-height:0}
.home-shell .home-role-strip .home-role-card{min-height:0}
.home-shell .home-actions .primary-action{height:48px;padding:6px 10px}
}

@media(max-height:600px){.home-shell .home-hero.home-hero-cinematic{height:90px}
}
/* 2.19.2: recover an interrupted/blocked voice without restarting the app. */
.vc-recovery{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.vc-recovery .secondary-wide{margin:0;flex:1;min-height:44px;font-size:13px}
.vc-repair{min-height:44px;padding:7px 12px;background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--gold);font:inherit;font-size:13px}
/* Ready phrases: discussion stays editable; sound troubleshooting can be sent immediately. */
.chat-phrase-tools{padding:6px 14px 0}.chat-phrase-tools>[data-chat-phrase-toggle]{min-height:40px;display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--on);font:inherit;font-size:13px;padding:6px 12px}.chat-phrase-tools>[data-chat-phrase-toggle][aria-expanded=true]{color:var(--gold);border-color:var(--gold)}.chat-phrase-panel{border:1px solid var(--border);border-radius:14px;padding:8px;margin-top:6px;background:var(--surface-1)}.chat-phrase-panel[hidden]{display:none}.chat-phrase-tabs{display:flex;gap:5px}.chat-phrase-tabs button{flex:1;min-width:0;min-height:40px;border:0;border-radius:9px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:12px;padding:5px}.chat-phrase-tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--gold) 16%,var(--surface-2));color:var(--gold)}.chat-phrase-note{font-size:11px;color:var(--muted);margin:7px 2px}.chat-phrase-list{display:flex;flex-wrap:wrap;gap:6px;max-height:min(160px,24dvh);overflow-y:auto;overscroll-behavior:contain}.chat-phrase-list button{min-height:44px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;color:var(--on);background:var(--surface-2);font:inherit;font-size:13px}.chat-phrase-list button:active{border-color:var(--gold)}
.chat-phrase-tools{position:relative}.chat-phrase-panel{position:absolute;inset-inline:0;bottom:calc(100% + 5px);z-index:6;margin:0;max-height:min(310px,calc(var(--vvh,100dvh) - 140px));box-shadow:0 8px 28px #0005}.chat-phrase-panel:not([hidden]){display:flex;flex-direction:column}.chat-phrase-list{flex:1;min-height:44px;max-height:160px}
/* Tall phones such as the unfolded Flip use spare space for artwork, not an empty directory. */
@media(min-height:741px){
 .home-shell{--home-avatar:clamp(52px,8.5dvh,80px)}
 .home-shell .home-hero.home-hero-cinematic{flex:1 1 180px;height:auto;min-height:140px;max-height:320px}
 .home-shell>.games-list{flex:0 1 90px;min-height:68px}
 .home-shell .home-role-card{flex-basis:calc(var(--home-avatar) + 8px)}
 .home-shell .home-role-card .role-art{width:var(--home-avatar);height:var(--home-avatar)}
}

/* 2.19.3: reserve real lobby space above the system gesture area. Artwork shrinks first. */
.home-shell>.night-cases-entry{min-height:44px;height:44px;padding:5px 12px;gap:8px}
.home-shell>.night-cases-entry b{font-size:15px}
.home-shell>.night-cases-entry small{font-size:10px;margin-top:0;line-height:1.3}
.home-shell>.night-cases-entry .night-case-mark{font-size:21px}
.home-shell .home-hero.home-hero-cinematic{flex:0 1 220px;height:clamp(100px,22dvh,220px);min-height:90px;max-height:220px}
.home-shell>.games-list{flex:1 0 144px;min-height:144px}
.home-shell #publicRoomsList{padding-bottom:6px;scroll-padding-bottom:6px}
@media(max-height:740px){.home-shell .home-hero.home-hero-cinematic{flex-basis:100px;height:100px;min-height:60px}.home-shell>.games-list{flex-basis:120px;min-height:120px}}
@media(max-height:650px){.home-shell .home-hero.home-hero-cinematic{flex:0 1 90px;min-height:60px;height:90px}.home-shell>.games-list{flex:1 0 120px;min-height:120px}}

.vc-output-help{font-size:13px;line-height:1.7;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-1);color:var(--muted)}

.home-shell .gr-acts .gr-btn{min-height:44px;min-width:44px}

.media-test-link{display:block;text-align:center;text-decoration:none;min-height:44px;padding:12px;border:1px solid var(--border);border-radius:12px;color:var(--gold)}


.guide-rules{margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:12px}.guide-rules summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}.guide-rules p{font-size:13px;line-height:1.9;color:var(--muted)}

/* The remote dock occupies its own flex row; legacy floating-chat clearance is unnecessary. */
html.has-chat .remote-shell .game-content{padding-bottom:12px}

.mafia-night-wait{padding:10px 12px;margin:8px 0;border:1px solid #914451;border-radius:12px;background:#301e26;color:#f6e7ea}.mafia-night-wait b{font-size:13px}.mafia-night-wait p{font-size:12px;line-height:1.8;margin:4px 0 0}


.finish-exit{display:block;width:100%;margin-top:10px}
.media-permission-notice{position:fixed;z-index:1200;inset:auto 12px calc(12px + env(safe-area-inset-bottom));max-width:460px;margin-inline:auto;padding:14px;background:#251b24;border:1px solid #b34b61;border-radius:16px;box-shadow:0 8px 40px #0009;color:#fff;display:flex;flex-wrap:wrap;gap:10px;font-size:13px}
.media-permission-notice p{width:100%;margin:0;line-height:1.8}.media-permission-notice a{flex:1;color:#fff;background:#9b2944;padding:10px;border-radius:9px;text-align:center;text-decoration:none}.media-permission-notice button{min-width:60px;min-height:44px;border:1px solid #78616b;border-radius:9px;background:#342b34;color:white;font:inherit}
/* Shared navigation across all game modes; online tools remain contextual. */
.remote-shell .bottom-nav{flex:none}
.online-tools{display:flex;gap:6px;flex:none;justify-content:center;padding:4px 0}
.online-tools button{min-height:44px;margin:0;padding:5px 12px;width:auto;font-size:12px}
.remote-ui .chat-layer:not(.open) .chat-fab:not([hidden]){display:flex!important;bottom:calc(120px + env(safe-area-inset-bottom));z-index:80}
html.remote-ui:has(.r-sheet) .chat-fab,html.remote-ui:has(.bottom-sheet) .chat-fab{display:none!important}
html.remote-ui:has(.r-sheet) .chat-layer:not(.open) .chat-fab:not([hidden]),html.remote-ui:has(.bottom-sheet) .chat-layer:not(.open) .chat-fab:not([hidden]){display:none!important}
.game-shell>.vc-announce{position:fixed;top:calc(60px + var(--safe-top,env(safe-area-inset-top)));left:12px;right:12px;max-width:590px;margin:0 auto;z-index:140;pointer-events:none;font-size:13px;line-height:1.8}
/* 2.21.5 lobby camera test */
.lobby-cam .seg{margin:6px 0 4px}.lobby-cam .vc-mrow bdi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-cam-live{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0}.lobby-cam>.primary-action{width:100%;margin:6px 0}
/* 2.21.6 mic badge on the main player grid */
.r-p .r-av{position:relative}.r-p .vc-bd{width:16px;height:16px;bottom:-4px;inset-inline-end:-6px}.r-p .vc-bd svg{width:10px;height:10px}.r-p .vc-bd:not(.on){color:var(--red-soft);border-color:var(--red-soft)}

/* 2.21.9: host video timings sheet */
.vt-tabs{margin:8px 0}
.vt-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vt-row{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid color-mix(in srgb,var(--border) 45%,transparent);min-width:0}
.vt-h{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;min-width:0}
.vt-h>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-mode{color:var(--muted);flex:none}
.vt-marks{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0;font-size:.82rem;color:var(--muted)}
.vt-marks b{color:var(--on);font-weight:600}
.vt-bar{height:6px;border-radius:3px;background:var(--surface-0);overflow:hidden}
.vt-bar i{display:block;height:100%;border-radius:inherit}
.vt-bar.good i{background:var(--green)}
.vt-bar.warn i{background:var(--warning)}
.vt-bar.bad i{background:var(--red)}
.vt-warm{display:block;margin-top:4px;color:var(--muted)}
.vt-avg{margin:10px 0;font-size:.9rem}

/* 2.21.11: timing rows without a picture */
.vt-bar.fail i{background:var(--red);width:100%!important;opacity:.55}
.vt-out{display:block;margin-top:4px;color:var(--red-soft)}
.vt-diag{display:block;margin-top:2px;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}

/* 2.21.17: online test game option under the public-lobby toggle. */
.test-game-optin{flex-wrap:wrap}.test-game-optin small{display:block;flex-basis:100%;font-size:11px;line-height:1.5;color:var(--muted)}
/* 2.21.27: voice chat controls at the top of the chat sheet; ready phrases as an icon opposite the send button. */
.chat-voice{padding:0 12px 8px;border-bottom:1px solid var(--border)}
.chat-voice .vc{margin:0;padding:8px 10px}
.chat-voice .vc-head{margin:0 0 6px}
.chat-voice .vc-pill{font:inherit;font-size:.75rem;cursor:pointer;border:0}
.chat-voice .vc-join-btn{min-height:56px;padding:8px 12px}
.chat-voice .vc-ppl{max-height:160px;overflow:auto}
.chat-voice [data-voice-op="resume"]{width:100%;margin:0 0 6px}
.cv-row{display:flex;gap:6px}
.cv-row .vc-btn{flex:1 1 0;min-width:0;min-height:52px;padding:6px 2px;font-size:.7rem}
.cv-row .vc-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cv-row .vc-btn svg{width:18px;height:18px}
.cv-g{font-size:16px;line-height:18px;font-weight:400}
.chat-phrase-btn{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--border);background:var(--surface-1);color:var(--on);display:grid;place-items:center;font-size:20px;cursor:pointer}
.chat-phrase-btn[aria-expanded="true"]{outline:2px solid var(--gold);outline-offset:1px}
.r-moved{margin:0 0 10px;color:var(--muted);font-size:.85rem;line-height:1.7}
.chat-phrase-tools{padding:0}
.chat-voice .vc-state{margin:6px 0 0;font-size:.72rem;padding:6px 10px}
.chat-voice .vc-output-help{margin:6px 0 0;font-size:.72rem}
.chat-voice .vc-chan{margin:0 0 6px;font-size:.75rem}
/* 2.21.49: the chat's voice card folds to one row; a tap opens it (owner). */
.chat-voice .cv-closed{display:flex;align-items:center;gap:8px;padding:6px 10px}
.chat-voice .cv-sum{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--on);font:inherit;text-align:start;cursor:pointer;min-height:36px;padding:0}
.chat-voice .cv-sum b{font-size:.85rem;white-space:nowrap}
.chat-voice .cv-sum small{flex:1 1 auto;min-width:0;color:var(--muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-voice .cv-quick{flex:0 0 auto;min-height:36px;padding:2px 10px}
.chat-voice .cv-fold{background:none;border:0;color:var(--muted);font:inherit;font-size:1rem;cursor:pointer;min-width:32px;min-height:32px;padding:0}
/* 2.21.49: before joining, the chat's voice row is slim too: small icon, one line. */
.chat-voice .vc-join{padding:4px 10px}
.chat-voice .vc-join-btn{min-height:40px;padding:2px 0;gap:8px}
.chat-voice .vc-join .vc-big{width:30px;height:30px}
.chat-voice .vc-join .vc-big svg{width:17px;height:17px}
.chat-voice .vc-join-btn>span:last-child{display:flex;align-items:baseline;gap:8px;min-width:0}
.chat-voice .vc-join-btn b{font-size:.85rem;white-space:nowrap}
.chat-voice .vc-join-btn small{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chat-voice .vc-join .vc-mini-ppl{display:none}
/* 2.21.36: the camera grid. 2.21.37: tiles placed round a 3:4 centre frame (positions set by video-grid.js), an action bar
   above the emojis and reactions floating over a tile. Everything fits one phone screen up to 12 players. */
.video-grid{margin:8px 0;padding:0;color:var(--on);max-width:100%;overflow:hidden}
.vg-stage{position:relative;width:100%;margin-inline:auto}
.vg-centre{position:absolute;top:0;border:2px solid var(--gold);border-radius:12px;overflow:hidden;background:var(--surface-0)}
.vg-centre.vg-empty{border-style:dashed;opacity:.55}
.vg-centre[hidden],.vg-note[hidden],.vg-badge[hidden],.vg-turn[hidden],.vg-challenge[hidden],.vg-emoji[hidden],.vg-tile[hidden],.video-grid [data-vg-cam][hidden]{display:none}
.vg-frame,.vg-pic{position:absolute;inset:0;overflow:hidden;background:var(--surface-0)}
.video-grid video,.video-grid canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-grid canvas[hidden]{display:none}
.video-grid .vg-self video,.video-grid .vg-self canvas{transform:scaleX(-1)}
.vg-name,.vg-time{position:absolute;top:5px;padding:1px 8px;border-radius:999px;background:var(--surface-0);font-size:12px;font-weight:700;z-index:2}
.vg-name{inset-inline-start:5px;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-name:has(bdi:empty),.vg-time:empty{display:none}
.vg-time{inset-inline-end:5px;color:var(--gold);font-variant-numeric:tabular-nums}
.vg-tile{position:absolute;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--surface-2)}
.vg-tile.vg-self{border-color:var(--blue)}
.vg-tile.vg-host{border:2px solid var(--gold)}
.vg-tile[data-state=speaker]{border:1px dashed var(--gold);background:var(--surface-0)}
.vg-tile[data-state=done]{opacity:.62}
.vg-tile[data-state=dead]{opacity:.45;filter:grayscale(1)}
.vg-tile[data-state=sleep]{background:var(--surface-0)}
.vg-tile[data-state=sleep] .vg-pic,.vg-tile[data-state=dead]:not(.vg-has) .vg-pic,.vg-tile[data-state=speaker] .vg-pic{display:none}
.vg-badge{position:absolute;top:3px;inset-inline-end:3px;padding:0 5px;border-radius:999px;background:var(--surface-0);color:var(--gold);font-size:10px;font-weight:700;z-index:2;line-height:1.6}
.vg-tile[data-state=sleep] .vg-badge,.vg-tile[data-state=dead]:not(.vg-has) .vg-badge,.vg-tile[data-state=speaker] .vg-badge{inset:0;display:grid;place-items:center;background:none;font-size:20px;color:var(--muted)}
.vg-tname{position:absolute;inset-inline:0;bottom:0;padding:1px 3px;background:var(--surface-0);font-size:10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.vg-mute{min-width:28px;min-height:28px;border:0;border-radius:999px;background:var(--surface-2);color:var(--on);font-size:13px}
.vg-react{position:absolute;left:50%;bottom:18%;z-index:4;font-size:30px;pointer-events:none;transform:translateX(-50%);animation:vg-float 3s ease-out forwards}
@keyframes vg-float{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
@media (prefers-reduced-motion:reduce){.vg-react{animation:none}}
.vg-note{margin:6px 2px 0;font-size:12px;line-height:1.7;color:var(--muted)}
.vg-turn{display:flex;gap:6px;margin-top:8px}
.vg-turn button{flex:1;min-height:42px;border-radius:12px;border:1px solid var(--gold);background:var(--surface-2);color:var(--on);font-weight:700;font-size:14px}
.vg-turn .vg-done{background:var(--gold);color:var(--surface-0)}
.vg-challenge{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vg-challenge button{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--on)}
.vg-emoji{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:6px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface-1)}
.vg-emoji button{min-width:0;min-height:38px;border:0;border-radius:999px;background:var(--surface-2);font-size:19px}
.vg-turn .vg-ch{color:var(--gold)}
.vg-actions{display:flex;justify-content:center;margin-top:6px}
/* 2.21.37: an hourglass in the speaker's slot (its time red for the last 10 s) and a big red count for the last 5 s. */
.vg-tile[data-state=speaker] .vg-badge{flex-direction:column;gap:2px;display:flex;align-items:center;justify-content:center}
.vg-tile[data-state=speaker] .vg-badge small{font-size:11px;color:var(--gold);font-variant-numeric:tabular-nums}
.vg-tile.vg-low[data-state=speaker] .vg-badge small{color:var(--red)}
.vg-glass{display:inline-block;animation:vg-turn 2s ease-in-out infinite}
@keyframes vg-turn{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.vg-count{position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-size:96px;font-weight:800;line-height:1;color:var(--red);opacity:.78;pointer-events:none;font-variant-numeric:tabular-nums}
.vg-count[hidden]{display:none}
.vg-count.vg-beat{animation:vg-beat .9s ease-out}
@keyframes vg-beat{0%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:.78}}
@media (prefers-reduced-motion:reduce){.vg-glass,.vg-count.vg-beat{animation:none}}
/* 2.21.38: the dead keep a grey camera by day (a small cross in the corner); a death plays after a short pause: a red
   flash, the picture turns grey and a cross falls on it. The host's button switches a dead player's camera off or on. */
.vg-tile[data-state=dead].vg-has{opacity:.6;filter:grayscale(1)}
.vg-tile[data-state=dead] .vg-badge{display:flex;align-items:center;gap:3px;color:var(--muted)}
.vg-deadcam{min-width:26px;min-height:26px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-size:12px;line-height:1;filter:none}
.vg-tile[data-state=dying]{animation:vg-die 2.6s 1.5s both}
.vg-tile[data-state=dying]::after{content:"✝";position:absolute;left:50%;top:50%;z-index:5;font-size:34px;color:var(--red);pointer-events:none;animation:vg-cross 2.6s 1.5s both}
@keyframes vg-die{0%{filter:none;opacity:1;box-shadow:none}18%{filter:brightness(1.4) saturate(1.6);box-shadow:inset 0 0 0 3px var(--red),0 0 18px var(--red)}55%{filter:grayscale(1);opacity:.8;box-shadow:inset 0 0 0 2px var(--red)}100%{filter:grayscale(1);opacity:.6;box-shadow:none}}
@keyframes vg-cross{0%,25%{opacity:0;transform:translate(-50%,-160%) scale(1.6)}55%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.vg-tile[data-state=dying],.vg-tile[data-state=dying]::after{animation:none}.vg-tile[data-state=dying]{filter:grayscale(1);opacity:.6}}
/* 2.21.39: what happened to whom, on the tile (camera on or off): a shot, a blank, a vote-out, a bomb, a veto, a revive. */
.vg-fx{position:absolute;inset:0;z-index:6;display:grid;place-items:center;font-size:34px;pointer-events:none;animation:vg-fx-pop 2.4s ease-out both}
@keyframes vg-fx-pop{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.2)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.vg-fx-shoot{background:radial-gradient(circle,var(--gold) 0,transparent 60%);animation-duration:1.2s}
.vg-fx-shot,.vg-fx-bomb,.vg-fx-backfire{background:radial-gradient(circle,var(--red) 0,transparent 70%)}
.vg-fx-backfire::before{content:"🔫";position:absolute;font-size:22px;bottom:22%;inset-inline-start:18%;transform:rotate(-30deg)}
.vg-fx-puff{font-size:44px;opacity:.8}
.vg-fx-shot::after{content:"";position:absolute;inset:18%;background:linear-gradient(45deg,transparent 48%,var(--on) 49%,transparent 51%),linear-gradient(-30deg,transparent 48%,var(--on) 49%,transparent 51%),linear-gradient(80deg,transparent 48%,var(--on) 49%,transparent 51%);opacity:.8}
.vg-fx-voted b{padding:2px 8px;border:3px solid var(--red);border-radius:6px;color:var(--red);font-size:18px;font-weight:800;letter-spacing:.06em;transform:rotate(-14deg);background:var(--surface-0)}
/* 2.21.57: the vote did not reach the threshold: a grey stamp over the centre frame. */
.vg-fx-noquorum b{padding:2px 8px;border:3px solid var(--muted);border-radius:6px;color:var(--muted);font-size:16px;font-weight:800;transform:rotate(-8deg);background:var(--surface-0)}
/* 2.21.59: a tie goes to the runoff: a gold stamp over the centre frame, the scales on each tied candidate. */
.vg-fx-runoff b{padding:2px 8px;border:3px solid var(--gold);border-radius:6px;color:var(--gold);font-size:16px;font-weight:800;transform:rotate(-8deg);background:var(--surface-0)}
.vg-fx-tied{box-shadow:inset 0 0 0 3px var(--gold);font-size:28px}
.vg-fx-veto{box-shadow:inset 0 0 0 3px var(--blue),0 0 18px var(--blue)}
.vg-fx-revive{box-shadow:inset 0 0 0 3px var(--gold),0 0 22px var(--gold)}
.vg-fx-struck{background:radial-gradient(circle,var(--blue) 0,transparent 65%)}
.vg-fxing-blank{animation:vg-shake .6s ease-in-out}
.vg-fxing-left{animation:vg-fade 2.4s ease-in both}
@keyframes vg-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes vg-fade{to{opacity:.25;filter:grayscale(1)}}
@media (prefers-reduced-motion:reduce){.vg-fx{animation:none;opacity:.9}.vg-fxing-blank,.vg-fxing-left{animation:none}}
/* 2.21.41: tiles replace the name blocks: mic and ready on the tile, a pickable tile for an open choice, one control row. */
.vg-mic{position:absolute;bottom:17px;inset-inline-start:3px;padding:0 4px;border-radius:999px;background:var(--surface-0);font-size:11px;line-height:1.5;z-index:2}
/* 2.21.49: a smaller mic badge, tucked into the corner (owner). */
.vg-mic{bottom:16px;inset-inline-start:2px;padding:0 2px;font-size:8px;line-height:1.4}
.vg-mic[data-mic=off],.vg-mic[data-mic=muted]{opacity:.6;filter:grayscale(1)}
.vg-mic[data-mic=on]{box-shadow:0 0 0 1px var(--green)}
.vg-tile.speaking{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.vg-tile.vg-offline .vg-pic{opacity:.45}
.vg-tile.vg-offline .vg-tname::before{content:"• ";color:var(--red)}
.vg-tile.vg-pick{cursor:pointer;border-color:var(--gold);border-style:dashed}
.vg-tile.vg-picked{border:2px solid var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 14px var(--gold)}
.vg-tile.vg-picked .vg-tname{background:var(--gold);color:var(--surface-0);font-weight:700}
.vg-on-tile{display:none!important}
.player-choice-grid:not(:has(>:not(.vg-on-tile))),.vote-list:not(:has(>:not(.vg-on-tile))){display:none!important}
.online-tools.grid-dock{gap:4px;padding:4px 0;flex-wrap:nowrap}
.online-tools.grid-dock>button{flex:1 1 0;min-width:0;padding:5px 6px;white-space:nowrap}
.online-tools.grid-dock [data-dock-cam].off{opacity:.7}
.online-tools .dock-fab{display:flex;align-items:center;justify-content:center;gap:4px;background:var(--gold);color:#111;border:0;border-radius:999px;font:inherit;font-weight:700;padding:5px 10px;min-height:44px;font-size:12px;cursor:pointer}
.online-tools .dock-fab em{font-style:normal;background:#c0535e;color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:.78rem;padding:0 6px}
html.remote-ui:has(.grid-dock) .chat-layer:not(.open) .chat-fab{display:none!important}
/* With the grid everything sits on one screen: the cards under the tiles keep their buttons and lose the long help text. */
html.vg-on .vg-cards>section,html.vg-on .vg-cards>aside{padding:8px 12px;margin-block:2px}
html.vg-on .vg-cards>section>p,html.vg-on .vg-cards>section .card-heading p,html.vg-on .vg-cards>section .field-help,html.vg-on .vg-cards>section>.phase-symbol{display:none}
html.vg-on .vg-cards>section h1,html.vg-on .vg-cards>section h2{font-size:15px;margin:2px 0 6px}
html.vg-on .video-grid{margin:4px 0}
html.vg-on [data-video-slot]~.vote-card .card-heading{margin-bottom:6px}
html.vg-on [data-video-slot]~.vote-card .vote-actions,html.vg-on [data-video-slot]~.vote-card>small{margin-top:6px}
html.vg-on .game-content{row-gap:6px}
html.vg-on .game-content .r-narr{margin-bottom:0}
html.vg-on .vg-cards>section{gap:6px}
html.vg-on .vg-cards>section .primary-action,html.vg-on .vg-cards>section .secondary-action{min-height:44px;padding-block:6px;margin-top:4px}
html.vg-on .vg-cards>section .overline{margin:0}
html.vg-on .game-content:has(.r-step) .r-narr{display:none}
.online-tools .dock-fab em[hidden]{display:none}
/* 2.21.41: smaller buttons with the grid (owner): a slim control row, slim card buttons, compact emojis. */
html.vg-on .online-tools.grid-dock{padding:2px 0}
html.vg-on .online-tools.grid-dock>button,html.vg-on .online-tools .chat-fab.dock-fab{min-height:34px;padding:3px 6px;font-size:12px;border-radius:999px}
html.vg-on .online-tools .dock-fab em{min-width:18px;height:18px;font-size:.7rem}
html.vg-on .vg-emoji{gap:3px;padding:4px}
html.vg-on .vg-emoji button{min-height:32px;font-size:17px}
html.vg-on .vg-turn button{min-height:34px;font-size:13px;border-radius:999px}
html.vg-on .vg-cards>section .primary-action,html.vg-on .vg-cards>section .secondary-action,html.vg-on .vg-cards>section .vote-row,html.vg-on .vg-cards>section .secondary-wide,html.vg-on .vg-cards>section .player-choice,html.vg-on .vg-cards>section .text-action{min-height:34px;padding-block:4px;font-size:13px;border-radius:999px}
html.vg-on .vg-cards>section .primary-action b,html.vg-on .vg-cards>section .secondary-action b{font-size:13px}
html.vg-on .vg-cards>section .r-row{gap:6px}
/* Buttons only as wide as their label, side by side and centred (owner). */
html.vg-on .online-tools.grid-dock{justify-content:center;gap:6px}
html.vg-on .online-tools.grid-dock>button,html.vg-on .online-tools .chat-fab.dock-fab{flex:0 0 auto;width:auto;padding:3px 12px}
html.vg-on .vg-cards>section .primary-action,html.vg-on .vg-cards>section .secondary-action,html.vg-on .vg-cards>section .text-action,html.vg-on .vg-cards>section .secondary-wide{width:auto;min-width:0;max-width:100%;display:inline-flex;align-items:center;justify-content:center;padding-inline:16px;margin-inline:auto}
html.vg-on .vg-cards>section .r-row{display:flex;justify-content:center;flex-wrap:wrap}
html.vg-on .vg-cards>section .r-row>button{flex:0 0 auto}
html.vg-on .vg-cards>section>button,html.vg-on .vg-cards>section .night-actions,html.vg-on .vg-cards>section .vote-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
html.vg-on .vg-turn{justify-content:center}
html.vg-on .vg-turn button{flex:0 0 auto;padding-inline:14px}
/* Cards side by side under the tiles: a short card shares the row; inside, the title sits beside its buttons (owner). */
html.vg-on .vg-cards{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
html.vg-on .vg-cards>*{flex:1 1 100%;min-width:0;margin:0!important}
html.vg-on .vg-cards>section{flex:1 1 170px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
html.vg-on .vg-cards>section>*{margin:0!important}
html.vg-on .vg-cards>section>:is(h1,h2,.overline,.card-heading,.r-step-h){flex:1 1 auto;min-width:0}
html.vg-on .vg-cards>section>:is(small,.my-vote-status,.mafia-suggestions,.status-card,.selection-title,.player-choice-grid,.vote-list,details){flex:1 1 100%}
html.vg-on .vg-cards>section .r-row{flex:0 0 auto;gap:6px;flex-wrap:nowrap}
html.vg-on .vg-cards>section :is(.primary-action,.secondary-action,.text-action,.secondary-wide){margin-inline:0}
html.vg-on .vg-cards>section>:is(.card-heading,h1,h2){flex:1 1 0}
html.vg-on .vg-cards>section>:is(.card-heading,h1,h2){width:auto;justify-content:flex-start;gap:8px}
/* 2.21.48: the lobby keeps one full-width card per row (the owner: two half cards squeezed the timings off the screen). */
html.vg-on .vg-cards.vg-lobby>section{flex:1 1 100%}
html.vg-on .vg-cards.vg-lobby>section>:is(.setting-row,.talk-setup){flex:1 1 100%}
/* 2.21.43: the layout previews of /fx-test/ show the phone screen without the Test Lab banner. */
html[data-preview] .simulator-banner{display:none}
/* 2.21.44: online, the Ocean's consultation is one slim bar; the chat and tiles stay usable. */
.ocean-bar{display:flex;align-items:center;gap:8px;padding:8px 10px}
.ocean-bar p{flex:1 1 auto;margin:0;font-size:13px;line-height:1.6}
.ocean-bar .primary-action{flex:0 0 auto;width:auto;margin:0;min-height:38px;padding:0 14px}
html.vg-on .vg-cards>section.ocean-bar{flex:1 1 100%;flex-wrap:nowrap}
html.vg-on .vg-cards>section.ocean-bar>p{display:block}
/* With the grid on, the quiet night card shows only "Night N", which the top bar already says: hide it beside another card. */
html.vg-on .vg-cards>section.status-card.quiet:not(:only-child){display:none}
/* 2.21.44: with the grid on, the day cards repeat what the tiles and the bar above the emojis already show (the turn
   timer and order are on the tiles; "I'm done", the census request and the challenge are in the bar). The talk card is
   one compact row of the host's buttons; the speaker's card and a census card without a result are hidden. */
html.vg-on .vg-cards>.talk-card :is(.talk-timer,.talk-order,.talk-ask,.talk-ask-off){display:none}
html.vg-on .vg-cards>.talk-card .talk-challenge:not(:has([data-challenge-answer])){display:none}
html.vg-on .vg-cards>.talk-card{flex:1 1 100%;flex-wrap:nowrap;padding:6px 10px}
html.vg-on .vg-cards>.talk-card>h2{font-size:14px}
html.vg-on .vg-cards>.talk-card .talk-actions{display:flex;flex:0 0 auto;gap:6px}
html.vg-on .vg-cards>.talk-card .talk-actions .secondary-wide{min-height:36px;padding:0 10px;font-size:13px;margin:0}
html.vg-on .vg-cards>.talk-card.is-speaker:not(:has([data-challenge-answer])){display:none}
html.vg-on .vg-cards>.census-card:not(:has(.census-readout)){display:none}
html.vg-on .vg-cards>.r-step{flex:1 1 100%;flex-wrap:nowrap;padding:6px 10px}
html.vg-on .vg-cards>.r-step .primary-action{min-height:38px}
/* 2.21.44: the Mayor's decision is one full-width card: the question with the name, two equal buttons. */
.mayor-decide .mayor-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px}
.mayor-decide .mayor-choices>button{width:100%;min-width:0;margin:0;min-height:46px;justify-content:center}
.mayor-decide .mayor-choices>button[aria-pressed="true"]{outline:2px solid var(--gold);outline-offset:2px}
html.vg-on .vg-cards>section.mayor-decide{flex:1 1 100%}
html.vg-on .vg-cards>section.mayor-decide>h2{flex:1 1 100%;font-size:16px;line-height:1.6}
html.vg-on .vg-cards>section.mayor-decide .mayor-choices{flex:1 1 100%;display:grid}
html.vg-on .vg-cards>section.mayor-decide .mayor-choices>button{width:100%;max-width:none}
/* 2.21.44: "My role" sheet: slides up from the bottom, closes on a tap or by itself. */
.vg-role{border-color:var(--border)}
.role-peek{position:fixed;inset:0;z-index:60;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;background:var(--surface-0);background:color-mix(in srgb,var(--surface-0) 55%,transparent)}
.role-peek-card{pointer-events:auto;position:relative;width:100%;max-width:430px;margin:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;background:var(--surface-2);border:1px solid var(--border);color:var(--on);animation:role-peek-up .22s ease-out}
.role-peek-card h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:20px;margin:6px 0}
.role-peek-card p{margin:0 0 8px;line-height:1.8;font-size:14px;color:var(--muted)}
.role-peek-x{position:absolute;top:8px;inset-inline-end:10px;width:36px;height:36px;border:0;background:none;color:var(--on);font-size:24px}
.role-peek-auto{display:block;margin-top:8px;font-size:11px;color:var(--muted)}
@keyframes role-peek-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.role-peek-card{animation:none}}
/* 2.21.44: chat first in the dock row. 2.21.45: the row is centred on the bottom edge again. */
.online-tools>.dock-fab{order:-1}
/* 2.21.48: "My role" right after the chat in the dock row. */
.online-tools>[data-dock-role]{order:-1}
/* 2.21.45: online, the night keeps the ring of tiles; the centre shows the night and its stage. */
.vg-centre.vg-nightbox{opacity:1;border-style:solid;border-color:var(--border)}
.vg-centre.vg-nightbox .vg-name{position:absolute;inset:0;display:grid;place-items:center;padding:10px;background:none;text-align:center}
.vg-centre.vg-nightbox bdi{font-size:15px;font-weight:700;line-height:1.8;color:var(--gold);white-space:normal}
/* 2.21.48: the night and its stage on two centred lines, the night larger (owner). */
.vg-centre.vg-nightbox bdi{display:block;white-space:pre-line;text-align:center;font-size:17px;line-height:1.5}
.vg-centre.vg-nightbox bdi::first-line{font-size:22px}
.vg-centre.vg-nightbox .vg-name{left:0;right:0;width:100%;max-width:none;box-sizing:border-box}
/* 2.21.58: the host's vote fits one phone screen: the vote count is one row (count, quorum, LIVE), and the host's own
   ballot drops its "saved, editable" line. */
html.vg-on .vg-cards>.host-vote-count{flex:1 1 100%;padding:6px 10px;flex-wrap:nowrap}
html.vg-on .vg-cards>.host-vote-count .card-heading{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%}
html.vg-on .vg-cards>.host-vote-count .card-heading>div{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
html.vg-on .vg-cards>.host-vote-count .overline,html.vg-on .vg-cards>.host-vote-count .vote-progress{display:none}
html.vg-on .vg-cards>.host-vote-count h2{margin:0;font-size:14px}
html.vg-on .vg-cards>.host-vote-count~.player-vote-private .my-vote-status{display:none}
/* 2.21.58: "My role" shows the role picture too. */
.role-peek .role-peek-art{width:96px;margin:6px auto 4px}
/* 2.21.58: the next speaker under the centre frame; no mic badge and no "next" mark on the tiles (the lobby's ready ✓ stays). */
.vg-nextup{position:absolute;bottom:5px;inset-inline-start:5px;max-width:70%;padding:1px 8px;border-radius:999px;background:var(--surface-0);color:var(--gold);font-size:12px;font-weight:700;z-index:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-nextup i{font-style:normal;color:var(--muted)}
.vg-nextup[hidden],.video-grid .vg-mic:empty{display:none}
/* 2.21.58: the challenge button before it can be used: greyed out, with the reason. */
.vg-turn .vg-ch:disabled{opacity:.6;border-style:dashed;color:var(--muted)}
.vg-turn .vg-ch small{font-weight:400;font-size:11px}
/* 2.21.59: the host's vote fits shorter phones (740 and 667 px high): one row of emoji that slides sideways, and the
   host's next step sits beside the vote count in one row. Taller phones keep the 2.21.58 layout. */
@media (max-height:800px){
html.vg-on .vg-emoji{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 21px)/8);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
html.vg-on .vg-emoji::-webkit-scrollbar{display:none}
html.vg-on .vg-cards>.r-step:has(~.host-vote-count){flex:0 0 auto;display:flex;align-items:center;padding:6px 8px}
html.vg-on .vg-cards>.r-step:has(~.host-vote-count) .overline{display:none}
html.vg-on .vg-cards>.r-step:has(~.host-vote-count) .primary-action{width:auto;margin:0;min-height:40px}
html.vg-on .vg-cards>.r-step:has(~.host-vote-count)~.host-vote-count{flex:1 1 0}
html.vg-on .vg-cards>.r-step:has(~.host-vote-count)~.player-vote-private{flex:1 1 100%}
}
/* 2.21.60: online the host's bot ballots are two small buttons beside the vote count (owner: the host's vote screen grew
   with bots): the auto vote and a toggle for the manual ballots, which open on a full row of their own. */
html.vg-on .vg-cards>.bot-vote-box.bot-vote-mini{flex:0 0 auto;margin:0;padding:4px 6px;border-radius:12px}
html.vg-on .vg-cards>.bot-vote-mini.open{flex:1 1 100%;flex-wrap:wrap}
.bot-vote-mini .bot-vote-row{display:flex;align-items:center;justify-content:center;gap:6px}
.bot-vote-mini .bot-auto-vote{min-height:36px;padding:4px 8px}
.bot-vote-mini.open .bot-vote-row,.bot-vote-mini.open .bot-voter-strip,.bot-vote-mini.open .mini-target-grid{flex:1 1 100%;margin-top:6px}
html.vg-on .vg-cards>.host-vote-count:has(+.bot-vote-mini){flex:1 1 0}
html.vg-on .vg-cards>.bot-vote-mini~.player-vote-private{flex:1 1 100%}
html.vg-on .vg-cards>.bot-vote-mini:not(.open) .bot-auto-vote b{display:none}
html.vg-on .vg-cards>.bot-vote-mini:not(.open) .bot-auto-vote{min-width:40px}
/* 2.21.60: on short phones with bots the row is the step, the count and the two bot buttons stacked: the LIVE badge goes. */
@media (max-height:800px){
html.vg-on .vg-cards>.bot-vote-mini:not(.open) .bot-vote-row{flex-direction:column;gap:4px}
html.vg-on .vg-cards>.bot-vote-mini:not(.open) .bot-auto-vote{min-height:30px;min-width:38px;padding:2px 6px}
html.vg-on .vg-cards>.host-vote-count:has(+.bot-vote-mini) .live-pill{display:none}
}