/* Mindlap: a trivia race. A terrain panel along the top shows who is ahead on four roads; the question and its answers fill the rest.
     The paper-map style (claude/estilo-visual.md): flat paper, terrain, ink, the three function colours (blue is you, red is wrong, amber is coins;
     green is right) and one cutout shadow under everything that lies on the paper: hard, shifted down and to the right (--sh), the same for a card,
     a button, a chip and the canvas's pieces. Each world swaps the palette. */
  [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; --paper: #F6F0DE; --band: #BFDCC9; --park: #A9D1BA; --water: #D2E5D5; --road: #FFFFFF; --ink: #2A2E35; --muted: #6B7078;
    --player: #2E5FE0; --hazard: #E54B4B; --reward: #EFB22E; --good: #2F9A4A; --card: #FFFFFF; --chip: #F6F0DE;
    --shadow: rgba(42, 46, 53, 0.13);
    --line: rgba(42, 46, 53, 0.14); --line-strong: rgba(42, 46, 53, 0.3); --coin-ring: rgba(255, 255, 255, 0.45);
    --t0: #3FB8A8; --t1: #8A63D2; --t2: #58B65C; --t3: #2A2E35;
    --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; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --good: #78CB7B; --card: #3F4553; --chip: rgba(255, 255, 255, 0.05);
      --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); --t0: #5CCFBF; --t1: #A98BE8; --t2: #78CB7B; --t3: #F3EEE2; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #262B38; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --good: #78CB7B; --card: #3F4553; --chip: rgba(255, 255, 255, 0.05);
    --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); --t0: #5CCFBF; --t1: #A98BE8; --t2: #78CB7B; --t3: #F3EEE2; 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: manipulation; --k: 1;
    --sh: calc(4px * var(--k)) calc(5px * var(--k)) 0 var(--shadow); --sh-down: 1px 1px 0 var(--shadow); }      /* the shadow grows with the screen, as the unit does */
  #track { position: absolute; left: 0; right: 0; top: 0; width: 100%; display: block; }
  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
  button:focus-visible, a:focus-visible, input: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, .icon, .buy, .opt, .keys button, .topicbtn, .cats button, .packs .pk, .ltile, .boost, .link { 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, .icon:active, .buy:active:not(:disabled), .opt:active:not(:disabled), .keys button:active:not(:disabled),
  .topicbtn:active, .cats button:active, .packs .pk:active:not(:disabled), .ltile:active, .boost:active:not(:disabled) { transform: translate(2px, 3px); box-shadow: var(--sh-down); }
  @media (prefers-reduced-motion: reduce) { .btn, .round, .pill, .tab, .sect, .icon, .buy, .opt, .keys button, .topicbtn, .cats button, .packs .pk, .ltile, .boost, .link { transition: none; } .card, .toast { animation: none !important; } }
  a { color: inherit; }

  /* heads-up display: one row of 36 px just above the terrain. Left, the badge (the lap); right, the coins, the hearts as pips and the pause button. */
  #hud { position: absolute; top: 0; left: 0; right: 0; height: 40px; padding: 0 calc(12px + env(safe-area-inset-right, 0px)) 0 calc(14px + env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 10px;
    pointer-events: none; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; z-index: 2; }
  #hud .l, #hud .r { display: flex; align-items: center; gap: 12px; min-width: 0; }
  #hud .l { height: 36px; padding: 0 11px; border-radius: 11px; background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: var(--sh); }
  #hudLap { white-space: nowrap; overflow: hidden; min-width: 0; }      /* never cut: on a small phone its text gets smaller to fit (hudFit) */
  @media (max-width: 360px) { #hud { gap: 6px; padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(8px + env(safe-area-inset-right, 0px)); } #hud .l { padding: 0 8px; } #hud .l, #hud .r { gap: 7px; }
    .hearts { gap: 3px; } #hud .icon { width: 34px; height: 34px; } .gems { gap: 4px; } }
  .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; }
  .gems { display: inline-flex; align-items: center; gap: 6px; }
  .hearts { display: inline-flex; gap: 5px; align-items: center; }
  .hearts svg { width: 10px; height: 10px; fill: var(--player); stroke: var(--player); stroke-width: 2; }      /* a life is a pip */
  .hearts svg.lost { fill: none; stroke: var(--line-strong); }
  .hearts.hit { animation: shake 0.3s; }
  .shieldchip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--player); box-sizing: border-box; display: inline-block; }
  .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: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

  /* the question and its answers: under the track, as wide as reads well */
  #play { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(calc(560px * var(--k)), 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(10px * var(--k));
    padding: 8px calc(14px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  /* two columns on a phone on its side (below); elsewhere the columns are not there and everything is one column, in this order */
  .qa, .qb, .mcol { display: contents; }
  .qmeta { order: 1; } .timer { order: 2; } .qcard { order: 3; } .opts { order: 4; } .numpad { order: 5; } .boosts { order: 6; } .reveal { order: 7; }
  /* once the answer is out, the pad's keys go (the number typed stays); in a room the answers go too: the pie lists them, with who said what */
  #play.rv .keys, #play.rvroom .keys, #play.rvroom .opts { display: none; }
  .qmeta { flex: none; display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--k)); color: var(--muted); font-variant-numeric: tabular-nums; min-height: 22px; }
  .qmeta .kindtag { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 500; font-size: calc(12px * var(--k)); letter-spacing: 0.02em; box-shadow: var(--sh); }
  .qmeta .kindtag.wild { background: var(--reward); color: #2A2E35; }
  .qmeta .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timer { flex: none; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }      /* the time bar: 4 px, blue on ink at 12 % */
  .timer i { display: block; height: 100%; width: 100%; background: var(--player); border-radius: 2px; transform-origin: left center; }
  .timer.low i { background: var(--hazard); }
  .timer.frozen i { background: var(--muted); }
  /* the question card: its text shrinks to fit (fitText), never overflows */
  .qcard { flex: 1 1 0; min-height: calc(84px * var(--k)); max-height: calc(200px * var(--k)); background: var(--card); border-radius: calc(18px * var(--k)); box-shadow: var(--sh); padding: calc(14px * var(--k)) calc(16px * var(--k));
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .qcard { position: relative; }
  .qcard.hascat { padding-bottom: calc(30px * var(--k)); }
  /* the question's category: small, thin, at the bottom right, under a hairline */
  .qcat { position: absolute; left: calc(16px * var(--k)); right: calc(16px * var(--k)); bottom: calc(8px * var(--k)); padding-top: 6px; border-top: 1px solid var(--line); text-align: right;
    font-size: calc(11px * var(--k)); line-height: 1.2; font-weight: 300; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .qcard p { margin: 0; font-size: 24px; line-height: 1.22; font-weight: 500; text-align: center; text-wrap: balance; overflow-wrap: normal; max-height: 100%; }
  /* the answers: four tiles, two by two when there is room, one under another when it is narrow */
  .opts { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(8px * var(--k)); }
  .opts.two { grid-template-columns: 1fr 1fr; }
  .opts.stack { grid-template-columns: minmax(0, 1fr); }
  .opt { position: relative; min-height: calc(58px * var(--k)); height: calc(64px * var(--k)); box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: calc(18px * var(--k)); background: var(--card); box-shadow: var(--sh);
    padding: 4px 34px 4px 12px; display: flex; align-items: center; gap: 8px; text-align: left; overflow: hidden; }
  .opts.stack .opt { height: calc(52px * var(--k)); min-height: calc(48px * var(--k)); }
  .opt .key { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--muted); }
  .opt .tx { flex: 1; min-width: 0; font-size: 17px; line-height: 1.15; font-weight: 500; overflow-wrap: normal; max-height: 100%; }
  .qcard p.brk, .opt .tx.brk { overflow-wrap: anywhere; }      /* a word too long for its box even at the smallest size breaks, as a last resort */
  /* the tick and the cross are line icons (2 px, round ends) drawn over the glyph the game writes, which stays for a screen reader */
  .opt .mk { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; font-size: 0; line-height: 0; color: transparent; }
  .opt.right .mk::after, .opt.wrong .mk::after { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .opt.right .mk::after { color: var(--good); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
  .opt.wrong .mk::after { color: var(--hazard); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
  .opt.cur { outline: 2px solid var(--player); outline-offset: 2px; }
  .opt.pick { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  .opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--card)); box-shadow: var(--sh), inset 0 0 0 1.5px var(--good); }
  .opt.wrong { border-color: var(--hazard); background: color-mix(in srgb, var(--hazard) 12%, var(--card)); }
  .opt.dim { opacity: 0.4; box-shadow: none; }
  .opt:disabled { cursor: default; }
  .opt .dots { position: absolute; left: 12px; bottom: 4px; display: flex; gap: 3px; }
  .opt .dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
  .opt .ord { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--player); color: var(--card); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
  /* the number pad: the game's own, so a phone shows digits only, the same on every system */
  .numpad { flex: none; display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
  .numshow { height: calc(52px * var(--k)); box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: calc(18px * var(--k)); background: var(--card); box-shadow: var(--sh); display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: calc(26px * var(--k)); font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; padding: 0 12px; }
  .numshow .u { font-size: calc(15px * var(--k)); font-weight: 400; color: var(--muted); }
  .numshow.empty b { color: var(--muted); font-weight: 400; }
  .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6px * var(--k)); }
  .keys button { height: calc(46px * var(--k)); border-radius: calc(16px * var(--k)); background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--sh); font-size: calc(21px * var(--k)); font-weight: 500; font-variant-numeric: tabular-nums; }
  .keys button.ok { background: var(--ink); color: var(--paper); border-color: var(--ink); font-size: calc(17px * var(--k)); }
  .keys button.ok:disabled { opacity: 0.4; box-shadow: none; }
  /* a year: the bottom row has four keys (− 0 ⌫ OK), the pad keeps its height */
  .keys.yr { grid-template-columns: repeat(12, 1fr); } .keys.yr button { grid-column: span 4; } .keys.yr button.last { grid-column: span 3; }
  .keys button[data-key="bc"][aria-pressed="true"] { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  .keys button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
  /* after an answer: the right one, a short fact, and in a room who said what */
  .reveal { flex: none; display: flex; flex-direction: column; gap: 8px; }
  .verdict { margin: 0; font-size: calc(20px * var(--k)); font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .verdict > :first-child { flex: none; white-space: nowrap; }      /* the verdict word stays on one line; the answer beside it wraps */
  .verdict.ok { color: var(--good); }
  .verdict.no { color: var(--hazard); }
  .verdict .sub { color: var(--ink); font-weight: 500; font-size: calc(16px * var(--k)); min-width: 0; overflow-wrap: anywhere; }
  .fact { margin: 0; font-size: calc(15px * var(--k)); line-height: 1.35; color: var(--ink); background: var(--card); border-radius: 14px; box-shadow: var(--sh); padding: 9px 12px; overflow-wrap: anywhere; }
  .drum { margin: 0; text-align: center; font-size: calc(22px * var(--k)); font-weight: 500; letter-spacing: 0.01em; }      /* (nothing in this style beats on its own, so the drum roll is only said) */
  .tapnext { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
  .waitline { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
  .cd { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; vertical-align: middle; flex: none; }
  .cd svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .cd circle { fill: none; stroke: var(--line); stroke-width: 2.4; }
  .cd circle.arc { stroke: var(--muted); stroke-dasharray: 100; stroke-linecap: round; }
  .cd b { position: relative; font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .rvgo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
  .rvgo .note { margin: 0; }
  .rvgo .cd { margin-left: 0; }
  /* the pie: who answered what */
  .pie { display: grid; grid-template-columns: calc(92px * var(--k)) minmax(0, 1fr); gap: 12px; align-items: center; }
  .pie svg { width: calc(92px * var(--k)); height: calc(92px * var(--k)); display: block; }
  .legend { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
  .legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 7px; align-items: start; }
  .legend .sw { width: 12px; height: 12px; border-radius: 4px; margin-top: 2px; }
  .legend .who { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
  .legend b { color: var(--ink); font-weight: 600; }
  .crown { color: var(--reward); }
  .nums { position: relative; height: 54px; margin: 4px 6px 0; }
  .nums .axis { position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: var(--line-strong); }
  .nums .mark { position: absolute; top: 18px; width: 2px; height: 18px; margin-left: -1px; background: var(--good); }
  .nums .g { position: absolute; top: 20px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--card); box-sizing: border-box; }
  .scorebar { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
  .scorebar li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2.5px 6.5px; border: 1.5px solid transparent; border-radius: 12px; background: var(--card); box-shadow: var(--sh); }
  .scorebar .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .scorebar b { font-weight: 600; }
  .tdot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
  .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 */
  .boosts { flex: none; display: flex; gap: 8px; justify-content: center; }
  .boost { height: 34px; padding: 0 12px; border-radius: 17px; border: 1.5px solid var(--line-strong); background: var(--card); box-shadow: var(--sh); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .boost:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .boost b { font-variant-numeric: tabular-nums; }

  /* a line of help, under the HUD */
  #hint { position: absolute; left: 16px; right: 16px; top: 42px; width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box; margin: 0 auto; display: flex; align-items: center; gap: 10px; line-height: 1.25; z-index: 3;
    font-size: 14px; font-weight: 500; pointer-events: none; background: var(--ink); color: var(--paper); border-radius: 999px; box-shadow: var(--sh); padding: 6px 14px 6px 10px; min-height: 20px; }
  .ring { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--player); }
  /* a room's next question: a card in the middle with a clock that fills up in a second; the question opens under it */
  #lead { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: grid; place-items: center; width: calc(132px * var(--k)); height: calc(132px * var(--k));
    box-sizing: border-box; background: var(--card); border-radius: calc(18px * var(--k)); box-shadow: var(--sh); pointer-events: none; }
  #lead[hidden] { display: none; }
  #lead svg { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; transform: rotate(-90deg); }
  #lead circle { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 5; }
  #lead circle.arc { stroke: var(--player); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
  #lead b { position: relative; font-size: calc(19px * var(--k)); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  #play.leading { visibility: hidden; }

  /* cards */
  .card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px)); box-sizing: border-box; background: var(--card); border-radius: 18px; box-shadow: var(--sh);
    padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100% - 24px); overflow-y: auto; z-index: 4; animation: cardopen 180ms ease-out; }
  @keyframes cardopen { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }      /* a panel opens: 0.96 → 1 and 0 → 1, 180 ms */
  @media (max-aspect-ratio: 1/1) {
    .card { top: auto; bottom: calc(16px + 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 (max-height: 470px) { .card { padding: 14px 18px 12px; gap: 10px; } h1 { font-size: 26px; } }
  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; overflow-wrap: anywhere; }
  h3 { margin: 0; font-size: 15px; font-weight: 600; }
  .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 */
  .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: color-mix(in srgb, var(--ink) 6%, transparent); 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(--paper); }
  .note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; text-wrap: pretty; overflow-wrap: anywhere; }
  .note b { color: var(--ink); font-weight: 600; }
  p { text-wrap: pretty; }
  .topicbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; text-align: left; border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 9px 12px; background: var(--card); box-shadow: var(--sh); }
  .topicbtn .kick { grid-column: 1; font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1; }
  .btn svg.back { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-right: 6px; flex: none; }
  .topicbtn b { font-size: 17px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topicbtn span { grid-column: 1; font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topicbtn svg { grid-row: 1 / span 3; grid-column: 2; width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  /* the difficulty of a play: five in one bar, the one picked filled */
  .diffbar { display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .diffbar button { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 1px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .diffbar button[aria-checked="true"] { background: var(--ink); color: var(--paper); font-weight: 500; }
  @media (max-width: 400px) { .diffbar button { font-size: 12.5px; } }
  @media (max-width: 359px) { .diffbar button { font-size: 11.5px; } }
  @media (max-aspect-ratio: 1/1) and (max-height: 700px) { #menu { gap: 10px; padding-top: 18px; } #mTag { display: none; } }
  @media (max-aspect-ratio: 1/1) and (max-height: 600px) { #menu { gap: 8px; padding: 14px 22px 10px; } .route-meta { letter-spacing: 0.1em; margin-top: 2px; } }      /* the smallest phones: the lap's line and the card hold in 568 px, in both languages, below the site's pills */
  .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; } #mLap { 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; flex: none; }
  .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(--paper); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; box-shadow: var(--sh); white-space: nowrap; }      /* the lap, a numbered shield of ink */
  .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; }
  @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; } }
  .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, .rows 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 20px; font-size: 16px; font-weight: 500; flex: 1 1 auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; background: var(--card); box-shadow: var(--sh); }
  .btn.primary { background: var(--ink); color: var(--paper); }
  .btn.ghost { border: 1.5px solid var(--line-strong); }
  .btn.small { height: 40px; font-size: 15px; padding: 0 14px; }
  .btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  a.btn { text-decoration: none; }
  .modes .btn { padding: 0 12px; }
  .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; }
  .tabs, .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .tab { min-height: 34px; padding: 4px 13px; border-radius: 17px; font-size: 14px; font-weight: 500; border: 1.5px solid var(--line-strong); background: var(--card); box-shadow: var(--sh); display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; text-align: left; max-width: 100%; }
  .tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .tab:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .tab.try { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1px var(--player); }
  .tab .gem { width: 9px; height: 9px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field > span { font-size: 13px; color: var(--muted); }
  .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; }
  .lb .score { color: var(--muted); font-size: 14px; white-space: nowrap; }
  .kind { font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
  /* the leaderboard as a table: rank, player, the board's columns; the player's own row marked, their own line apart under the ten */
  .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 li { display: contents; }
  .lbt li > * { padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
  .lbt li > * + * { padding-left: 10px; }
  .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: 400; letter-spacing: 0.1em; 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); }      /* the player's own row: a 3 px blue bar on the left */
  .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; }
  .lbwait { margin: 0; padding: 14px 0; color: var(--muted); font-size: 15px; }
  a.inl { color: var(--ink); text-decoration: none; font-weight: 500; }      /* a link inside a line of text: no underline in this style */
  /* the player's stats (Your stats, from the profile): every total, two to a line on a phone and four on a wide screen */
  #panel.statsp { gap: 12px; }
  .tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-variant-numeric: tabular-nums; }
  .tiles div { min-width: 0; padding: 4px 0 3px; 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: 8px; } .tiles { gap: 1px 12px; } .tiles div { padding: 2px 0 1px; } .tiles dt { font-size: 11.5px; } .tiles dd { font-size: 14.5px; line-height: 1.2; } }
  @media (max-height: 400px) { #panel.statsp h2 { font-size: 18px; } .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (max-width: 360px) { .tiles { column-gap: 10px; } .tiles dd { font-size: 14px; } }
  @media (max-height: 600px) { #panel.statsp { padding-top: 16px; padding-bottom: 12px; } #panel.statsp h2 { font-size: 20px; } }
  /* ---- Your stats (trivia games): the hub. Answers, the best category and the rank; the totals behind one button. */
  #panel.statsh { gap: 14px; }
  .kick { display: block; font-style: normal; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1; }
  .hubg { display: flex; flex-direction: column; gap: 12px; }
  .hubl { display: flex; flex-direction: column; gap: 8px; }
  .hubr { display: flex; flex-direction: column; gap: 8px; }
  .acc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px 14px; }
  .acc .big { margin: 0; font-size: 46px; font-weight: 500; line-height: 0.95; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .acc .big small { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 5px; }
  .acc .cnt { margin: 0; font-size: 14px; line-height: 1.35; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; text-wrap: pretty; }
  .acc .cnt b { color: var(--ink); font-weight: 600; }
  .split { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--hazard); overflow: hidden; }
  .split i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
  a.topicbtn { color: inherit; text-decoration: none; }
  .topicbtn.stat { padding: 10px 12px; width: 100%; box-sizing: border-box; }
  .topicbtn.stat b { font-size: 18px; grid-column: 1; }
  .topicbtn.stat svg { grid-row: 1 / span 4; }
  .topicbtn.stat span { white-space: normal; line-height: 1.3; }
  @media (min-aspect-ratio: 1/1) {
    #panel.statsh, #panel.catsp { width: min(640px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
    .hubg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 20px; align-items: start; }
    .hubl { padding-top: 2px; }
  }
  @media (max-height: 640px) { #panel.statsh { gap: 9px; } .acc .big { font-size: 38px; } .acc { gap: 6px 12px; } .hubg, .hubr { gap: 7px; } .hubl { gap: 6px; } .topicbtn.stat { padding: 7px 12px; } .topicbtn.stat b { font-size: 17px; } }
  @media (max-height: 600px) { #panel.statsh { padding-top: 16px; padding-bottom: 12px; } #panel.statsh h2 { font-size: 20px; } #panel.statsh .btn { height: 42px; } #panel.statsh .btn.small { height: 36px; } }

  /* ---- By category: one line per category played, best first by % right; the best one marked like the player's own row */
  #panel.catsp { gap: 10px; }
  .catl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-size: 15px; font-variant-numeric: tabular-nums; }
  .catl li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(54px, 88px) auto; align-items: center; gap: 10px; padding: 6px 8px; border-top: 1px solid var(--line); }
  .catl li:first-child { border-top: 0; }
  .catl .nm { min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .catl .nm > i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .catl .nm .kind { margin-left: 0; flex: none; }
  .catl .bar { height: 6px; border-radius: 3px; background: var(--hazard); overflow: hidden; display: block; }
  .catl .bar i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
  .catl .pct { text-align: right; white-space: nowrap; font-weight: 600; }
  .catl .pct small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }
  .catl li.best { background: var(--line); border-radius: 10px; box-shadow: inset 3px 0 0 var(--player); }
  .catl li.best + li { border-top-color: transparent; }
  .catl li.best .nm { font-weight: 600; }
  @media (max-height: 640px) { .catl li { padding: 4px 8px; font-size: 14px; } .catl .pct small { font-size: 12px; } #panel.catsp { gap: 8px; padding-top: 16px; padding-bottom: 12px; } #panel.catsp h2 { font-size: 20px; } }
  @media (max-width: 360px) { .acc .cnt { font-size: 13px; } .catl li { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(44px, 64px) auto; } .catl .pct small { margin-left: 4px; } .catl .nm .kind { display: none; } }
  @media (min-aspect-ratio: 1/1) { .catl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; column-gap: 24px; } .catl li:nth-child(8) { border-top: 0; } }
  .rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .rows li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
  .rows li.off { color: var(--muted); }
  .rows svg { width: 20px; height: 20px; flex: none; }
  .rows .val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; text-align: right; }
  .bal { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
  .bal b { color: var(--ink); font-weight: 600; }
  .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .foot .grow { flex: 1 0 auto; white-space: nowrap; }      /* never squeezed under its neighbours: the row wraps instead */
  .link { color: var(--muted); text-decoration: none; font-size: 13px; min-height: 28px; display: inline-flex; align-items: center; line-height: 1.2; }
  .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
  .gift { color: var(--ink); }
  /* results (rule 69): the stars in a row, each with its name; what was won in big, its sum in one short line; the buttons in one row */
  .stars3 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
  .stars3 li { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; line-height: 1.15; color: var(--ink); min-width: 0; }
  .stars3 li.off { color: var(--muted); }
  .stars3 svg { width: 26px; height: 26px; }
  .stars3 svg path { stroke-width: 1.4; stroke-linejoin: round; }
  .stars3 span { text-wrap: balance; overflow-wrap: anywhere; }
  .won { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .won b { font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1; }
  .won .gem { width: 16px; height: 16px; }
  .tally { margin: 0; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .tally b { font-size: 22px; font-weight: 600; color: var(--ink); }
  .note.sum { margin-top: -8px; font-variant-numeric: tabular-nums; }
  .lead { margin: 0; font-size: 16px; line-height: 1.3; }
  #panel.result .actions.row { flex-wrap: nowrap; gap: 8px; }
  #panel.result .actions.row .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 16px; }
  #panel.result .actions.more { margin-top: -4px; }
  @media (max-width: 360px) { #panel.result { padding-left: 16px; padding-right: 16px; } #panel.result .actions.row { gap: 6px; }
    #panel.result .actions.row .btn { padding: 0 8px; font-size: 14.5px; } #panel.result .btn svg.back { margin-right: 3px; } }
  @media (max-height: 600px) { #panel.result { gap: 10px; padding-top: 16px; padding-bottom: 12px; } #panel.result .btn { height: 42px; } }
  .adbar { margin: 0; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
  .adbar span { display: block; height: 100%; width: 0; background: var(--player); transition: width 1s linear; }
  .toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; z-index: 6;
    background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; line-height: 1.3; padding: 9px 16px; border-radius: 22px; box-shadow: var(--sh); pointer-events: none; text-align: center; animation: toastin 160ms ease-out; }
  @keyframes toastin { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }      /* a notice drops 8 px and appears, 160 ms */
  input.text { font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 1.5px solid var(--line-strong); border-radius: 14px; height: 46px; padding: 0 12px; min-width: 0; box-sizing: border-box; width: 100%; -webkit-user-select: text; user-select: text; }
  input.code { text-transform: uppercase; letter-spacing: 0.2em; font-size: 22px; font-weight: 600; text-align: center; }
  .err { color: var(--hazard); }

  /* the topic picker: categories, then their packs from general to specific */
  .cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
  .cats button { width: 100%; min-height: 54px; box-sizing: border-box; text-align: left; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: var(--sh); padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .cats b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .cats span { font-size: 12px; color: var(--muted); line-height: 1.2; }
  .cats button[aria-pressed="true"] { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  .packs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .packs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  .packs .pk { text-align: left; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: var(--sh); padding: 7px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .packs .pk[aria-pressed="true"] { border-color: var(--player); box-shadow: var(--sh), inset 0 0 0 1.5px var(--player); }
  .packs .pk b { font-size: 15px; font-weight: 600; overflow-wrap: break-word; }
  .packs .pk span { font-size: 12px; color: var(--muted); }
  .packs .pk:disabled { opacity: 0.55; cursor: default; }
  .packs .ind1 { margin-left: 12px; } .packs .ind2 { margin-left: 24px; } .packs .ind3 { margin-left: 36px; }
  .actions.invite { flex-wrap: wrap; }
  .qrbox { display: flex; justify-content: center; }
  /* what a player who joined is waiting for, first and plain */
  .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; }
  .lock { display: inline-flex; align-items: center; gap: 4px; }
  .meter { display: block; height: 4px; border-radius: 2px; background: var(--line); margin: 4px 0 0; overflow: hidden; }
  .meter i { display: block; height: 100%; border-radius: 2px; background: var(--player); }

  /* the store: sections first; a section's rows a page at a time, nothing scrolls */
  #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))); } }
  #panel.store .shopside { display: contents; }
  .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; }
  .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; padding: 0 8px 8px 0; margin: 0 -8px -8px 0; }      /* the padding lets the tiles' shadows through the clip; the negative margin gives it back (a page holds what it held) */
  .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: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
  .shop li:first-child { border-top: 0; }
  .shop b { font-weight: 600; font-size: 15px; }
  .shop p { margin: 2px 0 0; font-size: 13px; line-height: 1.28; color: var(--muted); overflow-wrap: anywhere; }
  .shop li.looks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shop li.looks .tab { white-space: normal; }
  .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 { display: block; padding: 0; border: 0; }
  .sect { width: 100%; height: 100%; box-sizing: border-box; text-align: left; background: var(--chip); 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; }
  .lvl { font-size: 12px; letter-spacing: 0.03em; color: var(--muted); margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .buy { flex: none; height: 32px; padding: 0 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; border-radius: 16px; }
  .buy.wide { justify-content: center; height: 40px; }
  .pay { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
  .shut { margin: 0; height: 32px; padding: 0 10px; border: 1.5px dashed var(--line-strong); border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; }
  .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; }
  .prev { display: block; width: 100%; height: clamp(48px, 7vh, 76px); border-radius: 14px; box-shadow: var(--sh); }
  /* the looks: a tile each, with the look drawn by the game's own code (as in Skimline). Its name is read aloud, shown on hover or focus, and said
     above the tiles for the one worn and under them for the one tried on. Owned ones carry nothing else; one for sale has a coin, a closed one a lock.
     Worn: filled (a track: a double ring). Tried on: the player's colour. (.lt is the lightning round's.) */
  .lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .lhead .lvl { margin: 0; }
  .tab.mini { min-height: 28px; padding: 2px 10px; font-size: 13px; }
  @media (max-height: 700px) and (max-aspect-ratio: 1/1) { #panel.store .shop li.looks { padding: 2px 0; gap: 6px; } #panel.store #shopSub .tab { min-height: 30px; padding: 2px 12px; font-size: 13px; }
    #panel.store .shopmain { gap: 6px; } #panel.store .pager .round { width: 32px; height: 32px; } #panel.store { gap: 8px; } }
  .chips.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
  @media (max-width: 360px) { .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; } }
  .ltile { position: relative; aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; box-sizing: border-box; border-radius: 14px; box-shadow: var(--sh); overflow: hidden;
    display: grid; place-items: center; color: var(--ink); background-color: var(--chip); background-size: cover; background-position: center; background-clip: padding-box; }
  .ltile .sk { width: 66%; height: 66%; }
  .ltile[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); }
  .ltile.bgl[aria-pressed="true"] { box-shadow: var(--sh), inset 0 0 0 2.5px var(--ink), inset 0 0 0 4.5px var(--card); }
  .ltile.try { box-shadow: var(--sh), inset 0 0 0 2px var(--player); }
  .ltile.locked .sk { opacity: 0.38; }
  .ltile.locked.bgl::after { content: ""; position: absolute; inset: 0; background: var(--card); opacity: 0.55; }
  .ltile .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; }
  .ltile .badge .gem { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--coin-ring); }
  .ltile .badge .ico { width: 8px; height: 10px; }
  .abtip { position: absolute; z-index: 8; pointer-events: none; box-sizing: border-box; max-width: min(calc(240px * var(--k)), calc(100% - 16px)); background: var(--ink); color: var(--paper);
    border-radius: calc(14px * var(--k)); padding: calc(5px * var(--k)) calc(11px * var(--k)); box-shadow: var(--sh);
    font-size: calc(12px * var(--k)); font-weight: 500; line-height: 1.25; }
  .sk { width: 16px; height: 16px; display: inline-block; flex: none; 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; }
  @media (min-height: 501px) and (min-aspect-ratio: 1/1) {
    #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; }
    #panel.store .shop.sects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(46px, 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)); 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; }
  }
  /* rooms */
  .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; }
  /* you, in a room: your name with a border of your colour instead of "(you)" */
  .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; }
  .podium li.me { margin: 0 -8px; padding: 2px 6.5px; border: 1.5px solid var(--player); border-radius: 10px; }
  .mechip { padding: 0 6px; border: 1.5px solid var(--player); border-radius: 8px; }
  .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .podium { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
  .podium li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 16px; }
  .podium li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
  .podium li.top { font-weight: 600; }
  .lt { display: flex; flex-direction: column; gap: 8px; }
  .ltclock { margin: 0; font-size: 40px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
  .ltwho { margin: 0; text-align: center; font-size: 16px; }

  /* the site's corner of the menu: back to the games, and who is playing. The same in every game of the site (taken from Skimline). */
  .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; z-index: 5; }
  .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; }
  @media (min-aspect-ratio: 1/1) { .pill.who { max-width: calc(50% - 190px - 20px); } }
  @media (min-aspect-ratio: 1/1) and (max-width: 700px) { .pill.who { padding: 0 10px; } .pill.who #mWho { display: none; } }
  #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)); } }
  .idline { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .idline .sk { width: 26px; height: 26px; }
  .idline b { font-size: 22px; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pstats { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: 15px; font-variant-numeric: tabular-nums; }
  .pstats dt, .pstats dd { margin: 0; padding: 5px 0; border-top: 1px solid var(--line); }
  .pstats dt { color: var(--muted); }
  .pstats dd { text-align: right; font-weight: 500; padding-left: 12px; }
  .pstats dt:first-of-type, .pstats dd:first-of-type { border-top: 0; }
  .actions.pair { flex-wrap: nowrap; gap: 8px; }
  .pair .btn { padding: 0 14px; min-width: 0; height: 44px; font-size: 16px; }
  @media (max-width: 360px) { .pair .btn { padding: 0 10px; font-size: 15px; } }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  @media (max-height: 500px) { .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #panel.prof { gap: 8px; padding-top: 14px; padding-bottom: 12px; } #panel.prof h2 { font-size: 19px; } #panel.prof .btn { height: 40px; } #panel.prof .idline b { font-size: 19px; } }
  @media (min-aspect-ratio: 1/1) { #panel.prof { width: min(560px, calc(100% - 32px)); } }
  .note.sum span { white-space: nowrap; }
  .hrt { flex: none; margin-left: 2px; }
  #panel.result .actions.more { flex-wrap: nowrap; gap: 8px; }
  #panel.result .actions.more .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; gap: 5px; }
  @media (prefers-reduced-motion: reduce) { .hearts.hit { animation: none; } }

  /* A phone on its side (#stage.land: wide and short, rule 5): nothing scrolls. The track gets thinner; the question goes on the left with
     its time and its boosts, the answers (or the pad, or what was answered) on the right; the menu in two columns, clear of the corners. */
  #stage.land #play { left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); width: min(calc(900px * var(--k)), calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    padding: 6px 14px calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; overflow: hidden; }
  #stage.land .qa, #stage.land .qb { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
  #stage.land .qb { justify-content: center; }
  #stage.land .qcard { max-height: none; }
  #stage.land .opts, #stage.land .opts.two { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #stage.land .opt, #stage.land .opts.stack .opt { height: calc(46px * var(--k)); min-height: calc(40px * var(--k)); }
  #stage.land .opt .tx { font-size: 16px; }
  #stage.land .numpad { gap: 6px; }
  #stage.land .numshow { height: calc(42px * var(--k)); }
  #stage.land .keys { gap: 5px; }
  #stage.land .keys button { height: calc(38px * var(--k)); font-size: calc(19px * var(--k)); }
  #stage.land #play.rv .opts, #stage.land #play.rv .numpad { display: none; }
  #stage.land .reveal { gap: 6px; }
  #stage.land .verdict { font-size: calc(18px * var(--k)); }
  #stage.land .fact { font-size: calc(14px * var(--k)); padding: 7px 10px; line-height: 1.3; }
  #stage.land .pie { grid-template-columns: calc(64px * var(--k)) minmax(0, 1fr); gap: 10px; }
  #stage.land .pie svg { width: calc(64px * var(--k)); height: calc(64px * var(--k)); }
  #stage.land .nums { height: 44px; }
  #stage.land .rvgo { margin-top: 0; }
  #stage.land .legend { font-size: 12px; gap: 2px; }
  #stage.land .qside { flex: none; }
  @media (max-height: 340px) { #stage.land .opt, #stage.land .opts.stack .opt { height: 40px; min-height: 36px; } #stage.land .keys button { height: 34px; } #stage.land .numshow { height: 38px; } }
  #stage.land #menu { width: min(720px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); flex-direction: row; align-items: stretch; gap: 20px; padding: 14px 18px 12px;
    top: calc(50% + 22px + var(--safe-top, 0px) / 2); max-height: calc(100% - 60px - var(--safe-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  #stage.land .mcol { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0; }
  #stage.land .mcol + .mcol { justify-content: center; }
  #stage.land #mTag { display: none; }
  /* a room's lobby, its settings, its invitation and its end: in two columns, the title over both */
  #stage.land #panel.cols { display: block; column-count: 2; column-gap: 22px; width: min(760px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
  #stage.land #panel.cols > * { break-inside: avoid; margin: 0 0 12px; }
  #stage.land #panel.cols > :last-child { margin-bottom: 0; }
  #stage.land #panel.cols > h2 { column-span: all; }
  #stage.land #panel.cols { padding-top: 16px; padding-bottom: 14px; }
  #stage.land #panel.cols > * { margin-bottom: 10px; }
  #stage.land #panel.cols .field { gap: 4px; }
  #stage.land #panel.cols .tab { min-height: 30px; padding: 2px 11px; font-size: 13.5px; }
  #stage.land #panel.cols .topicbtn { padding-top: 8px; padding-bottom: 8px; }
  #stage.land #panel.cols .btn { height: 44px; }
  @media (max-height: 380px) {
    #stage.land #panel.cols { padding: 10px 14px; column-gap: 16px; max-height: calc(100% - 12px - env(safe-area-inset-bottom, 0px)) !important; }
    #stage.land #panel.cols > * { margin-bottom: 8px; }
    #stage.land #panel.cols > h2 { font-size: 20px; }
    #stage.land #panel.cols .chips { gap: 5px; }
    #stage.land #panel.cols .tab { min-height: 28px; padding: 2px 7px; font-size: 12px; }
    #stage.land #panel.cols .topicbtn { padding-top: 5px; padding-bottom: 5px; }
    #stage.land #panel.cols .btn { height: 40px; }
  }