/* lemonade — the original's green, phone first.
 *
 * THE LOOK IS THE 2002 GAME'S, not the house's glass: a striped green
 * ground, darker green panels with a light rim, lime buttons with a dark
 * outline, pixel lettering, white text with a shadow under it. The owner's
 * doctrine for gems (the Bejeweled 2 look) applies here the same way — an
 * homage should look like the thing it is an homage to. The menu sheet is
 * the one place the house's own rows and switches come back, because
 * settings are settings.
 *
 * TWO THEMES, LIGHT IS THE BASE: the bright summer green on bare :root, a
 * night-time green as a token swap in two guarded blocks — the media query
 * for "system", the attribute for a choice. Nothing outside those blocks
 * names a literal colour except inside the painted scene, which is a
 * picture. The two dark blocks are duplicates on purpose: a media query
 * cannot be OR-ed with an attribute selector.
 *
 * Insets go on PADDING, never on layout, and every one carries a 0px
 * fallback — `calc(6px + env(...))` without one is an invalid length and
 * drops the whole declaration on desktop.
 */

@font-face {
  font-family: 'Jersey 15';
  src: url('jersey15.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground-a: #4db32e;
  --ground-b: #45a628;
  --panel:    #2f8f22;
  --panel-2:  #28801d;
  --panel-rim:#8fdc55;
  --panel-in: #1f6a16;
  --tile-a:   #bff06a;
  --tile-b:   #8fd13d;
  --tile-rim: #1d4a12;
  --tile-ink: #1d3a0f;
  --go-a:     #d8ff7a;
  --go-b:     #9fdc3f;
  --ink:      #ffffff;
  --ink-2:    #eef9e2;
  --dim:      #c4e8aa;
  --shadow-ink: #1c4a10;
  --lemon:    #f7d23e;
  --good:     #b6ff6a;
  --warn:     #ffe36a;
  --bad:      #ff8a7a;
  --heart:    #e0596e;
  --bar:      #f7d23e;
  --bar-2:    #fff4b0;
  --track:    #1f6a16;
  --line:     rgba(255, 255, 255, .28);
  --line-2:   rgba(255, 255, 255, .14);
  --pill:     rgba(0, 0, 0, .18);
  --link:     #fff27a;
  --bg:       #3f9a2b;
  --sheet:    #2a861e;
  --shadow:   0 2px 0 rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .18);
  --r-card: 12px;
  --r-mid:  10px;
  /* iOS 26 blurs the top of an installed web app PAST the status bar: the
     glass reaches about 20px below env(safe-area-inset-top), and anything in
     that band is legible only as a smear. The inset is the bar; this is the
     blur. Both, once, on each screen's outermost element (~/claude/IOS.md). */
  --glass-t: 20px;
  --top: calc(env(safe-area-inset-top, 0px) + var(--glass-t));
  --font: 'Jersey 15', ui-rounded, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground-a: #133a1d;
    --ground-b: #103319;
    --panel:    #1b4a25;
    --panel-2:  #173f20;
    --panel-rim:#3f8a4a;
    --panel-in: #0f2c16;
    --tile-a:   #7fb34a;
    --tile-b:   #5d9133;
    --tile-rim: #0b1f0c;
    --tile-ink: #0d220b;
    --go-a:     #a6d95a;
    --go-b:     #6fa83a;
    --ink:      #eef6e8;
    --ink-2:    #d6e8cc;
    --dim:      #93b58a;
    --shadow-ink: #061208;
    --good:     #9be060;
    --warn:     #f0cf55;
    --bad:      #ff8a7a;
    --bar:      #e6c23a;
    --bar-2:    #f6e7a0;
    --track:    #0c2411;
    --line:     rgba(255, 255, 255, .2);
    --line-2:   rgba(255, 255, 255, .1);
    --pill:     rgba(0, 0, 0, .28);
    --link:     #f0dd6a;
    --bg:       #10301a;
    --sheet:    #163c1f;
    --shadow:   0 2px 0 rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --ground-a: #133a1d;
  --ground-b: #103319;
  --panel:    #1b4a25;
  --panel-2:  #173f20;
  --panel-rim:#3f8a4a;
  --panel-in: #0f2c16;
  --tile-a:   #7fb34a;
  --tile-b:   #5d9133;
  --tile-rim: #0b1f0c;
  --tile-ink: #0d220b;
  --go-a:     #a6d95a;
  --go-b:     #6fa83a;
  --ink:      #eef6e8;
  --ink-2:    #d6e8cc;
  --dim:      #93b58a;
  --shadow-ink: #061208;
  --good:     #9be060;
  --warn:     #f0cf55;
  --bad:      #ff8a7a;
  --bar:      #e6c23a;
  --bar-2:    #f6e7a0;
  --track:    #0c2411;
  --line:     rgba(255, 255, 255, .2);
  --line-2:   rgba(255, 255, 255, .1);
  --pill:     rgba(0, 0, 0, .28);
  --link:     #f0dd6a;
  --bg:       #10301a;
  --sheet:    #163c1f;
  --shadow:   0 2px 0 rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
}

/* NATIVE CONTROLS FOLLOW THE APP'S CHOICE, NOT ONLY THE PHONE'S (2026-09-26,
   ~/claude/IOS.md §11). Scrollbars, the Technical fold's marker and the
   page's own canvas read `color-scheme`; without it, Dark chosen in the
   menu on a light phone drew light native controls on the night-time
   green. theme.js repaints the status bar to match. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  font-family: var(--font); font-size: 19px; line-height: 1.25;
  /* Jersey has one weight. A synthesised bold smears a pixel font into
     blobs — the reason the first font chosen here was dropped — so bold is
     never faked: emphasis is colour and size. */
  font-synthesis: none;
  color: var(--ink);
  background-color: var(--bg);
  /* The original's diagonal stripes, as a gradient: no picture to fetch. */
  background-image: repeating-linear-gradient(135deg, var(--ground-a) 0 14px, var(--ground-b) 14px 28px);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  text-shadow: 0 2px 0 var(--shadow-ink);
}
button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }
img.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.spacer { flex: 1; }
.title .logo { display: inline-block; vertical-align: -6px; margin-right: 8px; }
.title .logo img { display: block; filter: drop-shadow(0 3px 0 var(--shadow-ink)); }
.title { font-size: 53px; font-weight: 700; margin: 6px 0 4px; letter-spacing: 1px; color: var(--lemon); text-shadow: 0 3px 0 var(--shadow-ink), 0 0 1px var(--shadow-ink); }

.app {
  max-width: 540px; margin: 0 auto;
  padding: calc(8px + var(--top)) calc(10px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 8px;
}

/* ── panels ─────────────────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-rim);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 2px var(--panel-in), var(--shadow);
  padding: 10px 12px;
}

/* ── the stock bar ──────────────────────────────────────────────────────── */

.hud {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; overflow: hidden;
  padding: 6px 9px;
  background: var(--panel-in);
  border: 2px solid var(--panel-rim);
  border-radius: var(--r-mid);
  position: sticky; top: calc(4px + var(--top)); z-index: 5;
}
.hud-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-item .plus { color: var(--good); font-size: 15px; margin-left: 1px; }
.hud-cash { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lemon); }
.hud-cash .minus { color: var(--bad); font-size: 16px; margin-left: 4px; }

/* ── the paper ──────────────────────────────────────────────────────────── */

