/* AfterBedtime retro interface: NARROW windows (a portrait phone, a small or portrait browser window). index.html loads this sheet with
   media="(max-width: 852px) and (min-height: 501px)", after the others: below 853 px the pixel (--u) is already at its smallest (2 px), so the
   screen is under 427 u wide and the landscape layouts (logo left of the menu window, two columns in Settings and on the end screen) do not
   fit. Landscape phones (height <= 500 px) have their own rules in retro-screens.css. Same tokens, same components; only the arrangement changes:
   one centred column, the logo above the menu window, label above control in Settings, the report under the banner. */

/* ---- title screen: the small logo, the tagline wraps */
html.ps-title body.ps-ui .title-logo { top: var(--s24); width: calc(187 * var(--u)); height: calc(51 * var(--u)); margin-left: calc(-93 * var(--u)); background-image: url(/img/logo-title-s.png); }
body.ps-ui .title-tag { top: calc(88 * var(--u)); left: 0; right: 0; width: min(calc(330 * var(--u)), calc(100% - 2 * var(--s8))); margin: 0 auto; }
body.ps-ui .title-press { bottom: calc(60 * var(--u)); }
body.ps-ui .title-hint { bottom: calc(46 * var(--u)); }

/* ---- lobby: the logo above the window, both centred; the help window at the bottom; no key legend */
body.ps-ui #lobby .lobby-help { left: var(--s8); right: var(--s8); top: auto; bottom: var(--s8); width: auto; }
body.ps-ui #lobby .lobby-card { left: 0; right: 0; margin: 0 auto; top: calc(92 * var(--u)); width: min(calc(176 * var(--u)), calc(100% - 2 * var(--s8))); }
body.ps-ui #lobby .lobby-head-text { left: 0; right: auto; top: auto; bottom: calc(100% + var(--s6)); width: 100%; text-align: center; }
body.ps-ui #lobby .title { width: calc(146 * var(--u)); height: calc(44 * var(--u)); margin: 0 auto; background-image: url(/img/logo-lobby-s.png); }
body.ps-ui #lobby .tagline { margin: var(--s4) auto 0; text-align: center; max-width: 100%; }
body.ps-ui #lobby .lobby-card > .legend { display: none; }
body.ps-ui #lobby .lobby-status { margin-top: var(--s2); }
/* joined: In the house */
body.ps-ui #lobby.joined .lobby-card { width: min(calc(226 * var(--u)), calc(100% - 2 * var(--s6))); top: calc(64 * var(--u)); }
body.ps-ui #lobby.joined .lobby-head-text { left: 0; right: auto; top: auto; bottom: calc(100% + var(--s6)); width: 100%; }
body.ps-ui #lobby.joined .title { width: calc(124 * var(--u)); height: calc(39 * var(--u)); background-image: url(/img/logo-joined-s.png); }
body.ps-ui #lobby.joined .seg { flex-wrap: wrap; }

/* ---- Options + How to win: the two windows one above the other */
body.ps-ui #lobby.rules-page #lobby-options { left: 0; right: 0; margin: 0 auto; top: var(--s8); width: min(calc(176 * var(--u)), calc(100% - 2 * var(--s6))); padding: var(--s6) var(--s8) var(--s4); }
body.ps-ui #lobby.rules-page #lobby-how { left: 0; right: 0; margin: 0 auto; top: calc(148 * var(--u)); bottom: var(--s8); width: min(calc(190 * var(--u)), calc(100% - 2 * var(--s6))); height: auto; overflow-y: auto; scrollbar-width: none; padding-top: var(--s6); padding-bottom: 0; }
body.ps-ui #lobby.rules-page #lobby-how::-webkit-scrollbar { display: none; }
body.ps-ui #lobby.rules-page #lobby-how::after { content: "▼"; position: absolute; right: var(--s5); bottom: var(--s3); color: var(--ink-red); text-shadow: none; animation: ps-blink 1s steps(1) infinite; }
body.ps-ui #lobby.rules-page .lobby-help { display: none; }

/* ---- Click to play (a blue window) and the pause page (paper), centred */
body.ps-ui .click-to-play .ctp-card { width: min(calc(272 * var(--u)), calc(100% - 2 * var(--s6))); }
body.ps-ui .click-to-play[data-state="paused"] { justify-content: center; padding-left: 0; }
body.ps-ui .click-to-play[data-state="paused"] .ctp-card { width: min(calc(252 * var(--u)), calc(100% - 2 * var(--s6))); }

