/* Layout: one screen. The room is a block of flat cells in the middle; menus are quiet cards that float over it. Each world swaps the palette. */
  :root {
    --bg: #F2ECE1;
    --band: #E7DCC8;
    --ink: #2D271F;
    --muted: #74695A;
    --crate: #B07C50;
    --player: #2551CC;
    --hazard: #CF4630;
    --reward: #DB9A00;
    --card: #FAF6EF;
    --line: rgba(45, 39, 31, 0.14);
    --line-strong: rgba(45, 39, 31, 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 and per the theme chosen in the store. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #1E1A15; --band: #2B261F; --ink: #F2ECE3; --muted: #B3A999; --player: #82B6FF; --hazard: #FF7058; --reward: #FFCF5C; --crate: #D19E6E; --card: #29241E;
      --line: rgba(242, 236, 227, 0.14); --line-strong: rgba(242, 236, 227, 0.34); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #1E1A15; --band: #2B261F; --ink: #F2ECE3; --muted: #B3A999; --player: #82B6FF; --hazard: #FF7058; --reward: #FFCF5C; --crate: #D19E6E; --card: #29241E;
    --line: rgba(242, 236, 227, 0.14); --line-strong: rgba(242, 236, 227, 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: 3px; }
  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 { white-space: nowrap; }
  @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 .steps, #hud .gems { gap: 5px; } }      /* the smallest phones: the HUD stays 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)); } #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%; }
  .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(--card); border: 1px solid var(--line); border-radius: calc(20px * var(--k, 1)); padding: calc(8px * var(--k, 1)) calc(14px * var(--k, 1)) calc(8px * var(--k, 1)) calc(10px * var(--k, 1));
  }
  #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 steps left, with a pair of footprints; red when few are left (a warning of something wrong now, rule 40) */
  .steps { display: inline-flex; align-items: center; gap: calc(7px * var(--k, 1)); }
  .steps.low { color: var(--hazard); }
  .stepi { width: calc(12px * var(--k, 1)); height: calc(12px * var(--k, 1)); display: inline-block; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cellipse cx='3.6' cy='7.6' rx='2.3' ry='3.6'/%3E%3Cellipse cx='8.4' cy='4.4' rx='2.3' ry='3.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cellipse cx='3.6' cy='7.6' rx='2.3' ry='3.6'/%3E%3Cellipse cx='8.4' cy='4.4' rx='2.3' ry='3.6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .tab .stepi { width: 11px; height: 11px; margin-right: 2px; }
  /* under the room, in a room with bots: Wait (rule 5: the play's controls under the field, in the middle; they grow with a big screen) */
  #ctrl { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; }
  #ctrl .btn { height: calc(44px * var(--k, 1)); padding: 0 calc(24px * var(--k, 1)); font-size: calc(16px * var(--k, 1)); background: var(--card); }
  /* the star reward: two chips, pick one (rule 19) */
  .chips.reward { justify-content: center; margin-top: -2px; }
  .chips.reward .tab { height: 36px; padding: 0 14px; font-variant-numeric: tabular-nums; }
  .chips.reward .gem { margin: 0 3px 0 0; }

  /* 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: 1px solid var(--line); border-radius: 22px;
    padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 16px;
  }
  @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: 40px; font-weight: 300; letter-spacing: -0.01em; line-height: 1; }
  h2 { margin: 0; font-size: 24px; font-weight: 400; 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; border: 1px solid var(--line-strong); background: var(--card); margin-top: 4px; }
  .langsw span { min-width: 34px; height: 30px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 13px; font-weight: 600; 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%; border: 1.5px solid var(--line-strong); 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.3; cursor: default; }
  .route-n { font-size: 24px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .route-meta { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; white-space: pre-line; line-height: 1.35; }
  .stars { display: inline-flex; gap: 3px; }
  .stars svg { width: 18px; height: 18px; }
  .star-on { fill: var(--reward); stroke: var(--reward); }
  .star-off { fill: none; stroke: var(--line-strong); }
  .stars svg path { stroke-width: 1.4; stroke-linejoin: round; }

  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn { height: 48px; border-radius: 24px; padding: 0 22px; font-size: 17px; font-weight: 500; flex: 1 1 auto; white-space: nowrap; }
  .btn.primary { background: var(--ink); color: var(--bg); }
  .btn.ghost { border: 1.5px solid 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; border: 1.5px solid 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); border-color: var(--ink); }
  .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: 1px solid var(--line); border-radius: 18px; 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.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; line-height: 1.3; padding: 9px 14px; border-radius: 14px; pointer-events: none; text-align: center; }
  .gift { color: var(--ink); }
  .note b { color: var(--ink); font-weight: 600; }
  .modes .btn { padding: 0 14px; }
  /* 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: underline; text-underline-offset: 3px; 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-width: 340px) { #panel.result { padding-left: 14px; padding-right: 14px; } #panel.result .actions:not(.more) { gap: 5px; }      /* the smallest phone, in Spanish too: the four in one row */
    #panel.result .actions:not(.more) .btn { padding: 0 6px; font-size: 13.5px; } #panel.result .actions:not(.more) .btn .back { width: 11px; height: 11px; } #panel.result .btn.withicon { gap: 3px; } }
  @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; border: 1.5px solid var(--line-strong); border-radius: 16px; 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; border: 1.5px solid var(--line-strong); overflow: hidden;
    display: grid; place-items: center; color: var(--ink); background-color: transparent; background-size: cover; background-position: center; background-clip: padding-box; }
  .lt .sk { width: 66%; height: 66%; }
  .lt[aria-pressed="true"] { background-color: var(--ink); border-color: var(--ink); color: var(--bg); }
  .lt.bgl[aria-pressed="true"] { border-width: 2.5px; box-shadow: inset 0 0 0 2px var(--card); }
  .lt.try { border-color: var(--player); box-shadow: 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(--card); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 10px; padding: 5px 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); font-size: 13px; 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: 700px) { #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; } }
  @media (max-height: 430px) and (min-aspect-ratio: 1/1) { #panel.statsp { width: min(760px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); gap: 8px; padding-top: 12px; padding-bottom: 10px; } .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px 10px; } .tiles div { padding: 2px 0 1px; } }      /* a phone on its side: five to a line, so all twenty fit */
  /* 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 > :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; } }