/* Layout: one screen. The board is a square of paper in the middle, on terrain; menus are quiet cards that float over it. Each world swaps the palette. */
  /* The paper-map style (claude/estilo-visual.md): paper (the board), terrain (the ground round it), ink, the three function colours, and one cutout
     shadow under everything that sits on the paper: hard, shifted down and to the right (--sh), the same for a card, a button, a chip and the board's pieces. */
  [hidden] { display: none !important; }      /* the page hides its own panels: never rely on the host page's reset for this (the artifact's wrapper stopped providing it) */
  :root {
    --bg: #F6F0DE;
    --band: #BFDCC9;
    --park: #A9D1BA;
    --water: #D2E5D5;
    --road: #FFFFFF;
    --ink: #2A2E35;
    --muted: #6B7078;
    --food: #58B65C;
    --player: #2E5FE0;
    --hazard: #E54B4B;
    --reward: #EFB22E;
    --card: #FFFFFF;
    --shadow: rgba(42, 46, 53, 0.13);
    --sh: calc(4px * var(--k, 1)) calc(5px * var(--k, 1)) 0 var(--shadow);
    --sh-down: 1px 1px 0 var(--shadow);
    --line: rgba(42, 46, 53, 0.14);
    --line-strong: rgba(42, 46, 53, 0.32);
    --coin-ring: rgba(255, 255, 255, 0.45);
    --font: "Jost", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  }
  /* Dark values for the first paint. Once the game starts it sets every token itself, per world, per the theme chosen, and per the sun (sky.js). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --food: #6CC570; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --card: #3F4553;
      --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --food: #6CC570; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --card: #3F4553;
    --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); color-scheme: dark;
  }
  html, body { height: 100%; }
  body {
    background: var(--band); color: var(--ink); font-family: var(--font);
    overflow: hidden; -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  }
  #stage { position: relative; height: 100%; overflow: hidden; touch-action: none; }
  #game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--player); outline-offset: 2px; }
  /* a pressed piece sinks into the paper: it moves onto its shadow (style guide, "Estados") */
  .btn, .round, .pill, .tab, .sect, .lt, .icon, .buy, .langsw { transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
  .btn:active:not(:disabled), .round:active:not(:disabled), .pill:active, .tab:active:not(:disabled), .sect:active, .lt:active, .icon:active, .buy:active:not(:disabled) { transform: translate(2px, 3px); box-shadow: var(--sh-down); }
  @media (prefers-reduced-motion: reduce) { .btn, .round, .pill, .tab, .sect, .lt, .icon, .buy, .langsw { transition: none; } }
  a { color: inherit; }

  /* heads-up display */
  #hud {
    position: absolute; top: 0; left: 0; right: 0; height: calc(40px * var(--k, 1)); padding: 0 calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px));
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    pointer-events: none; font-size: calc(15px * var(--k, 1)); font-weight: 500; letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
  }
  .hud-r { display: flex; align-items: center; gap: calc(14px * var(--k, 1)); }
  #hud > div:first-child { display: inline-flex; align-items: center; height: calc(36px * var(--k, 1)); padding: 0 calc(11px * var(--k, 1)); border-radius: calc(11px * var(--k, 1)); background: var(--ink); color: var(--bg); font-weight: 600; font-size: calc(16px * var(--k, 1)); letter-spacing: 0; box-shadow: var(--sh); max-width: 60%; }
  #hud { white-space: nowrap; }
  @media (max-width: 400px) { #hud { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); gap: 8px; } .hud-r { gap: calc(10px * var(--k, 1)); } #hud > div:first-child { padding: 0 9px; } #hud .bites, #hud .gems { gap: 5px; } }      /* a phone: the badge and the counters keep to one line, at their longest too */
  @media (max-width: 359px) { #hud { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); gap: 8px; font-size: 14px; } .hud-r { gap: 8px; } #hud .bites, #hud .gems { gap: 5px; } #hud > div:first-child { font-size: 14px; padding: 0 8px; } }      /* the smallest phones: the HUD stays on one line */
  @media (max-width: 340px) { #hud > div:first-child { font-size: 13px; padding: 0 7px; } }      /* the smallest phone: the badge keeps "289 long · new best" on one line, with the counters */
  /* on a big screen the HUD grows with --k (layout) */
  #hud .gems { gap: calc(7px * var(--k, 1)); } #hud .gem { width: calc(11px * var(--k, 1)); height: calc(11px * var(--k, 1)); }
  #hud .icon { width: calc(36px * var(--k, 1)); height: calc(36px * var(--k, 1)); background: var(--card); box-shadow: var(--sh); } #hud .icon svg { width: calc(16px * var(--k, 1)); height: calc(16px * var(--k, 1)); }
  #hud .shieldchip { width: calc(12px * var(--k, 1)); height: calc(12px * var(--k, 1)); border-width: calc(2px * var(--k, 1)); }
  .gems { display: inline-flex; align-items: center; gap: 7px; }
  .gem { width: 11px; height: 11px; background: var(--reward); border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 2px var(--coin-ring); flex: none; }
  .hearts { display: inline-flex; gap: 5px; }
  .heart { width: 10px; height: 10px; border-radius: 50%; background: var(--player); box-sizing: border-box; }
  .heart.lost { background: transparent; border: 1.5px solid var(--line-strong); }
  .icon { pointer-events: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: var(--sh); }
  .icon svg { width: 16px; height: 16px; fill: var(--ink); }

  /* the line of help on the first play */
  #hint {
    position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); box-sizing: border-box;
    display: flex; align-items: center; gap: calc(10px * var(--k, 1)); font-size: calc(15px * var(--k, 1)); color: var(--ink); pointer-events: none;
    background: var(--ink); color: var(--bg); border-radius: 999px; padding: calc(8px * var(--k, 1)) calc(14px * var(--k, 1)) calc(8px * var(--k, 1)) calc(10px * var(--k, 1)); box-shadow: var(--sh); font-weight: 500;
  }
  #hint > span:last-child { text-wrap: pretty; }
  .ring { width: calc(18px * var(--k, 1)); height: calc(18px * var(--k, 1)); border-radius: 50%; border: 2px solid var(--player); animation: swipe 1.6s ease-in-out infinite; }
  @keyframes swipe { 0%, 100% { transform: translateX(-4px); background: transparent; } 40%, 60% { transform: translateX(4px); background: var(--player); } }
  /* the food, as a small mark in the HUD */
  .bites { display: inline-flex; align-items: center; gap: 7px; }
  .food { width: calc(11px * var(--k, 1)); height: calc(11px * var(--k, 1)); background: var(--food); border-radius: 22%; display: inline-block; flex: none; }      /* the fruit: a small block, rounded (a stem is too small to read here) */

  /* cards */
  .card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 32px)); box-sizing: border-box;
    background: var(--card); border-radius: 18px; box-shadow: var(--sh);
    padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 14px;
  }
  @media (max-aspect-ratio: 1/1) {
    .card { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-height: calc(100% - 40px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px)) !important; }
  }
  @media (min-aspect-ratio: 1001/1000) {      /* wider than tall (a phone on its side): the card keeps clear of a notch on either side, and of the home bar */
    .card { max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); max-height: calc(100% - 24px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px)) !important;
      top: calc(50% + (var(--safe-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2); }
  }
  @media (max-height: 430px) {
    .card { padding: 14px 18px 12px; gap: 10px; }
    h1 { font-size: 30px; }
  }
  h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
  h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
  .tag { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
  /* the menu's title, and beside it the language: English or Spanish, both always in view (Mindlap's, rule 72) */
  .mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mtitle { min-width: 0; }
  .langsw { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--line); margin-top: 0; }
  .langsw span { min-width: 34px; height: 28px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }
  .langsw span.on { background: var(--ink); color: var(--bg); }
  .note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; text-wrap: pretty; }
  p { text-wrap: pretty; }

  .stepper { display: grid; grid-template-columns: 40px 1fr auto 40px; grid-template-areas: "prev name stars next" "prev meta meta next"; align-items: center; gap: 2px 10px; }
  #btnPrev { grid-area: prev; } #mRoute { grid-area: name; } #mStars { grid-area: stars; } #btnNext { grid-area: next; } #mMeta { grid-area: meta; }
  .round { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; }
  .round svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .round:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .route-n { justify-self: start; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; box-shadow: var(--sh); white-space: nowrap; }
  .route-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; white-space: pre-line; line-height: 1.5; margin-top: 4px; }
  .stars { display: inline-flex; gap: 3px; }
  .stars svg { width: 18px; height: 18px; }
  .star-on { fill: var(--reward); stroke: var(--reward); }
  .star-off { fill: var(--line); stroke: var(--line); }
  .stars svg path { stroke-width: 1.4; stroke-linejoin: round; }

  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn { height: 46px; border-radius: 23px; padding: 0 22px; font-size: 16px; font-weight: 500; flex: 1 1 auto; white-space: nowrap; box-shadow: var(--sh); background: var(--card); }
  .btn.primary { background: var(--ink); color: var(--bg); }
  .btn.ghost { box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); }
  .actions .round { flex: none; width: 48px; height: 48px; }
  .round svg.fill { fill: var(--ink); stroke: none; }
  .facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.3; }
  .facts b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .card { max-height: calc(100% - 24px); overflow-y: auto; }
  .tabs { display: flex; gap: 6px; }
  .tab { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 14px; font-weight: 500; background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .tab.try { box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  .tab .ico { flex: none; }
  .tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: var(--sh); }
  .lb { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-size: 15px; font-variant-numeric: tabular-nums; }
  .lb li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
  .lb li:first-child { border-top: 0; }
  .lb .rank { color: var(--muted); }
  .lb .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb .me .who { font-weight: 600; }
  .kind { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
  .lb .kind { margin-left: 6px; }
  .lb .score { color: var(--muted); font-size: 14px; white-space: nowrap; }
  /* the site's corner of the menu: the way back to the games on the left, who is playing on the right. It floats over the field, like the HUD. */
  .sitebar { position: absolute; top: calc(8px + var(--safe-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
    display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
  .pill { pointer-events: auto; box-sizing: border-box; height: 36px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    background: var(--card); border-radius: 18px; box-shadow: var(--sh); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .pill svg { width: 12px; height: 12px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .pill.who { padding: 0 14px 0 11px; max-width: 62%; }
  .pill.who #mWhoIcon { display: inline-flex; flex: none; }
  .pill.who #mWho { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* on a screen wider than it is tall the menu card sits in the middle: the profile keeps to the room beside it, and on a narrow one shows the picture only */
  @media (min-aspect-ratio: 1/1) { .pill.who { max-width: calc(50% - 180px - 20px); } }
  @media (min-aspect-ratio: 1/1) and (max-width: 700px) { .pill.who { padding: 0 10px; } .pill.who #mWho { display: none; } }
  /* a message never sits over the corner: on an upright screen it steps below it, on a wide one it keeps to the width of the card between the two */
  #sitebar:not([hidden]) ~ .toast { top: calc(52px + var(--safe-top, 0px)); }
  @media (min-aspect-ratio: 1/1) { #sitebar:not([hidden]) ~ .toast { top: calc(10px + var(--safe-top, 0px)); max-width: min(360px, calc(100% - 32px)); } }
  /* the profile */
  .idline { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
  h2.idline + .note { margin-top: -8px; }
  .idline .sk { width: 26px; height: 26px; flex: none; }
  .idline b { font-size: 20px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); font-size: 15px; font-variant-numeric: tabular-nums; }      /* the names whole, on one line; a long value (the coin level with its multiplier, in Spanish) takes a second one */
  .stats dt, .stats dd { margin: 0; padding: 5px 0; border-top: 1px solid var(--line); }
  .stats dt { color: var(--muted); white-space: nowrap; }
  .stats dd { text-align: right; font-weight: 500; padding-left: 12px; }
  .stats dt:first-of-type, .stats dd:first-of-type { border-top: 0; }
  a.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .pair .btn { padding: 0 14px; }      /* the two ways to an account share a line, on a small phone too */
  .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
  .links > .link { display: inline-flex; align-items: center; min-height: 28px; line-height: 1.2; font-size: 13px; padding: 0; }      /* the sound and the way back: the same box, so the same line */
  a.link { display: inline-flex; align-items: center; }
  .btn.small { height: 40px; font-size: 15px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
  .btn:disabled { opacity: 0.4; cursor: default; }
  .tab:disabled { opacity: 0.4; cursor: default; }
  .tab .gem { margin-left: 3px; width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--coin-ring); }
  .bal { margin: -8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .bal b { color: var(--ink); font-weight: 600; }
  .shop { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .shop li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .shop li:first-child { border-top: 0; }
  .shop li.looks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .meter { display: block; height: 4px; border-radius: 2px; background: var(--line); margin: 7px 0 5px; overflow: hidden; }
  .meter i { display: block; height: 100%; border-radius: 2px; background: var(--player); }
  .buy { background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); border-radius: 20px; }
  .buy.primary { box-shadow: var(--sh); }
  .buy.wide { justify-content: center; }
  .toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; z-index: 5;
    background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; line-height: 1.3; padding: 9px 16px; border-radius: 999px; box-shadow: var(--sh); pointer-events: none; text-align: center; }
  .gift { color: var(--ink); }
  .note b { color: var(--ink); font-weight: 600; }
  .modes .btn { padding: 0 14px; }
  @media (max-width: 340px) { .modes { gap: 8px; } .modes .btn { padding: 0 10px; font-size: 16px; } }      /* Play, Daily and Endless share their line on the smallest phone too */
  /* a player shape in the store: the game's own drawing, used as a mask so it takes the colour of the text around it */
  .sk { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask-image: var(--m); mask-image: var(--m);
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
  /* an upgrade level that has not opened yet */
  .shut { margin: 0; height: 36px; padding: 0 12px; border: 1.5px dashed var(--line-strong); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
  .gift b { font-weight: 600; }
  .tab .ico + span + .ico, .tab span + .ico { margin-left: 3px; }
  .prevwrap { flex: none; position: sticky; top: 0; z-index: 1; background: var(--card); padding: 8px 0; margin: -8px 0; }
  .prevwrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: var(--card); }   /* nothing shows above the strip while the list scrolls under it */
  #shopMsg, #panel .tabs, #testRow { position: relative; z-index: 2; }
  .prev { display: block; width: 100%; height: 92px; border-radius: 12px; }
  .shop b { font-weight: 600; font-size: 16px; }
  .shop p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
  .lvl { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .buy { flex: none; height: 40px; padding: 0 14px; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
  .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .shieldchip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--player); box-sizing: border-box; display: inline-block; }
  .shop li.head { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 16px; }
  .pay { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
  .pay .buy { height: 36px; justify-content: center; }
  .adbar { margin: 0; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .adbar span { display: block; height: 100%; width: 0; background: var(--player); transition: width 1s linear; }
  .bal span { margin-left: 6px; }
  .btn.small svg { flex: none; }
  /* the way back: an arrow and Back; Home: a little house (rule 64) */
  .btn.withicon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .btn .back { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .chips .lvl { margin: 0 4px 0 0; align-self: center; }
  .foot .grow { flex: 1 0 auto; }
  @media (max-width: 340px) {      /* the smallest phone: the level's number on one line and the four of the foot on one line, in Spanish too, so the menu stays clear of the site bar */
    .foot { font-size: 12px; column-gap: 8px; }
    #menu { padding-left: 18px; padding-right: 18px; }
    .stepper { grid-template-columns: 36px 1fr auto 36px; column-gap: 6px; } .stepper .round { width: 36px; height: 36px; } .route-n { font-size: 22px; }
  }
  .link { color: var(--muted); text-decoration: none; font-size: 13px; min-height: 28px; }

  /* After a play (Less is more): the stars in a row, the coins and how they were worked out, a line or two, the buttons in a row. No scroll. */
  #panel.result { gap: 12px; }
  .srow { display: flex; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
  .srow li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; line-height: 1.2; text-align: center; }
  .srow li.off { color: var(--muted); }
  .srow svg { width: 28px; height: 28px; }
  .srow svg path { stroke-width: 1.4; stroke-linejoin: round; }
  #panel.result .bal { margin: 0; font-size: 18px; }
  #panel.result .bal b { font-size: 22px; }
  #panel.result .note.pay { margin-top: -8px; font-size: 13px; text-wrap: balance; }
  #panel.result .actions .btn { flex: 1 1 auto; padding: 0 14px; font-size: 16px; }
  #panel.result .actions:not(.more) { flex-wrap: nowrap; gap: 8px; }      /* Next, Retry, Store and Back: one row, down to the smallest phone */
  #panel.result .actions:not(.more) .btn { min-width: 0; padding: 0 12px; }
  #panel.result .actions.more { margin-top: -4px; justify-content: center; }
  #panel.result .actions.more .btn { flex: 0 1 auto; }
  @media (max-width: 360px) { #panel.result { padding-left: 18px; padding-right: 18px; } #panel.result .actions .btn { padding: 0 10px; font-size: 15px; }
    #panel.result .actions:not(.more) { gap: 6px; } #panel.result .actions:not(.more) .btn { padding: 0 8px; } }
  @media (max-height: 430px) and (min-aspect-ratio: 1/1) {      /* a phone on its side: wider, so lines and buttons sit side by side and nothing scrolls */
    #panel.result, #panel.prof { width: min(560px, calc(100% - 32px)); } #panel.prof.prof, #panel.result.result { gap: 8px; }
    #panel.prof .stats { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 0; }
    #panel.prof .stats dt { white-space: normal; } #panel.prof .stats dt:nth-of-type(even) { padding-left: 18px; }
    #panel.prof .stats dt:nth-of-type(2), #panel.prof .stats dd:nth-of-type(2) { border-top: 0; }
  }
  @media (max-height: 600px) { .stats dt, .stats dd { padding: 3px 0; } #panel.prof, #panel.result { gap: 10px; padding-top: 16px; padding-bottom: 12px; } #panel.prof .btn, #panel.result .btn { height: 42px; } }

  /* The store never scrolls. Its card has a fixed height; the rows (or the looks' chips) take what room is left, a page at a time (pageStore).
     It opens on its sections, two to a line. On a short wide screen the heading, the strip and Back sit on the left, the rows on the right. */
  #panel.store { height: min(calc(100% - 24px), 760px); max-height: none; overflow: hidden; padding: 16px 18px 14px; gap: 10px; }
  @media (max-aspect-ratio: 1/1) { #panel.store { height: min(760px, calc(100% - 40px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px))); } }
  @media (min-aspect-ratio: 1001/1000) { #panel.store { height: min(760px, calc(100% - 24px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px))); } }
  #panel.store .shopside { display: contents; }
  /* its sections take the room they need; a section keeps the same height page after page */
  #panel.store.home { height: auto; }
  #panel.store.home .shopmain, #panel.store.home #shopList { flex: none; }
  .shophead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .shophead h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shophead .bal { margin: 0; flex: none; }
  #panel.store .prevwrap { position: static; margin: 0; padding: 0; }
  #panel.store .prevwrap::before { display: none; }
  #panel.store .prev { height: clamp(48px, 9vh, 92px); }
  #panel.store #shopMsg { font-size: 13px; }
  #panel.store .shop li { padding: 8px 0; gap: 10px; }
  #panel.store .shop b { font-size: 15px; }
  #panel.store .shop p { font-size: 13px; line-height: 1.28; }
  #panel.store .meter { margin: 5px 0 3px; }
  #panel.store .pay { gap: 4px; }
  #panel.store .buy, #panel.store .shut { height: 32px; padding: 0 12px; font-size: 14px; }
  #panel.store .shop li.looks { gap: 8px; padding: 2px 0 0; }
  #shopSub { flex-wrap: wrap; }
  @media (max-width: 359px) { #shopSub { gap: 6px; } #shopSub .tab { padding: 0 10px; font-size: 13px; } }      /* the smallest phones: the three kinds of look stay on one line */
  .shopmain { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  #shopList { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; }
  .shop.sects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(64px, auto); gap: 8px; align-content: start; }
  .shop.sects li, #panel.store .shop.sects li { display: block; padding: 0; border: 0; }
  .sect { width: 100%; height: 100%; box-sizing: border-box; text-align: left; background: var(--bg); border-radius: 14px; box-shadow: var(--sh); padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  li.sect { background: none; box-shadow: none; border-radius: 0; }      /* (the list item only places the section; the button is the piece) */
  .sect b { font-size: 16px; font-weight: 600; }
  .sect span { font-size: 12.5px; line-height: 1.25; color: var(--muted); text-wrap: pretty; }
  .lhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
  .lhead .lvl { margin: 0; }
  .lhead .tab.mini { margin-left: auto; height: 28px; padding: 0 10px; font-size: 12px; }
  /* the looks: a tile each, with the look drawn by the game's own code. Its name is read aloud, shown on hover or focus, and written under the tiles.
     Owned ones carry nothing else; one for sale has a coin, a closed one a lock. Worn: filled (a background: a double ring). Tried on: the player's colour. */
  .chips.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
  .lt { position: relative; aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; box-sizing: border-box; border-radius: 12px; box-shadow: var(--sh); overflow: hidden;
    display: grid; place-items: center; color: var(--ink); background-color: var(--bg); background-size: cover; background-position: center; background-clip: padding-box; }
  .lt .sk { width: 66%; height: 66%; }
  .lt .pic { display: block; width: 72%; height: 72%; background-size: contain; background-repeat: no-repeat; background-position: center; }      /* a food tile: the game's drawing of it, in its own colours (before v0.7 this had no size and the tile showed nothing) */
  .lt[aria-pressed="true"] { background-color: var(--ink); color: var(--bg); }
  .lt.bgl[aria-pressed="true"] { box-shadow: var(--sh), inset 0 0 0 2.5px var(--ink), inset 0 0 0 4.5px var(--card); }
  .lt.try { box-shadow: var(--sh), inset 0 0 0 2px var(--player); }
  .lt.locked .sk { opacity: 0.38; }
  .lt.locked.bgl::after { content: ""; position: absolute; inset: 0; background: var(--card); opacity: 0.55; }
  .lt .badge { position: absolute; right: 2px; bottom: 2px; z-index: 1; width: 16px; height: 16px; border-radius: 8px; background: var(--card); color: var(--ink); display: grid; place-items: center; }
  .lt .badge .gem { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--coin-ring); }
  .lt .badge .ico { width: 8px; height: 10px; }
  .pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .pager .round { width: 36px; height: 36px; }
  #panel.store .shopact .btn { height: 44px; }
  @media (min-height: 501px) and (min-aspect-ratio: 1/1) {      /* a wide screen: a wider store, its rows two to a line */
    #panel.store { width: min(780px, calc(100% - 32px)); }
    #panel.store .shop:not(.sects) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-content: start; }
    #panel.store .shop:not(.sects) li:nth-child(2) { border-top: 0; }
    #panel.store .shop li.looks { grid-column: 1 / -1; }
    .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }      /* the looks' tiles a little bigger than on a phone */
  }
  @media (max-height: 500px) and (min-aspect-ratio: 1/1) {
    #panel.store { width: min(720px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px 18px; padding: 14px 16px 12px; }
    #panel.store .shopside { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 1; min-height: 0; }
    #panel.store .shopmain { grid-column: 2; grid-row: 1 / span 2; }
    #panel.store .shopact { grid-column: 1; grid-row: 2; }
  }
  /* the name of a button that is only an icon, while the mouse or the keys' cursor is on it */
  .tip { position: absolute; z-index: 6; pointer-events: none; box-sizing: border-box; max-width: calc(100% - 16px); white-space: nowrap; background: var(--ink); color: var(--bg);
    border-radius: 999px; padding: 5px 11px; box-shadow: var(--sh); font-size: 12px; font-weight: 500; line-height: 1.25; }
  /* the player's stats: one tile a number, two to a line on a phone and more on a wide screen. Nothing in it scrolls. */
  #panel.statsp { gap: 12px; }
  .tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-variant-numeric: tabular-nums; }
  .tiles div { min-width: 0; padding: 5px 0 4px; border-top: 1px solid var(--line); }
  .tiles dt { margin: 0; font-size: 12px; line-height: 1.2; color: var(--muted); }
  .tiles dd { margin: 1px 0 0; font-size: 16px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
  @media (min-aspect-ratio: 1/1) { #panel.statsp { width: min(640px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); } .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-height: 760px) and (max-aspect-ratio: 1/1) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; } .tiles dt { font-size: 11.5px; } }      /* a small upright phone: three to a line, so all of them fit */
  @media (max-height: 640px) { #panel.statsp { gap: 10px; } .tiles { gap: 2px 12px; } .tiles div { padding: 3px 0 2px; } .tiles dt { font-size: 11.5px; } .tiles dd { font-size: 15px; line-height: 1.2; } }
  /* the leaderboard: a rank, a name and the board's own columns, the player's own line under the ten best */
  .lbt { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
  .lbt.c1 { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lbt li { display: contents; }
  .lbt li > * { padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
  .lbt li > * + * { padding-left: 10px; }      /* the columns' room is padding, not a gap, so a marked row is one band */
  .lbt li:first-child > * { border-top: 0; }
  .lbt .rank { color: var(--muted); text-align: right; min-width: 18px; }
  .lbt .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lbt .v { text-align: right; white-space: nowrap; }
  .lbt .v + .v { color: var(--muted); }
  .lbt li.head > * { padding-top: 0; padding-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: normal; line-height: 1.2; align-self: end; }
  .lbt li.head .v { max-width: 84px; }
  .lbt li.me > * { font-weight: 600; background: var(--line); }
  .lbt li.me > :first-child { box-shadow: inset 3px 0 0 var(--player); }
  .lbt li > :first-child { padding-left: 6px; }
  .lbt li > :last-child { padding-right: 6px; }
  .lbt li.me > :first-child { border-radius: 8px 0 0 8px; }
  .lbt li.me > :last-child { border-radius: 0 8px 8px 0; }
  .lbt li.own > * { border-top: 1.5px solid var(--line-strong); margin-top: 6px; }
  .lbt .kind { margin-left: 6px; }
  .lbwait { margin: 0; padding: 14px 0; color: var(--muted); font-size: 15px; }
  a.inl { color: var(--ink); text-underline-offset: 3px; }      /* a link inside a line of text */
  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }