/* Pocket — Apple's shape (cards on grey), a violet accent (the colour of a see-through Game Boy
 * Color). Light is the base; dark is a token swap. Meals' stylesheet is the parent.
 *
 * ~/claude/IOS.md §25 THE STAGE: the document never scrolls; #app is a screen tall (100lvh installed);
 * the library scrolls inside #page; the play screen, the toast and the sheet are its SIBLINGS,
 * absolute in the stage. Nothing is position: fixed. §24: no backdrop-filter, no transitions on the
 * shell; the bars are solid. The root's colour tints the status bar, so it is the page's own —
 * and black while a game shows (html.playing), as a console's bezel would be.
 */
:root {
  --bg:      #f2f2f7;
  --panel:   #ffffff;
  --panel-2: #f6f6f9;
  --line:    rgba(60, 60, 67, .16);
  --ink:     #000000;
  --ink-2:   #3c3c43;
  --dim:     #8a8a8e;
  --pill:    #e5e5ea;
  --accent:  #6b4fd8;
  --on-accent: #ffffff;
  --bad:     #e5322b;
  --good:    #1f9d55;
  --shadow:  0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --r-card: 18px; --r-mid: 12px;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --sb: 0px;
  --kb: 0px;
  --side: 16px;
  --col: 720px;
  /* the pad */
  --bs: 66px;      /* a face button */
  --dp: 160px;     /* the D-pad */
  --pad-bg: #0c0c10; --pad-ink: #f3f3f6; --pad-btn: #2a2a32; --pad-btn-2: #3a3a44; --pad-a: #a52a55; --pad-b: #a52a55;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e; --line: rgba(84, 84, 88, .48);
    --ink: #ffffff; --ink-2: #d7d7db; --dim: #98989f; --pill: #2c2c2e;
    --accent: #9b85ff; --on-accent: #120a30; --bad: #ff453a; --good: #30d158;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none; }
html, body { background: var(--bg); color: var(--ink); margin: 0; }
html.playing, html.playing body { background: var(--pad-bg); }
body { position: relative; height: 100vh; height: 100dvh; overflow: hidden;
       font: 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
@media (display-mode: standalone) {
  :root { --sb: calc(100lvh - 100dvh); }
  body { height: 100vh; height: 100lvh; }
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the door ─────────────────────────────────────────────────────────── */
.door { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
        justify-content: center; text-align: center; padding: calc(var(--sb) + 24px) 28px calc(var(--safe-b) + 24px); }
.doormark { width: 84px; height: 84px; border-radius: 19px; box-shadow: var(--shadow); }
.lockup { margin: 18px 0 26px; font-weight: 800; letter-spacing: -.03em; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lockup .lm { font-size: 17px; color: var(--dim); font-weight: 700; letter-spacing: -.01em; }
.lockup .lc { color: var(--accent); }
.lockup .ls { font-size: 44px; }
.note { color: var(--dim); max-width: 340px; font-size: 14px; margin: 16px auto 0; }
.note.big { color: var(--ink); font-size: 19px; font-weight: 650; margin-top: 0; }

/* ── the stage ────────────────────────────────────────────────────────── */
#app { position: absolute; inset: 0; }
#page { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: var(--bg);
       padding: calc(var(--safe-t) + var(--sb)) calc(var(--side) + var(--safe-r)) 0 calc(var(--side) + var(--safe-l)); }
.top.scrolled { box-shadow: 0 1px 0 var(--line); }
.bar { max-width: var(--col); margin: 0 auto; min-height: 52px; display: flex; align-items: center; gap: 4px; }
.bar h1 { flex: 1; margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar.sub h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; text-align: center; }
.ibtn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--accent);
        display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.ibtn svg { width: 24px; height: 24px; }
.ibtn:active { background: var(--pill); }
.ibtn.spacer { visibility: hidden; }

main { flex: 1 0 auto; width: 100%; max-width: var(--col); margin: 0 auto;
       padding: 4px calc(var(--side) + var(--safe-r)) calc(var(--safe-b) + var(--kb) + 32px) calc(var(--side) + var(--safe-l)); }

/* ── the foot: the toast ──────────────────────────────────────────────── */
.foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 8px;
        pointer-events: none; padding: 8px calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l)); }
