/* The council on a phone held upright. The discussion is the heart of the council, so it always
   gets real room: the eight stalls stand in one row that scrolls sideways, the controls are one
   compact line each, and the chat keeps at least 140 px, with the message box in view. If a
   phone is too short for all of that, the council scrolls rather than hiding the chat.
   Loaded after the candlelit look, so these win on small screens. */
@media (max-width:600px) {
  html:root .meeting-dialog { overflow-y:auto; overscroll-behavior:contain; gap:6px; padding:10px 12px; }
  html:root .meeting-dialog .council-heading { flex-wrap:nowrap; }
  html:root .meeting-dialog .council-heading h2 { font-size:21px; line-height:1.15; }
  html:root .meeting-dialog .council-heading svg { width:20px; height:20px; }
  html:root .meeting-dialog .meeting-clock { font-size:14px; white-space:nowrap; }
  html:root .meeting-dialog .council-discovery { font-size:13px!important; padding-bottom:6px; }
  html:root .meeting-dialog .council-body, html:root .meeting-dialog .council-details, html:root .meeting-dialog .chat-pane { min-height:auto; }

  /* One row of stalls; a fade at the edge shows there are more. */
  html:root .meeting-dialog .vote-grid { display:flex; flex-flow:row nowrap; flex:none; gap:6px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding:3px 24px 3px 3px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  html:root .meeting-dialog .vote-grid::-webkit-scrollbar { display:none; }
  html:root .meeting-dialog .vote-card { flex:0 0 66px; width:66px; min-height:0; scroll-snap-align:start; padding:5px 2px 3px; gap:1px; font-size:12.5px; }
  html:root .meeting-dialog .vote-card.selected { padding:4px 1px 2px; }
  html:root .meeting-dialog .vote-card .monk-badge { width:32px; height:42px; }
  html:root .meeting-dialog .vote-card small { font-size:10.5px!important; margin-top:0; }
  html:root .meeting-dialog .vote-card .wax-seal { top:26px; right:4px; width:15px; height:15px; }

  html:root .meeting-dialog .council-actions { flex-wrap:nowrap; margin-top:6px; gap:6px; }
  html:root .meeting-dialog .council-actions button { min-height:44px; padding:6px 8px; font-size:15px; }
  html:root .meeting-dialog .council-tabs { margin-bottom:6px; }
  html:root .meeting-dialog .council-tabs button { min-height:40px; padding:6px 0; }

  /* The discussion: never squeezed below a readable few lines. */
  /* A zero basis keeps a long discussion from sizing the council; it grows into the space left. */
  html:root .meeting-dialog .chat-pane .chat-log { flex:1 1 0; height:0; min-height:140px; }
  html:root .meeting-dialog .council-pane:not(.chat-pane) { flex:1 1 0; height:0; min-height:200px; }
  html:root .meeting-dialog .chat-pane .quick-chat { margin-bottom:6px; }
  html:root .meeting-dialog .chat-pane .chat-form input, html:root .meeting-dialog .chat-pane .chat-form button { min-height:44px; }

  /* The ballot: one line of status, then Abstain beside Seal. */
  html:root .meeting-dialog .council-ballot { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:5px 8px; padding-top:7px; }
  html:root .meeting-dialog .council-ballot #vote-status { grid-column:1/-1; font-size:14px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html:root .meeting-dialog .council-ballot button { min-height:46px; }
  html:root .meeting-dialog .council-spectator { gap:6px; padding-top:7px; }
}
/* Short phones: the "tap a brother" hint gives way to the chat (the quick lines stay). */
@media (max-width:600px) and (max-height:740px) {
  html:root .meeting-dialog .chat-pane > .quick-chat-hint { display:none!important; }
  html:root .meeting-dialog .council-discovery .monk-badge { width:16px; height:21px; }
}
/* The shortest phones (an iPhone SE with Safari's bars): smaller stalls without their status line
   (a fallen brother is dimmed, a partner keeps his tag), and the seal button says the rest. */
@media (max-width:600px) and (max-height:600px) {
  html:root .meeting-dialog { gap:4px; padding:8px 10px; }
  html:root .meeting-dialog .council-heading h2 { font-size:19px; }
  html:root .meeting-dialog .council-discovery { font-size:12.5px!important; padding-bottom:4px; }
  html:root .meeting-dialog .vote-card small:not(.partner-tag) { display:none; }
  html:root .meeting-dialog .vote-card { padding:4px 2px 3px; }
  html:root .meeting-dialog .council-actions { margin-top:4px; }
  html:root .meeting-dialog .council-tabs { margin-bottom:4px; }
  html:root .meeting-dialog .council-tabs button { min-height:36px; }
  html:root .meeting-dialog .chat-pane .chat-log { min-height:104px; }
  html:root .meeting-dialog .council-ballot #vote-status { display:none; }
}
/* A phone on its side: a slimmer heading and tabs leave the chat a few more lines. */
@media (max-height:500px) and (min-width:600px) {
  html:root .meeting-dialog .council-heading h2 { font-size:20px; }
  html:root .meeting-dialog .council-heading svg { width:20px; height:20px; }
  html:root .meeting-dialog .council-discovery { font-size:13px!important; padding-bottom:4px; }
  html:root .meeting-dialog .council-tabs { margin-bottom:4px; }
  html:root .meeting-dialog .council-tabs button { min-height:40px; padding:5px 0; }
  /* Each control on one line: a label that wraps would steal the height the stalls need for their names. */
  html:root .meeting-dialog .council-actions button { min-height:40px; padding:6px 10px; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html:root .meeting-dialog .chat-pane .quick-chat { margin-bottom:4px; }
  html:root .meeting-dialog .chat-pane .quick-line { min-height:36px; }
  html:root .meeting-dialog .chat-pane .chat-form input, html:root .meeting-dialog .chat-pane .chat-form button { min-height:40px; }
  html:root .meeting-dialog .council-ballot button { min-height:44px; }
}

/* Same-room play (online): nothing on a phone's face tells a heretic apart at a glance. The
   masthead names the role only while held; every role card has the faithful frame, with the
   role in its title's ink; the action button keeps one colour for everyone. */
.calling.discreet { pointer-events:auto; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; }
html:root .role-title.ink-heretic { color:#e0775a; }
html:root .role-title.ink-confessor { color:#c5a8e8; }
html:root.touch-layout #app[data-discreet][data-role="heretic"] #interact-button:enabled { background:#596343; border-color:#e4ca8c; color:#fff0c8; }
html[data-look="candlelit"]:root.touch-layout #app[data-discreet][data-role="heretic"] #interact-button:enabled { background:linear-gradient(#e8c98c, #cfa966); color:#1a1e16; }
html[data-look="candlelit"]:root.touch-layout #app[data-discreet][data-role="heretic"] #interact-button:enabled svg { color:#1a1e16; }

/* Readable at arm's length: nothing in the recap or the Brotherhood list is smaller than 13px. */
html:root :is(.recap-person strong,.recap-person span>small,.recap-person em,.recap-timeline time,.recap-timeline p,.recap-council strong,.recap-votes,.recap-honours span,.brother-name small) { font-size:13px; }
html:root .recap-honours strong { font-size:13px; letter-spacing:1px; }

/* The first verdict on a phone asks how condemnations look; it takes the scene's place. */
.verdict-ask { flex:0 1 260px; display:grid; gap:8px; padding:12px; border:1px solid var(--line,#6d6a52); border-radius:10px; text-align:center; }
.verdict-ask p { margin:0; font-size:15px; line-height:1.4; }
.verdict-ask .dialog-actions { display:grid; gap:8px; margin:0; }
.verdict-ask button { min-height:44px; }
.verdict-ask small { font-size:13px; color:var(--muted,#b7bca6); }
@media (max-width:600px) { .verdict-summary:has(.verdict-ask) { flex-direction:column; gap:10px; } .verdict-ask { flex-basis:auto; width:100%; box-sizing:border-box; } }

/* Thumb-sized controls outside the duties: at least 44px to tap (the phone review's U13). */
.chat-message { padding-right:40px; }
.chat-more { min-width:44px; min-height:44px; top:-11px; right:-6px; }
.help-dot { width:44px; }
.quick-only { min-height:44px; }
.quick-only input { width:24px; height:24px; }
#cancel-route { min-height:44px; min-width:64px; }
.recap-section summary { padding-block:10px; }
@media (min-height:700px) { .quick-chat button, html:root .chat-pane .quick-line { min-height:44px; } }
/* Quick lines in the lobby, and mute/report under a council line: 44px to tap, 13px to read. */
html:root .lobby-quick .quick-line { min-height:44px; }
html:root .chat-actions button { min-height:44px; font-size:13px; }
html:root :is(.chat-reported, .chat-muted, .chat-link) { font-size:13px; }

/* A guest waiting on the host sees a note, not a gold button that looks tappable. */
html:root #play-again.waiting-note { background:none; border:1px dashed var(--line,#6d6a52); color:var(--muted,#b7bca6); box-shadow:none; cursor:default; }
html:root .lesson-note, html:root .lesson-list span { font-size:13px!important; }

/* === Visual comb, round two === */
/* The hint bar is solid, so no name tag or floor label shows through its words. */
html[data-look="candlelit"].touch-layout .world-hint { background:#121a16fa; }
/* The alarm's sentence breaks into even lines, never one word alone on the second. */
html:root #alarm-copy, html:root #route-copy { text-wrap:balance; }
/* Held upright, the place pill sits in the middle of the gap between the joystick and the Go button. */
@media (orientation:portrait) {
  html[data-look="candlelit"].touch-layout .map-heading { left:calc(50% + 16px); }
}
/* A dialog's scrollbar keeps inside its rounded corners: a slim rounded thumb and no track. */
html:root .dialog { scrollbar-width:auto; scrollbar-color:auto; }
html:root .dialog::-webkit-scrollbar { width:10px; height:10px; }
html:root .dialog::-webkit-scrollbar-track { background:transparent; margin-block:16px; }
html:root .dialog::-webkit-scrollbar-thumb { background:#829173; background-clip:padding-box; border:3px solid transparent; border-radius:6px; }
@supports not selector(::-webkit-scrollbar) { html:root .dialog { scrollbar-width:thin; scrollbar-color:#829173 transparent; } }
/* The last duty in the list ends the list: no rule under it. */
html[data-look="candlelit"] .dialog .duty-item:last-child { border-bottom:0; }
/* On a sideways phone the duties stand two abreast and the panel wastes less of the short screen. */
@media (max-height:520px) and (orientation:landscape) {
  html:root .overlay .dialog:has(#close-duties) { display:grid; grid-template-columns:1fr 1fr; column-gap:18px; align-content:start; padding:18px 24px; }
  html:root .overlay .dialog:has(#close-duties) > :is(h2,p,#mobile-sabotage) { grid-column:1 / -1; }
  html:root .overlay .dialog:has(#close-duties) > h2 { font-size:24px; margin:0 0 8px; }
  html:root .overlay .dialog:has(#resume-game) { padding:18px 24px; }
  html:root .overlay .dialog:has(#resume-game) > h2 { font-size:24px; margin:0 0 4px; }
}
/* The council's two buttons are one width, and Abstain is as tall as Seal vote. */
@media (max-height:500px) and (min-width:600px) {
  html:root .meeting-dialog .council-actions { margin-top:6px; }
  html:root .meeting-dialog .council-actions button { flex:1 1 0; }
}
html:root .meeting-dialog .council-ballot button { box-sizing:border-box; height:52px; min-height:0; }
@media (max-width:600px), (max-height:500px) { html:root .meeting-dialog .council-ballot button { height:46px; } }
/* Upright, the council fills the screen (no strip of dimmed controls above and below it), and its row of stalls is cut
   through a brother's picture, never through his name, so it plainly runs on. */
@media (max-width:600px) {
  html.touch-layout:root .meeting-dialog { height:calc(100dvh - 24px); }
  html:root .meeting-dialog .vote-card { flex:0 0 calc(100% / 4.5); width:auto; }
}

/* A long hint breaks into even lines, never one word alone on the second. */
html:root .world-hint, html:root .boss-banner span { text-wrap:balance; }
/* Upright, a place's name keeps to one line, so the pill is one height in every hall. */
@media (orientation:portrait) {
  html[data-look="candlelit"].touch-layout .map-heading { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.05em; padding:7px 9px; }
}
/* Behind a dialog the game's own controls are all but hidden, so the panel's edge never slices a half-seen button. */
html[data-look="candlelit"] .overlay:not(:has(.passage-dialog, .event-card)) { background:#090d0bf2; }
/* Every dialog closes with the same round button in the same corner. */
html:root .dialog > .close { right:10px; top:10px; width:44px; height:44px; border-radius:50%; background:#ffffff0d; display:grid; place-items:center; line-height:1; padding:0 0 3px; }
html:root .story-dialog > .close { right:auto; top:-16px; background:color-mix(in srgb, var(--lk-surface, #222a26) 90%, transparent); }

/* The Seal button is wide enough for the longest name ("Seal Augustine"), so it never ends in dots. */
html:root .meeting-dialog .council-ballot { grid-template-columns:minmax(0,1fr) 100px minmax(160px,max-content); }
@media (max-width:600px) { html:root .meeting-dialog .council-ballot { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); } }
/* The verdict's tally fills its row: as many equal columns as there are groups, up to three. */
@media (min-width:601px) { html:root .reveal-dialog .ballot-groups { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }