/* Genius or Goof: a famous person on a card, three buttons to vote, and the crowd's verdict on three bars of paper.
     The paper-map style (claude/estilo-visual.md): flat paper, a strip of terrain along the foot with parks and trees, ink, the three function
     colours (amber is genius, red is goof, ink at 25 % is "don't know", blue is you) 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 photo and a bar. Every person shows on another world and ground. */
  [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; --ink: #2A2E35; --muted: #6B7078;
    --player: #2E5FE0; --hazard: #E54B4B; --reward: #EFB22E; --card: #FFFFFF; --on-reward: #2A2E35; --on-hazard: #FFFFFF; --unsure: #CBCCCE;
    --shadow: rgba(42, 46, 53, 0.13); --shadow-c: #2A2E35; --shadow-a: 0.13;
    --line: rgba(42, 46, 53, 0.14); --line-strong: rgba(42, 46, 53, 0.3);
    --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; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --card: #3F4553; --on-hazard: #1F2430; --unsure: #6D7078;
      --shadow: rgba(0, 0, 0, 0.32); --shadow-c: #000000; --shadow-a: 0.32; --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #262B38; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --card: #3F4553; --on-hazard: #1F2430; --unsure: #6D7078;
    --shadow: rgba(0, 0, 0, 0.32); --shadow-c: #000000; --shadow-a: 0.32; --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); color-scheme: dark;
  }
  html, body { height: 100%; }
  body { background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
  #stage { position: relative; height: 100%; overflow: hidden; touch-action: manipulation; background: var(--bg); --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 */
    --btn: calc(50px * var(--k)); --gap: calc(16px * var(--k)); --foot: calc(34px * var(--k)); }      /* a vote button; the space between pieces; the strip of terrain under the buttons */
  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--player); outline-offset: 2px; }
  svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  /* a pressed piece sinks into the paper: it moves onto its shadow (style guide, "Estados") */
  .btn, .vbtn, .pinfo, .pill, .tab, .icon, .link { transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
  .btn:active:not(:disabled), .vbtn:active:not(:disabled), .pinfo:active, .pill:active, .tab:active:not(:disabled), .icon:active { transform: translate(2px, 3px); box-shadow: var(--sh-down); }
  a { color: inherit; }

  #stage:has(#panel:not([hidden])) #play { opacity: 0.4; }      /* a panel on top of a play (pause, how to play): the play under it steps back, as a disabled piece does (40 %) */
  /* the ground: a strip of terrain along the foot, with its parks and trees (drawn by drawGround); the buttons of the play sit on it */
  #ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--gh, 96px) + env(safe-area-inset-bottom, 0px)); background: var(--band); pointer-events: none; z-index: 0; }
  #ground svg { position: absolute; left: 0; top: 0; display: block; }
  #ground .gp { fill: var(--park); }
  #ground .gs { fill: var(--shadow-c); opacity: var(--shadow-a); }      /* all the trees' shadows in one pass: one flat group, so two never darken each other */
  #ground .gt { fill: color-mix(in srgb, var(--park) 88%, var(--ink)); }

  /* heads-up display: one row just above the card. Left, the votes cast; right, the streak, how to play and pause. */
  #hud { position: absolute; top: 0; left: 0; right: 0; height: 44px; padding: 0 calc(12px + 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: 10px;
    pointer-events: none; font-size: calc(16px * var(--k)); font-weight: 500; font-variant-numeric: tabular-nums; z-index: 2; }
  #hud .l, #hud .r { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
  #hudStreak { pointer-events: auto; cursor: default; display: inline-flex; align-items: center; gap: 5px; height: calc(30px * var(--k)); padding: 0 12px 0 9px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--sh); font-size: calc(14px * var(--k)); font-weight: 500; }
  #hudStreak svg { width: calc(14px * var(--k)); height: calc(14px * var(--k)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .icon { pointer-events: auto; width: calc(36px * var(--k)); height: calc(36px * var(--k)); display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: var(--sh); font-weight: 600; font-size: calc(17px * var(--k)); }
  .icon svg { width: calc(16px * var(--k)); height: calc(16px * var(--k)); fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* a vote: the person's card on top, the three buttons on the ground under it; once voted, the crowd's bars take the buttons' place (the next button on the ground) */
  #play { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; margin: 0 auto; width: min(calc(520px * var(--k)), 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--gap); z-index: 1;
    padding: 4px calc(16px + env(safe-area-inset-right, 0px)) calc(var(--foot) + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
  .pcard { position: relative; flex: 1 1 0; min-height: calc(210px * var(--k)); background: var(--card); border-radius: calc(18px * var(--k)); box-shadow: var(--sh); box-sizing: border-box; padding: calc(16px * var(--k)) calc(18px * var(--k));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10px * var(--k)); text-align: center; overflow: hidden; }
  .pcat { position: absolute; top: calc(18px * var(--k)); left: calc(18px * var(--k)); max-width: calc(100% - 160px * var(--k)); display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--k)); font-weight: 400; line-height: 1.3; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  #demo .pcat { max-width: calc(100% - 36px * var(--k)); }
  .pcat svg { width: calc(14px * var(--k)); height: calc(14px * var(--k)); stroke-width: 1.6; }
  .pinfo { position: absolute; top: calc(8px * var(--k)); right: calc(8px * var(--k)); height: calc(36px * var(--k)); padding: 0 calc(14px * var(--k)) 0 calc(11px * var(--k)); border-radius: 999px; background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong);
    display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--k)); font-weight: 500; color: var(--ink); z-index: 3; }
  .pinfo svg { width: calc(15px * var(--k)); height: calc(15px * var(--k)); stroke-width: 1.7; }
  .pbody { width: 100%; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10px * var(--k)); padding-top: calc(26px * var(--k)); box-sizing: border-box; overflow: hidden; }
  .pbody.info { justify-content: flex-start; gap: calc(6px * var(--k)); padding-top: calc(40px * var(--k)); }
  .pbody.info .pname { margin: 0; }
  .pyears { margin: 0; font-size: calc(14px * var(--k)); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
  .pbio { margin: calc(6px * var(--k)) 0 0; max-width: 34em; font-size: calc(17px * var(--k)); line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; flex: none; }
  /* the photo: a circle with its cutout shadow; the initials under it are what shows where it can't be */
  .mono { position: relative; flex: none; width: clamp(calc(96px * var(--k)), 17vh, calc(150px * var(--k))); height: clamp(calc(96px * var(--k)), 17vh, calc(150px * var(--k))); border-radius: 50%; background: var(--park); box-shadow: var(--sh); display: grid; place-items: center; font-size: clamp(calc(36px * var(--k)), 6.4vh, calc(56px * var(--k))); font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
  /* the photo sits over the initials: where it can't be shown, the initials are there */
  .mono i { position: absolute; inset: 0; border-radius: 50%; background: center / cover no-repeat; }
  .pcredit { margin: auto 0 0; padding-top: calc(10px * var(--k)); max-width: 40em; font-size: calc(11.5px * var(--k)); line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; flex: none; }
  .pname { margin: calc(6px * var(--k)) 0 0; max-width: 100%; font-size: calc(30px * var(--k)); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
  .pline { margin: 0; max-width: 100%; font-size: calc(15px * var(--k)); color: var(--muted); line-height: 1.3; text-wrap: balance; }
  .pask { margin: 0; font-size: calc(11px * var(--k)); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  /* the verdict: a piece of paper laid on the card (amber for genius, red for goof, ink for a tie or "who?"), with its shadow */
  .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: calc(10px * var(--k)) calc(24px * var(--k)); border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--sh);
    font-size: calc(26px * var(--k)); font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 2; }
  .stamp.g { background: var(--reward); color: var(--on-reward); } .stamp.x { background: var(--hazard); color: var(--on-hazard); }
  .stamp.slam { animation: pop 220ms cubic-bezier(.2, .9, .3, 1.2) both; }
  @keyframes pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }      /* a piece appears: 0.6 → 1 with a little overshoot, 220 ms */
  /* the three votes, in one row: genius left, don't know in the middle, goof right (the arrow keys follow it) */
  .votes { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(0, 1fr); gap: calc(10px * var(--k)); }
  .vbtn { position: relative; height: var(--btn); border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: calc(18px * var(--k)); font-weight: 600; min-width: 0; box-sizing: border-box; background: var(--card); box-shadow: var(--sh); }
  .vbtn svg.i { width: calc(22px * var(--k)); height: calc(22px * var(--k)); stroke-width: 2; }
  .vbtn.g { background: var(--reward); color: var(--on-reward); }
  .vbtn.x { background: var(--hazard); color: var(--on-hazard); }
  .vbtn.n { box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); font-size: calc(14px * var(--k)); }
  .vbtn .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
  .vbtn.n .tx { white-space: normal; text-align: center; line-height: 1.3; overflow-wrap: normal; }
  .vbtn:disabled { cursor: default; opacity: 0.4; box-shadow: none; }
  .vbtn.mine:disabled { opacity: 1; box-shadow: var(--sh); outline: 2px solid var(--player); outline-offset: 2px; }
  .vbtn kbd { position: absolute; top: 5px; right: 12px; font: 500 11px/1 var(--font); opacity: 0.7; }
  @media (max-width: 360px) { .vbtn { gap: 5px; font-size: 16px; } .vbtn.n { font-size: 13px; } .vbtn svg.i { width: 18px; height: 18px; } .votes { gap: 8px; } }
  /* the crowd: three bars of paper (genius amber, don't know ink at 25 %, goof red), the numbers under them, and the next button on the ground */
  .crowd { flex: none; display: flex; flex-direction: column; gap: var(--gap); }
  .cres { background: var(--card); border-radius: calc(18px * var(--k)); box-shadow: var(--sh); padding: calc(16px * var(--k)) calc(16px * var(--k)) calc(14px * var(--k)); display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
  .meter { display: flex; height: var(--mh, 36px); filter: drop-shadow(var(--sh)); }      /* the three bars cast their shadow together, in one pass */
  .meter i { flex: 1 1 0; min-width: 0; background: transparent; transition: background-color 0.18s; }
  .meter i[data-e~="a"] { border-radius: 99px 0 0 99px; } .meter i[data-e~="z"] { border-radius: 0 99px 99px 0; }
  .meter i[data-e~="a"][data-e~="z"] { border-radius: 99px; }
  .meter i[data-e~="a"]:not(:first-child) { margin-left: calc(5px * var(--k)); }
  .meter i.g { background: var(--reward); } .meter i.x { background: var(--hazard); } .meter i.n { background: var(--unsure); }
  .meter.off { filter: none; } .meter.off i { background: var(--line); }
  .tally { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-variant-numeric: tabular-nums; }
  .tally div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .tally div:nth-child(2) { text-align: center; align-items: center; } .tally div:nth-child(3) { text-align: right; align-items: flex-end; }
  .tally dt { margin: 0; font-size: calc(13px * var(--k)); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .tally dd { margin: 0; font-size: calc(22px * var(--k)); font-weight: 600; line-height: 1.25; }
  .tally .you { width: 8px; height: 8px; border-radius: 50%; background: var(--player); flex: none; }
  .outline { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: calc(15px * var(--k)); line-height: 1.3; }
  .outline b { font-weight: 500; text-wrap: pretty; }
  .outline span { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .nextrow { display: flex; gap: 10px; align-items: center; }
  .nextrow .btn { flex: 1 1 auto; height: var(--btn); border-radius: 999px; font-size: calc(16px * var(--k)); }      /* a control of the play: it grows on a big screen, like the votes */
  .taphint { margin: -2px 0 0; text-align: center; font-size: 13px; color: var(--muted); text-wrap: pretty; }
  /* the little card of an icon-only button (its name), under it while the mouse or the keyboard's focus is on it; never with a finger */
  .tip { position: absolute; z-index: 9; max-width: min(260px, calc(100% - 24px)); box-sizing: border-box; padding: 7px 12px; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: var(--sh);
    font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; text-wrap: balance; pointer-events: none; }

  /* a short screen on its side (a phone turned, a low window): the card on the left, the votes or the crowd on the right; the ground is only a low strip */
  @media (min-aspect-ratio: 4/3) and (max-height: 540px) {
        #play { width: min(calc(900px * var(--k)), 100%); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 16px; align-items: center; }
    .pcard { grid-column: 1; grid-row: 1; height: 100%; min-height: 0; }
    .votes, .crowd { grid-column: 2; grid-row: 1; }
  }
  @media (max-height: 600px) { .pcard { padding-top: calc(10px * var(--k)); padding-bottom: calc(10px * var(--k)); } .pbody.info { padding-top: calc(36px * var(--k)); } .cres { padding: calc(10px * var(--k)) calc(14px * var(--k)) calc(9px * var(--k)); gap: calc(6px * var(--k)); } .tally dd { font-size: calc(20px * var(--k)); } .taphint { margin-top: 0; } }
  @media (max-height: 540px) { .stamp { font-size: calc(22px * var(--k)); } .mono { width: calc(64px * var(--k)); height: calc(64px * var(--k)); font-size: calc(24px * var(--k)); } .pbody { gap: 6px; } .pname { font-size: calc(26px * var(--k)); } }
  #demo .mono { width: 76px; height: 76px; font-size: 28px; }

  /* cards: the menu and the panels */
  .card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, 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: hidden; 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; }
  }
  h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-wrap: balance; }
  h1 b { font-weight: 600; }
  h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
  p { text-wrap: pretty; }
  .tag { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.3; }
  .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; }
  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .actions.row { flex-wrap: nowrap; }
  .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; min-width: 0; background: var(--card); box-shadow: var(--sh); }
  .btn.primary { background: var(--ink); color: var(--paper); }
  .btn.ghost { box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); }
  .btn.small { height: 40px; font-size: 14px; padding: 0 14px; }
  .btn.q { flex: 0 0 46px; padding: 0; font-size: 19px; font-weight: 600; }
  .btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  a.btn { text-decoration: none; }
  .btn svg.back { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-right: 2px; flex: none; }
  .actions.row .btn { padding: 0 12px; }
  @media (max-width: 360px) { .card { padding-left: 16px; padding-right: 16px; } .actions.row { gap: 6px; } .actions.row .btn { padding: 0 8px; font-size: 15px; } h1 { font-size: 24px; } .foot { gap: 2px 10px; } }
  @media (max-aspect-ratio: 1/1) and (max-height: 600px) { #menu { gap: 8px; padding: 14px 22px 10px; } #menu .tag { margin-top: 4px; } }      /* the smallest phones: the menu holds in 568 px, below the site's pills */
  .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: center; gap: 2px 16px; }
  .mstats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-variant-numeric: tabular-nums; }
  .mstats div { min-width: 0; border-top: 1px solid var(--line); padding-top: 6px; }
  .mstats dt { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.2; }
  .mstats dd { margin: 2px 0 0; font-size: 19px; font-weight: 500; }
  /* how to play: three steps, each with its picture */
  .how { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .how li { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; text-wrap: pretty; }
  .how .pic { height: 40px; border-radius: 12px; background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 4px; }
  .how .pic i { width: 12px; height: 18px; border-radius: 6px; display: block; }
  .how .pic i.g { background: var(--reward); } .how .pic i.n { background: var(--unsure); } .how .pic i.x { background: var(--hazard); }
  .how .pic b { width: 26px; height: 26px; border-radius: 50%; background: var(--park); box-shadow: 2px 3px 0 var(--shadow); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
  .how .pic .bar { display: flex; gap: 3px; } .how .pic .bar i { height: 12px; border-radius: 6px; } .how .pic .bar i.g { width: 18px; } .how .pic .bar i.n { width: 8px; } .how .pic .bar i.x { width: 12px; }
  /* the profile, the player's stats and the leaderboard */
  .idline { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .idline svg { width: 24px; height: 24px; flex: none; }
  .idline b { font-size: 22px; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kind { font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
  .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, #panel.prof { width: min(560px, calc(100% - 32px)); } .tiles.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-height: 600px) { .card { padding-top: 16px; padding-bottom: 12px; gap: 10px; } .tiles dd { font-size: 14.5px; } h2 { font-size: 20px; } .btn { height: 42px; } }
  .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .tab { min-height: 34px; padding: 4px 13px; border-radius: 17px; font-size: 14px; font-weight: 500; background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); display: inline-flex; align-items: center; box-sizing: border-box; }
  .tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: var(--sh); }
  .lbt { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; 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: 92px; }
  .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); }
  .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 */
  .toast { position: absolute; left: 50%; top: calc(10px + var(--safe-top, 0px)); 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 */
  .abtip { position: absolute; z-index: 8; pointer-events: none; box-sizing: border-box; max-width: min(240px, calc(100% - 16px)); background: var(--ink); color: var(--paper); border-radius: 14px; box-shadow: var(--sh); padding: 6px 10px; font-size: 13px; line-height: 1.3; }

  /* 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 svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .pill.who #mWho { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  @media (min-aspect-ratio: 1/1) { .pill.who { max-width: calc(50% - 200px - 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)); }
  /* behind the menu: a card that shows who is in the game, one after another */
  #demo { position: absolute; left: 50%; transform: translateX(-50%); width: min(calc(420px * var(--k)), calc(100% - 32px)); top: calc(56px + var(--safe-top, 0px)); pointer-events: none; z-index: 1; }
  #demo .pcard { min-height: 0; height: 100%; transition: opacity 0.35s; }
  #demo .pcard.fade { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { .stamp.slam, .card, .toast { animation: none !important; } .meter i, #demo .pcard, .btn, .vbtn, .pinfo, .pill, .tab, .icon, .link { transition: none; } }