/* ---------------------------------------------------------------- screen: LOBBY (title + main menu) */
body.ps-ui #lobby .lobby-help { position: absolute; left: var(--s24); right: var(--s24); top: var(--s12); }
body.ps-ui #lobby .lobby-card { position: absolute; right: var(--s24); top: var(--s40); width: calc(176 * var(--u)); display: flex; flex-direction: column; }
body.ps-ui #lobby .lobby-head { display: contents; }
/* the logo lives left of the window: absolute against the card (the h1 carries the painted logo, its text stays for readers) */
body.ps-ui #lobby .lobby-head-text { position: absolute; right: calc(100% + var(--s24)); top: var(--s2); width: calc(216 * var(--u)); }
body.ps-ui #lobby .title { margin: 0; font-size: 0; line-height: 0; color: transparent; text-shadow: none; width: calc(203 * var(--u)); height: calc(54 * var(--u));
  background: url(/img/logo-lobby.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
body.ps-ui #lobby.joined .title { width: calc(161 * var(--u)); height: calc(46 * var(--u)); background-image: url(/img/logo-joined.png); }
body.ps-ui #lobby .title span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.ps-ui #lobby .title-art { display: block; }
body.ps-ui #lobby .tagline { margin: var(--s6) 0 0 var(--s2); color: var(--tx); max-width: calc(200 * var(--u)); width: max-content; padding: var(--s3) var(--s5); background: var(--plate); box-shadow: var(--bev-1); }   /* (a plate: the house behind is lit, bone text straight on it is 3.5:1) */
body.ps-ui #lobby .tagline b { color: var(--yellow); font-weight: 400; }
body.ps-ui #lobby .moon { display: none; }
body.ps-ui #lobby #settings-btn-lobby { order: 20; }
body.ps-ui #lobby #settings-btn-lobby .ico { display: none; }
body.ps-ui #lobby #settings-btn-lobby::after { content: "Settings"; }
body.ps-ui #lobby .name-field { order: 1; margin: 0 0 var(--s4); display: flex; align-items: center; gap: var(--s5); }
body.ps-ui #lobby .name-field .field-label { margin: 0; flex: none; }
body.ps-ui #lobby .name-field.win { padding: var(--s3) var(--s5); height: var(--s20); }
body.ps-ui #lobby .last-result { order: 2; }
body.ps-ui #lobby .play-list { order: 3; }
body.ps-ui #lobby .solo-block { display: contents; }
body.ps-ui #lobby .house { order: 4; }
body.ps-ui #lobby #lobby-options { order: 10; }
body.ps-ui #lobby #lobby-how { order: 11; }
body.ps-ui #lobby .lobby-status { order: 30; margin: var(--s3) 0 0 var(--s2); color: var(--tx-dim); }
body.ps-ui #lobby .lobby-card > .legend { position: absolute; right: calc(100% + var(--s24)); bottom: 0; width: calc(216 * var(--u)); order: 40; }
body.ps-ui #lobby .lobby-menu-rule { order: 9; }

/* phone (844x390 -> 422x195 u): the logo left, the menu window right, the help window under the logo; no legend */
@media (max-height: 500px) {
  body.ps-ui { --row: calc(14 * var(--u)); }
  body.ps-ui #lobby .lobby-help { left: var(--s20); right: auto; top: auto; bottom: var(--s10); width: calc(184 * var(--u)); }
  body.ps-ui #lobby .lobby-card { right: var(--s20); top: var(--s8); width: calc(190 * var(--u)); }
  body.ps-ui #lobby .lobby-head-text { right: calc(100% + var(--s10)); top: var(--s2); width: calc(176 * var(--u)); }
  body.ps-ui #lobby .tagline { max-width: calc(170 * var(--u)); margin-top: var(--s4); padding: var(--s2) var(--s4); }
  body.ps-ui #lobby .title { width: calc(146 * var(--u)); height: calc(44 * var(--u)); background-image: url(/img/logo-lobby-s.png); }
  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 .lobby-card > .legend { display: none; }
  body.ps-ui #lobby .lobby-status { display: none; }
  body.ps-ui #lobby .name-field.win { height: calc(18 * var(--u)); margin-bottom: var(--s3); }
}

/* the help window is a thin strip (FF7's): 22 u from 12 u, so the menu window below (40 u) keeps a 6 u gap instead of the
   strip's bottom edge running over the window's top one */
body.ps-ui #lobby .lobby-help { padding-top: var(--s4); padding-bottom: var(--s4); }
/* TIGHT (ui-retro.js setU: a desktop window under 470 u wide; 16:9 at an exact multiple of 240 is 426 u: 1280x720 at 3 px, a
   MacBook's 1512 or 1728 wide window at 3.5 / 4 px): the margins and the logo column shrink (16 + 176 + 14 + 206 + 14 = 426 u)
   so nothing leaves the screen; the logo keeps its size, the tagline its two lines, the legend its two rows */
body.ps-ui.ps-tight #lobby .lobby-help { left: var(--s16); right: var(--s16); }
body.ps-ui.ps-tight #lobby .lobby-card { right: var(--s16); }
body.ps-ui.ps-tight #lobby .lobby-head-text { right: calc(100% + var(--s14)); width: calc(206 * var(--u)); }
body.ps-ui.ps-tight #lobby .lobby-card > .legend { right: calc(100% + var(--s14)); width: calc(206 * var(--u)); }
body.ps-ui.ps-tight #lobby.joined .lobby-card { width: calc(230 * var(--u)); }
body.ps-ui.ps-tight #lobby.joined .lobby-head-text { left: calc(-164 * var(--u)); width: calc(150 * var(--u)); }
body.ps-ui.ps-tight #lobby.joined .title { width: calc(124 * var(--u)); height: calc(39 * var(--u)); background-image: url(/img/logo-joined-s.png); }
body.ps-ui.ps-tight #lobby.joined .lobby-card > .legend { left: calc(-164 * var(--u)); width: calc(150 * var(--u)); }

/* ================================================================ HUD (in the game #hud) */
body.ps-ui #hud { position: absolute; inset: 0; pointer-events: none; }
body.ps-ui .hud-top { position: absolute; top: var(--s8); left: 0; right: 0; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: var(--s3) var(--s4); }
body.ps-ui .hud-top .objective { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
body.ps-ui .hud-top .clock-pill { grid-row: 1; justify-self: end; }
body.ps-ui .hud-top .progress { grid-row: 1; justify-self: start; }
body.ps-ui .clock-pill, body.ps-ui .objective, body.ps-ui .progress, body.ps-ui .caption, body.ps-ui .talk, body.ps-ui .hud-chips { background: var(--plate); box-shadow: var(--bev-1); border-radius: 0; border: 0; }
body.ps-ui .clock-pill { display: flex; align-items: center; gap: var(--s4); height: var(--s14); padding: 0 var(--s6) 0 var(--s5); color: var(--tx-hi); }
body.ps-ui .clock-pill .ico { display: none; }
body.ps-ui .clock-pill::before { content: ""; width: var(--s10); height: var(--s10); background: var(--spr-moon) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
body.ps-ui .clock-pill.late { color: var(--red); }
body.ps-ui .role-badge { display: none; }   /* (Classic hides it too: the role is on the pause card) */
/* the goal: ONE short line in the small type (12 hu), under the clock */
body.ps-ui .objective { max-width: calc(210 * var(--u)); padding: var(--hu) calc(5 * var(--hu)); text-align: center; color: var(--tx); font-size: calc(12 * var(--hu)); line-height: calc(14 * var(--hu)); text-shadow: var(--hu) var(--hu) 0 #000;
  white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; background: rgba(4, 15, 20, .6); box-shadow: 0 0 0 var(--hu) rgba(0, 0, 0, .7); }
body.ps-ui .objective:empty { display: none; }
body.ps-ui .progress { display: flex; align-items: center; gap: var(--s4); height: var(--s12); padding: 0 var(--s5); }
body.ps-ui .progress-bar { position: relative; width: calc(80 * var(--u)); height: var(--s5); background: #03090c; border: 0; border-radius: 0; overflow: hidden; box-shadow: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 0 #000; }
body.ps-ui .progress-bar > i { position: absolute; inset: 0; transform-origin: left; transition: none; border-radius: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(7 * var(--u)), rgba(0, 0, 0, .55) calc(7 * var(--u)) calc(8 * var(--u))), linear-gradient(180deg, #fff6c8 0 40%, #e2cf78 40% 70%, #a99442 70%); }
body.ps-ui .progress-text { min-width: var(--s16); color: var(--yellow); text-shadow: var(--tsh); }
body.ps-ui .crosshair { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: var(--s3); height: var(--s3); background: #fff; border-radius: 0; box-shadow: 0 0 0 var(--u) #000; transform: none; }
body.ps-ui .crosshair.target { background: var(--yellow); }
body.ps-ui .hold-ring { --p: .6; position: absolute; left: 0; right: 0; margin: auto; top: calc(50% + var(--s6)); width: calc(44 * var(--u)); height: var(--s3); border-radius: 0; -webkit-mask: none; mask: none; filter: none; animation: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(4 * var(--u)), rgba(0, 0, 0, .6) calc(4 * var(--u)) calc(5 * var(--u))), linear-gradient(90deg, #fff 0 calc(var(--p) * 100%), #03090c calc(var(--p) * 100%)); box-shadow: 0 0 0 var(--u) #000; }
/* THE ACTION LINE (index.html #hud-line, ui.js): ONE small line low in the view, like a subtitle: [state word] [chip] [chip]. The middle of the
   view stays empty: only the crosshair, the hold bar under it and the combination lock you opened yourself are drawn there. Bottom centre, on the
   baseline of the caption column (left) and the items window (right); its max-width leaves both their room (114 u in from each edge + 20 u air).
   One flat plate with a thin ring, type 12 hu, key caps 10 hu, 6 hu between the chips (no separator dot, no blinking arrow). */
body.ps-ui .action-line { position: absolute; left: 0; right: 0; bottom: var(--s10); margin: 0 auto; width: max-content; max-width: calc(100vw - 268 * var(--u)); overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--hu)); padding: var(--hu) calc(5 * var(--hu)); white-space: nowrap; color: var(--tx);
  font-size: calc(12 * var(--hu)); line-height: calc(12 * var(--hu)); text-shadow: var(--hu) var(--hu) 0 #000; background: var(--plate);
  box-shadow: 0 0 0 var(--hu) #000, inset var(--hu) var(--hu) 0 0 rgba(174, 188, 187, .7), inset calc(-1 * var(--hu)) calc(-1 * var(--hu)) 0 0 rgba(63, 85, 89, .95); }
body.ps-ui .action-line .status { flex: none; }
body.ps-ui .action-line .status-title { color: var(--tx-hi); }
body.ps-ui .action-line .status.calm .status-title, body.ps-ui .action-line .part.state { color: var(--green); }
body.ps-ui .action-line .status.bad .status-title { color: var(--red); }
body.ps-ui .action-line .prompt { display: flex; align-items: center; gap: calc(6 * var(--hu)); min-width: 0; }
body.ps-ui .action-line .part { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* (too long for the line: the first chip whole, the second gives way) */
body.ps-ui .action-line .part:first-child { flex: none; max-width: 100%; }
body.ps-ui .action-line .part.note { color: var(--tx-dim); }
body.ps-ui .action-line .cost { color: var(--tx-off); }
body.ps-ui #ui :is(.action-line, .toast) kbd { min-width: calc(10 * var(--hu)); height: calc(10 * var(--hu)); line-height: calc(10 * var(--hu)); margin: 0 calc(2 * var(--hu)) 0 var(--hu); padding: 0 calc(2 * var(--hu)); top: calc(-1 * var(--hu));
  box-shadow: 0 0 0 var(--hu) #000, inset calc(-1 * var(--hu)) calc(-1 * var(--hu)) 0 #8a9c9d, var(--hu) var(--hu) 0 var(--hu) #000; }
body.ps-ui #ui .action-line .part > kbd:first-child { margin-left: var(--hu); }
body.ps-ui #ui .action-line .part.hold > kbd { margin-right: var(--hu); }   /* ("Hold E: quiet": the colon right after the cap's shadow, not under it) */
/* TOASTS (what happened: "Busted!", "Drawer open!"): the same small type, ONE line right above the action line; good = yellow, bad = red */
body.ps-ui .toasts { position: absolute; left: 0; right: 0; bottom: calc(10 * var(--u) + 18 * var(--hu)); display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--hu)); }
body.ps-ui .toast { max-width: calc(100vw - 268 * var(--u)); padding: var(--hu) calc(5 * var(--hu)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: var(--tx-hi);
  font-size: calc(12 * var(--hu)); line-height: calc(12 * var(--hu)); text-shadow: var(--hu) var(--hu) 0 #000; background: rgba(4, 15, 20, .72); box-shadow: 0 0 0 var(--hu) #000; border: 0; border-radius: 0; animation: none; }
/* (a rare fault message, and any toast outside a night — the lobby's "The beds are full tonight, …": it may take two or three small lines) */
body.ps-ui .toast.wrap, body.ps-ui #ui:has(#hud[hidden]) .toast { white-space: normal; line-height: calc(14 * var(--hu)); max-width: min(calc(220 * var(--hu)), calc(100vw - 2 * var(--s8))); }
body.ps-ui .toast.good { color: var(--yellow); }
body.ps-ui .toast.bad { color: var(--red); }
body.ps-ui .captions { position: absolute; left: var(--s10); bottom: var(--s10); width: calc(104 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
body.ps-ui .caption { padding: var(--s2) var(--s5); color: var(--tx-dim); font-style: normal; max-width: 100%; }
body.ps-ui .caption b { color: var(--yellow); font-weight: 400; }
body.ps-ui .caption.muffled { color: var(--tx-off); }
html:not(.touch) body.ps-ui #hud:has(#hud-talk:not([hidden])) .captions { bottom: calc(36 * var(--u)); }   /* (above the Mic pill, which has the same corner: 10 u + 23 u tall) */
body.ps-ui .hud-chips { position: absolute; right: var(--s10); bottom: var(--s10); display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s4) var(--s6); min-width: calc(88 * var(--u)); }
body.ps-ui .chip-hud { position: relative; display: flex; align-items: center; gap: var(--s4); height: var(--s12); padding: 0; margin: 0; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--tx); animation: none; }
body.ps-ui .chip-hud .ico { display: none; }
body.ps-ui .chip-hud::before { content: ""; flex: none; width: var(--s10); height: var(--s10); background: var(--ic) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
body.ps-ui #hud-toys { --ic: var(--spr-toy); } body.ps-ui #hud-flash { --ic: var(--spr-torch); } body.ps-ui #hud-walkie { --ic: var(--spr-walkie); } body.ps-ui #hud-timer { --ic: var(--spr-timer); }
body.ps-ui #hud-pad { --ic: var(--spr-pad); } body.ps-ui #hud-code { --ic: var(--spr-lock); } body.ps-ui #hud-babyfoon { --ic: var(--spr-baby); } body.ps-ui #hud-power { --ic: var(--spr-bolt); } body.ps-ui #hud-fall { --ic: var(--spr-bolt); } body.ps-ui #hud-fall.bad { color: var(--yellow); }
body.ps-ui #hud-courier { --ic: var(--spr-bell); } body.ps-ui #hud-courier.bad { color: var(--red); }
body.ps-ui .chip-hud .chip-key { margin-left: auto; padding-left: var(--s4); }
body.ps-ui .code-digits { display: inline-flex; gap: var(--s2); margin-left: auto; padding-left: var(--s4); }
body.ps-ui .code-digits > b { display: inline-block; min-width: var(--s8); height: var(--s10); padding: 0; line-height: var(--s10); text-align: center; font-weight: 400; background: #02080b; color: var(--yellow); border-radius: 0; box-shadow: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 0 #000; text-shadow: none; }
body.ps-ui .code-digits > b.unknown { color: var(--tx-off); background: #02080b; }
body.ps-ui .talk { position: absolute; left: var(--s10); bottom: var(--s10); display: flex; align-items: center; gap: var(--s5); padding: var(--s4) var(--s6); }
body.ps-ui .talk .ico { display: none; }
body.ps-ui .talk::before { content: ""; width: var(--s10); height: var(--s10); background: var(--spr-mic) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
body.ps-ui .talk-body { display: flex; align-items: center; gap: var(--s5); }
body.ps-ui .talk-label { color: var(--phos); }
body.ps-ui .talk[data-state="off"] .talk-label { color: var(--tx-off); }
body.ps-ui .talk .meter { width: calc(44 * var(--u)); height: var(--s4); }
body.ps-ui .talk .meter > i { background: repeating-linear-gradient(90deg, var(--phos) 0 calc(4 * var(--u)), transparent 0 calc(5 * var(--u))); }

/* ================================================================ DIAL (the study drawer's combination lock) */
body.ps-ui .dial { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: calc(196 * var(--u)); height: max-content; transform: none; text-align: center; min-width: 0; max-width: none; padding: var(--s8) var(--s10) var(--s6); }
body.ps-ui .dial.shake { animation: ps-shake .25s steps(2) 1; }
@keyframes ps-shake { 0% { transform: translateX(calc(-3 * var(--u))); } 50% { transform: translateX(calc(3 * var(--u))); } 100% { transform: none; } }
body.ps-ui .dial-title { color: var(--yellow); font-size: var(--em); letter-spacing: 0; text-transform: none; font-weight: 400; height: var(--s12); }
body.ps-ui .dial-wheels { display: flex; justify-content: center; gap: var(--s6); margin: var(--s10) 0 var(--s8); }
body.ps-ui .wheel { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(34 * var(--u)); padding: var(--s2) 0; border: 0; border-radius: 0; transition: none; transform: none;
  background: linear-gradient(180deg, #02080b 0 12%, #0a1c25 12% 27%, #143038 27% 40%, #1e4453 40% 60%, #143038 60% 73%, #0a1c25 73% 88%, #02080b 88%);
  box-shadow: 0 0 0 var(--u) #000, inset var(--u) 0 0 0 rgba(174, 188, 187, .35), inset calc(-1 * var(--u)) 0 0 0 rgba(0, 0, 0, .6); }
body.ps-ui .wheel .w-prev, body.ps-ui .wheel .w-next { height: var(--s14); line-height: var(--s14); font-size: var(--em); color: var(--tx-off); }
body.ps-ui .wheel .w-cur { height: calc(24 * var(--u)); line-height: calc(24 * var(--u)); font-size: var(--em2); font-weight: 400; color: var(--tx-hi); text-shadow: var(--tsh2); }
body.ps-ui .wheel.sel { transform: none; border: 0; box-shadow: 0 0 0 var(--u) #000, 0 0 0 calc(3 * var(--u)) var(--yellow), 0 0 0 calc(4 * var(--u)) #000; }
body.ps-ui .wheel.sel .w-cur { color: var(--yellow); }
body.ps-ui .wheel.sel::before, body.ps-ui .wheel.sel::after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; width: var(--s10); height: var(--s6); background: var(--spr-up) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: ps-blink 1s steps(1) infinite; }
body.ps-ui .wheel.sel::before { top: calc(-9 * var(--u)); }
body.ps-ui .wheel.sel::after { bottom: calc(-9 * var(--u)); background: var(--spr-down) 0 0 / 100% 100% no-repeat; }
body.ps-ui .dial-known { color: var(--tx-dim); font-size: var(--em); margin: var(--s6) 0 var(--s2); }
body.ps-ui .dial-known b { color: var(--yellow); font-weight: 400; }
body.ps-ui .dial-wait { height: var(--s3); margin: var(--s2) auto var(--s3); width: 70%; border-radius: 0; background: #1a0d0a; box-shadow: 0 0 0 var(--u) #000; }
body.ps-ui .dial-wait > i { background: var(--red); }
body.ps-ui .dial-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s6); color: var(--tx-dim); margin-top: var(--s3); }

/* ================================================================ END (results) */
body.ps-ui #end { background: var(--veil); }   /* (the world behind the night report: a flat 42 % veil, so red text has a dark ground) */
body.ps-ui #end .end-card { position: absolute; inset: var(--s12) var(--s24) var(--s12); display: grid; grid-template-columns: calc(184 * var(--u)) 1fr; grid-template-rows: auto auto auto auto 1fr auto auto; column-gap: var(--s10); align-content: start; background: none; box-shadow: none; padding: 0; border: 0; }
body.ps-ui #end .end-banner { text-wrap: balance; grid-column: 1; grid-row: 1; margin: var(--s6) 0 var(--s3); font-size: var(--em2); line-height: calc(26 * var(--u)); font-weight: 400; color: var(--yellow); text-shadow: var(--tsh2); text-align: left; background: none; }
body.ps-ui #end .end-banner.parent { color: var(--red); }
body.ps-ui #end .end-sub { grid-column: 1; grid-row: 2; color: var(--tx-hi); margin: 0 0 var(--s2); }
body.ps-ui #end .end-reason { grid-column: 1; grid-row: 3; color: var(--tx-dim); margin: 0 0 var(--s8); }
body.ps-ui #end .end-stats { grid-column: 1; grid-row: 4; display: block; margin: 0; padding: var(--s6) var(--s8); }
body.ps-ui #end .end-stats > div { display: flex; align-items: flex-end; height: var(--s14); background: none; padding: 0; border-radius: 0; }
body.ps-ui #end .end-stats span { order: 1; color: var(--tx-dim); font-size: var(--em); letter-spacing: 0; text-transform: none; }
body.ps-ui #end .end-stats > div::after { content: ""; order: 2; flex: 1; margin: 0 var(--s3) var(--s3); border-bottom: var(--u) dotted var(--tx-off); }
body.ps-ui #end .end-stats b { order: 3; color: var(--yellow); font-size: var(--em); font-weight: 400; }
body.ps-ui #end .end-card .col-title { grid-column: 2; grid-row: 1 / span 7; align-self: start; z-index: 2; margin: 0; padding: var(--s10) var(--s10) 0 var(--s16); color: var(--ink-red); text-shadow: none; height: var(--s24); }
body.ps-ui #end .timeline { grid-column: 2; grid-row: 1 / span 7; align-self: start; list-style: none; margin: 0; padding: calc(26 * var(--u)) var(--s10) var(--s8) var(--s16); display: block; max-height: calc(100vh - 2 * var(--s12)); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }   /* (a long night scrolls, like Classic's) */
body.ps-ui #end .timeline::-webkit-scrollbar { display: none; }
body.ps-ui #end .timeline li { display: flex; gap: var(--s5); align-items: flex-start; padding: 0; margin: 0; min-height: var(--lh); line-height: var(--lh); background: none; border-radius: 0; color: var(--ink); }
body.ps-ui #end .timeline li > span:last-child { flex: 1; min-width: 0; }
body.ps-ui #end .timeline li:nth-child(odd) { background: none; }
body.ps-ui #end .timeline li { animation: ps-row-in .01s steps(1) var(--rd, 0ms) both; }   /* (typed in, a row at a time: hidden until its delay, then a hard cut; the row keeps its place) */
@keyframes ps-row-in { from { visibility: hidden; } to { visibility: visible; } }
body.ps-ui #end .timeline time { color: var(--ink-red); flex: none; min-width: var(--s24); }
body.ps-ui #end .timeline li.ai { color: #37506a; }
body.ps-ui #end .timeline .who { display: inline-block; flex: none; align-self: flex-start; margin-top: var(--s2); height: var(--s8); line-height: var(--s8); padding: 0 var(--s2); margin-right: 0; background: #37506a; color: var(--paper); font-size: var(--em); text-shadow: none; border-radius: 0; }
body.ps-ui #end #night-map-btn { grid-column: 1; grid-row: 6; justify-self: start; }
body.ps-ui #end #back-btn { grid-column: 1; grid-row: 7; justify-self: start; }
body.ps-ui #end .btn-big { height: var(--row); }

/* ================================================================ CLICK TO PLAY: start card (blue window) and pause page (paper) */
body.ps-ui .click-to-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: none; }
body.ps-ui .click-to-play .ctp-card { position: relative; width: calc(272 * var(--u)); padding: var(--s10) var(--s12) var(--s8); text-align: left; }
body.ps-ui .ctp-title { font-size: var(--em2); line-height: calc(26 * var(--u)); color: var(--tx-hi); font-weight: 400; text-shadow: var(--tsh2); text-align: center; margin: 0; }
body.ps-ui .ctp-role { margin: var(--s4) 0 var(--s6); color: var(--tx); text-align: left; }
body.ps-ui .ctp-role:empty { display: none; }
body.ps-ui .legend-basics { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s8); color: var(--tx); }
body.ps-ui .legend-basics span { white-space: nowrap; }
body.ps-ui .legend-compact { margin: 0; }
body.ps-ui .legend-more > summary { position: relative; display: flex; align-items: center; height: var(--row); padding: 0 0 0 var(--s6); list-style: none; color: var(--tx-dim); cursor: pointer; }
body.ps-ui .legend-more > summary::before { content: "▶"; position: static; display: inline; width: auto; height: auto; margin-right: var(--s3); background: none; animation: none; }
body.ps-ui #click-to-play .legend-more > summary { padding-left: var(--s24); }
body.ps-ui #click-to-play .legend-more > summary::before { display: none; }
body.ps-ui #click-to-play .legend-more > summary.cur::before { display: block; content: ""; position: absolute; }
body.ps-ui #click-to-play .legend-more[open] > summary { margin-bottom: var(--s1); }
body.ps-ui .legend-groups { margin: var(--s2) 0 0; }
body.ps-ui .legend-groups dt { color: var(--yellow); }
body.ps-ui .legend-groups dd { margin: 0 0 var(--s2); }
/* start card: the title is the blinking "press start" above the window */
body.ps-ui .click-to-play:not([data-state="paused"]) .ctp-card { margin-top: calc(46 * var(--u)); }
body.ps-ui .click-to-play:not([data-state="paused"]) .ctp-title { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--s8)); animation: ps-blink 1s steps(1) infinite; }
body.ps-ui .ctp-card > .btn { display: flex; width: 100%; }
body.ps-ui .click-to-play:not([data-state="paused"]) .ctp-card > .btn:first-of-type { margin-top: var(--s4); }
/* pause: a ruled notebook page, the pointing glove on "Click to play" */
body.ps-ui .click-to-play[data-state="paused"] { justify-content: flex-start; padding-left: var(--s32); }
body.ps-ui .click-to-play[data-state="paused"] .ctp-card { width: calc(252 * var(--u)); margin-top: 0; color: var(--ink); text-shadow: none; padding: var(--s12) var(--s10) var(--s8) var(--s20); }
body.ps-ui .click-to-play[data-state="paused"] .ctp-title { position: relative; text-align: left; color: var(--ink); text-shadow: none; padding-left: var(--s20); margin-left: calc(-1 * var(--s4)); height: calc(28 * var(--u)); }
body.ps-ui .click-to-play[data-state="paused"] .ctp-title.cur::before { content: ""; position: absolute; left: 0; top: calc(6 * var(--u)); width: var(--s20); height: var(--s12); background: var(--spr-hand) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: ps-bob 1s steps(1) infinite; }
body.ps-ui .click-to-play[data-state="paused"] .ctp-role { color: var(--ink); }
body.ps-ui .click-to-play[data-state="paused"] .legend-basics { color: var(--ink); }
body.ps-ui .click-to-play[data-state="paused"] kbd { background: #f4efdb; box-shadow: 0 0 0 var(--u) var(--ink), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 #a99f7d; color: var(--ink); }
body.ps-ui .click-to-play[data-state="paused"] .btn { color: #3a4458; text-shadow: none; }
body.ps-ui .click-to-play[data-state="paused"] .btn.cur { color: var(--ink); }
body.ps-ui .click-to-play[data-state="paused"] .ctp-note { margin-top: var(--s6); color: var(--ink-red); }

/* ================================================================ SETTINGS */
body.ps-ui .settings-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--s8); background: rgba(2, 9, 12, .55); backdrop-filter: none; font-family: var(--f-ui); color: var(--tx); }
body.ps-ui .settings-card { position: relative; width: calc(380 * var(--u)); max-height: none; padding: var(--s8) var(--s12) var(--s6); display: flex; flex-direction: column; }
body.ps-ui .settings-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s3); }
body.ps-ui .settings-head h2 { margin: 0; font: inherit; color: var(--yellow); }
body.ps-ui .settings-x { display: none; }
body.ps-ui .settings-tabs { position: relative; display: flex; justify-content: flex-start; gap: var(--s10); height: var(--s16); padding: var(--s1) var(--s10) 0; margin: 0 0 var(--s4); border-bottom: var(--u) solid rgba(174, 188, 187, .35); }
body.ps-ui .settings-tabs::before, body.ps-ui .settings-tabs::after { color: var(--tx-off); position: absolute; top: var(--s1); }
body.ps-ui .settings-tabs::before { content: "◀"; left: 0; } body.ps-ui .settings-tabs::after { content: "▶"; right: 0; }
body.ps-ui .settings-tabs button { height: var(--s14); }
body.ps-ui .settings-body { padding: 0; height: calc(6 * var(--row)); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }   /* (one height for every tab: the window does not jump; Keys is taller and scrolls) */
body.ps-ui .settings-body::-webkit-scrollbar { display: none; }
body.ps-ui .settings-card:has(section[data-pane="keys"]:not([hidden])) .settings-body { height: calc(9 * var(--row)); }
body.ps-ui .settings-body section { display: block; }
body.ps-ui .settings-body .field { position: relative; display: grid; grid-template-columns: calc(116 * var(--u)) 1fr; align-items: center; min-height: var(--row); margin: 0; padding-left: var(--s24); }
body.ps-ui .settings-body .field.cur { color: var(--tx-hi); }
body.ps-ui .settings-body .field.cur .field-label { color: var(--tx-hi); }
body.ps-ui .settings-keys tr.cur::before, body.ps-ui .settings-body .field.cur::before { content: ""; display: block; position: absolute; left: 0; top: var(--s2); width: var(--s20); height: var(--s12); background: var(--spr-hand) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: ps-bob 1s steps(1) infinite; }
body.ps-ui .settings-body .field-label { margin: 0; color: var(--tx-dim); }
body.ps-ui .settings-body .field-label small { display: none; }
body.ps-ui .settings-body .settings-toggle { grid-template-columns: calc(116 * var(--u)) 1fr; padding-left: var(--s24); margin: 0; }
body.ps-ui .settings-body .settings-toggle .toggle-track { margin-left: 0; order: 2; }
body.ps-ui .settings-body .settings-row { grid-template-columns: calc(116 * var(--u)) calc(100 * var(--u)) 1fr; padding-left: var(--s24); }
body.ps-ui .settings-body .settings-row .settings-label { order: 1; }
body.ps-ui .settings-body .settings-row input[type="range"] { order: 2; }
body.ps-ui .settings-body .settings-row output { order: 3; text-align: left; padding-left: var(--s5); }
/* Settings, Keys tab: the table becomes rows (label, two key caps); its note moves into the help window (ui-retro.js describe) */
body.ps-ui .voicefx-status:empty { display: none; }
body.ps-ui .voicefx-status { display: block; margin: var(--s4) 0; color: var(--yellow); }
body.ps-ui .settings-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.ps-ui .settings-keys { display: block; width: 100%; }
body.ps-ui .settings-keys tbody { display: block; }
body.ps-ui .settings-keys tr { position: relative; display: flex; align-items: center; height: var(--row); padding-left: var(--s24); }
body.ps-ui .settings-keys th { display: block; flex: 1; min-width: 0; margin: 0; padding: 0; text-align: left; font-weight: 400; color: var(--tx-dim); white-space: nowrap; }
body.ps-ui .settings-keys tr.cur th { color: var(--tx-hi); }
body.ps-ui .settings-keys tr.unbound th { color: var(--yellow); }
body.ps-ui .settings-keys td { display: block; flex: none; width: calc(46 * var(--u)); margin: 0 0 0 var(--s3); padding: 0; }
body.ps-ui .keycap { display: block; width: 100%; height: var(--s10); margin: 0; padding: 0 var(--s2); background: #d8d5c5; color: #0a1b22; border: 0; border-radius: 0; font: inherit; line-height: var(--s10); text-align: center; text-shadow: none; cursor: pointer; white-space: nowrap; overflow: hidden;
  box-shadow: 0 0 0 var(--u) #000, inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 #8a9c9d, var(--u) var(--u) 0 var(--u) #000; }
body.ps-ui .keycap:focus-visible { outline: 0; background: #fff; box-shadow: 0 0 0 var(--u) #000, 0 0 0 calc(2 * var(--u)) var(--yellow), var(--u) var(--u) 0 calc(2 * var(--u)) #000; }
body.ps-ui .keycap.changed { background: #e6dca4; }
body.ps-ui .keycap.listening { background: var(--yellow); animation: ps-blink 1s steps(1) infinite; }
body.ps-ui .keycap.conflict { background: #d9826e; }
body.ps-ui .leave-btn.confirm { color: var(--yellow); }
body.ps-ui .settings-help { margin: var(--s4) 0 0; padding: var(--s3) var(--s5); min-height: calc(30 * var(--u)); color: var(--tx); }
body.ps-ui .settings-msg { min-height: 0; margin: 0; color: var(--green); }
body.ps-ui .settings-foot { display: flex; justify-content: space-between; margin-top: var(--s2); }

/* ================================================================ OPTIONS + HOW TO WIN: one page, two panes (ui-retro.js opens both folds of the lobby together) */
/* the menu window steps aside: its frame and everything except the two folds go, the folds become the windows (position: fixed, so they leave the card) */
body.ps-ui #lobby.rules-page .lobby-card { background-image: none; box-shadow: none; padding: 0; }
body.ps-ui #lobby.rules-page .lobby-card::after { display: none; }
body.ps-ui #lobby.rules-page .lobby-card > :not(details.more) { display: none; }
body.ps-ui #lobby:not(.rules-page) details.more { padding: 0; background: none; box-shadow: none; }
body.ps-ui #lobby:not(.rules-page) details.more::after { display: none; }
body.ps-ui #lobby.rules-page details.more { position: fixed; display: block; margin: 0; border: 0; z-index: 1; }
body.ps-ui #lobby.rules-page #lobby-options { left: var(--s24); top: var(--s12); width: calc(156 * var(--u)); padding: var(--s8) var(--s10) var(--s6); }
body.ps-ui #lobby.rules-page #lobby-how { left: calc(188 * var(--u)); right: var(--s24); top: var(--s12); line-height: var(--lh); }
body.ps-ui #lobby.rules-page .lobby-help { left: var(--s24); right: auto; top: calc(166 * var(--u)); bottom: auto; width: calc(156 * var(--u)); padding: var(--s6) var(--s8); }
/* a fold's summary is the window's heading here, not a row */
body.ps-ui #lobby.rules-page details.more > summary { display: block; height: var(--s12); padding: 0; margin: 0 0 var(--s3); color: var(--yellow); cursor: default; pointer-events: none; }
body.ps-ui #lobby.rules-page details.more > summary.cur::before { display: none; }
body.ps-ui #lobby.rules-page #lobby-how > summary { font-size: var(--em2); line-height: calc(26 * var(--u)); height: calc(28 * var(--u)); color: var(--ink-red); text-shadow: none; }
body.ps-ui #lobby.rules-page .field { margin: 0 0 var(--s4); padding-left: var(--s24); position: relative; }
body.ps-ui #lobby.rules-page .field { --hand-left: 0; }
body.ps-ui #lobby.rules-page .field-label { color: var(--tx-dim); margin: 0; }
body.ps-ui #lobby.rules-page .field.cur .field-label { color: var(--tx-hi); }
body.ps-ui #lobby.rules-page .field-label small { display: none; }
body.ps-ui #lobby.rules-page .toggle { --hand-left: 0; padding-left: var(--s24); margin: 0 0 var(--s4); }
body.ps-ui #lobby.rules-page .toggle .toggle-track { margin-left: 0; order: 2; }
body.ps-ui #lobby.rules-page .hint { display: none; }
body.ps-ui #lobby.rules-page #rules-back { display: flex; margin-top: var(--s2); }
body.ps-ui #rules-back { display: none; }
body.ps-ui .how { display: block; }
body.ps-ui .how-item { margin: 0; }
body.ps-ui .how-item h3 { display: inline; margin: 0 var(--s3) 0 0; font: inherit; color: var(--ink-red); }
body.ps-ui .how-item p { display: inline; margin: 0; color: var(--ink); }
body.ps-ui .lobby-help .dim { color: var(--yellow); }
body.ps-ui #lobby.rules-page #lobby-help { color: var(--tx); }

/* ---------------------------------------------------------------- menu pass (2026-10-01)
   One row opens the rules page ("Rules & options": Options and How to win were two rows to the same page). */
body.ps-ui #lobby:not(.rules-page) #lobby-how { display: none; }
body.ps-ui #lobby:not(.rules-page) #lobby-options .sum-short { display: none; }
body.ps-ui #lobby:not(.rules-page) #lobby-options .sum-long { display: inline; }
body.ps-ui #lobby.rules-page #lobby-options .sum-long { display: none; }
/* How to win: steps on the ruled paper (every line on a rule: 14 u) */
body.ps-ui .how-item { margin: 0 0 var(--lh); }
body.ps-ui .how-item h3 { display: block; margin: 0; }
body.ps-ui .how-item p { display: block; }
body.ps-ui .how-steps { margin: 0; padding: 0 0 0 var(--s14); color: var(--ink); list-style: decimal; }
body.ps-ui .how-steps li { margin: 0; padding: 0; }
body.ps-ui .how-steps li::marker { color: var(--ink-red); }
body.ps-ui .how-clock { margin: 0; color: var(--ink); }
/* House rules: the lobby's own rows (a toggle reads On / Off, Grab is a choice), no box */
body.ps-ui .house-rules { margin: var(--s2) 0 0 0; padding: 0; border: 0; }
body.ps-ui .house-rules-title { margin: 0; height: var(--s12); line-height: var(--s12); color: var(--yellow); font-weight: 400; }
/* the desktop rules page: every setting is one line (label left, choice right), so the whole window is on screen and
   every row is under the glove; the help window sits at the bottom; the paper scrolls if the window is low */
@media (min-height: 501px) and (min-width: 853px) {
  body.ps-ui #lobby.rules-page { --row: calc(14 * var(--u)); }
  body.ps-ui #lobby.rules-page #lobby-options { width: calc(204 * var(--u)); }
  body.ps-ui #lobby.rules-page #lobby-how { left: calc(240 * var(--u)); max-height: calc(100vh - 24 * var(--u)); overflow-y: auto; scrollbar-width: none; }
  body.ps-ui #lobby.rules-page #lobby-how::-webkit-scrollbar { display: none; }
  /* more below: a blinking mark that stays at the paper's bottom edge until the end is in view (wheel, or PgUp / PgDn) */
  body.ps-ui #lobby.rules-page #lobby-how.more-below::after { content: "\25BC  PgDn"; display: block; position: sticky; bottom: 0; margin: 0 0 0 auto; width: max-content; padding: 0 var(--s4); color: var(--ink-red); background: #d9cfa8; text-shadow: none; animation: ps-blink 1s steps(1) infinite; }
  body.ps-ui #lobby.rules-page .lobby-help { width: calc(204 * var(--u)); top: auto; bottom: var(--s12); }
  body.ps-ui #lobby.rules-page .field { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: var(--row); margin: 0; }
  body.ps-ui #lobby.rules-page .field .seg { flex: none; }
  body.ps-ui #lobby.rules-page .field-label, body.ps-ui #lobby.rules-page .toggle-text { white-space: nowrap; flex: none; }
  body.ps-ui #lobby.rules-page .toggle { margin: 0; }
  body.ps-ui #lobby.rules-page .toggle .toggle-track { margin-left: auto; }   /* every choice on the right edge, like the .seg rows */
  body.ps-ui.ps-tight #lobby.rules-page #lobby-options { left: var(--s16); width: calc(196 * var(--u)); }
  body.ps-ui.ps-tight #lobby.rules-page #lobby-how { left: calc(220 * var(--u)); right: var(--s16); }
  body.ps-ui.ps-tight #lobby.rules-page .lobby-help { left: var(--s16); width: calc(196 * var(--u)); }
}
body.ps-ui .toggle-text { white-space: nowrap; }
body.ps-ui .click-to-play[data-state="paused"] .legend-more > summary { color: #55607a; text-shadow: none; }
body.ps-ui .click-to-play[data-state="paused"] .legend-dim { color: #55607a; }

/* ================================================================ TOUCH LAYER (phones): round window-orbs, own pictograms, no Sony shapes.
   Geometry is Classic's and stays Classic's (touch.css: --d --cx --cy --tb, slots, left-handed: touch-model.js overlap arithmetic depends on it);
   the wipe does not touch #touch. Only the paint changes: ui-retro.js paints --orb-up / --orb-down / --orb-on, the sprites are --spr-p-*. */
/* (the key legends are hidden on a phone by touch.css, with !important: it survives the revert) */
body.ps-ui #touch { font-family: var(--f-ui); -webkit-font-smoothing: none; text-shadow: var(--tsh); image-rendering: pixelated; }
body.ps-ui #touch .t-btn { border: 0; border-radius: 0; transition: none; transform: none; gap: var(--s1); opacity: .9; color: var(--tx-hi);
  background: var(--orb-up, none) 0 0 / 100% 100% no-repeat; font: 400 var(--em) / var(--s12) var(--f-ui); letter-spacing: 0; text-shadow: var(--tsh); }
body.ps-ui #touch .t-btn::before { content: ""; flex: none; width: calc(var(--iw, 13) * var(--u)); height: calc(var(--ih, 9) * var(--u)); background: var(--ic) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(var(--u) var(--u) 0 #000); }
body.ps-ui #touch .t-btn .t-ico { display: none; }
body.ps-ui #touch .t-btn .t-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }      /* (still there for readers and tests) */
body.ps-ui #touch .t-use .t-cap { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--em); line-height: var(--s10); max-width: 100%; max-height: calc(30 * var(--u)); white-space: normal; text-align: center; color: var(--tx-hi); }
body.ps-ui #touch .t-use.long::before { display: none; }   /* (ui-retro.js longCaption: the words say it, the pictogram steps aside) */
body.ps-ui #touch .t-btn.dim { opacity: .45; }
body.ps-ui #touch .t-btn.down { background-image: var(--orb-down, none); color: #1a1608; text-shadow: none; transform: none; border: 0; }
body.ps-ui #touch .t-btn.down::before { filter: none; }
body.ps-ui #touch .t-btn.on, body.ps-ui #touch .t-btn.latched { background-image: var(--orb-on, none); color: #0d1f12; border: 0; text-shadow: none; }
body.ps-ui #touch .t-btn.on::before { filter: none; }
body.ps-ui #touch .t-use { --ic: var(--spr-p-use); --iw: 13; --ih: 11; }
body.ps-ui #touch .t-jump { --ic: var(--spr-p-jump); --iw: 13; --ih: 8; }
body.ps-ui #touch .t-sneak { --ic: var(--spr-p-sneak); --iw: 13; --ih: 9; }
body.ps-ui #touch .t-pause { --ic: var(--spr-p-pause); --iw: 11; --ih: 9; }
body.ps-ui #touch .t-throw { --ic: var(--spr-p-throw); --iw: 13; --ih: 8; }
body.ps-ui #touch .t-snore { --ic: var(--spr-p-snore); --iw: 15; --ih: 7; }
body.ps-ui #touch .t-x { --ic: var(--spr-p-cover); --iw: 13; --ih: 7; }
body.ps-ui #touch .t-give { --ic: var(--spr-p-give); --iw: 13; --ih: 7; }
body.ps-ui #touch .t-light { --ic: var(--spr-p-light); --iw: 13; --ih: 8; }
body.ps-ui #touch .t-drop { --ic: var(--spr-p-drop); --iw: 13; --ih: 9; }
body.ps-ui #touch .t-tv { --ic: var(--spr-p-tv); --iw: 13; --ih: 9; }
body.ps-ui #touch .t-talk, body.ps-ui #touch .t-mic { --ic: var(--spr-mic); --iw: 9; --ih: 9; }
body.ps-ui #touch .t-whisper { --ic: var(--spr-p-whisper); --iw: 12; --ih: 8; }
body.ps-ui #touch .t-walkie { --ic: var(--spr-walkie); --iw: 9; --ih: 9; }
body.ps-ui #touch .t-mic { border: 0; }
body.ps-ui #touch .t-badge { top: calc(-1 * var(--u)); right: calc(-1 * var(--u)); min-width: var(--s10); height: var(--s10); padding: 0 var(--s2); border-radius: 0; background: var(--yellow); color: #1a1608; font: 400 var(--em) / var(--s10) var(--f-ui); text-align: center; text-shadow: none; box-shadow: 0 0 0 var(--u) #000; }
body.ps-ui #touch .t-lock { top: calc(-1 * var(--u)); right: calc(-1 * var(--u)); width: var(--s10); height: var(--s10); padding: var(--u); border-radius: 0; background: var(--yellow); color: #1a1608; box-shadow: 0 0 0 var(--u) #000; }
body.ps-ui #touch .t-meter { height: var(--s2); border-radius: 0; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 var(--u) #000; }
body.ps-ui #touch .t-meter > i { background: repeating-linear-gradient(90deg, var(--phos) 0 calc(3 * var(--u)), transparent 0 calc(4 * var(--u))); }
body.ps-ui #touch .t-holdmark { border-radius: 0; border-width: var(--u); width: var(--s3); height: var(--s3); }
body.ps-ui #touch .t-sound { border: 0; border-radius: 0; background: var(--plate); box-shadow: var(--bev-2); color: var(--yellow); font: 400 var(--em) / var(--s12) var(--f-ui); padding: var(--s3) var(--s8); }
/* the stick: a painted ring, the knob an orb that turns yellow at a run; the dashed run ring becomes a 1u stepped ring */
body.ps-ui #touch .t-stick { border: 0; border-radius: 0; transition: none; background: var(--paint, none) 0 0 / 100% 100% no-repeat; opacity: .8; }
body.ps-ui #touch .t-stick.active { opacity: .95; }
body.ps-ui #touch .t-knob { border-radius: 0; box-shadow: none; background: var(--orb-up, none) 0 0 / 100% 100% no-repeat; }
body.ps-ui #touch .t-stick.run .t-knob { background-image: var(--orb-down, none); }
body.ps-ui #touch .t-runring { border: 0; border-radius: 50%; transition: none; background: radial-gradient(circle, transparent 0 calc(50% - var(--u)), rgba(255, 255, 255, .55) calc(50% - var(--u)) 50%, transparent 50%); }
body.ps-ui #touch .t-stick.run .t-runring { background: radial-gradient(circle, transparent 0 calc(50% - var(--u)), var(--yellow) calc(50% - var(--u)) 50%, transparent 50%); }
body.ps-ui #touch .t-stick.run { border: 0; }
body.ps-ui #touch .t-run { display: none; }
/* the hold ring around Use: 12 steps, not a sweep (round() is Chrome 125+; older browsers keep Classic's smooth sweep) */
body.ps-ui #touch .t-ring { inset: calc(-3 * var(--u)); border-radius: 0;
  background: conic-gradient(var(--yellow) calc(round(down, var(--p, 0) * 12, 1) * 30deg), rgba(0, 0, 0, .45) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3 * var(--u)), #000 calc(50% - 3 * var(--u) + 1px)); mask: radial-gradient(circle, transparent calc(50% - 3 * var(--u)), #000 calc(50% - 3 * var(--u) + 1px)); }
body.ps-ui #touch .t-use.busy .t-ring { background: conic-gradient(var(--yellow) calc(round(down, var(--p, 0) * 12, 1) * 30deg), rgba(0, 0, 0, .45) 0); }
/* practice tools on a phone: next to Pause, collapsed to their name */
html.touch body.ps-ui .practice { top: var(--s8); right: auto; left: calc(38 * var(--u)); width: auto; }
html.touch body.ps-ui .practice:not(.open) { width: auto; }
/* left-handed (touch.css swaps the thumbs' sides; the top rows follow): Pause goes right, so the practice tools go right and the items go left */
html.touch.touch-lefty body.ps-ui .practice { left: auto; right: calc(38 * var(--u)); }
html.touch.touch-lefty body.ps-ui .hud-chips { right: auto; left: var(--s8); align-items: stretch; }
/* what touch.css did for the interface that the revert took away: the notch (the whole interface sits inside the safe area), taps on the combination lock,
   no double-tap zoom, no tap flash, no scroll chaining out of a page */
html.touch body.ps-ui #ui { inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
html.touch body.ps-ui #hud-dial { pointer-events: auto; z-index: 2; }
html.touch body.ps-ui .wheel { cursor: pointer; }
html.touch body.ps-ui :where(#ui, .settings-modal) :where(button, summary, .click-to-play, label) { touch-action: manipulation; }
html.touch body.ps-ui :is(#ui *, .settings-modal, .settings-modal *) { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.touch body.ps-ui :is(#lobby, #end, .timeline, .settings-body, .settings-modal) { overscroll-behavior: contain; }
html.touch body.ps-ui #ui.dialing .hud-chips { display: none; }   /* (the lock says what you know; the phone's thumbs need the corner) */
/* the "turn your phone sideways" card, in the same voice */
body.ps-ui #touch-rotate { background: #02090c; color: var(--tx); font: 400 var(--em) / var(--lh) var(--f-ui); text-shadow: var(--tsh); -webkit-font-smoothing: none; }
body.ps-ui #touch-rotate .rot-card { color: var(--tx); }
body.ps-ui #touch-rotate svg { color: var(--yellow); animation: none; }
body.ps-ui #touch-rotate p { font-size: var(--em); font-weight: 400; line-height: var(--lh); }
body.ps-ui #touch-rotate .rot-sub { color: var(--tx-dim); font-size: var(--em); }

@media (max-height: 500px) {
  body.ps-ui { --row: calc(14 * var(--u)); }
  /* lobby: see above. HUD: */
  body.ps-ui .hud-top { top: var(--s6); }
  body.ps-ui .hud-top .objective { max-width: calc(200 * var(--u)); }
  /* the action line: at the very bottom, between the thumbs; never wider than the gap between the stick and the button cluster (touch.css: Jump
     reaches 191 px x --tb in from the edge). The toast line right above it, the captions above both: one stack, nothing meets. The buttons carry
     the actions, so here the line only says what they do not: the state, a hold, a cost word, a note (touch-model.js touchPrompt). */
  body.ps-ui .action-line { bottom: var(--s3); max-width: min(460px, calc(100vw - 2 * (max(var(--L0, 12px), var(--R0, 12px)) + 195px * var(--tb, 1)))); }
  body.ps-ui .hold-ring { top: calc(50% + var(--s5)); }
  body.ps-ui .toasts { bottom: calc(3 * var(--u) + 17 * var(--hu)); }
  body.ps-ui .toast { max-width: min(460px, calc(100vw - 2 * (max(var(--L0, 12px), var(--R0, 12px)) + 195px * var(--tb, 1)))); }
  body.ps-ui .captions, html:not(.touch) body.ps-ui #hud:has(#hud-talk:not([hidden])) .captions { left: 0; right: 0; bottom: calc(3 * var(--u) + 34 * var(--hu)); width: auto; align-items: center; gap: calc(3 * var(--hu)); }
  /* (the stack grows upwards past the context button left of the cluster — slot 2, Throw: it reaches 259 px x --tb in — so a caption stays narrower than the gap
     between that button and its mirror; a phone too narrow for that shows one caption at a time: the rule after this block) */
  body.ps-ui .captions .caption:nth-last-child(n+3) { display: none; }   /* (two captions at most: the stack stays under the middle of the view) */
  body.ps-ui .caption { max-width: min(300px, calc(100vw - 2 * (max(var(--L0, 12px), var(--R0, 12px)) + 263px * var(--tb, 1)))); text-align: center; padding: var(--hu) calc(4 * var(--hu)); font-size: calc(12 * var(--hu)); line-height: calc(14 * var(--hu)); text-shadow: var(--hu) var(--hu) 0 #000; box-shadow: 0 0 0 var(--hu) #000; }
  body.ps-ui .hud-chips { top: calc(var(--s6)); bottom: auto; right: calc(var(--s6) + var(--s4)); min-width: 0; padding: var(--s3) var(--s5); }
  body.ps-ui .chip-hud { height: var(--s11, calc(11 * var(--u))); }
  body.ps-ui #hud-code .code-digits { padding-left: var(--s3); }
  /* pages */
  body.ps-ui #lobby.rules-page #lobby-options { left: var(--s10); top: var(--s6); width: calc(150 * var(--u)); padding: var(--s6) var(--s8); }
  body.ps-ui #lobby.rules-page #lobby-options .field, body.ps-ui #lobby.rules-page .toggle { margin-bottom: var(--s2); }
  body.ps-ui #lobby.rules-page .lobby-help { left: var(--s10); top: calc(118 * var(--u)); width: calc(150 * var(--u)); padding: var(--s4) var(--s6); }
  body.ps-ui #lobby.rules-page #lobby-how { left: calc(168 * var(--u)); right: var(--s10); top: var(--s6); height: calc(177 * var(--u)); overflow-y: auto; scrollbar-width: none; padding-top: var(--s6); padding-bottom: 0; }   /* (6 u + the 31 u heading + 10 lines of 14 u: it ends on a line) */
  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-how::-webkit-scrollbar { display: none; }
  body.ps-ui .click-to-play .ctp-card { width: calc(292 * var(--u)); padding: var(--s6) var(--s10) var(--s4); }
  body.ps-ui .click-to-play:not([data-state="paused"]) .ctp-card { margin-top: calc(40 * var(--u)); }
  body.ps-ui .click-to-play:not([data-state="paused"]) .ctp-title { bottom: calc(100% + var(--s4)); }
  body.ps-ui .ctp-role { margin: var(--s2) 0 var(--s3); }
  body.ps-ui .ctp-touch { margin: 0 0 var(--s2); color: var(--tx-dim); }
  body.ps-ui .click-to-play[data-state="paused"] { padding-left: var(--s24); align-items: flex-start; }
  body.ps-ui .click-to-play[data-state="paused"] .ctp-card { width: calc(272 * var(--u)); margin-top: var(--s24); padding: var(--s6) var(--s8) var(--s4) var(--s20); }   /* (under the Practice pill, which stays above the page) */
  body.ps-ui .click-to-play[data-state="paused"] .ctp-title { height: calc(24 * var(--u)); }
  body.ps-ui .click-to-play[data-state="paused"] .ctp-touch { display: none; }   /* (the page has to fit a 195 u screen: the controls were on the start card) */
  body.ps-ui .settings-modal { padding: var(--s4); }
  body.ps-ui .settings-card { width: calc(392 * var(--u)); padding: var(--s6) var(--s10) var(--s4); }
  body.ps-ui .settings-head { margin-bottom: var(--s1); }
  body.ps-ui .settings-tabs { height: var(--s14); margin-bottom: var(--s2); }
  body.ps-ui .settings-help { min-height: calc(22 * var(--u)); margin-top: var(--s3); }
  body.ps-ui .settings-foot .btn { height: var(--s14); }
  body.ps-ui #end .end-card { inset: var(--s6) var(--s14) var(--s6); grid-template-columns: calc(152 * var(--u)) 1fr; column-gap: var(--s8); }
  body.ps-ui #end .end-banner { line-height: calc(24 * var(--u)); margin: var(--s2) 0 var(--s3); }
  body.ps-ui #end .end-card .col-title { padding: var(--s6) var(--s8) 0 var(--s20); height: var(--s20); }
  body.ps-ui #end .timeline { padding: calc(20 * var(--u)) var(--s8) 0 var(--s20); max-height: calc(174 * var(--u)); }   /* (20 u + 11 lines of 14 u: the page ends on a line, never in the middle of one) */
  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 .end-reason { margin-bottom: var(--s4); }
  body.ps-ui #end .end-stats { padding: var(--s5) var(--s6); }
  body.ps-ui #end .end-card > .btn { height: var(--row); }
  body.ps-ui .dial { top: var(--s4); bottom: auto; margin-top: 0; width: calc(258 * var(--u)); padding: var(--s6) var(--s8) var(--s4); }
  body.ps-ui .dial-title { height: var(--s10); }
  body.ps-ui .dial-wheels { margin: var(--s8) 0 var(--s6); }
  body.ps-ui .wheel { width: calc(30 * var(--u)); }
  body.ps-ui .dialing .hud-top { display: none; }
  body.ps-ui .dial-known { margin: var(--s6) 0 var(--s2); }
  body.ps-ui .dial-digits { display: flex; justify-content: center; gap: var(--s2); }
  body.ps-ui .dial-digits button { width: calc(22 * var(--u)); height: calc(20 * var(--u)); padding: 0; border: 0; border-radius: 0; background: #d8d5c5; color: #0a1b22; font: inherit; text-shadow: none; box-shadow: 0 0 0 var(--u) #000, inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 #8a9c9d, var(--u) var(--u) 0 var(--u) rgba(0, 0, 0, .5); }
  body.ps-ui .dial-digits button.down { background: var(--yellow); }
  body.ps-ui .dial-acts { display: flex; justify-content: center; gap: var(--s6); margin-top: var(--s2); }
  body.ps-ui .dial-acts .btn { height: calc(20 * var(--u)); }
  body.ps-ui .hud-chips { z-index: 0; }
  body.ps-ui .dialing .hud-chips { top: auto; bottom: var(--s8); right: var(--s8); }
}

@media (max-width: 700px) and (max-height: 500px) {   /* 667 x 375: the clock and the progress bar have to fit the gap between the thumb clusters (299 px) */
  body.ps-ui .progress-bar { width: calc(52 * var(--u)); }
  body.ps-ui .caption { max-width: calc(100vw - 2 * (max(var(--L0, 12px), var(--R0, 12px)) + 195px * var(--tb, 1))); }
  body.ps-ui .captions .caption:not(:last-child) { display: none; }   /* (one caption: a second line would run under the Throw button) */
}

/* ================================================================ COUNTDOWN, CONNECTION BANNER (the state word is part of the action line, above) */
body.ps-ui .countdown { position: absolute; left: 0; right: 0; top: 24%; transform: none; text-align: center; font-size: calc(48 * var(--u)); line-height: calc(52 * var(--u)); font-weight: 400; color: var(--tx-hi); text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 #000; animation: none; }
body.ps-ui .countdown.go { color: var(--yellow); }
body.ps-ui .conn-banner { position: absolute; top: var(--s6); left: 0; right: 0; margin: 0 auto; width: max-content; padding: var(--s3) var(--s8); background: var(--plate); box-shadow: var(--bev-2); color: var(--red); border-radius: 0; border: 0; }

/* ================================================================ LOBBY, joined: In the house */
body.ps-ui #lobby .house { order: 4; display: block; }
body.ps-ui #lobby .house .col-title { margin-bottom: var(--s1); }
body.ps-ui .player-list { margin: 0 0 var(--s3); padding: 0; list-style: none; }
body.ps-ui .player-list li { display: flex; align-items: center; gap: var(--s4); height: var(--s14); padding: 0 0 0 var(--s24); position: relative; background: none; border-radius: 0; color: var(--tx); }
body.ps-ui .player-list li.me { color: var(--tx-hi); }
body.ps-ui .player-list .you { color: var(--tx-dim); }
body.ps-ui .player-list .chip { margin-left: auto; }
body.ps-ui .player-list .empty { color: var(--tx-off); }
body.ps-ui #lobby .house .field { padding-left: var(--s24); margin: 0 0 var(--s2); }
body.ps-ui #lobby .house .field-label { margin: 0; }
body.ps-ui .mic-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); margin-bottom: var(--s1); }
body.ps-ui .mic-row .btn { padding-left: var(--s24); }
body.ps-ui #mic-btn .ico { display: none; }
body.ps-ui #mic-btn[data-state="on"] { color: var(--phos); }
body.ps-ui .mic-row .meter > i { background: repeating-linear-gradient(90deg, var(--phos) 0 calc(4 * var(--u)), transparent 0 calc(5 * var(--u))); }
body.ps-ui #start-btn { display: flex; width: 100%; }
@media (max-height: 500px) {
  body.ps-ui #lobby .house .col-title { height: var(--s10); margin-bottom: 0; }
  body.ps-ui .player-list li { height: var(--s12); }
  body.ps-ui #lobby .house .field { margin: 0; }
  body.ps-ui #lobby .house .field-label, body.ps-ui #lobby .house .seg button { height: var(--s12); line-height: var(--s12); }
  body.ps-ui #lobby .house .seg { flex-wrap: nowrap; gap: 0 var(--s4); }
}

/* joined: the four ways to play step aside ("Tonight" and "Start the night" are the way in now) */
body.ps-ui #lobby.joined .play-list, body.ps-ui #lobby.joined #mic-hint, body.ps-ui #lobby.joined .lobby-status { display: none; }   /* (the help window says them when the cursor is on the row) */
/* joined: the card widens for the four "Tonight" choices; the logo shrinks, the name (now shown in the list) and the tagline step aside */
body.ps-ui #lobby.joined .lobby-card { width: calc(244 * var(--u)); }
body.ps-ui #lobby.joined .name-field, body.ps-ui #lobby.joined .tagline { display: none; }
body.ps-ui #lobby.joined .seg { gap: 0 var(--s5); }
body.ps-ui #lobby.joined .seg button { white-space: nowrap; }
body.ps-ui #lobby.joined .lobby-head-text { top: var(--s2); right: auto; left: calc(-188 * var(--u)); width: calc(170 * var(--u)); }
body.ps-ui #lobby.joined .lobby-card > .legend { right: auto; left: calc(-188 * var(--u)); width: calc(176 * var(--u)); }
@media (max-height: 500px) {
  body.ps-ui #lobby.joined .lobby-card { width: calc(226 * var(--u)); }
  body.ps-ui #lobby.joined .seg { flex-wrap: wrap; }
  body.ps-ui #lobby.joined .lobby-head-text { right: calc(100% + var(--s10)); left: auto; width: calc(150 * var(--u)); }
  body.ps-ui #lobby.joined .lobby-help { width: calc(150 * var(--u)); }
}

/* ================================================================ things the real DOM has and the mock pages did not show */
/* the items window exists only while an item is shown (Classic has no container plate, so an empty stack was invisible) */
body.ps-ui .hud-chips:not(:has(.chip-hud:not([hidden]))) { display: none; }
/* menu: a rule between the play rows and the secondary rows, from the first <details> (no extra element) */
body.ps-ui #lobby #lobby-options { border-top: var(--s1) solid rgba(174, 188, 187, .3); margin-top: var(--s2); padding-top: var(--s2); }
/* practice tools (practice nights only): the same plate, top right */
body.ps-ui .practice { position: absolute; top: var(--s6); right: var(--s8); z-index: 3; width: calc(112 * var(--u)); background: var(--plate); box-shadow: var(--bev-1); }
body.ps-ui .practice-head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--s14); padding: 0 var(--s5); background: none; border: 0; color: var(--yellow); font: inherit; text-shadow: var(--tsh); cursor: pointer; }
body.ps-ui .practice-head span { color: var(--tx-dim); }
body.ps-ui .practice-body { padding: var(--s2) var(--s5) var(--s4); }
body.ps-ui .practice-label { color: var(--yellow); margin-top: var(--s2); }
body.ps-ui .practice-group { display: flex; flex-direction: column; }
body.ps-ui .practice-body button { display: flex; align-items: center; gap: var(--s3); height: var(--s12); padding: 0; background: none; border: 0; color: var(--tx); font: inherit; text-shadow: var(--tsh); text-align: left; cursor: pointer; }
body.ps-ui .practice-reset, body.ps-ui .practice-sd { color: var(--tx-dim); }
/* fall: the roofs' rules are a row here ("Roof rules": a toast), not small print; on a phone the tools stand in three columns (two more of them: one column ran off the screen) */
body.ps-ui .practice-tip { display: none; }
body.ps-ui .practice-body button.practice-rules[data-sb] { display: flex; }
html.touch body.ps-ui .practice-group { display: grid; grid-template-columns: repeat(3, auto); column-gap: var(--s8); }
/* the lobby's touch paragraph repeats what the Tap-to-play card says; the phone lobby has no room for it */
body.ps-ui #lobby .legend-touch { display: none; }

/* ================================================================ BEHAVIOUR PARITY: the visibility rules of the Classic sheets, restated (the wipe removed them) */
body.ps-ui #hud[data-role="parent"] .kid-only, body.ps-ui #hud[data-role="child"] .parent-only { display: none; }
body.ps-ui #hud:not([data-mode="sandbox"]) .sandbox-only { display: none; }
body.ps-ui .objective:empty, body.ps-ui .ctp-role:empty, body.ps-ui .lobby-status:empty { display: none; }
body.ps-ui .talk[data-state="off"] .meter { display: none; }
/* fall: the roofs' captions are read in Friends nights too — the sound captions stand above the talk chip (both sat in the bottom left corner: the newest caption was under it) */
html:not(.touch) body.ps-ui #hud:has(#hud-talk:not([hidden])) .captions { bottom: calc(var(--s10) + var(--s16) + var(--s4)); }
html.touch body.ps-ui #practice-sd, html.touch body.ps-ui .practice kbd, html.touch body.ps-ui .practice-head span, html.touch body.ps-ui #hud-talk { display: none !important; }
body.ps-ui #ui.dialing .toast:not(:first-child) { display: none; }
html.touch body.ps-ui #ui.dialing .toasts { display: none; }
/* while the start card is up its own words tell the goal: the objective plate would run into the blinking title */
body.ps-ui #hud:has(> #click-to-play[data-state="start"]:not([hidden])) .objective { visibility: hidden; }
/* the start / pause backdrops (Classic: .click-to-play { background: rgba(10,14,30,.55) }) */
body.ps-ui .click-to-play { background: rgba(2, 9, 12, .3); }
body.ps-ui .click-to-play[data-state="paused"] { background: rgba(2, 9, 12, .16); }
/* practice tools on a phone: next to Pause, collapsed to their name */
html.touch body.ps-ui .practice { top: var(--s8); right: auto; left: calc(38 * var(--u)); width: auto; }
html.touch body.ps-ui .practice:not(.open) { width: auto; }
/* left-handed (touch.css swaps the thumbs' sides; the top rows follow): Pause goes right, so the practice tools go right and the items go left */
html.touch.touch-lefty body.ps-ui .practice { left: auto; right: calc(38 * var(--u)); }
html.touch.touch-lefty body.ps-ui .hud-chips { right: auto; left: var(--s8); align-items: stretch; }
/* what touch.css did for the interface that the revert took away: the notch (the whole interface sits inside the safe area), taps on the combination lock,
   no double-tap zoom, no tap flash, no scroll chaining out of a page */
html.touch body.ps-ui #ui { inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
html.touch body.ps-ui #hud-dial { pointer-events: auto; z-index: 2; }
html.touch body.ps-ui .wheel { cursor: pointer; }
html.touch body.ps-ui :where(#ui, .settings-modal) :where(button, summary, .click-to-play, label) { touch-action: manipulation; }
html.touch body.ps-ui :is(#ui *, .settings-modal, .settings-modal *) { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.touch body.ps-ui :is(#lobby, #end, .timeline, .settings-body, .settings-modal) { overscroll-behavior: contain; }
html.touch body.ps-ui #ui.dialing .hud-chips { display: none; }   /* (the lock says what you know; the phone's thumbs need the corner) */

/* ================================================================ PHONE, narrow and short (667 x 375, 740 x 360, 844 x 340): nothing is wider than the glass */
@media (max-height: 500px) {
  body.ps-ui #lobby .lobby-card { width: min(calc(190 * var(--u)), calc(100vw - 150 * var(--u))); }
  body.ps-ui #lobby .lobby-head-text { width: min(calc(176 * var(--u)), calc(100vw - 240 * var(--u))); }
  body.ps-ui .settings-card { width: min(calc(392 * var(--u)), calc(100vw - 8 * var(--u))); }
  body.ps-ui .click-to-play .ctp-card { width: min(calc(292 * var(--u)), calc(100vw - 16 * var(--u))); }
  body.ps-ui .click-to-play[data-state="paused"] .ctp-card { width: min(calc(272 * var(--u)), calc(100vw - 40 * var(--u))); }
  body.ps-ui .hud-top { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(240 * var(--u)), calc(100vw - 184 * var(--u))); }
  body.ps-ui .hud-top .objective { max-width: 100%; }
  body.ps-ui #end .end-card { grid-template-columns: min(calc(152 * var(--u)), 46vw) 1fr; }
  body.ps-ui #lobby.rules-page #lobby-options { width: min(calc(150 * var(--u)), 44vw); }
  body.ps-ui #lobby.rules-page .lobby-help { width: min(calc(150 * var(--u)), 44vw); }
  body.ps-ui #lobby.rules-page #lobby-how { left: calc(min(calc(150 * var(--u)), 44vw) + 22 * var(--u)); }
}
@media (max-height: 380px) {
  body.ps-ui .click-to-play .ctp-title { font-size: var(--em); line-height: var(--s14); text-shadow: var(--tsh); }
  body.ps-ui .click-to-play:not([data-state="paused"]) .ctp-card { margin-top: calc(32 * var(--u)); }
  body.ps-ui .click-to-play[data-state="paused"] .ctp-title { height: var(--s14); }
  body.ps-ui .click-to-play[data-state="paused"] .ctp-title::before { top: var(--s1); }
  body.ps-ui .click-to-play[data-state="paused"] .ctp-card { margin-top: var(--s24); }
}
@media (max-height: 500px) and (max-width: 780px) {
  body.ps-ui #lobby.joined .lobby-head-text, body.ps-ui #lobby.joined .lobby-help { display: none; }   /* no room beside the wider "In the house" card */
  body.ps-ui #lobby.joined .lobby-card { width: min(calc(226 * var(--u)), calc(100vw - 20 * var(--u))); right: var(--s10); }
}
@media (max-height: 380px) {
  body.ps-ui #end .end-banner { font-size: var(--em); line-height: var(--s14); margin: 0 0 var(--s2); text-shadow: var(--tsh); }
  body.ps-ui #end .end-reason { margin-bottom: var(--s3); }
}
@media (max-height: 500px) {
  body.ps-ui #lobby .lobby-help { width: min(calc(184 * var(--u)), calc(100vw - 250 * var(--u))); }
}

/* phone: the four ways to play are the thing you tap most: 18u rows (36 CSS px); the secondary rows stay 14u */
@media (max-height: 500px) {
  body.ps-ui #lobby .play-btn { height: calc(18 * var(--u)); --hand-top: var(--s3); }
}

/* ---------------------------------------------------------------- dawn (1.6): the clock plate at dawn, the morning outro */
/* The plate keeps its dark idiom; from 05:30 a gold band rises from its bottom edge (--dawn 0..1) and the moon sprite
   becomes a sun (--spr-sun, ui-retro.js) that climbs out of the plate's floor in whole pixels. */
body.ps-ui .clock-pill.dawn { background: linear-gradient(to top, rgba(226, 207, 120, calc(0.1 + var(--dawn) * 0.32)) 0, transparent calc(var(--s14) * 0.8)), var(--plate); }
body.ps-ui .clock-pill.dawn::before { background-image: var(--spr-sun); translate: 0 round(calc((1 - var(--dawn)) * 4 * var(--u)), var(--u)); clip-path: inset(0 0 round(calc((1 - var(--dawn)) * 4 * var(--u)), var(--u)) 0); }
body.ps-ui .clock-pill.dawn:not(.late) { color: var(--tx-hi); }
/* (#ui is reverted to the browser's defaults under the retro look, retro-compat.css: the outro's own rules again here) */
body.ps-ui #hud.outro > :not(.captions):not(#morning-banner) { display: none !important; }
body.ps-ui .morning-banner { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); display: flex; align-items: baseline; white-space: nowrap;
  gap: var(--s6); padding: var(--s6) var(--s12); font-size: var(--em2); line-height: var(--s24); color: var(--tx-hi); text-shadow: var(--tsh2);
  background: var(--plate); box-shadow: var(--bev-1); }
body.ps-ui .morning-banner[hidden] { display: none; }
body.ps-ui .morning-banner .mb-time { color: var(--yellow); }
body.ps-ui .morning-banner .mb-dot { opacity: 1; color: var(--tx-dim); }
body.ps-ui .morning-banner.pop { animation: ps-morning 0.6s steps(4) both; }
@keyframes ps-morning { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
body.ps-ui .how-clock { margin: var(--s4) 0 0; color: var(--ink); }   /* (on the rules page's paper, like the how-to lines) */
body.ps-ui #practice-dawn { order: 5; }


/* Gameplay: Keys is a lobby row; House rules stays scrollable on small screens. */
body.ps-ui #lobby #keys-btn-lobby { order: 19; }
body.ps-ui #lobby.rules-page #lobby-options { max-height: calc(100vh - 120px); overflow-y: auto; }
body.ps-ui #lobby.rules-page .lobby-help { top: auto; bottom: var(--s12); }

/* menu pass (2026-10-01): the phone's rules page gets the same one-line rows (a 844 x 390 phone is 422 x 195 u). The
   options take the left, the paper the rest; the help window steps aside (a tap needs no description), so the rows keep
   a thumb's height. */
@media (max-height: 500px) {
  body.ps-ui #lobby.rules-page #lobby-options { width: min(calc(196 * var(--u)), 58vw); }
  body.ps-ui #lobby.rules-page #lobby-how { left: calc(min(calc(196 * var(--u)), 58vw) + 18 * var(--u)); }
  body.ps-ui #lobby.rules-page .lobby-help { display: none; }
  body.ps-ui #lobby.rules-page .field { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: var(--row); margin: 0; }
  body.ps-ui #lobby.rules-page .field .seg { flex: none; }
  body.ps-ui #lobby.rules-page .field-label, body.ps-ui #lobby.rules-page .toggle-text { white-space: nowrap; flex: none; }
  body.ps-ui #lobby.rules-page #lobby-options .field, body.ps-ui #lobby.rules-page .toggle { margin: 0; }
  body.ps-ui #lobby.rules-page .toggle .toggle-track { margin-left: auto; }
  body.ps-ui #lobby.rules-page .house-rules-title { height: var(--s10); line-height: var(--s10); }
}

/* Round 3: compact declared choices, real roster rows, and bed details inside the window. */
body.ps-ui #lobby .choice-short { display:none; }
body.ps-ui #lobby .lobby-config, body.ps-ui #lobby .lobby-roster { min-width:0; }
body.ps-ui #lobby .choice-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); min-height:var(--row); }
body.ps-ui #lobby .house .field.choice-row { position:relative; padding-left:var(--s24); }
body.ps-ui #lobby .choice-row .field-label { flex:none; }
body.ps-ui #lobby .choice-row .seg { flex:none; }
body.ps-ui #lobby #parent-choice-field .choice-long { display:none; }
body.ps-ui #lobby #parent-choice-field .choice-short { display:inline; }
body.ps-ui #lobby #quick-setup { order:5; }
body.ps-ui #lobby #mode-label { display:none; }
body.ps-ui #lobby .house .field { padding-left:0; }
body.ps-ui #lobby .player-list li { height:auto; min-height:var(--s14); flex-wrap:wrap; gap:0 var(--s4); padding-left:0; }
body.ps-ui #lobby .player-heading { display:flex; align-items:center; gap:var(--s3); width:100%; min-width:0; }
body.ps-ui #lobby .player-heading .chip { flex:none; margin-left:0; height:auto; }
body.ps-ui #lobby .player-list .pname { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.ps-ui #lobby .player-chips { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); min-width:0; max-width:100%; }
body.ps-ui #lobby .player-chips .chip { margin-left:0; height:auto; white-space:normal; overflow-wrap:anywhere; }
body.ps-ui #lobby .lobby-actions { display:flex; gap:var(--s4); justify-content:space-between; }
body.ps-ui #lobby .lobby-actions #start-btn { width:auto; }
body.ps-ui #lobby .lobby-details { position:static; }
body.ps-ui #lobby .lobby-details > summary { display:flex; align-items:center; position:relative; height:var(--row); padding-left:var(--s24); color:var(--tx-dim); list-style:none; cursor:pointer; }
body.ps-ui #lobby .lobby-details > summary::-webkit-details-marker { display:none; }
body.ps-ui #lobby .lobby-details > summary.cur { color:var(--tx-hi); }
body.ps-ui #lobby .lobby-details > summary.cur::before { content:""; position:absolute; left:var(--s2); width:var(--s20); height:var(--s12); background:var(--spr-hand) 0 0 / 100% 100%; }
body.ps-ui #lobby .details-body { position:absolute; top:var(--s6); right:var(--s6); z-index:10; width:calc(100% - 12 * var(--u)); max-height:calc(100% - 12 * var(--u)); overflow:auto; overscroll-behavior:contain; padding:var(--s6); background:var(--win-br); color:var(--tx); box-shadow:var(--bev-2); }
body.ps-ui #lobby .bed-plan { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); }
body.ps-ui #lobby .bed-plan > div { min-width:0; }
body.ps-ui #lobby .bed-plan strong, body.ps-ui #lobby .bed-plan small { display:block; font:inherit; }
body.ps-ui #lobby .bed-plan button { font:inherit; text-shadow:var(--tsh); color:var(--tx-dim); background:none; border:0; border-radius:0; padding:var(--s2); cursor:pointer; }
body.ps-ui #lobby .bed-plan button[aria-pressed="true"] { color:var(--yellow); }
body.ps-ui #lobby .bed-owner { overflow-wrap:anywhere; }
body.ps-ui #lobby #bed-swap-target { display:block; width:100%; font:inherit; color:var(--tx); background:var(--win-br); border:var(--u) solid var(--tx-dim); border-radius:0; }
body.ps-ui #lobby #bed-status, body.ps-ui #lobby #bed-priority { margin:var(--s4) 0; }
@media (max-height:500px), (min-width:853px) {
  body.ps-ui #lobby.joined { --row:var(--s14); }
  body.ps-ui #lobby:not(.rules-page) .lobby-card { max-height:calc(100dvh - 16 * var(--u)); }
  body.ps-ui #lobby.joined:not(.rules-page) .lobby-card { left:var(--s10); right:var(--s10); width:auto; max-width:calc(360 * var(--u)); margin:0 auto; top:var(--s8); 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.joined:not(.rules-page) .house { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:0 var(--s10); align-items:start; }
  body.ps-ui #lobby .lobby-roster { grid-column:1; grid-row:1 / 3; }
  body.ps-ui #lobby .lobby-config { grid-column:2; grid-row:1; }
  body.ps-ui #lobby .mic-row { grid-column:2; grid-row:2; margin-top:var(--s3); gap:0; }
  body.ps-ui #lobby .mic-row .btn { padding-left:var(--s24); }
  body.ps-ui #lobby .mic-row .meter { display:none; }
  body.ps-ui #lobby .house .field { padding-left:0; }
  body.ps-ui #lobby .house .field-label { height:auto; }
  body.ps-ui #lobby .choice-long { display:none; }
  body.ps-ui #lobby .choice-short { display:inline; }
  body.ps-ui #lobby #mode-label { display:none; }
  body.ps-ui #lobby .player-heading, body.ps-ui #lobby .player-chips { line-height:var(--s12); }
  body.ps-ui #lobby .player-heading .chip { height:auto; }
  body.ps-ui #lobby .player-chips { flex-basis:100%; }
  body.ps-ui #lobby .player-list li { height:auto; margin-bottom:var(--s2); }
  body.ps-ui #lobby .player-chips .chip { background:none; box-shadow:none; padding:0; }
  body.ps-ui #lobby .player-chips .chip + .chip::before { content:" · "; }

}