.paper { display: grid; gap: 4px; }
.paper-date { font-size: 18px; font-weight: 600; }
.paper-weather { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paper-temp { font-size: 19px; font-weight: 700; color: var(--lemon); }
.paper-skies { display: flex; gap: 8px; align-items: center; }
.paper-sky { display: inline-flex; align-items: center; gap: 1px; }
.paper-news { font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.paper-flash { color: var(--lemon); font-weight: 700; margin-right: 2px; }

/* ── the scene ──────────────────────────────────────────────────────────── */

.scene-panel { padding: 8px; }
.scene-wrap { position: relative; border-radius: 6px; overflow: hidden; border: 2px solid var(--panel-in); background: #000; }
.scene { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; touch-action: manipulation; }
.scene-name {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 22px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 3px #000;
  pointer-events: none;
}
.day-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
.day-clock { font-variant-numeric: tabular-nums; min-width: 3.2em; }
.day-sky img { vertical-align: middle; }
.day-sold { color: #ffe86a; }
.day-controls { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 6px; }
.bubble-tip {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  max-width: 84%; padding: 7px 11px;
  background: #fffbe8; color: #2b2a1f; text-shadow: none;
  border: 2px solid #2b2a1f; border-radius: 10px;
  font-size: 17px; line-height: 1.3; text-align: center;
  pointer-events: none;
}

.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.bar { display: grid; gap: 3px; }
.bar-k { font-size: 16px; color: var(--ink-2); }
.bar-track { position: relative; height: 10px; background: var(--track); border: 2px solid var(--panel-in); border-radius: 3px; overflow: hidden; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, var(--bar) 0 6px, var(--bar-2) 6px 8px); transition: width .4s ease; }

/* ── the tiles ──────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tile, .btn, .mode-card {
  -webkit-appearance: none; appearance: none;
  border: 2px solid var(--tile-rim);
  border-radius: 9px;
  background: linear-gradient(var(--tile-a), var(--tile-b));
  color: var(--tile-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .15), 0 2px 0 var(--tile-rim);
  cursor: pointer;
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 2px 5px; min-height: 64px;
  font-size: 16px; font-weight: 600;
}
.tile img { width: 34px; height: 34px; }
.tile:active, .btn:active, .mode-card:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 var(--tile-rim); }
.tile.is-changed::after { content: ''; position: absolute; }
.tile { position: relative; }
.tile .dot { position: absolute; top: 4px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #e24a3a; border: 2px solid var(--tile-rim); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; font-size: 20px; font-weight: 700;
}
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-small { padding: 6px 10px; font-size: 17px; border-radius: 8px; }
.btn-wide { display: flex; width: 100%; margin-top: 14px; }
.btn-go { background: linear-gradient(var(--go-a), var(--go-b)); }
.btn-quiet { background: var(--pill); color: var(--ink); text-shadow: 0 2px 0 var(--shadow-ink); border-color: var(--panel-in); box-shadow: none; }
.btn-danger { color: #7a1a10; }
.actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.actions .btn { font-size: 19px; padding: 13px 10px; }
.plan-line { margin: 0 4px; font-size: 16px; color: var(--ink-2); min-height: 1em; }
.plan-line .warn { color: var(--warn); }

.pill {
  display: block; width: 100%; padding: 9px 12px;
  font: inherit; font-size: 17px; color: var(--tile-ink); text-shadow: none;
  background: var(--lemon); border: 2px solid var(--tile-rim); border-radius: 999px; cursor: pointer;
}

/* ── title / choose a game ──────────────────────────────────────────────── */

.view-title { display: grid; }
.title-card { text-align: center; padding: 18px 14px; }
.title-sub { margin: 0 0 16px; color: var(--ink-2); font-size: 19px; }
.title-modes { display: grid; gap: 10px; }
.mode-card { display: grid; gap: 4px; padding: 14px; text-align: left; }
.mode-name { font-size: 26px; font-weight: 700; }
.mode-about { font-family: var(--font-body); font-size: 14px; line-height: 1.4; text-shadow: none; }
.title-continue { display: grid; gap: 8px; margin-top: 14px; }

/* ── sheets ─────────────────────────────────────────────────────────────── */

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 540px; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--sheet);
  border: 2px solid var(--panel-rim); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
}
.sheet-panel { max-height: calc(72vh - var(--top)); max-height: calc(72dvh - var(--top)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; border-bottom: 2px solid var(--panel-in); }
.sheet-head h2 { margin: 0; font-size: 26px; color: var(--lemon); }
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* ── inside a panel ─────────────────────────────────────────────────────── */

.p-note { margin: 0 0 10px; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.p-note.warn { color: var(--warn); }
.p-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 2px solid var(--line-2); }
.p-row:last-child { border-bottom: 0; }
.p-row .p-k { flex: 1; min-width: 0; }
.p-k small { display: block; font-size: 15px; color: var(--dim); font-weight: 400; }
.p-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper .btn { width: 40px; height: 40px; padding: 0; font-size: 26px; }
.stepper .n { min-width: 2.2em; text-align: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.big-number { font-size: 48px; font-weight: 700; text-align: center; color: var(--lemon); margin: 4px 0; font-variant-numeric: tabular-nums; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 2px; }
.pack { display: grid; gap: 1px; padding: 7px 4px; font-size: 16px; text-align: center; }
.pack b { font-size: 18px; }
.pack .count { font-size: 14px; color: #6a2a10; }
.supply { padding: 10px 0; border-bottom: 2px solid var(--line-2); }
.supply:last-child { border-bottom: 0; }
.supply-head { display: flex; align-items: center; gap: 8px; }
.supply-head .p-k { flex: 1; font-size: 20px; font-weight: 700; }
.supply-head .undo { margin-left: auto; }
.total-line { display: flex; justify-content: space-between; margin-top: 10px; font-size: 20px; font-weight: 700; }

.choice { display: grid; gap: 4px; padding: 11px 12px; margin-bottom: 8px; text-align: left; width: 100%; font-size: 18px; }
.choice .c-head { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.choice .c-head .p-v { margin-left: auto; }
.choice .c-about { font-family: var(--font-body); font-size: 13px; line-height: 1.4; text-shadow: none; }
.choice.is-on { background: linear-gradient(#fff6a8, #f2d64a); }
.choice.is-owned { background: var(--pill); color: var(--ink); text-shadow: 0 2px 0 var(--shadow-ink); border-color: var(--panel-in); box-shadow: none; cursor: default; }
.choice.is-owned .c-about { color: var(--ink-2); }
.choice:disabled:not(.is-owned) { opacity: .55; }

.place { margin-bottom: 10px; }
.place-art { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; border: 2px solid var(--panel-in); border-radius: 6px; }
.place-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.place-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.place-nav .place-name { flex: 1; text-align: center; font-size: 19px; font-weight: 700; color: var(--lemon); }
.place-nav .btn { width: 44px; height: 40px; padding: 0; font-size: 24px; }
.place-dots { display: flex; justify-content: center; gap: 5px; margin: 2px 0 8px; }
.place-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-in); }
.place-dots i.on { background: var(--lemon); }

/* The results: numbers, the bubbles counted, and a small chart. */
.res-head { text-align: center; margin: 2px 0 8px; }
.res-head .big-number { margin: 0; }
.res-line { font-size: 19px; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.res-cell { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; background: var(--pill); border-radius: 8px; font-size: 22px; font-weight: 700; }
.res-cell small { font-size: 13px; font-weight: 400; color: var(--dim); text-align: center; }
.res-cell img { width: 28px; height: 28px; }
.res-tip { font-size: 18px; color: var(--warn); margin: 8px 0; }
.res-remark { text-align: center; font-size: 22px; color: var(--lemon); margin: 6px 0; }
.res-record { text-align: center; font-size: 19px; color: var(--good); }
.ledger { width: 100%; border-collapse: collapse; font-size: 17px; margin: 6px 0; }
.ledger td { padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.ledger td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ledger tr.sum td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--line); }
.chart { display: block; width: 100%; height: 120px; margin: 6px 0 2px; }
.chart-k { display: flex; justify-content: space-between; font-size: 14px; color: var(--dim); }

/* ── the menu (the house's rows, in the game's colours) ──────────────────── */

/* IN FLOW, NOT FIXED (lemonade-v10, minesweeper-v32 and bubbles-v34's menu,
   ~/claude/IOS.md §15). Until v9 this was a fixed sheet with its own
   scroller, the one shape that ends a status bar short of the bottom edge
   of an installed iPhone. Now it is page content: the document is its
   scroller, it runs under the status bar at the top and off the bottom
   edge, and its head scrolls away with the rest. While it is open the app
   underneath is out of the flow — display: none, since nothing on the
   stand keeps a measured size (the scene canvas is fixed-ratio), and a day
   cannot be running (Menu is hidden during one). */
.menu-page { position: relative; z-index: 30; }
.menu-body {
  max-width: 540px; margin: 0 auto;
  padding: calc(8px + var(--top)) calc(12px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
}
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 4px; }
.menu-head h2 { margin: 0; font-size: 34px; color: var(--lemon); }
body:has(#sheet-menu:not([hidden])) #app { display: none; }

h2.sec { margin: 18px 4px 8px; font-size: 22px; color: var(--lemon); }
.menu-head + section h2.sec { margin-top: 8px; }
h3.sec-sub { margin: 14px 6px 6px; font-size: 15px; font-weight: 600; color: var(--dim); text-shadow: none; }
.card { background: var(--panel); border: 2px solid var(--panel-in); border-radius: var(--r-card); overflow: hidden; }
.card + .card { margin-top: 10px; }
.fineprint { margin: 10px 6px 0; color: var(--dim); font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; text-shadow: none; }
.fineprint strong { color: var(--ink-2); }
.prose { padding: 12px 14px; font-family: var(--font-body); text-shadow: none; }
.prose p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); }
.glyph { font-family: var(--font); font-weight: 700; color: var(--lemon); }
.menu-new { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.menu-new .btn { font-size: 18px; }
.menu-new .menu-week { grid-column: 1 / -1; }
.board-you { margin: 6px 8px 0; font-size: 16px; color: var(--ink-2); }

.seg { display: flex; gap: 2px; padding: 2px; background: var(--pill); border-radius: 10px; }
.seg button {
  flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 8px;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.seg button.is-on, .seg button[aria-selected="true"] { background: var(--tile-a); color: var(--tile-ink); text-shadow: none; }
.seg-sm { max-width: 220px; flex: 1; }
.seg-gap { margin-top: 8px; }

.rows > .row { padding: 12px 14px; border-bottom: 2px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rows > .row:last-child { border-bottom: 0; }
.rows > .row.row-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-tools { display: flex; align-items: center; gap: 12px; }
.row-k { font-size: 19px; font-weight: 600; }
.row-v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.row-note { margin: 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--dim); text-shadow: none; }
#tipjar-card { margin-top: 14px; }
.rows > button.row-tap {
  -webkit-appearance: none; appearance: none; width: 100%; background: none; border: 0; border-bottom: 2px solid var(--line-2);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.rows > button.row-tap:last-child { border-bottom: 0; }
.rows > button.row-tap:active { background: var(--pill); }
.row-tap .row-k { flex: 1; }
.row-tap .row-v { margin-left: auto; }
.row-tap .chev { color: var(--dim); font-size: 26px; line-height: 1; margin-top: -2px; }
#tipjar .tip-glyph { color: var(--heart); font-size: 22px; line-height: 1; margin-right: 2px; }
/* MYJP.CA GAMES (index.html, the foot): the lockup from myjp.ca/games —
   the wordmark in the rounded face, "games" tucked under it in the games'
   gold (games/index.php) — then "More games" and the caret. */
:root { --games-gold: #ffe45c; }   /* on lemonade the panels are green in both themes: the gold went muddy on them, so the games mark goes lemon */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --games-gold: #ffe45c; } }
:root[data-theme="dark"] { --games-gold: #ffe45c; }
#games-card { margin-top: 14px; }
.games-lockup { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; font-family: "SF Pro Rounded", ui-rounded, var(--font-body); font-weight: 700; }
.games-lockup .gl-mark { font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.games-lockup .gl-ca { color: var(--dim); }
.games-lockup .gl-sub { font-size: 10px; letter-spacing: .02em; color: var(--games-gold); margin-top: -1px; margin-right: 1px; }
#games-row .games-more { flex: 1; text-align: right; color: var(--dim); font-weight: 400; }
#account-card { padding: 12px 14px 0; }
#account-card .row-note { margin: 0 0 12px; }
#account-card .rows { margin: 0 -14px; }
#account-card .rows > button.row-tap { padding: 13px 14px; border-bottom: 0; border-top: 2px solid var(--line-2); }
.rows > button.row-tap.danger { color: var(--bad); }
details.technical { margin-top: 14px; }
/* THE CREDITS FOLD (lemonade-v10): Technical's shape, with the prose inside
   under a rule. `.fold` ahead of the tip jar, which brings its own margin. */
details.technical.fold > .prose { border-top: 2px solid var(--line-2); }
details.technical > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; }
details.technical > summary::-webkit-details-marker { display: none; }
details.technical > summary .chev { color: var(--dim); font-size: 26px; line-height: 1; margin-top: -2px; transition: transform .15s; }
details.technical[open] > summary .chev { transform: rotate(90deg); }
details.technical .kv { margin: 0; padding: 4px 14px 12px; border-top: 2px solid var(--line-2); }
details.technical .kv > div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
details.technical .kv > div:last-child { border-bottom: 0; }
details.technical .kv dt { flex: 0 0 76px; font-size: 16px; color: var(--dim); }
details.technical .kv dd { margin: 0; flex: 1; min-width: 0; font-size: 12px; font-family: var(--font-mono); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; text-shadow: none; }
details.technical > .row-note { padding: 0 14px 14px; }
.update-note { color: var(--warn); }

.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--pill); border: 2px solid var(--panel-in); transition: background .2s ease; }
.switch span::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 25px; height: 25px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}
.switch input:checked + span { background: var(--tile-b); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .4; }

.board-list { padding: 2px 0; }
.board-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--line-2); }
.board-row:last-child { border-bottom: 0; }
.board-row.you { background: rgba(247, 210, 62, .16); }
.board-row.you .board-name { font-weight: 700; }
.board-rank { width: 1.6em; font-size: 22px; font-weight: 700; color: var(--lemon); text-align: center; }
.board-who { flex: 1; min-width: 0; }
.board-name { font-size: 19px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-meta { font-size: 15px; color: var(--dim); }
.board-score { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.board-empty { padding: 18px 14px; text-align: center; color: var(--dim); font-size: 18px; }

/* ── signed out ─────────────────────────────────────────────────────────── */

.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(20px + var(--top)) 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.gate-card { width: 100%; max-width: 400px; text-align: center; padding: 18px 16px 16px; }
.gate-art { width: 100%; height: auto; border-radius: 6px; border: 2px solid var(--panel-in); }
.gate-sub { margin: 4px 0 8px; font-size: 19px; color: var(--ink-2); }
.gate-msg { margin: 8px 0; color: var(--warn); font-size: 17px; }
.gate-note { margin: 12px 0 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--dim); text-shadow: none; }

/* ── the banner ─────────────────────────────────────────────────────────── */

.banner {
  position: fixed; left: 12px; right: 12px; z-index: 40;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  max-width: 516px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: #fffbe8; color: #2b2a1f; text-shadow: none;
  border: 2px solid #2b2a1f; border-radius: var(--r-mid);
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.45;
  box-shadow: var(--shadow);
}
.banner button { margin-left: auto; flex: none; font: inherit; font-size: 24px; line-height: 1; border: 0; background: transparent; color: inherit; cursor: pointer; }
.banner .banner-retry { margin-left: auto; padding: 6px 13px; font-size: 15px; font-weight: 600; line-height: 1.2; border-radius: 999px; background: #2b2a1f; color: #fffbe8; }
.banner .banner-retry:disabled { opacity: .45; }
.banner .banner-retry + button { margin-left: 4px; }

/* The day panel: Performance, then Today's setting. */
.day-panel { display: grid; gap: 2px; }
.dp-h { margin: 4px 0 2px; font-size: 21px; color: var(--lemon); font-weight: 400; }
.dp-h:not(:first-child) { margin-top: 10px; }
.dp-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 2px solid var(--line-2); font-size: 19px; }
.dp-row b { font-weight: 400; color: var(--ink); text-align: right; }
.dp-owned b { font-size: 16px; }
.dp-bubbles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 2px; }
.dp-bubbles .res-cell { font-size: 22px; }

/* During a day the morning's controls step aside. */
.app.is-day .paper, .app.is-day .tiles, .app.is-day .actions, .app.is-day .plan-line, .app.is-day #install-pill { display: none; }

@media (min-width: 600px) {
  .tile { min-height: 74px; font-size: 17px; }
  .tile img { width: 40px; height: 40px; }
}