:root {
  color-scheme: dark;
  --bg: #182b30;
  --ink: #f4e9d4;
  --muted: #b5c2bc;
  --gold: #d8b574;
  --paper: #e0d3b7;
  --paper-ink: #304442;
  --red: #e5a48e;
  --line: #d5c5a12b;
  --radius: 20px;
  --hand: 'Kaushan Script', 'Segoe Print', 'Bradley Hand', cursive;
  --shadow: 0 9px 30px #070f1426;
  --ad-height: 0px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; min-height: 100dvh; display: flex; flex-direction: column; color: var(--ink); background: radial-gradient(ellipse at 0% 0%, #49615755, transparent 52%), radial-gradient(ellipse at 100% 85%, #10263280, transparent 65%), var(--bg); }
#app { flex: 1; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #e2bb76; outline-offset: 4px; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.2; font-weight: 600; }
h1, h2, .serif { font-family: var(--hand); font-weight: 400; }
h1 { font-size: clamp(2.15rem, 5vw, 3.15rem); margin-bottom: 16px; }
h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
h3 { font-size: 1.15rem; }
p { line-height: 1.7; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.center { text-align: center; }
.eyebrow { font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.shell { max-width: 1060px; margin: auto; padding: 20px clamp(18px, 4vw, 48px) max(32px, env(safe-area-inset-bottom)); min-height: calc(100dvh - var(--ad-height)); display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; min-height: 46px; }
.brand { border: 0; background: none; color: var(--ink); font: 400 2.25rem/1.25 var(--hand); padding: 2px 0 9px; letter-spacing: 0; }
.top-actions, .row { display: flex; align-items: center; gap: 10px; }
.top-actions { gap: 6px; }
.icon { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px; background: #1d353acf; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); min-width: 46px; min-height: 46px; }
.icon-button:hover, .btn.secondary:hover { background: #365050; }
.content { width: 100%; max-width: 760px; margin: 0 auto; flex: 1; }
.home { max-width: 830px; text-align: center; margin: auto; }
.home-shell { padding-top: max(14px, env(safe-area-inset-top)); position: relative; isolation: isolate; }
.home-shell .topbar { margin-bottom: 0; position: relative; z-index: 2; }
.home-shell .top-actions { padding: 2px; border-radius: 999px; background: #182b30d9; }
.home-shell .top-actions .btn.text { color: var(--ink); }
.studio { display: flex; align-items: center; width: clamp(94px, 25vw, 120px); flex-shrink: 0; filter: drop-shadow(0 3px 9px #0a171e60); }
.studio img { display: block; width: 100%; height: auto; object-fit: contain; }
.watercolor { display: block; max-width: 100%; object-fit: cover; }
.home-backdrop { position: absolute; z-index: -1; inset: 0 auto auto 50%; transform: translateX(-50%); width: 100vw; height: clamp(360px, 53vh, 490px); overflow: hidden; pointer-events: none; }
.home-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #182b301f, #182b3000 22%, #182b3040 48%, #182b30ed 83%, var(--bg)); }
.home-illustration { position: relative; height: clamp(240px, 32vh, 310px); margin: 0 auto; }
.home-watercolor { width: 100%; max-width: none; height: 100%; object-position: 50% 45%; }
.game-title { position: absolute; bottom: 0; width: 100%; margin: 0; padding: 0 10px; font: 400 clamp(5.3rem, 11vw, 7.2rem)/1.22 var(--hand); color: #f5e8c9; letter-spacing: 0; text-shadow: 0 3px 18px #14272c, 0 0 35px #14272c99; }
.home .tagline { font-size: 1rem; color: #d8ddce; margin: 8px 0 16px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: .875rem; color: var(--muted); margin: 15px 0 22px; }
.facts span { display: flex; align-items: center; gap: 8px; }
.facts .icon { width: 18px; height: 18px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.mode-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0 0 16px; color: var(--ink); background: #243b3de8; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transition: border-color .2s, background .2s, transform .2s; }
.mode-card[aria-pressed=true] { border-color: #d9b477; background: #354b44; }
.mode-card:hover { transform: translateY(-2px); }
.mode-portrait { width: 100%; height: auto; aspect-ratio: 2; object-position: 50% 0%; }
.mode-card h3 { font-family: var(--hand); font-weight: 400; font-size: 1.75rem; margin: 12px 18px 7px; line-height: 1.2; }
.radio-mark { position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; background: #193138; border: 1px solid #f3e5bd; border-radius: 50%; box-shadow: 0 1px 5px #10212755; }
.mode-card[aria-pressed=true] .radio-mark { border: 5px solid #ddb97e; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 22px; border: 1px solid transparent; border-radius: 12px; background: #bd9b61; color: #172b30; font-weight: 600; text-decoration: none; line-height: 1.4; transition: background .15s; }
.btn:hover { background: #d2b27c; }
.btn.secondary { color: var(--ink); background: #294246; border-color: #aebe9c38; }
.btn.danger { background: #914f41; color: white; }
.btn.text { background: transparent; color: var(--muted); padding: 10px; min-height: 44px; font-weight: 500; }
.btn.text:hover { color: var(--ink); }
.btn.full { width: 100%; }
.primary-action { margin-top: 22px; }
.home .primary-action { max-width: 420px; width: 100%; margin-top: 20px; margin-bottom: 8px; }
.inline-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.footnote { margin: 24px 0 0; font-size: .875rem; color: var(--muted); text-align: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { background: #233c3ed9; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 20px 0; box-shadow: var(--shadow); }
.panel.paper { color: var(--paper-ink); background: var(--paper); }
.panel.paper .muted { color: #687065; }
.panel.paper .eyebrow { color: #775829; }
.panel.paper .btn.secondary { color: var(--paper-ink); border-color: #786e5150; background: #cdbf9f; }
.panel.paper .icon { color: #775829; }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.section-label h3 { margin-bottom: 0; }
label.field { display: flex; flex-direction: column; gap: 8px; font-size: .95rem; margin: 14px 0; }
input[type=text], input[type=number], select { color: var(--ink); background: #172f34; border: 1px solid #acbda35e; padding: 12px 14px; border-radius: 10px; width: 100%; min-height: 49px; min-width: 0; }
input[type=number] { font-size: 1.2rem; }
input[type=checkbox] { width: 21px; height: 21px; accent-color: #d0ab71; flex-shrink: 0; }
.check-row { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-row:last-child { border-bottom: 0; }
.check-row input { margin: 0; }
.check-row strong { font-weight: 400; }
.role-name { font-family: var(--hand); font-size: 1.5rem; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.check-row .small { color: var(--muted); display: block; margin-top: 3px; }
.check-row.disabled { opacity: .45; cursor: not-allowed; }
.choice-portrait { width: 112px; height: auto; aspect-ratio: 2; object-fit: contain; flex-shrink: 0; border-radius: 10px; }
.role-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; }
.role-heading h3 { margin: 0; }
.role-options { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
.summary-bar { padding: 16px; border: 1px solid #c7a26942; background: #b99c5a14; border-radius: 12px; margin-top: 20px; }
.error { color: #f0bba7; background: #6b3e354d; border: 1px solid #c5826e70; padding: 14px; border-radius: 12px; }
.error p { margin: 0; }
.tag { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--muted); }
.tag.gold { color: var(--gold); border-color: #d4ae6955; background: #bda66e14; }
.tag.red { color: var(--red); border-color: #d59b8555; background: #cd93751c; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.actions>* { flex: 1; }
.neutral { max-width: 530px; text-align: center; margin: 20px auto; }
.neutral>.icon { display: none; }
.neutral h1 { font-size: 2.8rem; }
.neutral p { color: var(--muted); }
.identity-picker { padding: 0; margin: 20px 0; border: 0; min-width: 0; text-align: left; }
.identity-picker legend { font-size: .95rem; margin-bottom: 9px; }
.identity-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.identity-option { position: relative; display: block; overflow: hidden; border: 2px solid var(--line); border-radius: 14px; background: #203b3f; cursor: pointer; }
.identity-option input { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; margin: 0; accent-color: #c8a365; }
.identity-portrait { width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
.identity-option span { display: block; text-align: center; font-weight: 650; padding: 8px; }
.identity-option:has(input:checked) { border-color: var(--gold); background: #405149; }
.identity-option:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.identity-picker .small { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; }
.catalog-switch { display: flex; gap: 10px; margin: 0 0 20px; }
.catalog-switch .btn { flex: 1; }
.catalog-switch .btn[aria-pressed=true] { border-color: var(--gold); background: #405149; }
.character-scene { margin-bottom: 20px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.character-hero { width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
/* The scenery reaches the top and both edges of the screen. */
.scene-shell { position: relative; isolation: isolate; }
.scene-shell .topbar { position: relative; margin-bottom: 0; }
.scene-shell .brand { text-shadow: 0 2px 12px #10242bcc; }
.scene-shell .top-actions { padding: 2px; border-radius: 999px; background: #182b30cf; }
.scene-shell .top-actions .btn.text { color: var(--ink); }
.scene-backdrop { position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 330px; overflow: hidden; pointer-events: none; }
.scene-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#10242b65, #182b3000 28%, #182b3020 48%, #182b30ed 88%, var(--bg)); }
.scene-watercolor { width: 100%; height: 100%; object-position: 50% 44%; }
.scene-character { max-width: 1060px; height: clamp(290px, 50vw, 530px); }
.scene-character .scene-watercolor { object-position: 50% 0%; }
.scene-shell:has(.scene-character) .scene-space { height: clamp(108px, calc(50vw - 130px), 345px); }
.scene-space { height: 146px; }
.setup-content .scene-space { height: 168px; }

.role-card, .catalog-role { --card-bg: #f3e8bd; --card-ink: #37443a; --card-accent: #476048; }
.role-card.traitor, .catalog-role.traitor { --card-bg: #f1d6d0; --card-ink: #583d39; --card-accent: #853f3d; }
.role-card { max-width: 470px; margin: 8px auto 12px; background: var(--card-bg); color: var(--card-ink); border-radius: 20px; padding: 0; overflow: hidden; box-shadow: 0 12px 40px #070f1438; border: 1px solid #ffefca30; text-align: left; }
.role-artwork { width: 100%; aspect-ratio: 2; overflow: hidden; }
.role-portrait { width: 100%; height: 100%; object-fit: contain; }
.role-copy { padding: 15px 20px 19px; }
.camp-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 750; color: var(--card-accent); margin-bottom: 5px; }
.role-card h2 { font: 400 clamp(2.1rem, 9vw, 2.7rem)/1.18 var(--hand); color: var(--card-accent); margin: 0 0 10px; }
.role-description { margin: 0 0 10px; font-size: 1rem; line-height: 1.5; }
.recruit-reminder { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #99574635; border-radius: 10px; font-size: .875rem; line-height: 1.45; background: #ffffff35; }
.role-timing { margin: 0; font-size: .75rem; line-height: 1.45; opacity: .85; }
.card-status { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 12px; align-items: center; margin-top: 12px; padding: 11px 0 0; border-top: 1px solid #735c3c2b; }
.card-status>div { display: contents; }
.card-status h3 { font: 650 .98rem/1.3 ui-sans-serif, system-ui, sans-serif; margin: 0; color: var(--card-accent); }
.card-status p { grid-column: 1 / -1; font-size: .875rem; line-height: 1.45; margin: 0; }
.status-portrait { width: 90px; height: auto; aspect-ratio: 2; border-radius: 8px; object-fit: contain; }
.handoff-action { max-width: 470px; margin: auto; position: sticky; bottom: 0; padding: 9px 0 max(10px, env(safe-area-inset-bottom)); background: linear-gradient(#182b3000, var(--bg) 10%); z-index: 2; }
.handoff-action .footnote { margin-top: 8px; font-size: .75rem; }
.card-content>.eyebrow { margin-bottom: 6px; }
.card-content>h3 { margin-bottom: 12px; font-size: 1.05rem; }
.card-content .btn { padding-inline: 12px; font-size: .95rem; }

.progress { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 22px; }
.progress strong { font-weight: 650; }
.progress .small { color: var(--muted); }
.quote { font-family: Georgia, 'Times New Roman', serif; font-size: 1.15rem; line-height: 1.85; padding: 0 0 0 22px; border-left: 2px solid #c6a66e; margin: 22px 0; white-space: pre-line; }
.spoken { margin: 14px 0; padding: 14px 18px; border-left: 3px solid #d8b574; border-radius: 0 14px 14px 0; background: #a58c4a15; }
.cue-label, .private-label { display: flex; align-items: center; gap: 8px; font: 600 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; margin-bottom: 12px; }
.cue-label { color: #e1c58f; }
.cue-label .icon, .private-label .icon { width: 18px; height: 18px; }
.spoken blockquote { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.6; }
.narrator-note { margin: 14px 0; padding: 16px; border: 1px dashed #81959085; border-radius: 14px; background: #10262cba; color: #ccd7d0; }
.private-label { color: #b7c5d0; }
.narrator-note p:last-child { margin-bottom: 0; }
.narrator-note h3 { color: var(--ink); }
.ritual { padding: 16px 0 10px; border-top: 1px solid var(--line); }
.ritual h2 { margin-bottom: 12px; }
.special-choice { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.watch-answer { text-align: center; padding: 14px 0 20px; color: var(--gold); }
.watch-answer .gesture { display: block; font-size: 4rem; line-height: 1.3; }
.watch-answer h2 { margin: 10px 0; }
.orator-prompt { margin: 24px 0; }
.orator-prompt .role-heading { align-items: center; }
.orator-form { width: 100%; clear: both; }
.target strong { min-width: 0; word-break: normal; overflow-wrap: break-word; }
.oral-vote-help { font-size: .875rem; color: var(--muted); margin: 12px 0; }
.setting-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: center; margin: 14px 0; font-size: .95rem; }
.setting-row>span { line-height: 1.45; }
.setting-row select, .setting-row input { padding-inline: 11px; font-size: 1rem; }
.setting-row:first-child { margin-top: 0; }
.setup-recap { margin: 15px 0 0; font-size: .875rem; color: var(--gold); }
.setup-content .section-label { margin-bottom: 10px; }
.setup-content .section-label h2 { font-size: 1.7rem; margin: 0; }
.setup-content .panel>.small:last-child { margin: 12px 0 0; line-height: 1.5; }
.setup-options .check-row { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #182f34; }
.setup-options .check-row:has(input:checked) { border-color: #d8b574; background: #354b44; }
.setup-options .check-row input { position: absolute; top: 10px; left: 10px; z-index: 1; box-shadow: 0 1px 6px #14252b80; }
.setup-options .check-row>span { padding: 9px 12px 12px; }
.setup-options .choice-portrait { width: 100%; height: auto; aspect-ratio: 2; border-radius: 0; object-fit: contain; }
.setup-options .role-options { gap: 14px; }
.setup-options .check-row .role-name { font-size: clamp(1.45rem,3.5vw,1.8rem); }
.setup-options .check-row .small { line-height: 1.4; }
.role-reminders { margin: 12px 0 20px; border-block: 1px solid var(--line); }
.reminder h3 { font: 400 1.4rem/1.3 var(--hand); margin: 16px 0 0; color: var(--gold); }
.reminder .spoken { margin-top: 6px; }
.power-call { margin-block: 20px; padding-bottom: 1px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #233c3e99; }
.power-art { width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
.power-call>h2 { font-size: 1.85rem; margin: 15px 16px 10px; }
.power-call>.spoken, .power-call>.narrator-note { margin: 12px; }
.shepherd-card { max-width: 580px; margin: 16px auto; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #243e40; box-shadow: var(--shadow); }
.shepherd-hero { width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
.shepherd-content { padding: 20px 22px 23px; }
.shepherd-content h1 { font-size: clamp(2rem, 7.5vw, 2.8rem); margin-bottom: 15px; }
.shepherd-content .spoken { margin-inline: -2px; }
.shepherd-content .small { margin-block: 12px; line-height: 1.5; }
.target-select { margin: 10px 0!important; }

.call-label { display: flex; align-items: center; gap: 8px; color: var(--gold); margin-bottom: 8px; font-size: .875rem; }
.secret-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; color: #c8d7cb; background: #35525180; font-size: .875rem; margin-bottom: 22px; border: 1px solid #a4bba333; }
.secret-banner .icon { height: 18px; width: 18px; }
.secret-banner .btn { min-height: 38px; padding: 6px 8px; font-size: .875rem; }
.target-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.target { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1c353acc; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-height: 46px; overflow-wrap: anywhere; }
.target input { accent-color: #d0ab71; width: 18px; height: 18px; flex-shrink: 0; }
.target:has(input:checked) { border-color: #bda773; background: #42554b; }
.target strong { font-weight: 600; }
.announcements { display: flex; flex-direction: column; gap: 12px; }
.announcement { padding: 18px 20px; background: #263f41b3; border-left: 2px solid #b9a569; border-radius: 0 12px 12px 0; line-height: 1.65; }
.name-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.name-chips span { padding: 8px 13px; background: #304946; border: 1px solid var(--line); border-radius: 9px; font-weight: 550; }
.vote-row { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 15px; margin: 12px 0; }
.vote-name { overflow-wrap: anywhere; }
.vote-name small { display: block; color: var(--gold); }
.tally { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tally:last-child { border: 0; }
.roster-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.roster-row small { display: block; color: var(--muted); }
.roster-row.out { opacity: .6; }
.roster-row strong { font-weight: 600; }
.secret-roster { margin-top: 24px; }
summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
details p { font-size: .95rem; }
.result-icon { display: none; }
.result-title { font-size: clamp(3.1rem, 6vw, 4.2rem); }
dialog { background: var(--bg); color: var(--ink); border: 1px solid #718579; border-radius: 22px; max-width: min(820px,calc(100% - 28px)); width: 780px; padding: 0; max-height: 90dvh; box-shadow: 0 20px 100px #1d352755; }
dialog::backdrop { background: #08161bbb; backdrop-filter: blur(5px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #182b30f5; z-index: 2; }
.modal-head h2 { font-size: 2.35rem; margin: 0; }
.modal-body { padding: 24px; }
.modal-body h3 { font-family: var(--hand); font-weight: 400; font-size: 1.7rem; color: #d7bd8b; margin-top: 28px; }
.modal-body h3:first-child { margin-top: 0; }
.role-gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: start; }
.catalog-role { display: block; padding: 0; border: 1px solid #f2e4c133; border-radius: 18px; overflow: hidden; background: var(--card-bg); color: var(--card-ink); }
.catalog-portrait { width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
.catalog-copy { padding: 16px 18px 18px; min-width: 0; }
.catalog-role h3 { font-size: 1.85rem; margin: 0 0 10px; color: var(--card-accent); }
.catalog-role p { margin-bottom: 8px; line-height: 1.5; }
.catalog-role .tag { margin-bottom: 12px; font-size: .7rem; color: var(--card-accent); border-color: #70583f40; background: #fff5; }
.catalog-role .muted { color: var(--card-ink); opacity: .85; }
.rules-illustration { width: 100%; height: 190px; object-position: 50% 45%; margin: -10px 0 20px; border-radius: 14px; mask-image: linear-gradient(#000 70%,transparent); }
.inline-role-art { width: 100%; height: auto; aspect-ratio: 2; margin: 0 0 16px; border-radius: 14px; object-fit: contain; }
.orator-prompt .role-heading { display: block; }
.modal-body ul, .modal-body ol { padding-left: 23px; line-height: 1.75; }
.modal-body li { margin: 8px 0; }
#notice { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #bd9b61; color: #172b30; border-radius: 12px; box-shadow: 0 10px 40px #203a3030; max-width: 90%; padding: 14px 20px; z-index: 10; display: none; }
.privacy-link { border: 0; padding: 4px 0; background: none; color: inherit; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.ad-dock { position: relative; width: calc(100% - 36px); max-width: 824px; margin: 0 auto; padding: 14px 12px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; }
.ad-dock[hidden] { display: none; }
.ad-dock .adsbygoogle { max-width: 728px; margin: auto; }
.ad-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .6875rem; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; }
.ad-dock p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.privacy-ad-preferences[hidden] { display: none; }
.menu-links { display: grid; gap: 12px; padding-bottom: 12px; }
.menu-links a, .menu-links button { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #d5c5a10a; color: var(--ink); text-align: left; text-decoration: none; font: inherit; }
.menu-links a:hover, .menu-links button:hover { background: #d5c5a11a; }
.menu-links small { display: block; margin-top: 4px; color: var(--muted); font-size: .8125rem; }
#notice.visible { display: block; }
.storage-warning { margin: 0 0 20px; color: #e5ab91; font-size: .875rem; }
.mobile-only { display: none; }
.meter { height: 4px; border-radius: 4px; background: #b9c5a42b; margin-bottom: 22px; overflow: hidden; }
.meter span { display: block; height: 100%; background: #d0ad72; }
.sr-only { position: absolute; clip: rect(0,0,0,0); height: 1px; width: 1px; overflow: hidden; }
@media (max-width: 600px) {
  .shell { padding: 14px 18px max(24px,env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 10px; }
  .brand { font-size: 2.3rem; }
  .content { max-width: 100%; }
  .home-shell { padding-top: max(12px, env(safe-area-inset-top)); }
  .home-backdrop { height: 350px; }
  .home-illustration { height: clamp(185px,27vh,225px); }
  .game-title { font-size: clamp(4.8rem, 21vw, 6rem); bottom: -2px; }
  .home .tagline { font-size: .95rem; margin: 9px 0 12px; }
  .mode-grid { gap: 11px; }
  .mode-card p br { display: none; }
  .facts { gap: 8px 15px; margin: 13px 0 18px; font-size: .8rem; }
  .facts span { gap: 6px; }
  .facts .icon { width: 16px; height: 16px; }
  .split { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: 20px 17px; }
  .role-options { grid-template-columns: 1fr; }
  .setup-options .check-row { grid-template-columns: 1fr; }
  .setup-options .choice-portrait { align-self: center; }
  .setup-options .check-row .role-name { font-size: 1.8rem; }
  .setup-options .check-row .small { font-size: .875rem; }
  .setup-options .check-row input { top: 6px; left: 6px; }
  .neutral { margin: 10px auto 22px; }
  .neutral h1 { font-size: 2.65rem; }
  .top-actions .btn.text { font-size: .875rem; padding: 8px; }
  .target-grid { gap: 8px; }
  .target { padding: 8px 10px; }
  .narrator-note { padding: 13px; }
  .narrator-note p { line-height: 1.55; }
  .cue-label, .private-label { margin-bottom: 8px; }
  .progress { margin-bottom: 14px; padding-bottom: 10px; }
  .secret-banner { margin-bottom: 14px; }
  .actions { margin-top: 16px; }
  .vote-row { grid-template-columns: .9fr 1.1fr; gap: 10px; }
  .vote-row select { padding-left: 8px; padding-right: 4px; }
  .modal-head { padding: 15px 18px; }
  .modal-head h2 { font-size: 2.1rem; }
  .modal-body { padding: 18px; }
  .quote { font-size: 1.05rem; padding-left: 16px; }
  .actions.stack-mobile { flex-direction: column; }
  .progress { align-items: flex-start; }
  .secret-banner { padding: 8px 12px; }
  .mobile-only { display: block; }
  .home .primary-action { margin-top: 17px; }
  .footnote { margin-top: 16px; }
  .rules-illustration { height: 150px; }
}
@media (max-height: 760px) and (max-width: 600px) {
  .home-backdrop { height: 310px; }
  .home-illustration { height: 160px; }
  .game-title { font-size: clamp(4.8rem, 20vw, 5.35rem); }
  .home-shell .topbar { min-height: 38px; }
  .studio { width: 98px; }
}
@media (max-width: 600px) {
  .scene-backdrop { height: 290px; }
  .scene-space { height: 108px; }
  .setup-content .scene-space { height: 140px; }
  .mode-card { padding-bottom: 13px; }
  .mode-card h3 { font-size: clamp(1.25rem, 5.3vw, 1.6rem); margin: 10px 12px 6px; }
  .mode-card p { font-size: .8rem; margin-inline: 12px; line-height: 1.4; }
  .role-copy { padding: 13px 17px 16px; }
  .setting-row { gap: 12px; font-size: .875rem; }
  .setting-row select { font-size: .875rem; }
  .shepherd-content { padding: 17px; }
  .catalog-role { padding: 0; }
  .role-gallery { grid-template-columns: minmax(0,1fr); }
  .card-content>.eyebrow { font-size: .68rem; }
  .card-content .btn { font-size: .875rem; }
}
@media (max-width: 360px) {
  .studio { width: 90px; }
  .topbar { gap: 8px; }
  .top-actions { gap: 4px; }
  .top-actions .icon-button { min-width: 44px; min-height: 44px; padding: 9px; }
  .role-copy { padding-inline: 14px; }
  .card-status { grid-template-columns: 80px minmax(0,1fr); gap: 8px; }
  .status-portrait { width: 80px; }
  .card-status h3 { font-size: .9rem; }
  .setup-options .check-row { grid-template-columns: 1fr; }
  .setup-options .check-row .role-name { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none!important; animation: none!important; } }