/* AfterBedtime, the retro interface ("the blue window": Final Fantasy / Silent Hill windows in a drowned, stained grey-teal).
   Everything is scoped under body.ps-ui (= a retro look is on AND Settings → Interface is not Classic; world-ps1.js _ui() and the
   pre-paint script in index.html set it), so Modern and Classic stay exactly as they were. The Classic sheets (ui.css, settings.css,
   touch.css) sit in `@layer classic`; unlayered rules win over any layer, so retro-compat.css can revert them in one rule.
   ONE PIXEL: --u = 1/240 of the screen height in WHOLE DEVICE pixels, never under 2 CSS px (ui-retro.js setU sets it: 1080p = 4px,
   a phone = 2px). Every length below is a multiple of --u. The words shown DURING PLAY (the action line, the toast line, the goal) are
   drawn smaller, on --hu = 0.6 u in whole device pixels (setU too; ui-model.js huFor): their type is 12 hu, so PS Win stays crisp.
   No radius, blur, glow or easing anywhere; borders are painted bevels (canvas) or hard box-shadow rings. */

/* PS Win: our own pixel font (tools/font), 12 font pixels per em: font-size is ALWAYS 12u or 24u. Only requested under body.ps-ui. */
@font-face { font-family: "PS Win"; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/ps-win.ttf) format("truetype"); }

body.ps-ui {
  --u: 4px;
  --hu: calc(var(--u) / 2);   /* (until ui-retro.js setU has run) */
  /* ---- spacing scale (whole multiples of --u) */
  --s1: var(--u); --s2: calc(2 * var(--u)); --s3: calc(3 * var(--u)); --s4: calc(4 * var(--u)); --s5: calc(5 * var(--u));
  --s6: calc(6 * var(--u)); --s8: calc(8 * var(--u)); --s10: calc(10 * var(--u)); --s12: calc(12 * var(--u));
  --s14: calc(14 * var(--u)); --s16: calc(16 * var(--u)); --s20: calc(20 * var(--u)); --s24: calc(24 * var(--u));
  --s32: calc(32 * var(--u)); --s40: calc(40 * var(--u));

  /* ---- type: PS Win draws on a 12-pixel em; 1 font pixel = 1 u. Size is ALWAYS 12u (1x) or 24u (2x), never in between */
  --f-ui: "PS Win", "Courier New", ui-monospace, monospace;
  --em: calc(12 * var(--u));      /* 1x: body, menus, prompts */
  --em2: calc(24 * var(--u));     /* 2x: titles, digits, banners */
  --lh: calc(14 * var(--u));      /* prose line pitch */
  --row: calc(16 * var(--u));     /* menu row pitch */
  --tsh: var(--u) var(--u) 0 #000;                                  /* every glyph: one hard black pixel, down-right */
  --tsh2: calc(2 * var(--u)) calc(2 * var(--u)) 0 #000;            /* 2x text */

  /* ---- palette: the window is FF7's four-corner Gouraud quad in drowned grey-teal (FF7: #0058b0 #000050 #000080 #000020) */
  --win-tl: #38747f; --win-tr: #123040; --win-bl: #23566a; --win-br: #07161e;
  --win-line: #050a0c;                                    /* 1u outline */
  --win-hi1: #eeeadb; --win-hi2: #aebcbb;                 /* bevel, top/left: dirty white, then silver */
  --win-lo1: #8a9c9d; --win-lo2: #3f5559;                 /* bevel, bottom/right */
  --win-groove: #07121a;                                  /* the inner shadow line */
  --plate-tl: #0d232b; --plate-tr: #071319; --plate-bl: #0a1b22; --plate-br: #040b0e;   /* message / HUD plate */
  --stain: #7d6630; --stain-dark: #4a3818; --rust: #6b3a22;
  --orb-a: #38747f; --orb-b: #0a1c23;
  --paper: #cfc7a6; --paper-2: #b8ae88; --paper-rule: #8fa3b0; --paper-margin: #b8564a; --ink: #1c2540; --ink-red: #8c2f24;
  --tx: #eeeadb;            /* text */
  --tx-hi: #ffffff;         /* text under the cursor */
  --tx-dim: #c3d3d0;        /* secondary */
  --tx-seg: #adc2bf;        /* the choices you are not on (the chosen one is white + underlined) */
  --tx-off: #8ba3a5;        /* disabled: never the only carrier of meaning */
  --yellow: #e2cf78; --red: #ee6f57; --green: #93cf8a; --phos: #8fe0d2;
  --veil: rgba(2, 9, 12, 0.42);
  /* plates (HUD, prompts, toasts): flat dark fill + hard bevel rings built from box-shadow (no blur, no radius) */
  --plate: rgba(4, 15, 20, .8);
  --bev-1: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 0 rgba(174, 188, 187, .7), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 rgba(63, 85, 89, .95);
  --bev-2: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 0 var(--win-hi1), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--win-lo1),
           inset calc(2 * var(--u)) calc(2 * var(--u)) 0 0 var(--win-hi2), inset calc(-2 * var(--u)) calc(-2 * var(--u)) 0 0 var(--win-lo2), var(--u) var(--u) 0 var(--u) rgba(0, 0, 0, .55);
}
/* the text setup lives on the retro roots (#ui and the Settings modal), not on <body>: the canvas and the dev panels keep theirs */
body.ps-ui #ui, body.ps-ui .settings-modal {
  color: var(--tx);
  font: 400 var(--em) / var(--lh) var(--f-ui);
  text-shadow: var(--tsh);
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
  letter-spacing: 0;
  image-rendering: pixelated;
}
body.ps-ui :is(#ui, .settings-modal) *, body.ps-ui :is(#ui, .settings-modal) *::before, body.ps-ui :is(#ui, .settings-modal) *::after { box-sizing: border-box; }
body.ps-ui [hidden] { display: none !important; }

/* ---------------------------------------------------------------- the world behind (in the game: the canvas) */
body.ps-ui .veil { position: fixed; inset: 0; background: var(--veil); }
/* the veil's edges: two dark bands top and bottom, four hard steps (a PS1 fade is a flat semi-transparent quad, never a blur) */
body.ps-ui .veil::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .46) 0 4%, rgba(0, 0, 0, .3) 4% 8%, rgba(0, 0, 0, .16) 8% 12%, transparent 12% 88%, rgba(0, 0, 0, .16) 88% 92%, rgba(0, 0, 0, .3) 92% 96%, rgba(0, 0, 0, .46) 96% 100%); }
body.ps-ui #ui { position: fixed; inset: 0; }
body.ps-ui .screen { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- windows */
/* [data-win] = a painted window (ui-retro.js paints its background into --paint: frame, four-corner gradient, dither, stains). The frame is 4u.
   The kind (blue | dark | slot | paper) is the attribute's value; orbs and rings (the touch layer) are painted differently and styled below.
   :where() keeps these base rules at the lowest specificity, so every screen's own rule (position, padding ...) wins. */
body.ps-ui :where([data-win="blue"], [data-win="dark"], [data-win="slot"], [data-win="paper"]) { position: relative; padding: var(--s8) var(--s10); image-rendering: pixelated; background: var(--paint, none) 0 0 / 100% 100% no-repeat var(--win-br); }
body.ps-ui :where([data-win="dark"]) { padding: var(--s6) var(--s8); background-color: transparent; }
body.ps-ui :where([data-win="slot"]) { padding: var(--s3) var(--s4); background-color: #061217; }
body.ps-ui :where([data-win="paper"]) { color: var(--ink); text-shadow: none; padding: var(--s8) var(--s10) var(--s6) calc(22 * var(--u)); background-color: var(--paper); }
/* a hard drop shadow under every window: 3u down-right, 50 % black, no blur (box-shadow paints below the painted frame) */
body.ps-ui :where([data-win="blue"], [data-win="dark"], [data-win="paper"]) { box-shadow: var(--s3) var(--s3) 0 0 rgba(0, 0, 0, .5); }

/* STATIC: the windows are a bad signal. Every 9-17 s (per window, offset) a 3-frame burst of snow crosses one band of the window
   and the band shifts 1u sideways; the rest of the time nothing moves. steps() only, 15 Hz feel. */
body.ps-ui [data-win="blue"]::after, body.ps-ui [data-win="dark"]::after { content: ""; position: absolute; left: var(--s4); right: var(--s4); top: var(--tear-y, 40%); height: var(--s6); pointer-events: none;
  background: var(--spr-noise) 0 0 / calc(64 * var(--u)) calc(64 * var(--u)); opacity: 0; animation: ps-static var(--flick, 13s) steps(1) infinite; animation-delay: var(--flick-d, 3s); }
body.ps-ui [data-win="dark"]::after { --flick: 17s; --tear-y: 60%; }
body.ps-ui .settings-card[data-win]::after { --flick: 11s; --flick-d: 7s; --tear-y: 30%; }
body.ps-ui #lobby-help[data-win]::after { --flick: 15s; --flick-d: 1s; }
@keyframes ps-static { 0%, 94% { opacity: 0; background-position: 0 0; } 94.2% { opacity: .55; background-position: calc(-17 * var(--u)) calc(-9 * var(--u)); } 95.4% { opacity: .35; background-position: calc(-41 * var(--u)) calc(-29 * var(--u)); } 96.6% { opacity: .2; background-position: calc(-5 * var(--u)) calc(-31 * var(--u)); } 97.8%, 100% { opacity: 0; } }
@keyframes ps-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ps-bob { 0%, 49% { transform: translateX(0); } 50%, 100% { transform: translateX(var(--u)); } }
@media (prefers-reduced-motion: reduce) { body.ps-ui *, body.ps-ui *::before, body.ps-ui *::after { animation: none !important; } }

/* headings inside a window: yellow, 1u dotted rule under */
body.ps-ui .col-title, body.ps-ui .win-title { margin: 0 0 var(--s3); font: inherit; color: var(--yellow); display: flex; align-items: baseline; justify-content: space-between; height: var(--s12); }
body.ps-ui .col-title .count { color: var(--tx-dim); }
body.ps-ui .field-label { display: block; color: var(--tx-dim); margin: 0 0 var(--s1); }
body.ps-ui .field-label small { color: var(--tx-off); font-size: inherit; }
body.ps-ui :is(#ui, .settings-modal) small { font-size: inherit; color: var(--tx-dim); }
body.ps-ui .hint, body.ps-ui .settings-note { margin: var(--s2) 0 0; color: var(--tx-dim); }

/* ---------------------------------------------------------------- the cursor (a glove, 20 x 12 u) and menu rows */
body.ps-ui .menu, body.ps-ui .play-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body.ps-ui .menu-row, body.ps-ui .play-btn, body.ps-ui details.more > summary, body.ps-ui .menu-btn {
  position: relative; display: flex; align-items: center; height: var(--row); padding: 0 var(--s4) 0 var(--s24); margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--tx-dim); font: inherit; text-align: left; text-shadow: var(--tsh);
  cursor: pointer; width: 100%; list-style: none; justify-content: flex-start; }
body.ps-ui details.more > summary::-webkit-details-marker { display: none; }
body.ps-ui details.more > summary::before { display: none; }
body.ps-ui :is(.menu-row, .play-btn, .menu-btn, .btn, details.more > summary, .legend-more > summary).cur { color: var(--tx-hi); }
body.ps-ui :is(.menu-row, .play-btn, .menu-btn, .btn, details.more > summary, .legend-more > summary, .field, .settings-row, .toggle).cur::before, body.ps-ui .hand::before {
  content: ""; display: block; position: absolute; left: var(--hand-left, var(--s2)); top: var(--hand-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 .play-btn .ico { display: none; }
body.ps-ui .play-text { display: block; }
body.ps-ui .play-main small { color: var(--tx-off); }
body.ps-ui .play-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* (read by the help window and by screen readers) */
body.ps-ui .menu-rule { height: var(--s1); margin: var(--s2) var(--s4) var(--s2) var(--s4); background: rgba(174, 188, 187, .3); }
body.ps-ui .menu-row.is-disabled, body.ps-ui .menu-btn:disabled { color: var(--tx-off); }

/* help window: the line for the row under the cursor (FF7: description on top) */
body.ps-ui .help { padding: var(--s6) var(--s10) var(--s5); min-height: var(--s24); color: var(--tx); }
body.ps-ui .help .dim { color: var(--tx-dim); }

/* ---------------------------------------------------------------- segmented choices and toggles: words, chosen one lit and underlined */
body.ps-ui .seg { display: flex; flex-wrap: wrap; gap: 0 var(--s6); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
body.ps-ui .seg button { position: relative; height: var(--s14); padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--tx-seg); font: inherit; text-shadow: var(--tsh); cursor: pointer; }
body.ps-ui .seg button[aria-pressed="true"], body.ps-ui .seg button[aria-checked="true"], body.ps-ui .seg button.on { color: var(--tx-hi); }
body.ps-ui .seg button[aria-pressed="true"]::after, body.ps-ui .seg button[aria-checked="true"]::after, body.ps-ui .seg button.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--s1); height: var(--s1); background: var(--yellow); box-shadow: var(--u) var(--u) 0 #000; }
body.ps-ui .seg button:disabled { color: var(--tx-off); opacity: .7; }
body.ps-ui .toggle { display: flex; align-items: center; gap: var(--s6); min-height: var(--row); position: relative; }
body.ps-ui .toggle input { position: absolute; opacity: 0; pointer-events: none; }
body.ps-ui .toggle .toggle-track { order: 2; display: flex; gap: var(--s6); width: auto; height: auto; background: none; border: 0; border-radius: 0; box-shadow: none; position: relative; margin-left: auto; }
body.ps-ui .toggle .toggle-track > i { display: none; }
body.ps-ui .toggle .toggle-track::before, body.ps-ui .toggle .toggle-track::after { position: relative; color: var(--tx-seg); }
body.ps-ui .toggle .toggle-track::before { content: "On"; }
body.ps-ui .toggle .toggle-track::after { content: "Off"; color: var(--tx-hi); box-shadow: 0 var(--s1) 0 -0px transparent; }
body.ps-ui .toggle input:checked + .toggle-track::before { color: var(--tx-hi); }
body.ps-ui .toggle input:checked + .toggle-track::after { color: var(--tx-seg); }
body.ps-ui .toggle .toggle-text { order: 1; }
body.ps-ui .toggle .toggle-text small { display: none; }

/* ---------------------------------------------------------------- key caps (kbd): a 9u plate with a bevel */
body.ps-ui :is(#ui, .settings-modal) kbd { display: inline-block; min-width: var(--s10); height: var(--s10); margin: 0 var(--s1); padding: 0 var(--s2); vertical-align: middle; position: relative; top: calc(-1 * var(--u));
  background: #d8d5c5; color: #0a1b22; font: inherit; line-height: var(--s10); text-align: center; border-radius: 0; text-shadow: none;
  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; }

/* ---------------------------------------------------------------- input, meter, sliders */
body.ps-ui .field { margin: 0 0 var(--s2); }
body.ps-ui #name-input { width: 100%; height: var(--s12); padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0;
  color: var(--tx-hi); font: inherit; text-shadow: var(--tsh); caret-color: var(--yellow); }
body.ps-ui #name-input::placeholder { color: var(--tx-off); opacity: 1; }
body.ps-ui .meter { position: relative; width: var(--s40); height: var(--s6); background: #04101a; border-radius: 0; overflow: hidden;
  box-shadow: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 #020608; }
/* 8 cells, hard-stopped, lit ones green: the level as a stepped bar */
body.ps-ui .meter > i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--green) 0 calc(4 * var(--u)), transparent 0 calc(5 * var(--u))); transform-origin: left; transform: scaleX(var(--lvl, .55)); transition: none; border-radius: 0; }
body.ps-ui .meter-small { width: var(--s32); }
body.ps-ui .settings-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--s16) auto; align-items: center; column-gap: var(--s6); min-height: var(--row); margin: 0; position: relative; padding-left: var(--s20); }
body.ps-ui .settings-row .settings-label { display: block; color: var(--tx-dim); }
body.ps-ui .settings-row .settings-label small { display: none; }
body.ps-ui .settings-row.cur .settings-label, body.ps-ui .settings-row.cur output { color: var(--tx-hi); }
body.ps-ui .settings-row.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-row output { order: 3; color: var(--yellow); text-align: right; min-width: var(--s20); }
body.ps-ui .settings-row input[type="range"] { order: 2; -webkit-appearance: none; appearance: none; width: calc(96 * var(--u)); height: var(--s6); margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  --p: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(9 * var(--u)), rgba(0, 0, 0, .55) calc(9 * var(--u)) calc(10 * var(--u))),
    linear-gradient(90deg, #f4f0e4 0, #b9d3d2 calc(var(--p) * .5), #4f97a3 var(--p), #04101a var(--p));
  box-shadow: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 rgba(0, 0, 0, .55), var(--u) var(--u) 0 var(--u) rgba(0, 0, 0, .5); }
body.ps-ui .settings-row input[type="range"]::-webkit-slider-runnable-track { height: var(--s6); background: transparent; border-radius: 0; }
body.ps-ui .settings-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--s2); height: var(--s10); margin-top: calc(-2 * var(--u)); border-radius: 0; background: #fff; box-shadow: 0 0 0 var(--u) #000; border: 0; }

/* ---------------------------------------------------------------- buttons (.btn): plain menu words, never chips */
body.ps-ui .btn { position: relative; display: inline-flex; align-items: center; height: var(--row); padding: 0 var(--s4) 0 var(--s24); margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--tx-dim); font: inherit; text-shadow: var(--tsh); cursor: pointer; justify-content: flex-start; }
body.ps-ui .btn.cur { color: var(--tx-hi); }
body.ps-ui .btn.cur::before { content: ""; display: block; position: absolute; left: var(--s2); top: var(--hand-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 .btn-honey { color: var(--yellow); }
body.ps-ui .btn-honey.cur { color: #fff2a0; }
body.ps-ui .btn-small { padding-left: var(--s24); }

/* ---------------------------------------------------------------- chips (small tags) */
body.ps-ui .chip { display: inline-block; height: var(--s10); padding: 0 var(--s2); margin-left: var(--s3); line-height: var(--s10); background: #071820; color: var(--tx-dim); border-radius: 0; font: inherit; text-shadow: none;
  box-shadow: 0 0 0 var(--u) #000, inset var(--u) var(--u) 0 var(--win-lo1), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--win-groove); }
body.ps-ui .chip.parent { color: var(--yellow); }
body.ps-ui .chip.child { color: var(--phos); }
body.ps-ui .chip.bot { color: var(--tx-dim); }

/* (touch mode: html.touch, set before first paint. .touch-only / .desk-only / .dial-pad are hidden by touch.css with !important, which survives the revert in retro-compat.css.) */

/* ---------------------------------------------------------------- the cursor: ONE glove, on the row that has .cur (ui-retro.js moves it with the
   pointer, the arrow keys and focus; never two). Hover and focus only recolour a choice; they never draw a second glove. */
body.ps-ui :focus { outline: none; }
body.ps-ui .seg button:focus-visible, body.ps-ui .seg button:hover { color: var(--tx-hi); }
body.ps-ui .legend-more > summary::-webkit-details-marker { display: none; }
body.ps-ui .legend-more > summary::marker { content: ""; }

/* PS1 voice test: use the same square, inherited-font control in the retro Sound pane. */
body.ps-ui .settings-modal select[data-k="voiceMode"] { width: 100%; font: inherit; color: var(--tx); background: #11162c; border: var(--u) solid var(--tx-dim); border-radius: 0; padding: var(--s1); }