/* Lemonade Inc. styles
   Tokens mirror the Figma file "Lemonade Inc. — Design System" (Foundations page).
   Change a colour here and in Figma together; names match the Figma variables' code syntax. */

/* ---------- 1. Tokens ---------- */
:root{
  /* primitives */
  --lemon-50:#FFF4C4; --lemon-400:#FFD93B; --lemon-600:#E5AE00; --lemon-900:#3A2A00;
  --sky-100:#DDF1F8; --sky-300:#9FD3EA;
  --slate-200:#C9DDE5; --slate-600:#51646D; --slate-900:#1F2D35;
  --night-50:#E8F1F4; --night-300:#9DB1B9; --night-700:#2A4552; --night-800:#182D37; --night-900:#10212A;
  --leaf-300:#9BE39A; --leaf-600:#2F8A3E;
  --berry-300:#FFB4A8; --berry-600:#C0392B; --berry-800:#8E2A20;
  --wood-500:#A5673A; --wood-800:#6E4020;
  --chalk-50:#F2F6EC; --chalk-300:#B9C8BC; --chalk-900:#2C3B33;
  --white:#FFFFFF;

  /* semantic (light) */
  --bg-app:var(--sky-100); --bg-surface:var(--white); --bg-sunken:var(--sky-100);
  --text-primary:var(--slate-900); --text-muted:var(--slate-600); --border-default:var(--slate-200);
  --accent-fill:var(--lemon-400); --accent-edge:var(--lemon-600); --accent-on:var(--lemon-900); --accent-soft:var(--lemon-50);
  --status-positive:var(--leaf-600); --status-negative:var(--berry-600); --negative-soft:#FFEDE8;
  --board-frame:var(--wood-500); --board-frame-edge:var(--wood-800); --board-chalk:var(--chalk-900);
  --board-ink:var(--chalk-50); --board-ink-soft:var(--chalk-300); --board-positive:var(--leaf-300); --board-negative:var(--berry-300);
  --overlay:rgba(10,20,25,.55); --glass:rgba(31,45,53,.82);

  /* shape, space, type, motion */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --h-lg:52px; --h-md:44px; --h-sm:40px;
  --font-display:"Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body:Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-overlay:0 16px 40px rgba(0,0,0,.22);
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.22s;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-app:var(--night-900); --bg-surface:var(--night-800); --bg-sunken:var(--night-900);
    --text-primary:var(--night-50); --text-muted:var(--night-300); --border-default:var(--night-700);
    --status-positive:var(--leaf-300); --status-negative:var(--berry-300); --negative-soft:rgba(255,180,168,.12);
  }
}
:root[data-theme="dark"]{
  --bg-app:var(--night-900); --bg-surface:var(--night-800); --bg-sunken:var(--night-900);
  --text-primary:var(--night-50); --text-muted:var(--night-300); --border-default:var(--night-700);
  --status-positive:var(--leaf-300); --status-negative:var(--berry-300); --negative-soft:rgba(255,180,168,.12);
}
:root.reduce-motion{ --dur:0s; }

/* ---------- 2. Base ---------- */
html{ scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%; overflow-x:hidden; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; overflow-x:hidden; background:var(--bg-app); color:var(--text-primary); font:16px/1.45 var(--font-body); }
body.locked{ overflow:hidden; }
button{ font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .1s ease; }
button:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--accent-edge); outline-offset:2px; }
button:disabled{ opacity:.45; cursor:not-allowed; }
.ico{ display:inline-block; width:1em; height:1em; vertical-align:-.12em; }
.icon{ width:24px; height:24px; flex:0 0 auto; display:block; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width:1200px; margin:0 auto; padding:var(--s-3) 14px 28px; }

/* ---------- 3. Components ---------- */
/* Button: primary / secondary / danger, lg 52 / md 44 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:var(--h-md); padding:0 var(--s-5); border:0; border-radius:var(--r-md); font-weight:800; line-height:1.15; text-align:center; text-decoration:none; }
.btn .icon{ width:20px; height:20px; }
.btn--lg{ min-height:var(--h-lg); padding:0 28px; font-family:var(--font-display); font-size:22px; }
.btn--lg .icon{ width:24px; height:24px; }
.btn--block{ display:flex; width:100%; }
.btn--primary{ background:var(--accent-fill); color:var(--accent-on); box-shadow:0 4px 0 var(--accent-edge); margin-bottom:4px; }
.btn--primary:active:not(:disabled){ transform:translateY(2px); box-shadow:0 2px 0 var(--accent-edge); }
.btn--secondary{ background:var(--bg-surface); color:var(--text-primary); box-shadow:inset 0 0 0 2px var(--border-default); }
.btn--secondary:hover:not(:disabled){ box-shadow:inset 0 0 0 2px var(--text-muted); }
.btn--danger{ background:var(--berry-600); color:var(--white); box-shadow:0 4px 0 var(--berry-800); margin-bottom:4px; }
.btn--danger:active:not(:disabled){ transform:translateY(2px); box-shadow:0 2px 0 var(--berry-800); }
.btn-stack{ display:grid; gap:var(--s-3); margin-top:var(--s-4); }
.btn-row{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.btn-row > .btn{ flex:1 1 0; }

/* Icon button: 44 round, light / chalk / scene */
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:var(--h-md); height:var(--h-md); flex:0 0 auto; padding:0; border:0; border-radius:var(--r-pill); background:var(--bg-surface); color:var(--text-primary); box-shadow:inset 0 0 0 1.5px var(--border-default); }
.iconbtn:hover{ box-shadow:inset 0 0 0 1.5px var(--text-muted); }
.iconbtn--scene{ background:var(--glass); color:#fff; box-shadow:none; }

/* Segmented control */
.seg{ display:inline-flex; gap:2px; padding:3px; border-radius:12px; background:var(--bg-sunken); }
.seg button{ min-height:var(--h-sm); padding:0 var(--s-3); border:0; border-radius:var(--r-sm); background:none; color:var(--text-muted); font-weight:800; }
.seg button[aria-pressed="true"]{ background:var(--bg-surface); color:var(--text-primary); box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* Toggle */
.toggle{ position:relative; width:52px; height:32px; flex:0 0 auto; padding:0; border:0; border-radius:var(--r-pill); background:var(--border-default); }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform var(--dur) var(--ease); }
.toggle[aria-checked="true"]{ background:var(--status-positive); }
.toggle[aria-checked="true"]::after{ transform:translateX(20px); }

/* Popup header */
.popup-head{ display:flex; align-items:flex-start; gap:var(--s-3); margin-bottom:var(--s-3); }
.popup-head > div{ flex:1 1 auto; min-width:0; }
.popup-head h2{ font-family:var(--font-display); font-size:28px; font-weight:800; line-height:1.1; margin:0 0 var(--s-1); }
.sub{ color:var(--text-muted); margin:0 0 var(--s-3); }
.popup-head .sub{ margin:0; }

/* List row (shop, location) */
.list{ display:grid; gap:var(--s-2); }
.list-row{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3); border:1px solid var(--border-default); border-radius:var(--r-md); background:var(--bg-surface); }
.list-row .tile{ width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--bg-sunken); font-size:26px; line-height:1; }
.list-row .tile .ico{ width:28px; height:28px; }
.list-row .txt{ flex:1 1 auto; min-width:0; }
.list-row h3{ margin:0; font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1.15; }
.list-row p{ margin:2px 0 0; color:var(--text-muted); font-size:14px; line-height:1.4; }
.list-row .btn{ min-height:var(--h-sm); padding:0 var(--s-4); flex:0 0 auto; white-space:nowrap; }
.list-row.is-locked .tile{ opacity:.5; }
.list-row.is-here{ box-shadow:inset 0 0 0 2px var(--accent-fill); border-color:transparent; }
.status{ display:inline-flex; align-items:center; gap:var(--s-1); font-weight:800; white-space:nowrap; color:var(--text-muted); }
.status .icon{ width:18px; height:18px; }
.status--done{ color:var(--status-positive); }

/* Menu item */
.menu-list{ display:grid; gap:2px; }
.menu-item{ display:flex; align-items:center; gap:var(--s-3); width:100%; min-height:52px; padding:0 14px; border:0; border-radius:var(--r-md); background:none; color:var(--text-primary); font-weight:800; text-align:left; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible{ background:var(--bg-sunken); }
.menu-item > span{ flex:1 1 auto; }
.menu-item small{ display:block; font-weight:700; color:var(--text-muted); font-size:13px; }
.menu-item .chev{ width:20px; height:20px; color:var(--text-muted); }
.menu-item--danger{ color:var(--status-negative); }
.menu-sep{ height:1px; background:var(--border-default); margin:var(--s-2) 0; }

/* Callout */
.callout{ background:var(--accent-soft); color:var(--accent-on); border-radius:var(--r-sm); padding:10px 14px; margin:var(--s-3) 0; font-weight:700; }
.callout--warn{ background:var(--negative-soft); color:var(--status-negative); }

/* Settings rows */
.set-row{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--border-default); }
.set-row > div{ flex:1 1 auto; }
.set-row b{ display:block; }
.set-row small{ display:block; color:var(--text-muted); font-size:14px; }
.fine{ color:var(--text-muted); font-size:13px; font-weight:700; text-align:center; margin:var(--s-3) 0 0; }

/* Pager */
.howto-art{ display:grid; place-items:center; height:150px; border-radius:var(--r-md); background:var(--accent-soft); font-size:72px; line-height:1; margin-bottom:var(--s-4); }
.howto h3{ font-family:var(--font-display); font-size:21px; margin:0 0 var(--s-1); line-height:1.15; }
.howto p{ color:var(--text-muted); margin:0; min-height:4.4em; }
.pager-nav{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-5); }
.dots{ display:flex; gap:6px; margin-right:auto; }
.dots i{ width:8px; height:8px; border-radius:4px; background:var(--border-default); transition:width var(--dur) var(--ease), background-color var(--dur); }
.dots i.on{ width:22px; background:var(--accent-edge); }
.pager-nav .btn{ min-width:96px; }

/* ---------- 4. Header & scene ---------- */
.top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:10px; }
.brand{ font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1; margin:0; letter-spacing:-.5px; }
.brand span{ display:inline-block; transform:rotate(-12deg); }
.stats{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-left:auto; align-items:center; }
.stat{ background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--r-pill); padding:5px 12px; font-weight:800; white-space:nowrap; }
.stat small{ font-weight:700; color:var(--text-muted); margin-right:4px; }
.meter{ display:inline-block; width:64px; height:9px; border-radius:9px; background:var(--border-default); vertical-align:middle; overflow:hidden; margin-left:4px; }
.meter i{ display:block; height:100%; background:var(--leaf-600); }
.top .iconbtn{ margin-left:auto; }
.stats + .iconbtn{ margin-left:0; }

.scene{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:4px solid var(--board-frame-edge); background:var(--sky-300); aspect-ratio:960/440; }
canvas{ display:block; width:100%; height:100%; }
.scene-stats{ position:absolute; inset:10px 10px auto 10px; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-2); pointer-events:none; z-index:2; }
.scene-badge{ background:var(--glass); color:#fff; border-radius:var(--r-md); padding:6px 12px; font-weight:800; line-height:1.1; white-space:nowrap; }
.scene-badge.weather{ font-size:16px; }
.scene-badge.cash{ font-family:var(--font-display); font-size:22px; background:var(--accent-fill); color:var(--accent-on); }
.hud{ position:absolute; inset:56px 10px auto 10px; display:none; justify-content:space-between; align-items:flex-start; gap:var(--s-2); pointer-events:none; }
.hud.on{ display:flex; }
.hud > *{ pointer-events:auto; }
.clock{ background:var(--glass); color:#fff; border-radius:var(--r-md); padding:6px 12px; font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.1; white-space:nowrap; }
.speeds{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.speeds button{ min-height:var(--h-sm); min-width:var(--h-md); padding:0 var(--s-3); border:0; border-radius:var(--r-sm); background:rgba(255,255,255,.9); color:var(--slate-900); font-weight:800; }
.speeds button[aria-pressed="true"]{ background:var(--accent-fill); color:var(--accent-on); }
.paused-badge{ position:absolute; inset:0; display:none; place-items:center; z-index:3; pointer-events:none; }
.paused-badge span{ background:var(--glass); color:#fff; border-radius:var(--r-pill); padding:8px 18px; font-family:var(--font-display); font-weight:800; font-size:22px; }
body.is-paused .paused-badge{ display:grid; }

.open-bar{ display:none; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:14px 0; }
.open-bar.on{ display:flex; }
.loc-badge{ display:inline-flex; align-items:center; gap:6px; min-height:var(--h-md); background:var(--bg-surface); border:0; box-shadow:inset 0 0 0 1.5px var(--border-default); border-radius:var(--r-pill); padding:0 18px 0 14px; font-weight:800; color:var(--text-primary); }
.loc-badge .icon{ width:20px; height:20px; color:var(--text-muted); }

/* ---------- 5. Chalkboard ---------- */
.board{ margin-top:14px; background:var(--board-frame); border-radius:var(--r-lg); padding:10px; box-shadow:inset 0 0 0 3px var(--board-frame-edge); }
.chalk{ background:var(--board-chalk); color:var(--board-ink); border-radius:12px; padding:14px; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; padding-bottom:var(--s-3); margin-bottom:var(--s-3); border-bottom:2px solid rgba(242,246,236,.18); }
.tabs button{ min-height:var(--h-sm); background:transparent; border:2px solid var(--board-ink-soft); color:var(--board-ink); border-radius:var(--r-sm); padding:0 14px; font-size:15px; font-weight:800; }
.tabs button[aria-selected="true"]{ background:var(--board-ink); color:var(--board-chalk); border-color:var(--board-ink); }
.panel-desc{ margin:0 0 var(--s-3); color:var(--board-ink-soft); font-size:14px; line-height:1.4; }
.panel{ background:rgba(242,246,236,.05); border:2px solid rgba(242,246,236,.14); border-radius:var(--r-md); padding:14px; }
.rows{ display:grid; gap:10px; }
.row{ display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:var(--s-2) 14px; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(242,246,236,.25); }
.row:last-child{ border-bottom:0; }
.row h3{ margin:0; font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1.15; }
.row p{ margin:2px 0 0; color:var(--board-ink-soft); font-size:14px; }
.packs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.pack{ background:var(--board-ink); color:var(--board-chalk); border:0; border-radius:var(--r-sm); min-height:48px; padding:6px 10px; font-weight:800; font-size:15px; line-height:1.15; text-align:center; min-width:88px; }
.pack small{ display:block; font-weight:700; font-size:13px; opacity:.7; }
.chips{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px 4px; margin:-4px 0 8px; }
.chip{ flex:0 0 auto; background:none; border:0; padding:6px 10px; font-size:32px; line-height:1; opacity:.55; transition:opacity .15s ease, transform .15s ease, filter .15s ease; }
.chip[aria-pressed="true"]{ opacity:1; transform:scale(1.12); filter:drop-shadow(0 0 7px rgba(255,217,59,.85)); }
.sup-ico{ display:inline-block; font-size:1.3em; margin-right:10px; vertical-align:-.08em; }
.step{ display:flex; align-items:center; gap:var(--s-2); }
.step button{ width:var(--h-md); height:var(--h-md); border-radius:50%; border:2px solid var(--board-ink-soft); background:transparent; color:var(--board-ink); font-size:22px; font-weight:800; line-height:1; }
.step output{ min-width:64px; text-align:center; font-family:var(--font-display); font-size:24px; font-weight:800; }
.owned{ color:var(--lemon-400); font-weight:800; }
.go{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:var(--s-3); padding:10px 6px 2px; }
.go p{ margin:0; color:var(--board-ink); font-weight:700; flex:1 1 260px; }
.live{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.live div{ background:rgba(242,246,236,.08); border-radius:var(--r-sm); padding:8px 10px; }
.live b{ display:block; font-family:var(--font-display); font-size:24px; line-height:1.1; }
.live span{ color:var(--board-ink-soft); font-size:14px; }
.warn{ color:var(--board-negative); }
.cost{ display:grid; grid-template-columns:1fr auto; gap:3px 16px; background:rgba(242,246,236,.07); border-radius:var(--r-sm); padding:10px 14px; margin:0 0 4px; }
.cost dt{ color:var(--board-ink-soft); margin:0; } .cost dd{ margin:0; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
.note{ margin:0 0 6px; color:var(--board-ink-soft); font-size:13px; }
.good{ color:var(--board-positive); } .badc{ color:var(--board-negative); }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:14px; }
.tiles div{ background:rgba(242,246,236,.08); border-radius:var(--r-sm); padding:8px 10px; }
.tiles b{ display:block; font-family:var(--font-display); font-size:22px; line-height:1.15; font-variant-numeric:tabular-nums; }
.tiles span{ color:var(--board-ink-soft); font-size:13px; }
.charts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-3); margin-bottom:14px; }
.chart{ background:rgba(242,246,236,.06); border-radius:var(--r-sm); padding:8px 10px 4px; }
.chart h4{ margin:0 0 4px; font-size:14px; color:var(--board-ink-soft); font-weight:800; }
.chart svg{ display:block; width:100%; height:auto; }
.books-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-2); margin:2px 0 10px; }
.books-h h3{ margin:0; font-family:var(--font-display); font-size:20px; }
.books-h .pack{ min-height:var(--h-sm); padding:0 14px; }
.ledger{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ledger table{ border-collapse:collapse; width:100%; min-width:720px; font-size:14px; font-variant-numeric:tabular-nums; }
.ledger th{ text-align:right; color:var(--board-ink-soft); font-weight:800; padding:6px 8px; border-bottom:1px solid rgba(242,246,236,.3); white-space:nowrap; }
.ledger td{ text-align:right; padding:6px 8px; border-bottom:1px dashed rgba(242,246,236,.15); white-space:nowrap; }
.ledger th:nth-child(-n+3), .ledger td:nth-child(-n+3){ text-align:left; }

/* ---------- 6. Overlays: modal, sheet ---------- */
.scrim{ position:fixed; inset:0; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity var(--dur) ease; z-index:19; }
.scrim.on{ opacity:1; pointer-events:auto; }

.modal{ position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; padding:var(--s-4); z-index:30; opacity:0; visibility:hidden; transition:opacity var(--dur) ease, visibility 0s linear var(--dur); }
.modal.on{ opacity:1; visibility:visible; transition:opacity var(--dur) ease; }
.card{ background:var(--bg-surface); color:var(--text-primary); border-radius:var(--r-lg); max-width:480px; width:100%; max-height:calc(100% - 20px); overflow:auto; overscroll-behavior:contain; padding:var(--s-5); box-shadow:var(--shadow-overlay); transform:translateY(12px) scale(.98); transition:transform var(--dur) var(--ease); }
.modal.on .card{ transform:none; }
.card:focus{ outline:none; }
.card.wide{ max-width:640px; }
.card h3{ font-family:var(--font-display); font-size:19px; margin:var(--s-4) 0 4px; }
.tally{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:10px 0; }
.tally dt{ color:var(--text-muted); } .tally dd{ margin:0; font-weight:800; text-align:right; }
.tally dd, .tally dt{ font-variant-numeric:tabular-nums; }
.tally .indent{ padding-left:14px; font-size:14px; }
.profit{ font-size:20px; }
.pos{ color:var(--status-positive); } .neg{ color:var(--status-negative); }
.fb{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--s-2) 0 4px; padding:0; list-style:none; }
.fb li{ background:var(--bg-sunken); border-radius:var(--r-pill); padding:4px 10px; font-weight:700; font-size:14px; }
.mini-wrap{ overflow-x:auto; }
.mini{ width:100%; border-collapse:collapse; font-size:14px; margin:4px 0 8px; font-variant-numeric:tabular-nums; }
.mini th, .mini td{ padding:5px 6px; border-bottom:1px solid var(--border-default); text-align:right; white-space:nowrap; }
.mini th{ color:var(--text-muted); font-weight:800; }
.mini th:first-child, .mini td:first-child{ text-align:left; }

/* In-game menu: right panel on wide screens, bottom sheet on phones */
.sheet{ position:fixed; top:0; right:0; bottom:0; width:340px; max-width:88vw; background:var(--bg-surface); color:var(--text-primary); padding:var(--s-5) var(--s-4); padding-top:calc(var(--s-5) + env(safe-area-inset-top,0px)); transform:translateX(100%); transition:transform var(--dur) var(--ease), box-shadow var(--dur); z-index:20; overflow:auto; visibility:hidden; }
.sheet.on{ transform:none; box-shadow:-8px 0 24px rgba(0,0,0,.25); visibility:visible; }
.sheet .grab{ display:none; }
@media (max-width:560px){
  .sheet{ top:auto; left:0; width:auto; max-width:none; max-height:88vh; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:10px var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom,0px)); transform:translateY(100%); }
  .sheet.on{ box-shadow:0 -8px 24px rgba(0,0,0,.25); }
  .sheet .grab{ display:block; width:40px; height:5px; border-radius:3px; background:var(--border-default); margin:0 auto var(--s-3); }
}