.foot > * { pointer-events: auto; }
.toast { max-width: 100%; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 550;
         box-shadow: 0 6px 24px rgba(0,0,0,.2); }
html.playing .toast { background: #fff; color: #000; }
.toast.bad { background: var(--bad); color: #fff; }

/* ── the sheet (absolute in the stage, never fixed) ───────────────────── */
.sheet { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.sheetbox { position: relative; background: var(--bg); border-radius: 22px 22px 0 0; max-height: calc(100% - var(--sb) - 30px); overflow-y: auto;
            overscroll-behavior: contain; width: 100%; max-width: 620px; margin: 0 auto;
            padding: 8px calc(var(--side) + var(--safe-r)) calc(var(--safe-b) + 18px) calc(var(--side) + var(--safe-l)); }
.sheetbox .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--pill); margin: 0 auto 8px; }
.sheetbox h2 { font-size: 20px; margin: 4px 0 6px; letter-spacing: -.02em; }
html.playing .sheetbox { background: #1c1c1e; color: #fff; --panel: #2c2c2e; --panel-2: #3a3a3c; --ink: #fff; --dim: #98989f; --pill: #3a3a3c; --line: rgba(84,84,88,.48); --accent: #b9a8ff; --shadow: none; }

/* ── buttons, cards, rows ─────────────────────────────────────────────── */
.btn { border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 650; padding: 10px 18px; min-height: 44px;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.big { font-size: 17px; padding: 13px 30px; min-width: 220px; }
.btn.wide { width: 100%; }
.btn.quiet { background: var(--pill); color: var(--ink); }
.btn:disabled { opacity: .5; }
.btn:active { filter: brightness(.92); }
.card { background: var(--panel); border-radius: var(--r-card); padding: 16px; margin: 12px 0; box-shadow: var(--shadow); }
h2.sec { font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin: 22px 2px 8px; display: flex; align-items: baseline; gap: 8px; }
h2.sec .act { margin-left: auto; font-size: 15px; font-weight: 600; background: none; border: 0; color: var(--accent); padding: 4px 2px; }
h3.sec { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin: 22px 16px 6px; }
.rows { background: var(--panel); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; background: none; text-align: left;
       color: var(--ink); position: relative; }
.rows > .row + .row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--line); }
.rows > a.row:active, .rows > button.row:active { background: var(--panel-2); }
.row-k { flex: 1; min-width: 0; }
.row-k small { display: block; color: var(--dim); font-size: 13px; }
.row-v { color: var(--dim); text-align: right; flex: none; }
.chev { color: var(--dim); font-size: 20px; line-height: 1; }
.row.danger .row-k { color: var(--bad); }
.fineprint { color: var(--dim); font-size: 12px; text-align: center; margin: 18px 0 0; }
.addr { color: var(--dim); font-size: 13px; text-align: center; margin: 20px 0 0; }
.lockrow { font-weight: 800; letter-spacing: -.02em; }
.lockrow .lc { color: var(--accent); }
.err { color: var(--bad); margin: 10px 0 0; font-size: 14px; }
.empty { text-align: center; color: var(--dim); padding: 40px 12px; }
.empty b { display: block; color: var(--ink); font-size: 19px; margin-bottom: 6px; }
.empty code { font-size: 13px; background: var(--pill); padding: 2px 6px; border-radius: 6px; }
.seg { display: flex; background: var(--pill); border-radius: 10px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 7px 4px; font-weight: 600; font-size: 14px; min-height: 36px; color: var(--ink); }
.seg button.on { background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 999px; background: var(--pill); position: relative; flex: none; margin: 0; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.switch:checked { background: var(--good); }
.switch:checked::after { transform: translateX(20px); }
.spin { width: 18px; height: 18px; border: 2.5px solid rgba(128,128,128,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; flex: none; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
details.card summary { display: flex; align-items: center; list-style: none; cursor: pointer; font-weight: 600; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary .chev { margin-left: auto; transition: transform .2s; }
details.card[open] summary .chev { transform: rotate(90deg); }
dl.kv { margin: 10px 0 0; font-size: 13px; }
dl.kv div { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
dl.kv dt { color: var(--dim); width: 110px; flex: none; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
kbd { font: 12px/1 ui-monospace, Menlo, monospace; background: var(--pill); border-radius: 5px; padding: 3px 6px; border-bottom: 2px solid var(--line); }

/* a controller's highlight (app.js, pollUi): drawn inside the element, so a row in a rounded card shows it */
.padfocus { outline: 3px solid var(--accent) !important; outline-offset: -3px; }
.btn.padfocus, .ibtn.padfocus { outline-offset: 2px; }

/* ── the library ──────────────────────────────────────────────────────── */
.game { gap: 14px; min-height: 64px; }
.cart { width: 44px; height: 52px; border-radius: 6px 6px 10px 10px; flex: none; position: relative; overflow: hidden;
        background: linear-gradient(180deg, #8d8d96, #5f5f69); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.cart::before { content: ''; position: absolute; left: 7px; right: 7px; top: 9px; bottom: 11px; border-radius: 3px; background: rgba(255,255,255,.14); }
.cart::after { content: attr(data-sys); position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.cart.gb { background: linear-gradient(180deg, #a9a9b2, #6e6e78); }
.cart.gbc { background: linear-gradient(180deg, #7c5fe6, #4a35a8); }
.cart.gba { width: 50px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, #6a6a74, #3f3f48); }
.cart.gba::before { top: 6px; bottom: 7px; }
.cart.gba::after { bottom: 1px; }
.cart.nds { width: 42px; height: 46px; border-radius: 4px 4px 4px 9px; background: linear-gradient(180deg, #5d5d68, #34343d); }
.cart.nds::before { top: 7px; bottom: 12px; left: 6px; right: 6px; }
.game b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game .row-v { color: var(--accent); font-weight: 650; }
.hint { color: var(--dim); font-size: 13px; margin: 6px 2px 0; }

/* ── the play screen ──────────────────────────────────────────────────── */
#play { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--pad-bg); color: var(--pad-ink);
        touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.playbar { flex: none; display: flex; align-items: center; gap: 2px; min-height: 48px;
           padding: calc(var(--safe-t) + var(--sb)) calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l)); }
.playbar h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 650; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.playbar .ibtn { color: var(--pad-ink); }
.playbar .ibtn:active { background: var(--pad-btn); }
.sound-btn .snd-g { width: 24px; height: 24px; }
.sound-btn .snd-g.off, .sound-btn[aria-pressed="false"] .snd-g.on { display: none; }
.sound-btn[aria-pressed="false"] .snd-g.off { display: block; }
.sound-btn[aria-pressed="false"] { opacity: .6; }
.screen { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 6px 0; }
#canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; border-radius: 3px; }
/* a DS game: one canvas holding both screens (RetroArch's), the touch surface over its lower half */
#play.ds #canvas { display: none; }
.dsbox { position: relative; flex: none; line-height: 0; }
#dscanvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; border-radius: 3px; width: 256px; height: 384px; }
.dstouch { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; touch-action: none; cursor: crosshair; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
           background: rgba(12,12,16,.82); color: var(--pad-ink); font-weight: 600; font-size: 15px; text-align: center; padding: 20px; }
.overlay .spin { width: 26px; height: 26px; }
.overlay.paused .spin { display: none; }

.pad { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto;
       padding: 8px calc(12px + var(--safe-r)) calc(14px + var(--safe-b)) calc(12px + var(--safe-l)); }
.pad.hidden { display: none; }
.shoulders { display: flex; justify-content: space-between; width: 100%; padding: 0 4px; }
#play:not(.gba):not(.ds) .shoulders { display: none; }
.mid { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ss { display: flex; justify-content: center; gap: 22px; width: 100%; }

.gb { border: 0; color: var(--pad-ink); font-weight: 800; letter-spacing: .02em; position: relative; display: inline-flex; align-items: center; justify-content: center;
      background: var(--pad-btn); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.4); touch-action: none; -webkit-user-select: none; user-select: none; }
.gb.pressed, .gb:active { background: var(--pad-btn-2); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); transform: translateY(1px); }
.gb.a, .gb.b { width: var(--bs); height: var(--bs); border-radius: 50%; font-size: calc(var(--bs) * .34); background: var(--pad-a); }
.gb.a.pressed, .gb.b.pressed { background: #7e1f41; }
.gb.lr { width: calc(var(--bs) * 1.4); height: calc(var(--bs) * .56); border-radius: 12px; font-size: 15px; }
.gb.small { width: calc(var(--bs) * 1.1); height: 28px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; }
.ab { position: relative; width: calc(var(--bs) * 2.05); height: calc(var(--bs) * 1.75); flex: none; }
.ab .a { position: absolute; right: 0; top: 0; }
.ab .b { position: absolute; left: 0; bottom: 0; }
#play:not(.ds) .gb.x, #play:not(.ds) .gb.y { display: none; }
/* the DS's four face buttons, its own diamond: X above, A right, B below, Y left */
#play.ds { --fb: calc(var(--bs) * .82); }
#play.ds .ab { width: calc(var(--fb) * 2.9); height: calc(var(--fb) * 2.9); }
#play.ds .gb.a, #play.ds .gb.b, #play.ds .gb.x, #play.ds .gb.y { position: absolute; width: var(--fb); height: var(--fb); border-radius: 50%; font-size: calc(var(--fb) * .36); background: var(--pad-a); }
#play.ds .gb.x { left: calc(var(--fb) * .95); top: 0; }
#play.ds .gb.a { right: 0; left: auto; top: calc(var(--fb) * .95); }
#play.ds .gb.b { left: calc(var(--fb) * .95); bottom: 0; top: auto; }
#play.ds .gb.y { left: 0; top: calc(var(--fb) * .95); }
#play.ds .gb.pressed { background: #7e1f41; }
#play.ds .pad { gap: 6px; padding-top: 4px; }
#play.ds .gb.lr { height: calc(var(--bs) * .5); }

.dpad { position: relative; width: var(--dp); height: var(--dp); flex: none; touch-action: none; }
.dpad .arm { position: absolute; background: var(--pad-btn); border-radius: 10px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.4); }
.dpad .arm.v { left: 33.5%; width: 33%; top: 0; bottom: 0; }
.dpad .arm.h { top: 33.5%; height: 33%; left: 0; right: 0; }
.dpad .tip { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .55; }
.dpad .tip.u { left: 50%; top: 12%; transform: translateX(-50%); border-bottom-color: var(--pad-ink); border-top: 0; }
.dpad .tip.d { left: 50%; bottom: 12%; transform: translateX(-50%); border-top-color: var(--pad-ink); border-bottom: 0; }
.dpad .tip.l { top: 50%; left: 12%; transform: translateY(-50%); border-right-color: var(--pad-ink); border-left: 0; }
.dpad .tip.r { top: 50%; right: 12%; transform: translateY(-50%); border-left-color: var(--pad-ink); border-right: 0; }
.dpad[data-dir~="Up"] .tip.u, .dpad[data-dir~="Down"] .tip.d, .dpad[data-dir~="Left"] .tip.l, .dpad[data-dir~="Right"] .tip.r { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.dpad[data-dir]:not([data-dir=""]) .arm { background: var(--pad-btn-2); }

/* a phone on its side: the pad floats over the sides of the screen, the screen fills the height */
@media (orientation: landscape) and (max-height: 520px) {
  #play { flex-direction: row; flex-wrap: wrap; }
  .playbar { width: 100%; min-height: 40px; padding-top: max(var(--safe-t), 2px); }
  .screen { width: 100%; height: calc(100% - 44px); padding: 0 calc(var(--dp) + 40px) calc(42px + var(--safe-b)); }
  .pad { position: absolute; left: 0; right: 0; bottom: 0; top: 44px; max-width: none; padding: 0; margin: 0; pointer-events: none; display: block; }
  .pad > * { pointer-events: none; }
  .pad .gb, .pad .dpad { pointer-events: auto; }
  .shoulders { position: absolute; top: 6px; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); width: auto; }
  .mid { position: absolute; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: auto; align-items: flex-end; }
  .ss { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(6px + var(--safe-b)); width: auto; gap: 16px; }
}
@media (min-width: 700px) {
  .bar h1 { font-size: 34px; }
}