/* ---- Settings: label above control, one column */
body.ps-ui .settings-modal { padding: var(--s4); }
body.ps-ui .settings-card { width: min(calc(380 * var(--u)), calc(100vw - 2 * var(--s4))); padding: var(--s6) var(--s8) var(--s4); }
body.ps-ui .settings-tabs { height: auto; min-height: var(--s16); flex-wrap: wrap; gap: 0 var(--s6); padding: var(--s1) var(--s8) 0; }
body.ps-ui .settings-body { height: min(calc(15 * var(--row)), calc(100vh - 100 * var(--u))); }
body.ps-ui .settings-card:has(section[data-pane="keys"]:not([hidden])) .settings-body { height: min(calc(15 * var(--row)), calc(100vh - 100 * var(--u))); }
body.ps-ui .settings-body .field { grid-template-columns: minmax(0, 1fr); padding-left: var(--s20); margin-bottom: var(--s2); }
body.ps-ui .settings-body .field.cur::before { top: var(--s1); }
body.ps-ui .settings-body .settings-toggle { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s6); padding-left: var(--s20); }
body.ps-ui .settings-body .settings-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding-left: var(--s20); margin-bottom: var(--s2); }
body.ps-ui .settings-body .settings-row .settings-label { grid-column: 1 / -1; grid-row: 1; }
body.ps-ui .settings-body .settings-row input[type="range"] { grid-column: 1; grid-row: 2; width: min(calc(96 * var(--u)), 100%); }
body.ps-ui .settings-body .settings-row output { grid-column: 2; grid-row: 2; }
body.ps-ui .settings-keys td { width: calc(34 * var(--u)); }
body.ps-ui .settings-keys th { overflow: hidden; text-overflow: ellipsis; }

/* ---- HUD: nothing wider than the screen */
body.ps-ui .hud-top { width: calc(100% - 2 * var(--s6)); left: var(--s6); right: var(--s6); }
body.ps-ui .hud-top .objective { max-width: min(calc(210 * var(--u)), calc(100vw - 2 * var(--s8))); }
/* the action line and the toast line keep clear of the items window (right) and its mirror on the left; the captions go above them, centred */
body.ps-ui .action-line, body.ps-ui .toast { max-width: calc(100vw - 216 * var(--u)); }
body.ps-ui .dial { width: min(calc(196 * var(--u)), calc(100vw - 2 * var(--s6))); }
body.ps-ui .captions, html:not(.touch) body.ps-ui #hud:has(#hud-talk:not([hidden])) .captions { left: 0; right: 0; width: auto; align-items: center; bottom: calc(10 * var(--u) + 36 * var(--hu)); }
body.ps-ui .caption { max-width: calc(100vw - 2 * var(--s8)); text-align: center; }
body.ps-ui .practice { width: min(calc(112 * var(--u)), calc(100vw - 2 * var(--s8))); }

/* ---- End: one column, the banner and the stats above the night report */
body.ps-ui #end .end-card { inset: var(--s8) var(--s6) var(--s6); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; column-gap: 0; }
body.ps-ui #end .end-banner { font-size: var(--em); line-height: var(--s14); text-shadow: var(--tsh); margin: var(--s1) 0 var(--s2); }
body.ps-ui #end .end-reason { margin-bottom: var(--s4); }
body.ps-ui #end .end-stats { padding: var(--s4) var(--s6); margin-bottom: var(--s4); }
body.ps-ui #end .end-card .col-title { grid-column: 1; grid-row: 5; padding: var(--s6) var(--s8) 0 var(--s20); height: var(--s20); }
body.ps-ui #end .timeline { grid-column: 1; grid-row: 5; align-self: stretch; max-height: none; min-height: 0; padding: calc(20 * var(--u)) var(--s8) 0 var(--s20); }
body.ps-ui #end .timeline::after { content: "▼"; position: absolute; right: var(--s5); bottom: var(--s3); color: var(--ink-red); text-shadow: none; animation: ps-blink 1s steps(1) infinite; }
body.ps-ui #end #night-map-btn, body.ps-ui #end #back-btn { grid-column: 1; }

/* Declared loadout choices fit the portrait window at the same 12u type size. */
body.ps-ui #lobby.joined:not(.rules-page) .lobby-card { top:var(--s8); max-height:calc(100dvh - 16 * var(--u)); padding:var(--s6) var(--s8); }
body.ps-ui #lobby.joined:not(.rules-page) .lobby-head-text, body.ps-ui #lobby.joined:not(.rules-page) .lobby-help { display:none; }
body.ps-ui #lobby .choice-long { display:none; }
body.ps-ui #lobby .choice-short { display:inline; }
body.ps-ui #lobby .choice-row .seg { flex-wrap:nowrap; gap:var(--s4); }
body.ps-ui #lobby .player-chips { flex-basis:100%; }
body.ps-ui #lobby .player-list li { margin-bottom:var(--s2); }
body.ps-ui #lobby .player-chips .chip { padding:0; background:none; box-shadow:none; }