/* ---------- 7. Title screen ---------- */
/* The art and the logo are separate layers on every screen: the background fills the screen
   (portrait, 5:4 or 16:9 art, whichever crops least) and the logo + buttons sit on top. */
.title{ position:fixed; inset:0; z-index:25; display:flex; background:var(--sky-300) url(../assets/opening.webp) center 55%/cover no-repeat; color:var(--slate-900); overflow:hidden; transition:opacity .35s ease; }
.title[hidden]{ display:flex; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s linear .35s; }
.title::after{ content:""; position:absolute; inset:auto 0 0 0; height:min(62%, 420px); background:linear-gradient(to bottom, rgba(221,241,248,0), rgba(221,241,248,.92) 52%, var(--sky-100)); pointer-events:none; }
.title-col{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; min-height:0; }
.title-logo{ width:min(86vw, 440px); height:auto; margin-top:calc(7vh + env(safe-area-inset-top,0px)); filter:drop-shadow(0 6px 12px rgba(60,30,0,.25)); animation:logoIn .7s var(--ease) both; }
.title-actions{ margin-top:auto; width:min(100% - 32px, 380px); display:grid; gap:var(--s-3); padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom,0px)); animation:actionsIn .6s .15s var(--ease) both; }
.title-actions .btn-row .btn{ padding:0 var(--s-3); white-space:nowrap; }
.title-foot{ margin:var(--s-1) 0 0; text-align:center; font-size:13px; font-weight:700; color:var(--slate-600); }
@keyframes logoIn{ from{ opacity:0; transform:translateY(-16px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes actionsIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
/* Landscape: the stand is on the right of the art, so the logo and a card of buttons take the left side.
   5:4 art up to 3:2 (iPad, split view), 16:9 art beyond that (laptops, desktops, phones on their side). */
@media (min-aspect-ratio:11/10){
  .title{ background-image:url(../assets/bg-mid.webp); background-position:70% 60%; }
  .title::after{ inset:0 auto 0 0; width:60%; height:auto; background:linear-gradient(to right, rgba(221,241,248,.5), rgba(221,241,248,0)); }
  .title-col{ flex:0 1 auto; width:min(46vw, 76vh); justify-content:center; gap:clamp(12px, 4vh, 40px); padding:calc(var(--s-4) + env(safe-area-inset-top,0px)) 0 calc(var(--s-4) + env(safe-area-inset-bottom,0px)); margin-left:max(3vw, 16px, env(safe-area-inset-left,0px)); }
  .title-logo{ width:100%; max-height:42vh; object-fit:contain; margin-top:0; }
  .title-actions{ margin-top:0; width:min(100%, 400px); padding:var(--s-5); border-radius:var(--r-xl); background:rgba(255,255,255,.9); box-shadow:var(--shadow-overlay); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
}
@media (min-aspect-ratio:3/2){
  .title{ background-image:url(../assets/bg-wide.webp); background-position:right 60%; }
}
/* Big landscape screens: scale the button card up with the logo */
@media (min-aspect-ratio:11/10) and (min-height:1000px){ .title-actions{ zoom:1.2; } }
@media (min-aspect-ratio:11/10) and (min-height:1300px){ .title-actions{ zoom:1.45; } }
/* Short landscape screens (phones on their side): tighter logo and buttons so it all fits */
@media (min-aspect-ratio:11/10) and (max-height:560px){
  .title-col{ width:min(50vw, 420px); gap:var(--s-3); }
  .title-logo{ max-height:34vh; }
  .title-actions{ width:min(100%, 340px); padding:var(--s-3); gap:var(--s-2); }
  .title-actions .btn--lg{ min-height:var(--h-md); font-size:20px; }
}
@media (min-aspect-ratio:11/10) and (max-height:420px){
  .title-foot{ display:none; }
}

/* ---------- 8. Layout ---------- */
/* Landscape iPad and desktop: board on the left, the stand ("monitor") on the right, kept in view while the board scrolls */
@media (min-width:561px) and (orientation:landscape){
  .wrap{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-areas:"top top" "board stage"; column-gap:16px; align-items:start; }
  .top{ grid-area:top; }
  .board{ grid-area:board; margin-top:0; }
  .stage{ grid-area:stage; position:sticky; top:12px; }
  .scene{ aspect-ratio:1/1; max-height:calc(100dvh - 110px); }
  .open-bar{ margin:12px 0 0; }
  .sup-ico{ font-size:1em; margin-right:6px; }
}
@media (max-width:560px){
  .row{ grid-template-columns:1fr; } .packs{ justify-content:flex-start; } .brand{ font-size:26px; }
  .stats{ flex-wrap:nowrap; overflow-x:auto; gap:6px; width:100%; margin-left:0; order:3; }
  .stat{ padding:4px 9px; font-size:14px; flex:0 0 auto; }
  .stat .meter{ display:none; }
  .scene{ aspect-ratio:3/4; }
  .tabs{ gap:5px; } .tabs button{ flex:1 1 auto; padding:0 8px; }
  .card{ padding:var(--s-4); }
  .popup-head h2{ font-size:26px; }
  .list-row{ flex-wrap:wrap; } .list-row .txt{ flex-basis:calc(100% - 60px); } .list-row > .btn, .list-row > .status{ margin-left:60px; }
}
@media (prefers-reduced-motion: reduce){ :root:not(.motion-on){ --dur:0s; } }
:root.reduce-motion *, :root.reduce-motion *::before, :root.reduce-motion *::after{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){ :root:not(.motion-on) .title-logo, :root:not(.motion-on) .title-actions{ animation:none; } .btn:active{ transform:none; } }