/* Layout: one screen. The playfield is a horizontal band of flat shapes;
     menus are quiet left-aligned cards that float over it. Each world swaps the palette. */
  /* The paper-map style (claude/estilo-visual.md): paper, terrain, 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 field'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;
    --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; --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; --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(--bg); 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)); }
  @media (max-width: 340px) { #hud { gap: 8px; } .hud-r { gap: calc(10px * var(--k, 1)); } }      /* the smallest phone: room for "99.999 m · récord" on one line */
  /* 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 > 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%; }
  @media (max-width: 340px) { #hud > div:first-child { font-size: calc(14px * var(--k, 1)); padding: 0 calc(8px * var(--k, 1)); } }      /* the smallest phone: the badge keeps "99.999 m · récord" on one line */
  #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); }

  /* first-route hint */
  #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;
  }
  .ring { width: calc(18px * var(--k, 1)); height: calc(18px * var(--k, 1)); border-radius: 50%; border: 2px solid var(--player); animation: press 1.4s ease-in-out infinite; }
  @keyframes press { 0%, 100% { transform: scale(1); background: transparent; } 45%, 70% { transform: scale(0.72); background: var(--player); } }

  /* 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, as it is) */
  .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); }
  .langsw[hidden] { display: none; }      /* on a site that passes no language the game plays in English, without the switch */
  .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; }
  @media (max-width: 359px) { .stepper { gap: 2px 8px; grid-template-columns: 36px 1fr auto 36px; } .stepper .round { width: 36px; height: 36px; } .route-n { font-size: 18px; padding: 0 10px; height: 36px; } .stars { gap: 2px; } .stars svg { width: 16px; height: 16px; } }      /* the smallest phones: the row still fits */
  .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; }
  .facts li { text-wrap: pretty; }      /* no word alone on a last line (rule 40) */
  .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 { border-color: var(--player); box-shadow: inset 0 0 0 1px 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: who is playing as its title, where it is saved, and five numbers (the rest is in Your stats) */
  .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: minmax(0, 1fr) auto; font-size: 15px; font-variant-numeric: tabular-nums; }
  .stats dt, .stats dd { margin: 0; padding: 5px 0; border-top: 1px solid var(--line); }
  .stats dt { color: var(--muted); }
  .stats dd { text-align: right; font-weight: 500; padding-left: 12px; }
  .stats dt:first-of-type, .stats dd:first-of-type { border-top: 0; }
  @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:nth-of-type(even) { padding-left: 18px; }
  }
  @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; } }
  @media (max-width: 340px) {      /* the smallest phone, where Spanish runs longer: the long value wraps rather than every name, and Stats and Back share a line */
    #panel.prof .stats { grid-template-columns: auto minmax(0, 1fr); }
    #panel.prof .actions:not(.pair) { flex-wrap: nowrap; } #panel.prof .actions:not(.pair) .btn { min-width: 0; padding: 0 12px; font-size: 16px; }
  }
  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.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; } }      /* Jugar, Diaria 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 says Back, with its arrow; Home, with its house, goes straight to the start screen (rule 64). The same as Hold the Line's. */
  .btn .backarrow { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; 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; min-width: 0; }
  .link { color: var(--muted); text-decoration: none; font-size: 13px; min-height: 28px; }

  /* after a play (Less is more, rule 69): the stars in one row, each with its name; the coins in big and their sum in one short line; a line of
     comparison and one of news at most; the buttons in one row, down to the smallest phone. No box scrolls. */
  #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; }
  /* the second chances (a video, a shield) under them: each button as wide as its words and the row centred, with one or both (rule 70) */
  #panel.result .actions.more { margin-top: -4px; justify-content: center; }
  #panel.result .actions.more .btn { flex: none; font-size: 15px; }
  @media (max-width: 420px) { #panel.result .actions:not(.more) { gap: 6px; } #panel.result .actions:not(.more) .btn { padding: 0 8px; font-size: 15px; } }      /* a phone: the four of a win in Spanish too */
  @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-width: 340px) { #panel.result .actions:not(.more) { gap: 5px; } #panel.result .actions:not(.more) .btn { padding: 0 6px; font-size: 14px; } }      /* the four of a win, in Spanish too, on the smallest phone */

  /* 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; }
  .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[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; }
  .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); }
  #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: 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 */
  .tletter { flex: none; width: 18px; height: 18px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; }      /* a small block; its letter takes whichever of white and ink reads on its colour */
  .actions.invite { flex-wrap: wrap; }
  .qrbox { display: flex; justify-content: center; }
  .wait { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--chip); box-shadow: var(--sh); text-align: left; }
  .wait .wt { margin: 0 0 2px; font-size: 16px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
  .wait .wt b { font-weight: 600; color: var(--player); }
  .pulse { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--player); }      /* (it used to beat; nothing in this style does) */
  .plabel { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .plist .hosttag { color: var(--muted); }
  .plist li.off { opacity: 0.55; }
  .meline { text-align: center; }
  .meline b { color: var(--ink); font-weight: 600; }
  .meline .link { min-height: 24px; }
  .cfgv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 15px; }
  .cfgv dt { color: var(--muted); }
  .cfgv dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
  .qr.sm { width: min(calc(190px * var(--k)), 52vw, 32vh); }
  .qr { display: block; width: min(calc(220px * var(--k)), 64vw, 42vh); height: auto; aspect-ratio: 1; border-radius: 12px; box-shadow: var(--sh); }
  .btn.wa { border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }      /* (a brand green is a fourth colour: it is a button like the others) */
  .btn.wa .waic { width: 18px; height: 18px; fill: currentColor; }
  .roomcode { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; text-align: center; }
  .teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .team { border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: var(--sh); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .team.mine { box-shadow: var(--sh), inset 0 0 0 1.5px var(--tc); border-color: var(--tc); }
  .team .th { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .team .th b { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .team .pp { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
  .team .pp li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team .pp button { text-align: left; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .team .pp .off { color: var(--muted); }
  .team .join { font-size: 12px; color: var(--muted); text-decoration: none; font-weight: 500; align-self: flex-start; }
  .swatches { display: flex; gap: 6px; }
  .swatch { width: 22px; height: 22px; border-radius: 8px; border: 2px solid transparent; box-shadow: var(--sh-down); }      /* a small block of the team's colour */
  .swatch[aria-pressed="true"] { border-color: var(--ink); }
  .plist { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
  .plist li { padding: 1.5px 8.5px; border: 1.5px solid transparent; border-radius: 12px; background: var(--chip); box-shadow: var(--sh); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
  .plist li.me, .scorebar li.me { border-color: var(--player); }      /* your own name: a border of your colour */
  .team .pp li.me { width: fit-content; max-width: 100%; box-sizing: border-box; padding: 0 7px; border: 1.5px solid var(--player); border-radius: 9px; }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field > span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  input.text { font: inherit; font-size: 18px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box; }
  input.text.code { text-transform: uppercase; letter-spacing: 0.18em; text-align: center; }
  .note.err { color: var(--hazard); }
  .standings { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; counter-reset: pl; }
  .standings li { counter-increment: pl; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; border: 1.5px solid transparent; font-size: 15px; }
  .standings li::before { content: counter(pl) "º"; color: var(--muted); min-width: 1.8em; font-variant-numeric: tabular-nums; }
  .standings li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .standings li b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .standings li.me { border-color: var(--player); }
  .lead { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: calc(112px * var(--k, 1)); height: calc(112px * var(--k, 1)); border-radius: 22px; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; z-index: 6; }
  .lead svg { position: absolute; inset: 14%; width: 72%; height: 72%; transform: rotate(-90deg); }
  .lead .lt { fill: none; stroke: var(--line); stroke-width: 4; }
  .lead .lr { fill: none; stroke: var(--player); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; }
  .lead b { font-size: calc(32px * var(--k, 1)); font-weight: 600; color: var(--ink); }
  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }