:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; font-family: system-ui, sans-serif; }
#tv-hint { position: fixed; left: 1.2rem; top: 1rem; z-index: 6; font: 0.8rem/1.5 system-ui, sans-serif; letter-spacing: 0.04em; color: #7c8085; pointer-events: none; transition: opacity .4s linear; }
#tv-hint[hidden] { display: none !important; }
#tv { position: fixed; inset: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; background: #000; }
/* The real OSD is a 4:3 picture; we letterbox/pillarbox it like a TV. */
#picture { position: relative; aspect-ratio: 4 / 3; width: min(100vw, calc(100vh * 4 / 3)); height: min(100vh, calc(100vw * 3 / 4)); overflow: hidden; background: #000; container-type: size; }
#picture.wide { aspect-ratio: 16 / 9; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); }
#picture.fill { width: 100vw; height: 100vh; aspect-ratio: auto; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter .35s ease; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui * { pointer-events: none; }
#ui.pending .screen, #ui.pending .screen * { visibility: hidden !important; }
#ui .clickable { pointer-events: auto; cursor: pointer; }
#fade { position: absolute; inset: 0; background: #000; opacity: 1; pointer-events: none; }
/* --- CRT television (year-2000 consumer tube), kept subtle: a faint raster, a soft edge fall-off, a hint of bloom --- */
#crt { display: none; }
/* the picture is rendered at 448 lines and upscaled: keep the upscale soft, with a touch of phosphor glow on the text */
#picture.crt #gl { filter: blur(0.05cqh) saturate(1.05); }
#picture.crt #ui .screen { text-shadow: 0 0 0.6cqh rgba(255, 255, 255, 0.16); }
#picture.crt #crt {
  display: block; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    /* edge fall-off: the corners sit a little deeper in the dark */
    radial-gradient(ellipse 82% 86% at 50% 50%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.12) 92%, rgba(0, 0, 0, 0.28) 100%),
    /* raster: one faint gap per pair of lines */
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0.21cqh, rgba(0, 0, 0, 0.09) 0.21cqh, rgba(0, 0, 0, 0.09) 0.42cqh);
  box-shadow: inset 0 0 4cqh rgba(0, 0, 0, 0.25);
  /* a slow breath in brightness instead of a flicker */
  animation: crt-breathe 6s ease-in-out infinite;
}
@keyframes crt-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } }
@media (prefers-reduced-motion: reduce) { #picture.crt #crt { animation: none; } }
/* --- OSD typography (font choice pending research; see typography.md) --- */
/* TeX Gyre Heros (GUST Font License, assets/fonts/GUST-FONT-LICENSE.txt): a Helvetica-metric clone, the closest free match
   to the OSD's rom0:FONTM letterforms (research/typography.md). Cap height = 0.729 em. */
@font-face { font-family: "TeX Gyre Heros"; src: url("assets/fonts/texgyreheros-regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "TeX Gyre Heros"; src: url("assets/fonts/texgyreheros-bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
:root { --osd-font: "TeX Gyre Heros", "Nimbus Sans", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif; }
/* The "Sony Computer Entertainment" plate: a pre-rendered texture of a bold Helvetica-class face, slightly extended,
   white with a soft black outline. Cap height 4.0 % H, cap box centred at 49.5 % H, string ~58 % of the width. */
.sce-text { position: absolute; left: 50%; top: 49.5cqh; transform: translate(-50%, -50%) scaleX(1.05); white-space: nowrap; font-family: var(--osd-font); font-weight: 700; font-size: calc(4.0cqh / 0.729); line-height: 1; color: #f2f5f7; letter-spacing: 0.02em; paint-order: stroke fill; -webkit-text-stroke: min(0.09em, 1.2px) rgba(0, 0, 0, 0.9); filter: blur(0.06cqh); }
/* small pictures (phones): the outline and softening that read as "CRT" on a big screen just smear 15 px glyphs */
@container (max-height: 420px) { .sce-text { filter: none; -webkit-text-stroke-width: 0.5px; } #ui .screen { -webkit-text-stroke-width: 0.4px; } #picture.crt #ui .screen { text-shadow: none; } }

/* ===================== OSD screens ===================== */
:root {
  --osd-menu-font: var(--osd-font);
  /* measured on the PCSX2 capture (digital truth): selected cyan, unselected dark grey, yellow-green titles,
     secondary text = white at 68 % alpha, bright white for current-row labels */
  --c-yellow: #cdd711; --c-cyan: #44c8ff; --c-grey: #404245; --c-white: rgba(255, 255, 255, 0.68); --c-bright: #f0f4f6; --c-dim: #404245;
  /* cap height of TeX Gyre Heros; sizes below are given as cap heights in % of the picture height */
  --cap: 0.729;
}
#ui { font-family: var(--osd-menu-font); font-weight: 400; color: var(--c-white); letter-spacing: 0.045em; line-height: 1; }
/* the OSD text carries a thin dark outline on the console (painted under the fill so the letterforms keep their weight) */
#ui .screen { paint-order: stroke fill; -webkit-text-stroke: min(0.045em, 1px) rgba(0, 0, 0, 0.85); }
/* Text is positioned by baseline: an element with line-height 1 puts its baseline at ~0.93 em from the top for this font. */
.screen { position: absolute; inset: 0; white-space: pre; }
.bl { position: absolute; transform: translateY(-0.93em); }
.title { position: absolute; color: var(--c-yellow); }
.selected { color: var(--c-cyan); }
.small { font-size: 0.75em; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0.10em; }
/* bottom button hints: a row at 91% of the height, items spread like the real OSD */
[hidden] { display: none !important; }
/* Button hints: cap 3.5 % H on a baseline at 93.3 % H; each glyph keeps its column (□ 4.6 %, ✕ 34.1 %, ○ 53.0 %, △ 79.0 % W),
   the word starts ~0.67 cap after the glyph. */
.osd-hints { position: absolute; left: 0; right: 0; top: 93.3cqh; height: 0; font-size: calc(3.5cqh / var(--cap)); color: var(--c-white); }
.hint { position: absolute; top: 0; transform: translateY(-0.93em); display: inline-flex; align-items: baseline; gap: 2.3cqh; }
.hint .btn { height: 3.3cqh; width: 3.3cqh; align-self: center; transform: translateY(0.05cqh); }
.hint[data-btn="square"] { left: 4.6cqw; } .hint[data-btn="cross"] { left: 34.1cqw; } .hint[data-btn="circle"] { left: 53.0cqw; } .hint[data-btn="triangle"] { left: 79.0cqw; }
.hint .btn { height: 3.9cqh; width: 3.9cqh; filter: drop-shadow(0 0.25cqh 0.35cqh rgba(0,0,0,.55)); }
/* --- main menu: items centred on a column at 67.7 % W, cap 4.8 % H, baselines 49.3 % and 56.3 % H --- */
.main-menu .menu-list { position: absolute; left: 67.7cqw; top: 0; width: 0; }
.main-menu .menu-item { position: absolute; left: 0; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(4.8cqh / var(--cap)); color: var(--c-grey); }
.main-menu .menu-item:nth-child(1) { top: 49.3cqh; } .main-menu .menu-item:nth-child(2) { top: 56.3cqh; }
.main-menu .menu-item.selected { color: var(--c-cyan); }
/* --- version information: title cap 3.7 % H baseline 39.4 % centred at 69.2 % W; rows cap 3.4 % H, pitch 4.9 % H,
   labels right-aligned at 66.9 % W, values left-aligned at 72 % W; current row 1.1x --- */
.version .title { left: 69.2cqw; top: 39.4cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(3.7cqh / var(--cap)); }
.version .vtable { position: absolute; left: 0; right: 0; top: 53.5cqh; font-size: calc(3.4cqh / var(--cap)); }
.version .vrow { position: absolute; left: 0; right: 0; height: 0; }
.version .vrow:nth-child(1) { top: 0; } .version .vrow:nth-child(2) { top: 4.9cqh; } .version .vrow:nth-child(3) { top: 9.8cqh; } .version .vrow:nth-child(4) { top: 14.7cqh; } .version .vrow:nth-child(5) { top: 19.6cqh; } .version .vrow:nth-child(6) { top: 24.5cqh; }
.version .vlabel { position: absolute; right: calc(100% - 66.9cqw); transform: translateY(-0.93em); white-space: nowrap; color: var(--c-grey); }
.version .vvalue { position: absolute; left: 72cqw; transform: translateY(-0.93em); white-space: nowrap; color: var(--c-grey); }
.version .vrow.selected .vlabel { color: var(--c-cyan); font-size: 1.1em; }
.version .vrow.selected .vvalue { color: var(--c-bright); font-size: 1.1em; }
.version .vvalue.stack { display: flex; flex-direction: column; gap: 1.5cqh; }
.version .choice { color: var(--c-dim); }
.version .choice.selected { color: var(--c-cyan); }
/* --- system configuration: date/time cap 3.8 % H baseline 10.6 % (date left at 4.1 % W, time right edge 96 % W);
   title cap 4.7 % baseline 44.7 %, item cap 4.8 % baseline 55.6 %, value cap 4.7 % baseline 63.5 %, all centred at 67.6 % W --- */
.config .config-top { position: absolute; left: 4.1cqw; right: 4cqw; top: 10.6cqh; height: 0; font-size: calc(3.8cqh / var(--cap)); color: var(--c-white); }
.config .date { position: absolute; left: 0; transform: translateY(-0.93em); }
.config .time { position: absolute; right: 0; transform: translateY(-0.93em); display: inline-flex; align-items: baseline; gap: 2.3cqw; }
.config .date, .config .time-text, .config .clock-value, .config .field { font-variant-numeric: tabular-nums; letter-spacing: 0.10em; }
.config .pict.clock { height: 3.6cqh; width: 3.6cqh; align-self: center; }
.config .config-body { position: absolute; left: 67.6cqw; top: 0; width: 0; }
.config .title { position: absolute; left: 0; top: 44.7cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(4.7cqh / var(--cap)); }
.config .config-item { position: absolute; left: 0; top: 55.6cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(4.8cqh / var(--cap)); color: var(--c-cyan); }
.config .config-item .arrows-ud { position: absolute; left: 50%; margin-left: 26.4cqw; top: 50%; transform: translateY(-50%); height: 4cqh; width: 2.4cqh; opacity: 0.5; }
.config .config-value { position: absolute; left: 0; top: 63.5cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(4.7cqh / var(--cap)); color: var(--c-white); display: flex; gap: 2.5cqw; align-items: baseline; }
.config .config-value .choice { color: var(--c-dim); }
.config .config-value .choice.selected { color: var(--c-cyan); }
.config .config-value .pict { height: 3.6cqh; width: 2.4cqh; align-self: center; }
.config .config-value .pict path { fill: var(--c-cyan); }
.config .config-value.fields { gap: 0; }
.config .field.selected { color: var(--c-cyan); }
.config .config-item.editing { color: var(--c-white); }
.config-options .title { left: 67.6cqw; top: 44.7cqh; font-size: calc(4.7cqh / var(--cap)); }
.config-options .vtable { top: 53.5cqh; }
/* --- browser --- */
#picture[data-look="browser"] #gl, #picture[data-look="save"] #gl, #picture[data-look="logo"] #gl { visibility: hidden; }
.browser, .memcard { background: linear-gradient(118deg, #8b8b89 0%, #737371 22%, #575752 48%, #3b3a31 74%, #1c1b12 100%); }
.browser .ps2ghost { position: absolute; left: 3.8cqw; top: 6.8cqh; height: 5.6cqh; width: 12cqw; }
.browser-label { position: absolute; right: 3.5cqw; top: 11.5cqh; transform: translateY(-0.93em); color: var(--c-yellow); font-size: calc(3.7cqh / var(--cap)); }
.mc-slot { position: absolute; top: 45.8cqh; width: 11.7cqw; height: 15.5cqh; border-radius: 0.5cqh 0.5cqh 1.2cqh 1.2cqh; background: linear-gradient(180deg, #1b1b1b 0%, #101010 30%, #0c0c0c 100%); box-shadow: inset 0 0.3cqh 0 #2a2a2a; }
.mc-slot::before { content: ''; position: absolute; left: 38%; width: 24%; top: 6%; height: 5%; background: #2c2c2c; border-radius: 0.3cqh; }
.mc-slot::after { content: ''; position: absolute; left: 10%; right: 10%; top: 44%; height: 34%; background: #171717; box-shadow: inset 0 0 0 1px #262626; }
.mc-slot[data-slot="0"] { left: 31.9cqw; } .mc-slot[data-slot="1"] { left: 56.4cqw; }
.mc-glow { position: absolute; inset: -30%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.45) 35%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity .15s linear; z-index: 1; pointer-events: none; }
.mc-slot.selected .mc-glow { opacity: 1; }
/* --- memory card contents --- */
.memcard .mc-head { position: absolute; left: 8.4cqw; top: 0; }
.memcard .mc-head .browser-label { position: absolute; left: 0; right: auto; top: 11.5cqh; color: var(--c-bright); white-space: nowrap; }
.memcard .mc-free { position: absolute; left: 0; top: 15.7cqh; transform: translateY(-0.93em); white-space: nowrap; color: #ececec; font-size: calc(2.7cqh / var(--cap)); }
.memcard .mc-icon-slot { position: absolute; left: 4.2cqw; top: 7.9cqh; width: 2.6cqw; height: 3.6cqh; background: #0d0d0d; border-radius: 0.3cqh; }
.memcard .save-title { position: absolute; right: 3.5cqw; top: 11.5cqh; transform: translateY(-0.93em); color: var(--c-yellow); font-size: calc(3.5cqh / var(--cap)); text-align: right; line-height: 1.71; }
.save-glow { position: absolute; width: 16cqw; height: 16cqh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 72%); opacity: 0; }
.save-cell.selected .save-glow { opacity: 1; }
/* 3D save icons: CSS faces on a tilted, slowly turning stage (see ui/icon3d.js); --u is the object's unit size */
.save-icon { position: relative; width: 7cqh; height: 7cqh; --u: 6.4cqh; perspective: calc(var(--u) * 5); }
.save-icon.big { position: absolute; left: 12cqw; top: 33cqh; width: 26cqh; height: 35cqh; --u: 22cqh; }
.save-icon .i3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-16deg); }
.save-icon .spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: i3d-spin 9s linear infinite; }
.save-icon .g { position: absolute; inset: 0; transform-style: preserve-3d; }
.save-icon .f { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; background: linear-gradient(160deg, var(--c) 0%, color-mix(in srgb, var(--c) 55%, var(--c2)) 55%, var(--c2) 100%); filter: brightness(var(--l, 1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.save-icon .f.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
.save-icon .f.cut { background: none; box-shadow: none; backface-visibility: visible; overflow: visible; }
@keyframes i3d-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.memcard .loading { position: absolute; left: 48.4cqw; top: 53.6cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(4.4cqh / var(--cap)); color: #fdfefd; }
.memcard .arrow-up { position: absolute; left: 48.4cqw; top: 15.4cqh; width: 3.2cqw; height: 2cqh; }
.memcard .arrow-down { position: absolute; left: 48.4cqw; top: 82.5cqh; width: 3.2cqw; height: 2cqh; }
/* --- save pages --- */
.save-page { background: linear-gradient(118deg, #8b8b89 0%, #737371 22%, #575752 48%, #3b3a31 74%, #1c1b12 100%); }
.save-page::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, color-mix(in srgb, var(--bg) 100%, #fff 10%), var(--bg) 60%, color-mix(in srgb, var(--bg) 80%, #000) 100%); opacity: 0.9; }
/* save page: every line centred on the 67.7 % W column; baselines 23.4 (card), 29.6/35.9 (title), 41.9 (date), 46.5 (size), 55.6 (Copy), 62.6 (Delete) */
.save-info { position: absolute; left: 67.7cqw; top: 0; width: 0; }
.save-info > * { position: absolute; left: 0; transform: translate(-50%, -0.93em); white-space: pre; text-align: center; }
.save-loc { top: 23.4cqh; font-size: calc(3.7cqh / var(--cap)); color: #f2efec; }
.save-name { top: 29.6cqh; font-size: calc(4.4cqh / var(--cap)); color: var(--c-yellow); line-height: 1.43; }
.save-meta { top: 41.9cqh; font-size: calc(3.1cqh / var(--cap)); color: #d7d4d3; line-height: 1.48; }
.save-opt { font-size: calc(5.0cqh / var(--cap)); color: #66676a; }
.save-opt[data-i="0"] { top: 55.6cqh; } .save-opt[data-i="1"] { top: 62.6cqh; }
.save-opt.selected { color: var(--c-cyan); }
.info .info-box, .dialog .info-box { position: absolute; left: 0; right: 0; top: 0; }
.info .save-name, .dialog .save-name { position: absolute; left: 67.7cqw; top: 42.6cqh; transform: translate(-50%, -0.93em); white-space: nowrap; color: #ffffff; font-size: calc(3.5cqh / var(--cap)); }
.info .save-name { left: 50cqw; }
.info-row { position: absolute; left: 0; right: 0; height: 0; font-size: calc(2.9cqh / var(--cap)); }
.info-row:nth-of-type(1) { top: 49.4cqh; } .info-row:nth-of-type(2) { top: 55.3cqh; } .info-row:nth-of-type(3) { top: 61.2cqh; } .info-row:nth-of-type(4) { top: 67.1cqh; } .info-row:nth-of-type(5) { top: 73cqh; }
.info-row .k { position: absolute; right: calc(100% - 51.5cqw); transform: translateY(-0.93em); white-space: nowrap; color: #e6e6e6; }
.info-row .v { position: absolute; left: 53.5cqw; transform: translateY(-0.93em); white-space: nowrap; color: #e6e6e6; }
.dialog .question { position: absolute; left: 67.7cqw; top: 46.5cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(3.1cqh / var(--cap)); color: #d7d4d3; }
.dialog .save-opt { position: absolute; left: 67.7cqw; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(5.0cqh / var(--cap)); color: #66676a; }
.dialog .save-opt[data-i="0"] { top: 55.6cqh; } .dialog .save-opt[data-i="1"] { top: 62.6cqh; } .dialog .save-opt.selected { color: var(--c-cyan); }
/* --- logo --- */
.logo { background: #000; }
.ps2-wordmark { position: absolute; left: 15.5cqw; width: 69cqw; top: 43cqh; height: 13.7cqh; }

/* ===================== measured screen details ===================== */
.screen.fade-in { animation: osd-fade-in 1.3s linear both; }
@keyframes osd-fade-in { from { opacity: 0; } to { opacity: 1; } }
.screen.vanish > :not(.mc-icon-slot) { transition: opacity .1s linear; opacity: 0; }
/* Browser: diagonal gradient, light top-left (#a4a4a4) to olive-black bottom-right (#141508); x accounts for ~70 % of the drop */
.browser { background: linear-gradient(112deg, #a4a4a4 0%, #838382 22%, #5f5f5b 48%, #36362d 74%, #141508 100%); }
.memcard { background: linear-gradient(112deg, #8b8b8d 0%, #6e6e6c 22%, #4c4c48 48%, #2a2a22 74%, #060600 100%); }
.browser .ps2ghost { left: 4.4cqw; top: 8cqh; height: 3.5cqh; width: 6.4cqw; }
/* memory-card models: card 1 centred at 37.9 % W, card 2 at 62.2 % W, y 53.6 %; ~11.8 % W x 16 % H */
/* the card is a box: the slot element is its front face; four thin faces give it depth. It leans back a little and
   sits proud of the shelf, seen from slightly below, so the bottom edge comes toward the viewer like the console's card models */
.mc-slot { position: absolute; top: 45.9cqh; width: 11.8cqw; height: 16cqh; --mc-d: 1.5cqh; border-radius: 0.6cqh 0.6cqh 0.9cqh 0.9cqh; background: linear-gradient(180deg, #2a2a28 0%, #141414 8%, #0d0d0d 40%, #0a0b0a 100%); transform-origin: 50% 50%; transform-style: preserve-3d; transform: translateZ(2cqh) rotateX(3deg); transition: transform .35s ease-in; }
.mc-face { position: absolute; pointer-events: none; }
.mc-top { left: 0; right: 0; top: 0; height: var(--mc-d); transform-origin: 50% 0; transform: rotateX(-90deg); background: #141414; border-radius: 0.6cqh 0.6cqh 0 0; }
.mc-bottom { left: 0; right: 0; bottom: 0; height: var(--mc-d); transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(0deg, #4a4a48, #2e2e2c); border-radius: 0 0 0.9cqh 0.9cqh; }
.mc-left { top: 0; bottom: 0; left: 0; width: var(--mc-d); transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(180deg, #1c1c1a, #0a0a0a); }
.mc-right { top: 0; bottom: 0; right: 0; width: var(--mc-d); transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(180deg, #161614, #070707); }
.mc-slot[data-slot="0"] { left: 17.1cqw; } .mc-slot[data-slot="1"] { left: 35.1cqw; transform: translateZ(2cqh) rotateX(3deg) scale(1.02); } .mc-slot[data-slot="2"] { left: 53.1cqw; } .mc-slot[data-slot="3"] { left: 71.1cqw; transform: translateZ(2cqh) rotateX(3deg) scale(1.02); }
.mc-slot::before { content: ''; position: absolute; left: 44%; width: 12%; top: 5%; height: 6%; background: #3a3a38; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.mc-slot::after { content: ''; position: absolute; left: 9%; right: 9%; top: 46%; height: 34%; background: #111; box-shadow: inset 0 0 0 1px #262626, 0 0.2cqh 0 #2c2c2a; }
.mc-slot.selected { background: linear-gradient(180deg, #333 0%, #1c1c1c 8%, #161616 40%, #121312 100%); }
.mc-glow { position: absolute; inset: -70% -40%; background: radial-gradient(closest-side, #ffffff, rgba(255,255,255,.92) 22%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.14) 70%, rgba(255,255,255,0) 100%); opacity: 0; transition: opacity .15s linear; z-index: 1; pointer-events: none; }
.selected > .mc-glow { opacity: calc(var(--breathe, 1) * 1.15); }
.mc-slot.flip { transform: rotateX(-95deg) scale(9); transition: transform .35s ease-in; z-index: 5; }
.browser.flipping .browser-label, .browser.flipping .ps2ghost, .browser.flipping .osd-hints { transition: opacity .12s linear; opacity: 0; }
.browser.unflip .mc-slot.selected { animation: mc-unflip .35s ease-out both; }
@keyframes mc-unflip { from { transform: rotateX(-95deg) scale(9); } to { transform: translateZ(2cqh) rotateX(3deg); } }
.browser { perspective: 55cqw; perspective-origin: 50% 72%; }
/* disc under card 1 when a disc is inserted; cards move up to 44 % */
.browser.with-disc .mc-slot { top: 38cqh; }
.disc-icon { position: absolute; left: 44cqw; top: 60cqh; width: 12cqw; height: 11cqh; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f3f3f4 0%, #f3f3f4 18%, #b9b3a0 20%, #e8dcaa 40%, #fffcc6 60%, #d9cf9c 100%); transform: rotateX(40deg) rotateZ(-15deg); box-shadow: 0 0 2cqh 0.5cqh rgba(255,250,200,.45); }
.disc-icon[hidden] { display: none !important; }
/* card contents: header card square, rows centred (5 per row at 21/35/50/65/80 %), rows at y 32/50/69 %, blue "more" arrow */
.memcard .mc-icon-slot { left: 5cqw; top: 7.6cqh; width: 5cqw; height: 6cqh; background: #040404; box-shadow: inset 0 0 0 1px #828282; border-radius: 0; }
.memcard .mc-head { left: 12.4cqw; }
.memcard .mc-head .browser-label { top: 11.1cqh; font-size: calc(2.9cqh / var(--cap)); color: #b0b0ae; }
.memcard .mc-free { top: 15.2cqh; font-size: calc(2.3cqh / var(--cap)); color: #b0b0ae; }
.memcard .save-title { top: 11.1cqh; font-size: calc(3.6cqh / var(--cap)); line-height: 1.5; }
.memcard .save-grid, .ghost-grid { position: absolute; left: 0; width: 100cqw; top: 0; display: block; transform: translateY(calc(var(--scroll, 0) * -18.5cqh)); }
.save-row { position: absolute; left: 0; width: 100cqw; height: 0; }
.save-row:nth-child(1) { top: 32cqh; } .save-row:nth-child(2) { top: 50.5cqh; } .save-row:nth-child(3) { top: 69cqh; } .save-row:nth-child(4) { top: 87.5cqh; } .save-row:nth-child(5) { top: 106cqh; } .save-row:nth-child(6) { top: 124.5cqh; }
.save-cell { position: absolute; top: 0; width: 12cqw; height: 14cqh; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) scale(var(--pop, 1)); left: calc(50cqw + (var(--k) - (var(--n) - 1) / 2) * 14.5cqw); opacity: 1; }
.save-cell.shown { opacity: 1; }
.memcard .save-cell > .save-icon, .ghost-grid .save-icon { width: 9cqh; height: 9cqh; --u: 12cqh; }
.save-glow { width: 12cqw; height: 16cqh; }
.memcard .arrow-down { left: 48.4cqw; top: 79cqh; width: 3.3cqw; height: 2.6cqh; }
.memcard .arrow-down path, .memcard .arrow-up path { fill: #1b2f9f; }
.memcard .loading { top: 53.6cqh; font-size: calc(2.9cqh / var(--cap)); color: #b0b0ae; }
/* save pages: 4-corner background of the save, big icon at x 12-32 %, y 33-68 %; ghost grid at 25 % */
.save-page { background: linear-gradient(112deg, #8b8b8d 0%, #4c4c48 48%, #060600 100%); }
.save-page::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--bg) 100%, #fff 14%) 0%, var(--bg) 55%, color-mix(in srgb, var(--bg) 70%, #000) 100%); opacity: 0.92; }
.save-page.fade-in { animation-duration: .4s; }
.ghost-grid { opacity: 0.25; }
.save-icon.medium { position: absolute; left: 30cqw; top: 22cqh; width: 6cqw; height: 14cqh; --u: 10.5cqh; }
.save-info { left: 68cqw; }
.save-loc { top: 23cqh; font-size: calc(2.9cqh / var(--cap)); color: #b0b0b0; }
.save-name { top: 30cqh; font-size: calc(4.6cqh / var(--cap)); line-height: 1.35; }
.save-meta { top: 42cqh; font-size: calc(2.7cqh / var(--cap)); color: #b0b0b0; }
.save-size { top: 46cqh; font-size: calc(2.4cqh / var(--cap)); color: #9a9a9a; }
.save-page .save-name .l1, .save-page .save-name .l2 { display: block; } .save-page .save-name .l2 { font-size: 0.52em; line-height: 1.3; color: #d8d8c8; }
.save-desc { position: absolute; left: 38cqw; width: 59cqw; top: 50.5cqh; transform: translateY(-0.93em); white-space: normal; text-align: left; font-size: calc(2.2cqh / var(--cap)); line-height: 1.42; color: #d8d8d4; }
.save-opt { font-size: calc(5.1cqh / var(--cap)); color: #585a5e; }
.save-opt[data-i="0"] { top: 74.5cqh; } .save-opt[data-i="1"] { top: 82.5cqh; }
.save-opt.selected { color: var(--c-cyan); } .save-opt.heading { color: var(--c-yellow); }
.copy-arrow { top: 63cqh; font-size: calc(3cqh / var(--cap)); color: #7d7b7a; }
.copy-target { top: 69cqh; font-size: calc(3.7cqh / var(--cap)); color: var(--c-cyan); display: flex; gap: 2cqw; align-items: baseline; }
.copy-target.heading { color: var(--c-yellow); top: 61cqh; }
.save-opt.heading[data-i="1"] { top: 74.5cqh; }
.copy-target .pict { height: 3cqh; width: 2cqh; align-self: center; } .copy-target .pict path { fill: #4b717c; }
.copy-free { top: 74cqh; font-size: calc(2cqh / var(--cap)); color: #b0b0b0; }
.save-prompt { position: absolute; left: 50cqw; top: 88cqh; transform: translate(-50%, -0.93em); white-space: nowrap; font-size: calc(3.3cqh / var(--cap)); color: #b0b0b0; }
.sure { top: 79.5cqh; font-size: calc(4.5cqh / var(--cap)); color: #c8c8c8; }
.yesno { top: 83.5cqh; display: flex; gap: 5cqw; }
.yesno .yn { position: static; transform: none; font-size: calc(4.5cqh / var(--cap)); color: #6c928d; } .yesno .yn.selected { color: var(--c-cyan); }
.dim { opacity: 0.4; }
.info { background: linear-gradient(112deg, #8b8b8d 0%, #4c4c48 48%, #060600 100%); }
.info::before { background: linear-gradient(135deg, #0a0c33 0%, #010325 55%, #010322 100%); opacity: 0.94; }
.info .save-name { position: absolute; left: 42.5cqw; top: 30cqh; transform: translateY(-0.93em); text-align: left; color: var(--c-yellow); font-size: calc(4.5cqh / var(--cap)); line-height: 1.35; white-space: pre; }
.info-row { font-size: calc(2.9cqh / var(--cap)); }
.info-row:nth-of-type(1) { top: 41cqh; } .info-row:nth-of-type(2) { top: 47.7cqh; } .info-row:nth-of-type(3) { top: 54cqh; } .info-row:nth-of-type(4) { top: 61cqh; } .info-row:nth-of-type(5) { top: 67.4cqh; }
.info-row .k { right: calc(100% - 38.8cqw); color: #a0a2ac; } .info-row .v { left: 42.5cqw; color: #a0a2ac; }
/* configuration: cross-fade of item/value, header AM/PM, edit choices dim colour, white left/right triangles */
.config .config-body { transition: none; }
.config .config-value .choice { color: #4b4a68; }
.config .config-value .pict path { fill: #bdbac5; }
.config .config-item .arrows-ud path { fill: #ada8b0; } .config .config-item .arrows-ud { opacity: 0.85; }
.config .ampm { font-size: 0.6em; margin-left: 0.5cqw; }
.config .field.sep { color: var(--c-white); } .config .field.small { font-size: 0.66em; }
.config-options .config-body .title { white-space: pre; }
.config-options .config-item { white-space: pre; text-align: center; line-height: 1.25; }
.config-options .config-value { white-space: pre; text-align: center; line-height: 1.3; }
/* logo: dust particles gathering into the wordmark over 0.30 s */
/* the disc logotype: a light, monoline, geometric setting in plain white, no glow, no outline; the "2" is a squared-off
   monoline glyph drawn as a path, standing on the same baseline and a little taller than the word's capitals */
.ps2-wordmark { left: 14cqw; width: 72cqw; top: 43cqh; height: 13.5cqh; display: flex; align-items: baseline; justify-content: center; white-space: nowrap; color: #f0f0f0; font-family: "TeX Gyre Heros", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0.012em; -webkit-text-stroke: 0; paint-order: normal; text-shadow: none; opacity: var(--form, 0); filter: blur(calc((1 - var(--form, 0)) * 1cqh)); }
.ps2-wordmark .wm-word { font-size: 9.2cqh; line-height: 1; }
.ps2-wordmark .wm-reg { font-size: 1.9cqh; margin: 0 0.55cqw 0 0.4cqw; align-self: baseline; letter-spacing: 0; font-weight: 400; }
.ps2-wordmark .wm-two { font-size: 11.4cqh; line-height: 1; margin-left: 0.1cqw; }
.logo-dust { position: absolute; left: 24.2cqw; width: 51.8cqw; top: 43cqh; height: 13.5cqh; pointer-events: none; }
.logo-dust span { position: absolute; left: var(--x); top: var(--y); width: calc(1.2cqh * var(--s)); height: calc(1.2cqh * var(--s)); border-radius: 50%; background: radial-gradient(circle, #d8f0ff 0%, #7c8cff 40%, rgba(80,60,200,0) 70%); opacity: calc(1 - var(--form, 0)); transform: translate(calc((50% - var(--x)) * var(--form, 0) * 0.6), calc((50% - var(--y)) * var(--form, 0) * 0.6)) scale(calc(1 + var(--form, 0) * 2)); filter: blur(0.3cqh); }