@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin.9b03f9ffed.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
  @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin-ext.98be87f64b.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  /* ---------- theme: blue carries the data, orange marks where the action is, grey is everything that waits ---------- */
  :root {
    color-scheme: light;
    --water: #E3E9EF;
    --paper: #FAFAF7;
    --panel: #FFFFFF;
    --ink: #1F2933;
    --ink-soft: #5F6B78;
    --ink-faint: rgba(31, 41, 51, 0.14);
    --blue: #2563A8; --blue-2: #4C84C4; --blue-3: #8AB0DB; --blue-4: #C3D6EC;
    --blue-soft: rgba(37, 99, 168, 0.14);
    --orange: #E8821E; --orange-deep: #C4650C; --orange-soft: rgba(232, 130, 30, 0.16);
    --grey: #8A96A2; --grey-soft: rgba(138, 150, 162, 0.22);
    --ground: #B9C4CC;
    --w-cover: var(--blue); --w-speed: var(--orange); --w-order: var(--grey);
    --shadow: 0 20px 60px rgba(20, 30, 40, .25);
    --font: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --water: #141A21; --paper: #1E262F; --panel: #232C36; --ink: #EEF1F4; --ink-soft: #A5B0BB; --ink-faint: rgba(238, 241, 244, 0.16);
      --blue: #6FA6E8; --blue-2: #4C84C4; --blue-3: #35608F; --blue-4: #27405C; --blue-soft: rgba(111, 166, 232, 0.2);
      --orange: #F0A33A; --orange-deep: #F6B65E; --orange-soft: rgba(240, 163, 58, 0.2);
      --grey: #7C8894; --grey-soft: rgba(124, 136, 148, 0.3); --ground: #3A4650;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --water: #141A21; --paper: #1E262F; --panel: #232C36; --ink: #EEF1F4; --ink-soft: #A5B0BB; --ink-faint: rgba(238, 241, 244, 0.16);
    --blue: #6FA6E8; --blue-2: #4C84C4; --blue-3: #35608F; --blue-4: #27405C; --blue-soft: rgba(111, 166, 232, 0.2);
    --orange: #F0A33A; --orange-deep: #F6B65E; --orange-soft: rgba(240, 163, 58, 0.2);
    --grey: #7C8894; --grey-soft: rgba(124, 136, 148, 0.3); --ground: #3A4650;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--water);
    font-size: 15px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
  }
  button, input { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  [hidden] { display: none !important; }
  .soft { color: var(--ink-soft); }
  .tabular { font-variant-numeric: tabular-nums; }

  /* ---------- game screen layout ---------- */
  .app { min-height: 100%; display: grid; grid-template-rows: auto 1fr; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
         padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }   /* the notch and the home bar in the apps */
  header.top {
    display: grid;
    grid-template-columns: minmax(380px, 1.15fr) minmax(240px, 1fr) auto;
    gap: 14px 26px;
    align-items: end;
    padding: 14px 8px 12px;
    border-bottom: 1px solid var(--ink-faint);
  }
  .brand { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
  /* the logo, as it heads the menu, takes you back there */
  .brand .menu-btn { border: 0; background: transparent; padding: 0; border-radius: 12px; display: block; line-height: 0; transition: transform .15s; }
  .brand .menu-btn img { display: block; height: 64px; width: auto; }
  .brand .menu-btn:hover { transform: scale(1.04); }
  .brand .menu-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .brand h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variation-settings: "opsz" 96;
  }
  .brand h1 .game-tag { color: var(--blue); }
  .brand p { margin: 5px 0 0; color: var(--ink-soft); font-size: 13.5px; max-width: 64ch; }

  .answer { position: relative; }
  .answer input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 10px;
    background: var(--paper);
    font-size: 19px;
    font-weight: 500;
  }
  .answer input::placeholder { color: var(--ink-soft); font-weight: 400; }
  .answer input:disabled { opacity: .55; }
  .answer .hint {   /* under the box, inside the header: above the line that closes it, never cut off */
    margin-top: 5px; font-size: 13px; color: var(--ink-soft); min-height: 18px; line-height: 1.35;
  }
  .answer .hint.good { color: var(--blue); font-weight: 600; }
  .answer .hint.bad { color: var(--orange-deep); font-weight: 600; }
  .answer.shake input { animation: shake .3s; }
  @keyframes shake {
    20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
  }

  .hud { display: flex; gap: 20px; align-items: end; }
  .hud .stat { display: flex; flex-direction: column; align-items: flex-end; }
  .hud .stat b {
    font-size: 28px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }
  .hud .stat b.urgent { color: var(--orange-deep); }
  .hud .stat b.good { color: var(--blue); }
  .hud .stat small { font-size: 12px; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; }
  .hud .end {
    border: 1px solid var(--ink); background: transparent; border-radius: 8px;
    padding: 7px 12px; font-size: 13px; font-weight: 600; align-self: center;
  }
  .hud .end:hover { background: var(--paper); }
  .hud .end.primary { background: var(--blue); color: var(--paper); border-color: var(--blue); }
  /* Lock pile (Stack) and Lock scale (Balance): one button — a padlock in a paper disc whose shackle drops shut on hover
     and snaps on the press, on a blue pill with an ink edge, a chunky shadow and a light that sweeps across now and then */
  .lockbtn, .hud .end.lockbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; min-height: 40px;
    font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--paper); background: linear-gradient(180deg, var(--blue-2), var(--blue) 70%);
    border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s, filter .2s; white-space: nowrap; }
  .lockbtn .lk { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
  .lockbtn .lk svg { width: 18px; height: 18px; overflow: visible; }
  .lockbtn .lk .shackle { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; transform: translateY(-3.5px); transition: transform .25s cubic-bezier(.3, 1.6, .45, 1); }
  .lockbtn .lk .body { fill: var(--orange); stroke: var(--ink); stroke-width: 2; } .lockbtn .lk .hole { fill: var(--ink); }
  .lockbtn::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34px; left: -60px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); animation: lk-shine 4.5s ease-in-out infinite 1s; pointer-events: none; }
  @keyframes lk-shine { 0%, 70% { left: -60px; } 100% { left: calc(100% + 30px); } }
  .lockbtn:hover:not(:disabled), .lockbtn:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); background: linear-gradient(180deg, var(--blue-2), var(--blue) 70%); }
  .lockbtn:hover:not(:disabled) .lk .shackle, .lockbtn:focus-visible .lk .shackle, .lockbtn.snap .lk .shackle { transform: none; }
  .lockbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
  .lockbtn.snap .lk { animation: lk-snap .35s ease-out; } @keyframes lk-snap { 40% { transform: scale(1.18) rotate(-8deg); } 100% { transform: none; } }
  .lockbtn:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .5; box-shadow: 0 1px 0 var(--ink); } .lockbtn:disabled::after { animation: none; }
  @media (prefers-reduced-motion: reduce) { .lockbtn::after, .lockbtn.snap .lk { animation: none; } .lockbtn .lk .shackle { transition: none; } }

  main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.9fr); gap: 0; min-height: 0; }
  .map-panel { padding: 12px 10px 14px 4px; display: flex; flex-direction: column; min-height: 0; }
  .map-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
    font-size: 13px; color: var(--ink-soft); padding: 0 6px 4px;
  }
  .map-head .toggles { display: inline-flex; gap: 14px; align-items: center; }
  .map-head label { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
  .map-head input { accent-color: var(--blue); }
  #zoom-reset { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--ink-soft); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
  .legend { display: flex; gap: 12px; flex-wrap: wrap; }
  .legend span { display: inline-flex; align-items: center; gap: 5px; }
  .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--sb, var(--ink-faint)); background: var(--sc, var(--paper)); }
  .sw.line { width: 16px; height: 0; border: 0; border-top: 2px dashed var(--orange); border-radius: 0; }

  /* ---------- the map ---------- */
  svg#map { width: 100%; height: auto; max-height: calc(100vh - 150px); display: block; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; --zb: 1; --zt: 1; }
  svg#map.dragging { cursor: grabbing; }
  .land { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
  .land, .neighbor, .borders, .area, .unit { vector-effect: non-scaling-stroke; }
  .neighbor { fill: var(--ink); fill-opacity: .045; stroke: var(--ink); stroke-opacity: .25; stroke-width: 0.6; stroke-linejoin: round; }
  .borders { fill: none; stroke: var(--ink); stroke-width: 0.5; stroke-opacity: 0.32; stroke-linejoin: round; }
  #flags image { opacity: .14; cursor: zoom-in; }
  /* Flags: the map's flags hidden until a country is found, all of them shown in the menu's preview to study */
  #map.flag-quiz #flags { display: inline; } #map.flag-quiz #flags image { display: none; } #map.flag-quiz #flags image.shown { display: inline; opacity: .92; }
  .menu-mode #map.flags-study #flags { display: inline; } #map.flags-study #flags image { opacity: .95; }
  #map.flag-quiz .area { fill: transparent; stroke: var(--blue); stroke-width: 2.2; } #map.flag-quiz .area.missed { stroke: var(--orange-deep); stroke-dasharray: 3 2; }
  #map.flag-quiz .unit.nb, #map.flag-quiz .unit.visited, #map.flag-quiz .unit.cur { fill: transparent; }
  #map.flag-quiz .unit.visited { stroke: var(--blue); stroke-width: 1.4; } #map.flag-quiz .unit.cur { stroke: var(--orange-deep); stroke-width: 3; }
  .unit.flagbtn rect { fill: none; stroke: var(--ink-soft); stroke-width: .8; } .unit.flagbtn.pickable:hover rect { stroke: var(--orange); stroke-width: 1.6; }
  .unit.flagbtn.sel rect { stroke: var(--orange-deep); stroke-width: 2.6; } .unit.flagbtn.placed, .unit.flagbtn.fell { opacity: .22; pointer-events: none; }
  .flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 8px; }
  .flag-grid figcaption small { display: block; color: var(--ink-soft); font-size: 11px; }
  .flag-grid figure { margin: 0; display: grid; gap: 3px; font-size: 12px; } .flag-grid img { width: 100%; height: auto; border: 1px solid var(--ink-faint); border-radius: 3px; }
  .flag-q { display: block; height: 36px; width: auto; max-width: 104px; object-fit: contain; border: 1px solid var(--ink-faint); border-radius: 3px; }   /* each flag in its own proportions: Switzerland square, Qatar long */
  .flag-mini { height: 12px; width: auto; vertical-align: -1px; margin-right: 6px; border: 1px solid var(--ink-faint); border-radius: 2px; }
  .colour-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--ink-faint); }
  .flagrow { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; } .flagrow img { height: 11px; border: 1px solid var(--ink-faint); border-radius: 2px; }
  .hide-flags #flags { display: none; }
  #cities .city circle { transform: scale(var(--zb)); }
  #cities .city text { transform: scale(var(--zt)); }
  #cities text.area-label { transform-box: fill-box; transform-origin: center; transform: scale(var(--zt)); }
  .city circle.bubble {
    fill: var(--blue); fill-opacity: .68; stroke: var(--blue); stroke-width: 1.2;
    transform-box: fill-box; transform-origin: center;
    animation: pop .45s cubic-bezier(.2,.9,.3,1.3);
  }
  .city.taken circle.bubble { fill: var(--blue); fill-opacity: .25; stroke: var(--blue); stroke-opacity: .5; stroke-width: 0.8; }
  .city.taken text { font-weight: 500; fill: var(--ink-soft); font-size: 9.5px; }
  .city.missed circle.bubble { fill: none; stroke: var(--grey); stroke-width: 0.8; stroke-dasharray: 2 2; animation: none; }
  .city.missed circle.hit { fill: transparent; stroke: none; pointer-events: all; cursor: help; }
  .city text {
    font-family: var(--font); font-size: 10.5px; font-weight: 600; fill: var(--ink);
    paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round;
    animation: fadein .4s ease-out; pointer-events: none;
  }
  .city text.big { font-size: 12px; }
  .city text.below { text-anchor: middle; }
  .hide-labels .city:not(.missed) text, .hide-labels .area-label, .hide-labels .unit-label { display: none; }
  /* the rulers' timeline */
  #map.timeline #flags { display: none; }
  #map.timeline .borders { stroke-opacity: .35; }
  .tl-under { fill: var(--ink-faint); opacity: .55; }
  .tl-era { opacity: .2; color: var(--ink-faint); }
  .tl-era.plain { opacity: .5; color: var(--ink-faint); }
  .tl-era.gap { opacity: .9; }
  .tl-hatch-bg { fill: var(--paper); } .tl-hatch-line { stroke: var(--ink-faint); stroke-width: 2.2; }
  .tl-edge { stroke: var(--ink); stroke-opacity: .45; stroke-width: .8; stroke-dasharray: 3 2; pointer-events: none; }
  .tl-strip { stroke: var(--paper); stroke-width: .35; color: var(--blue); }
  .tl-strip.plain { opacity: .85; }
  .tl-strip.missed { opacity: .38; stroke: var(--orange); stroke-width: .6; }
  .tl-label { fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 2.6px; stroke-linejoin: round; font-weight: 700; text-anchor: middle; pointer-events: none; }
  .tl-label.missed { fill: var(--orange-deep); }
  .tl-axis line { stroke: var(--ink-soft); stroke-width: .8; }
  .tl-axis .tl-band { stroke: none; opacity: .9; color: var(--ink-faint); }
  .tl-year { font-size: 10px; fill: var(--ink-soft); text-anchor: middle; }
  .tl-era-name { font-size: 9.5px; fill: var(--ink-soft); text-anchor: middle; font-weight: 600; }
  .tl-strip.taken { opacity: .5; }
  .tl-label.taken { font-weight: 600; fill: var(--ink-soft); }
  .tl-strip.place-near { opacity: .62; }
  .tl-strip.place-miss { opacity: .3; stroke: var(--grey); }
  .tl-label.place-miss { fill: var(--ink-soft); }
  /* the equal-area timeline of Pin and Domination: a strip per spell, a hover target on each telling its years */
  .tl-cell-edge { stroke: var(--ink); stroke-opacity: .28; stroke-width: .6; pointer-events: none; }
  .tl-cell { fill: transparent; }
  .tl-cell:hover { fill: var(--orange); fill-opacity: .16; }
  .tl-cell.gap:hover { fill-opacity: .08; }
  .tl-cut { font-size: 7.5px; fill: var(--ink-soft); text-anchor: end; }
  /* Stack's rulers: a round black-and-white button each (a portrait, or the initials), the short name under it */
  .unit.portrait { fill: none; stroke: none; }
  .unit.portrait .pf-disc { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
  .unit.portrait.pickable:hover .pf-disc { stroke: var(--orange); stroke-width: 2.2; }
  .unit.portrait.placed .pf-disc { stroke: var(--sb); stroke-width: 2.6; }
  .unit.portrait.fell { opacity: .45; }
  .unit.portrait.dim:not(.placed) { opacity: .7; }
  .pf-mono { fill: var(--ink); stroke: none; font-weight: 800; text-anchor: middle; letter-spacing: -.02em; pointer-events: none; }
  .pf-name, .pf-val { fill: var(--ink); text-anchor: middle; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 2.2px; stroke-linejoin: round; pointer-events: none; }
  .pf-val { font-weight: 500; fill: var(--ink-soft); }
  .tile-g .pf-disc { fill: var(--paper); stroke: var(--ink-soft); stroke-width: .8; }
  .win-zone { fill: var(--blue); fill-opacity: .06; stroke: var(--blue); stroke-opacity: .35; stroke-width: 0.6; stroke-dasharray: 3 3; pointer-events: none; animation: fadein .5s; }
  @keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.12); } to { transform: scale(1); } }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  .area { stroke: var(--blue); stroke-width: 1.1; stroke-linejoin: round; fill: var(--blue); fill-opacity: .8; animation: fadein .4s; }
  .area.taken { fill-opacity: .4; stroke-opacity: .6; }
  .area.missed { fill: var(--ink); fill-opacity: .08; stroke: var(--grey); stroke-width: 0.6; stroke-dasharray: 2 2; animation: none; cursor: help; }
  .area.dist { animation: none; stroke-width: 0.7; }
  .area-label { font-family: var(--font); font-size: 10.5px; font-weight: 600; fill: var(--ink); text-anchor: middle;
    paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; animation: fadein .4s; pointer-events: none; }
  .area-label.big { font-size: 12px; }
  .area-label.missed { fill: var(--ink-soft); font-style: italic; }
  .city-pin { fill: var(--ink); stroke: var(--paper); stroke-width: .8; pointer-events: none; }
  /* Pin: the prompt, the pins and where the answers really are */
  svg#map.placing { cursor: crosshair; }
  .place-prompt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px 8px 14px; min-height: 48px; border: 1.5px solid var(--orange); border-radius: 10px; background: var(--paper); }
  .place-prompt small { color: var(--ink-soft); font-size: 12.5px; }
  .place-prompt b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
  .place-prompt #place-qual { color: var(--ink-soft); font-size: 14px; }
  .place-skip kbd { font: inherit; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); border: 1px solid var(--ink-faint); border-radius: 4px; padding: 0 4px; margin-left: 3px; }
  .place-skip { margin-left: auto; border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; min-height: 32px; }
  .area.place-hit { fill: var(--blue); fill-opacity: .7; }
  .area.place-near { fill: var(--blue); fill-opacity: .3; stroke-dasharray: 3 2; }
  .area.place-miss { fill: var(--grey); fill-opacity: .25; stroke: var(--grey); stroke-dasharray: 2 2; }
  .place-target { stroke: var(--paper); stroke-width: 1; pointer-events: none; }
  .place-target.hit, .place-target.near { fill: var(--blue); } .place-target.miss { fill: var(--grey); }
  .drop path { fill: var(--orange); stroke: var(--paper); stroke-width: .9; } .drop .drop-eye { fill: var(--paper); }
  .drop.hit path { fill: var(--blue); } .drop.miss path { fill: var(--grey); }
  .drop, .drop-line { pointer-events: none; animation: fadein .3s; }
  .drop-line { stroke: var(--orange); stroke-width: 1; stroke-dasharray: 2.5 2; fill: none; } .drop-line.miss { stroke: var(--grey); }
  ol.found li.near-row .pts { color: var(--ink-soft); } ol.found li.miss-row { opacity: .6; }
  .city-pin.missed { fill: none; stroke: var(--grey); stroke-width: .9; stroke-dasharray: 2 1.5; pointer-events: all; cursor: help; }
  .strip-rule { stroke: var(--ink); stroke-opacity: .25; stroke-width: 0.8; stroke-dasharray: 3 4; }
  .strip-label { font-family: var(--font); font-size: 10px; fill: var(--ink-soft); }
  .strip-slot { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 0.8; stroke-dasharray: 2 3; }
  .lang-map .borders { stroke-opacity: 0.22; stroke-width: 0.45; }
  .lang-map .area.dist { stroke: var(--paper); stroke-opacity: .5; stroke-width: 0.35; }
  .lang-map .land { stroke-width: 1.2; }
  .pie { pointer-events: none; }
  .pie path { stroke: var(--paper); stroke-width: 0.8; }
  .pie circle { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 0.6; }
  /* units: one hit target per country or division for the Stack, Balance and Best across games */
  .unit { fill: transparent; stroke: none; cursor: pointer; }
  .unit.pt { fill: var(--panel); stroke: var(--ink-soft); stroke-width: .9; }   /* a city: a dot, coloured by the same states as an area */
  .unit.pt.dim { fill: var(--grey); fill-opacity: .45; stroke: none; }
  .unit.pt.far { fill: var(--grey); fill-opacity: .3; stroke: var(--grey); }
  #links .mesh { stroke: var(--ink-soft); stroke-opacity: .28; stroke-width: .6; pointer-events: none; }
  .unit.pickable:hover { fill: var(--orange); fill-opacity: .25; }
  .unit.visited { fill: var(--uc, var(--blue-3)); fill-opacity: .75; stroke: var(--paper); stroke-width: .8; }
  .unit.cur { fill: var(--orange); fill-opacity: .9; stroke: var(--ink); stroke-width: 1.4; }
  .unit.nb { fill: var(--orange); fill-opacity: .12; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 3; }
  .unit.nb:hover { fill-opacity: .3; stroke-dasharray: none; }
  .unit.exit { stroke: var(--blue); stroke-width: 2.2; }
  .unit.placed { fill: var(--sc); fill-opacity: 1; stroke: var(--sb); stroke-width: 1; cursor: default; }
  .unit.fell { fill: var(--grey); fill-opacity: .35; stroke: var(--ink-soft); stroke-dasharray: 3 2; cursor: default; }
  .unit.dim { cursor: default; }
  .unit.finish { stroke: var(--blue); stroke-width: 2.6; fill: var(--blue); fill-opacity: .12; }
  .unit.finish.nb { stroke: var(--blue); stroke-dasharray: none; fill: var(--blue); fill-opacity: .3; }
  .unit.startu:not(.cur) { stroke: var(--orange); stroke-width: 1.6; }
  .unit.far { fill: var(--grey); fill-opacity: .14; cursor: not-allowed; }
  .unit-label.fin { fill: var(--blue); }
  .finish-ring { fill: none; stroke: var(--blue); stroke-width: 1.6; pointer-events: none; }
  .run-goal { font-size: 13px; color: var(--ink-soft); margin: 2px 0 6px; } .run-goal b { color: var(--blue); }
  .nbtns button.fin { border-color: var(--blue); color: var(--blue); font-weight: 700; }
  /* Balance: each pan's places in its colour on the map, the one picked outlined; the scales in the side panel */
  .unit.bal-l { fill: var(--blue); fill-opacity: .55; stroke: var(--paper); stroke-width: .8; }
  .unit.bal-r { fill: var(--orange); fill-opacity: .6; stroke: var(--paper); stroke-width: .8; }
  .unit.bal-sel { fill: var(--orange-soft); fill-opacity: 1; stroke: var(--orange-deep); stroke-width: 2.2; }
  .unit.pt.bal-l { fill: var(--blue); fill-opacity: 1; stroke: var(--ink); } .unit.pt.bal-r { fill: var(--orange); fill-opacity: 1; stroke: var(--ink); } .unit.pt.bal-sel { fill: var(--orange-soft); stroke: var(--orange-deep); }
  .unit.portrait.bal-l, .unit.portrait.bal-r, .unit.portrait.bal-sel { fill: none; fill-opacity: 1; stroke: none; }
  .unit.portrait.bal-l .pf-disc { stroke: var(--blue); stroke-width: 2.8; } .unit.portrait.bal-r .pf-disc { stroke: var(--orange-deep); stroke-width: 2.8; } .unit.portrait.bal-sel .pf-disc { fill: var(--orange-soft); stroke: var(--orange-deep); stroke-width: 2.8; }
  .unit.flagbtn.bal-l, .unit.flagbtn.bal-r { opacity: .5; pointer-events: none; } .unit.flagbtn.bal-l rect { stroke: var(--blue); stroke-width: 2.6; } .unit.flagbtn.bal-r rect { stroke: var(--orange-deep); stroke-width: 2.6; }
  .bal-card { display: grid; gap: 10px; }
  .bal-svg { width: 100%; height: auto; overflow: visible; }
  .bal-ground { stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
  .bal-shadow { fill: var(--ink); opacity: .1; transition: rx .8s cubic-bezier(.3, 1.6, .45, 1), cx .8s cubic-bezier(.3, 1.6, .45, 1), opacity .8s; }
  .bal-plinth, .bal-column { fill: var(--ink); } .bal-collar { fill: var(--ink-soft); }
  .bal-globe circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; transition: fill .3s; } .bal-globe .mer { fill: none; stroke-width: 1.6; transition: stroke .3s; }
  .bal-globe.ok .mer { stroke: var(--blue); } .bal-globe.ok circle { fill: var(--blue-4); } .bal-globe.off .mer { stroke: var(--orange-deep); } .bal-globe.off circle { fill: var(--paper); }
  .bal-beam { transform-origin: 300px 70px; transition: transform .8s cubic-bezier(.3, 1.6, .45, 1); }
  .bal-beam-in { transform-origin: 300px 70px; }
  .lives { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
  .life { width: .62em; height: .62em; fill: var(--orange); stroke: var(--orange-deep); stroke-width: 1.1; }
  .life.lost { fill: none; stroke: var(--ink-faint); stroke-dasharray: 2 1.4; }
  .bal-beam-in.wobble { animation: bal-shake .45s ease-in-out 2; } .bal-beam-in.settle { animation: bal-settle .6s ease-out; }
  @keyframes bal-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
  @keyframes bal-settle { 0% { transform: translateY(-5px); } 60% { transform: translateY(2px); } 100% { transform: none; } }
  .bal-track { fill: var(--water); stroke: var(--ink); stroke-width: 2.5; } .bal-zone { fill: var(--blue-4); } .bal-zone-edge { stroke: var(--blue); stroke-width: 2; stroke-linecap: round; } .bal-mid { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
  .bal-hook { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
  .bal-mark { transition: transform .8s cubic-bezier(.3, 1.6, .45, 1); } .bal-mark circle:first-child { stroke: var(--ink); stroke-width: 2.5; transition: fill .3s; }
  .bal-mark.ok circle:first-child { fill: var(--blue); } .bal-mark.off circle:first-child { fill: var(--orange); }
  .bal-tick { font-size: 11px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; pointer-events: none; } .bal-tick.zone { fill: var(--blue); }
  .bal-pan { transition: transform .8s cubic-bezier(.3, 1.6, .45, 1); cursor: pointer; }
  .bal-chain { stroke: var(--ink-soft); stroke-width: 2.4; stroke-dasharray: .1 5; stroke-linecap: round; fill: none; } .bal-ring { fill: none; stroke: var(--ink); stroke-width: 2.5; }
  .bal-bowl { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; } .bal-bowl.left { fill: var(--blue); } .bal-bowl.right { fill: var(--orange); } .bal-rim { fill: var(--ink); }
  .bal-weight rect { stroke-width: 2; fill: var(--panel); } #bal-names-l .bal-weight rect { stroke: var(--blue); } #bal-names-r .bal-weight rect { stroke: var(--orange-deep); }
  .bal-weight .knob { fill: var(--ink); }
  .bal-weight.new rect { animation: bal-drop .5s cubic-bezier(.3, 1.4, .5, 1); } .bal-weight.new text { animation: bal-drop .5s cubic-bezier(.3, 1.4, .5, 1); }
  @keyframes bal-drop { 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .bal-name { font-size: 11.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none; }
  .bal-more { font-size: 11px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
  .bal-sum { font-size: 15px; font-weight: 800; text-anchor: middle; } .bal-sum.left { fill: var(--paper); } .bal-sum.right { fill: var(--ink); }
  @media (prefers-reduced-motion: reduce) { .bal-beam, .bal-pan, .bal-mark, .bal-shadow { transition: none; } .bal-beam-in.wobble, .bal-beam-in.settle, .bal-weight.new rect, .bal-weight.new text { animation: none; } }
  .bal-status { margin: 0; font-size: 17px; font-weight: 800; } .bal-status.good { color: var(--blue); } .bal-status.bad { color: var(--orange-deep); }
  .bal-put { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bal-put button { font: inherit; font-size: 15px; font-weight: 800; border: 0; border-radius: 12px; min-height: 48px; cursor: pointer; }
  .bal-put .left { background: var(--blue); color: var(--paper); } .bal-put .right { background: var(--orange); color: var(--ink); }
  .bal-put button:disabled { opacity: .4; cursor: not-allowed; }
  .bal-mouse { margin: 0; }
  .bal-sel, .bal-count { margin: 0; font-size: 13px; color: var(--ink-soft); }
  ol.bal-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; } ol.bal-log .y { color: var(--blue); } ol.bal-log .n { color: var(--orange-deep); } ol.bal-log .empty, ol.bal-log .m { color: var(--ink-soft); }
  .unit-label { font-family: var(--font); font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none;
    paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: scale(var(--zt)); }
  .unit-label small { font-weight: 500; }
  .unit-label.val { font-weight: 500; font-size: 9px; fill: var(--ink-soft); }
  .link { stroke: var(--orange); stroke-width: 1.4; stroke-opacity: .55; fill: none; stroke-dasharray: 3 3; pointer-events: none; }
  .sea { stroke: var(--grey); stroke-width: 0.9; stroke-dasharray: 3 4; opacity: .6; fill: none; pointer-events: none; }
  .path { stroke: var(--ink); stroke-width: 2; opacity: .3; fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
  .path.mine { stroke: var(--orange); stroke-width: 3.5; opacity: .95; }
  .path.opt { stroke: var(--blue); stroke-width: 3; opacity: .85; stroke-dasharray: 8 5; }
  .path-dot { fill: var(--orange); stroke: var(--paper); stroke-width: 1; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) { .unit.nb { animation: dash 1.2s linear infinite; } }
  @keyframes dash { to { stroke-dashoffset: -14; } }

  /* ---------- side panel: shared ---------- */
  .side { padding: 12px 6px 16px 14px; border-left: 1px solid var(--ink-faint); display: flex; flex-direction: column; min-height: 0; gap: 10px; }
  .side section { display: flex; flex-direction: column; min-height: 0; gap: 10px; flex: 1; }
  .tip { position: fixed; z-index: 50; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: 8px;
         background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  .tip b { font-weight: 600; }
  .tip small { opacity: .75; }
  .tip .tip-head { font-size: 11.5px; opacity: .75; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
  :root[data-theme="dark"] .tip, .dark .tip { background: var(--paper); color: var(--ink); }
  .card { background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
  .card h3, .side h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { display: grid; gap: 2px; }
  .stat small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
  .stat strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; }
  .stat strong span { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
  div.bar { height: 7px; border-radius: 999px; background: var(--ink-faint); overflow: hidden; }
  div.bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: inherit; transition: width .35s ease; }
  .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
  .primary {
    background: var(--blue); color: var(--paper); border: 0; border-radius: 10px;
    padding: 12px 20px; font-weight: 700; font-size: 16px;
  }
  .primary:hover { filter: brightness(0.93); }
  .primary:disabled { opacity: .4; cursor: not-allowed; filter: none; }
  .secondary {
    background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 10px;
    padding: 11px 18px; font-weight: 600; font-size: 15px;
  }
  .secondary:disabled { opacity: .4; cursor: not-allowed; }
  button.small { padding: 7px 12px; font-size: 13.5px; border-radius: 8px; }
  .msg { min-height: 20px; font-size: 14px; line-height: 1.4; }
  .msg.ok { color: var(--blue); font-weight: 600; } .msg.bad { color: var(--orange-deep); font-weight: 600; }

  /* ---------- side panel: pyramid (Rap, Domination) ---------- */
  .explained { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; }
  .explained b {
    font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--blue);
  }
  .explained span { color: var(--ink-soft); font-size: 14px; max-width: 24ch; line-height: 1.25; }
  .ref-line { font-size: 13px; color: var(--ink-soft); padding: 2px 4px 0; min-height: 18px; margin: 0; }
  .ref-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
  svg#pyramid { width: 100%; max-height: 44vh; height: auto; display: block; margin-top: 4px; }
  .pyr-empty { fill: transparent; cursor: help; pointer-events: all; }
  .pyr-empty:hover, .pyr-empty.pinned { fill: var(--ink); fill-opacity: .05; }
  .pyr-outline { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
  .pyr-grid { stroke: var(--ink); stroke-opacity: .28; stroke-width: 0.8; stroke-dasharray: 3 4; }
  .pyr-grid-label { font-family: var(--font); font-size: 10px; fill: var(--ink-soft); }
  .band { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .5s cubic-bezier(.2,.8,.2,1); stroke: var(--paper); stroke-width: 0.6; }
  .band-label { font-family: var(--font); font-weight: 600; fill: var(--paper); text-anchor: middle; pointer-events: none; animation: fadein .6s; }
  .band-label.dark { fill: var(--ink); }
  @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  ol.found { list-style: none; margin: 4px 0 0; padding: 0; overflow-y: auto; flex: 1; min-height: 80px; border-top: 1px solid var(--ink-faint); font-variant-numeric: tabular-nums; }
  ol.found li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; padding: 5px 4px; border-bottom: 1px solid var(--ink-faint); font-size: 13.5px; }
  ol.found li:first-child:not(.empty):not(.missed-head) { background: var(--blue-soft); }
  ol.found li .name { font-weight: 600; }
  ol.found li .name .where { font-weight: 400; color: var(--ink-soft); }
  ol.found li .pop, ol.found li .share { color: var(--ink-soft); }
  ol.found li .pts { color: var(--blue); font-weight: 700; }
  ol.found li .took { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-soft); margin-top: 1px; }
  ol.found .empty { color: var(--ink-soft); padding: 14px 4px; font-size: 13.5px; display: block; }
  ol.found li.missed-head { display: block; background: var(--water); color: var(--ink-soft); font-weight: 600; font-size: 12.5px; padding: 6px 4px; margin-top: 8px; }
  ol.found li.got-head { margin-top: 0; background: var(--blue-soft); color: var(--ink); }
  ol.found li.missed-row { opacity: .75; }
  ol.found li.missed-row .name { font-weight: 500; }
  ol.found li.rest-row { opacity: .85; }
  .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

  /* ---------- side panel: the pile (Stack) ---------- */
  .pile-hud { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: end; }
  .pile-hud .explained b { font-size: 40px; }
  .pile-hud .sidebits { text-align: right; font-size: 13px; color: var(--ink-soft); display: grid; gap: 2px; }
  .pile-hud .sidebits b { color: var(--ink); font-variant-numeric: tabular-nums; }
  svg#pile { width: 100%; height: auto; max-height: min(58vh, 560px); display: block; background: var(--paper); border-radius: 10px; border: 1px solid var(--ink-faint); }
  svg#pile text { font-family: var(--font); fill: var(--ink); }
  .ground { stroke: var(--ground); stroke-width: 2; }
  .ground-hatch { fill: var(--ground); opacity: .35; }
  .scale line { stroke: var(--ink-soft); stroke-width: 1; }
  .scale rect { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 2; }
  .scale text { font-size: 9px; fill: var(--ink-soft); }
  .tile-g rect { stroke-width: 1.4; stroke: var(--sb); fill: var(--sc); }
  .tile-g.wobbly rect { stroke-dasharray: 4 2; }
  .tile-g text.code { font-weight: 700; font-size: 10px; letter-spacing: .01em; }
  .tile-g text.val { font-size: 8.5px; font-weight: 500; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .tile-g.fatal rect { stroke: var(--ink); stroke-width: 2; }
  .overhang { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 3 3; }
  .pile-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
  .pile-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
  ol.stacked { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; border-top: 1px solid var(--ink-faint); font-size: 13.5px; }
  ol.stacked li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--ink-faint); }
  ol.stacked li .v, ol.stacked li .sh { font-variant-numeric: tabular-nums; }
  ol.stacked li .sh { color: var(--blue); font-weight: 600; min-width: 4.5ch; text-align: right; }
  ol.stacked li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  ol.stacked li.empty { display: block; color: var(--ink-soft); padding: 10px 2px; }
  ol.stacked li.fell { opacity: .5; text-decoration: line-through; }

  /* ---------- side panel: the run ---------- */
  .run-hud { display: grid; gap: 6px; }
  .run-hud .h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .run-hud .h b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  .run-hud .h code { font-family: var(--font); font-size: 16px; font-weight: 700; color: #2a1a05; background: var(--orange); padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
  .nbtns { display: flex; flex-wrap: wrap; gap: 6px; }
  /* Best across: the three closest places in reach on a dial like the scoring dial — you at the centre, a spoke for each
     the way it lies, its blob nearer the centre the closer it is, a small arrow in the blob, its name at the rim */
  .go-dial { position: relative; width: min(100%, 420px); aspect-ratio: 492 / 332; margin: 4px auto 0; }
  .go-dial .go-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: auto; }
  .go-dial .wedge { fill: var(--blue); fill-opacity: .16; } .go-dial .wedge.fin { fill: var(--orange); fill-opacity: .22; }
  .go-dial .go-lbl { fill: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .03em; cursor: pointer; } .go-dial .go-lbl.fin { fill: var(--blue); }
  .go-dial .go-lbl:hover { fill: var(--orange-deep); }
  .go-dial .go-sub { fill: var(--ink-soft); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
  .go-dial .go-you { fill: var(--orange); stroke: var(--ink); stroke-width: 2; } .go-dial .go-here { fill: var(--ink-soft); font-size: 10.5px; text-transform: none; letter-spacing: 0; }
  .go-blob { position: absolute; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--w-cover, var(--blue)); border: 2.5px solid var(--paper); box-shadow: 0 2px 0 rgba(23, 68, 119, .45), 0 4px 10px rgba(23, 68, 119, .2); transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s; }
  .go-blob svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .go-blob:hover, .go-blob:focus-visible { transform: translate(-50%, -50%) scale(1.15); outline: none; border-color: var(--ink); }
  .go-blob:active { transform: translate(-50%, -50%) scale(.95); }
  .go-blob.fin { background: var(--orange); } .go-blob.fin svg { stroke: var(--ink); }
  .unit.go-hl { stroke: var(--orange-deep) !important; stroke-width: 3 !important; }
  @media (prefers-reduced-motion: reduce) { .go-blob { transition: none; } }
  @media (max-width: 600px) { .go-dial .go-lbl { font-size: 15.5px; } .go-dial .go-sub { font-size: 12.5px; } .go-dial .go-here { font-size: 13px; } }
  @media (pointer: coarse) { .go-blob { width: 44px; height: 44px; } .go-blob svg { width: 22px; height: 22px; } }
  .nbtns button { border: 1.5px dashed var(--orange); background: var(--orange-soft); color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 13.5px; font-weight: 600; }
  .nbtns button:hover { border-style: solid; }
  .nbtns button.sea::before { content: "〰 "; opacity: .7; }
  /* Best across: the trail of stepping stones */
  .trail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .trail-head h3 { margin: 0; } .trail-head span { font-size: 13px; color: var(--ink-soft); }
  .trail { width: 100%; height: auto; display: block; margin: 4px 0 2px; }
  .trail .road { fill: none; stroke: var(--ground); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
  .trail .walked { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .trail .stone { stroke: var(--ink); stroke-width: 2; transition: r .5s cubic-bezier(.3, 1.6, .45, 1); }
  .trail .stone.best { fill: var(--orange); } .trail .stone.other { fill: var(--blue-3); } .trail .stone.start { fill: var(--paper); stroke-width: 2.5; }
  .trail .stone.fin { fill: var(--blue); stroke-width: 2.5; } .trail .stone.todo { fill: none; stroke: var(--grey); stroke-width: 1.5; stroke-dasharray: 3 3; } .trail .stone.spare { fill: var(--grey); stroke: none; }
  .trail .star { fill: var(--paper); pointer-events: none; }
  .trail .nm { font-size: 12px; font-weight: 800; fill: var(--ink); text-anchor: middle; } .trail .nm.fin { fill: var(--blue); } .trail .vl { font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
  .trail .pawn path { fill: var(--orange); stroke: var(--ink); stroke-width: 2; } .trail .pawn circle { fill: var(--paper); }
  .trail .flag line { stroke: var(--ink); stroke-width: 2.5; } .trail .flag path { fill: var(--blue); stroke: var(--ink); stroke-width: 1.5; }
  .trail-bars { display: grid; gap: 7px; }
  .trail-bar { display: grid; grid-template-columns: 108px minmax(0, 1fr) 72px; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
  .trail-bar i { display: block; height: 14px; background: var(--water); border-radius: 999px; overflow: hidden; }
  .trail-bar i b { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.3, 1.6, .45, 1); }
  .trail-bar.you i b { background: var(--orange); } .trail-bar.mean i b { background: var(--ground); } .trail-bar.route i b { background: repeating-linear-gradient(90deg, var(--blue) 0 8px, var(--blue-2) 8px 12px); }
  .trail-bar strong { text-align: right; font-weight: 800; font-size: 14px; }
  .trail-pips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--ink-faint); font-size: 13px; font-weight: 700; }
  .trail-pips .pips { display: flex; gap: 4px; } .trail-pips .pips i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); }
  .trail-pips .pips i.best { background: var(--orange); } .trail-pips .pips i.other { background: var(--blue-3); } .trail-pips small { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
  .trail-key { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); } .trail-key .o { color: var(--orange-deep); } .trail-key .b { color: var(--blue); }
  @media (prefers-reduced-motion: reduce) { .trail .stone, .trail-bar i b { transition: none; } }
  @media (max-width: 600px) { .trail .nm { font-size: 14px; } .trail .vl { font-size: 12.5px; } }   /* the trail shrinks with the card: its labels less so */
  .keys { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; color: var(--ink-soft); }
  .keys b { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
  .keys b.miss { background: color-mix(in srgb, var(--orange) 30%, transparent); border: 1px solid var(--orange); }
  .keys b.exitk { background: var(--orange); border: 2px solid var(--blue); }
  .keys b.line { height: 3px; vertical-align: 3px; border-radius: 2px; }
  .keys b.best, .keys b.line.or { background: var(--orange); }
  .keys b.fink { background: var(--grey); opacity: .7; }
  .missed-head-p { margin-top: 14px; }
  p.fine { font-size: 13px; }
  .keys b.line.dashed { background: none; border-top: 2px dashed var(--grey); height: 0; }
  .log { font-size: 12.5px; line-height: 1.6; max-height: 170px; overflow: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .log .y { color: var(--blue); } .log .n { color: var(--orange-deep); }
  .rules { font-size: 13px; color: var(--ink-soft); line-height: 1.5; display: grid; gap: 5px; }
  .rules code { font-family: var(--font); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow: auto; }
  .pick-list button { border: 1px solid var(--ink-faint); background: var(--paper); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
  .pick-list button:hover { border-color: var(--orange); }

  /* ---------- overlays ---------- */
  .overlay { position: fixed; inset: 0; z-index: 10; background: rgba(20, 30, 40, 0.5); display: flex; align-items: center; justify-content: center; overflow-y: auto;
    padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .panel { background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 14px; padding: 26px 28px; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--shadow); }
  .panel.wide { width: min(980px, 100%); }
  .panel h2 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
  .panel p { margin: 0 0 12px; color: var(--ink-soft); max-width: 62ch; }
  .panel p.lead { color: var(--ink); font-size: 16px; }
  .panel h3 { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; letter-spacing: .05em; text-transform: uppercase; }
  .pills { display: flex; flex-wrap: wrap; gap: 7px; }
  .pills button { border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 6px 13px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
  .pills button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .pills button:disabled { opacity: .35; cursor: not-allowed; }
  .pills.big button { padding: 8px 15px; font-size: 14.5px; }
  .pills button.accent[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--paper); }
  /* Pending measures, locked: a dashed outline and a padlock; a click explains instead of choosing */
  .pills button.locked { border-style: dashed; border-color: var(--ink-soft); color: var(--ink-soft); background: transparent; display: inline-flex; align-items: center; gap: 5px; cursor: help; }
  .pills button.locked:hover { color: var(--ink); border-color: var(--ink); }
  svg.lock { width: 12px; height: 12px; flex: none; fill: currentColor; vertical-align: -1px; }
  .axis .premium-note { color: var(--ink); }
  .premium-note b { font-weight: 700; }
  .premium-note button.link { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 700; text-decoration: underline; cursor: pointer; font: inherit; }
  .premium-note a { color: var(--blue); font-weight: 700; }
  .premium-note.flash { animation: premium-flash 1.2s ease-out; }
  @keyframes premium-flash { 0%, 30% { background: var(--orange-soft); } 100% { background: transparent; } }

  /* ---------- the menu: the map is the menu ----------
     In menu mode (.app.menu-mode) the game header gives way to the menu header — the logo and the pinned maps — the map
     column previews the chosen layer through the chosen lens, and the side column holds the choices: layer, lens, game,
     the sentence, Play. The same elements, so nothing moves when a round starts. */
  .menu-top { display: none; }
  .menu-mode header.top { display: none; }
  .menu-mode .menu-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 36px; align-items: start; padding: 12px 8px 8px; border-bottom: 1px solid var(--ink-faint); }
  .menu-mode .map-head .toggles { display: none; }   /* the preview has no flags or names to toggle */
  .menu-mode #flags { display: none; }
  .menu-mode .side { padding-top: 10px; }
  .menu-mode #side-pyramid, .menu-mode #side-stack, .menu-mode #side-run, .menu-mode #side-bal { display: none !important; }
  .brandline { display: grid; gap: 6px; align-content: start; }
  .brandline .logo { display: block; height: 84px; width: auto; }
  .brandline .tagline { margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 34ch; line-height: 1.35; }
  .brandline .tagline b { color: var(--ink); font-weight: 700; }
  .panel-mark { display: block; height: 30px; width: auto; margin: 0 0 10px; }
  .where { display: grid; gap: 4px; min-width: 0; max-width: 560px; justify-self: start; width: 100%; }
  .where h3, .menu .axis > h3 { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }
  .where .bubbles { --bmax: 58px; --cg: 10px; row-gap: 14px; padding-bottom: 12px; }
  .where .bubble .bl { font-size: 10.5px; }
  .menu-top .more { grid-column: 1 / -1; }
  .menu { display: grid; gap: 16px; align-content: start; flex: none !important; }
  .menu .axis { display: grid; gap: 8px; min-width: 0; }
  .menu .axis > h3 .lead { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; margin-right: 1px; }   /* "Pick LAYER", "for LENS" */
  .menu .note { font-size: 13px; color: var(--ink-soft); margin: 0; }
  .menu-foot .body p { max-width: none; text-wrap: pretty; }
  .more-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .dbl-hint { font-size: 12px; color: var(--ink-soft); }
  @media (hover: none), (pointer: coarse) { .dbl-hint { display: none; } }   /* a mouse hint: touch screens have no double-click to speak of */
  .where, .more-places { -webkit-user-select: none; user-select: none; }   /* a double-click there opens or closes More, rather than selecting a word */
  .more-toggle { border: 0; background: none; color: var(--blue); font-weight: 700; font-size: 15px; padding: 2px 0; text-align: left; cursor: pointer; justify-self: start; }
  /* the layers: a list, one line each, with the count of what is on the map */
  .layers { display: grid; gap: 4px; }
  .layers button { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: var(--ink); font-weight: 600; font-size: 14.5px; text-align: left; }
  .layers button svg { width: 17px; height: 17px; flex: none; }
  .layers button small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .layers button.sub { margin-left: 22px; min-height: 34px; font-size: 13px; font-weight: 600; }   /* capitals and biggest cities: one city per area, under Cities */
  .layers button.sub svg { width: 15px; height: 15px; }
  .layers button:hover { background: var(--water); }
  .layers button[aria-pressed="true"] { background: var(--panel); border-color: var(--ink); box-shadow: 0 1px 0 var(--ink-faint); }
  /* the lenses: one block per kind of lens — Physical in blue, Econ in orange, Poli in ink — its free lens first, the Pending
     ones after a label of their own */
  .mgroups { display: grid; gap: 8px; }
  .mgroup { --cat: var(--blue); --cat-soft: var(--blue-soft); display: grid; gap: 6px; padding: 8px 10px 9px; border-radius: 10px; border-left: 4px solid var(--cat); background: var(--cat-soft); }
  .mgroup[data-cat="econ"] { --cat: var(--orange-deep); --cat-soft: var(--orange-soft); }
  .mgroup[data-cat="poli"] { --cat: var(--ink); --cat-soft: var(--grey-soft); }
  .mcat { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cat); }
  .mcat svg { width: 14px; height: 14px; flex: none; }
  .mgroup .pills { align-items: center; }
  .mgroup .pills.split { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 6px 10px; }
  .mgroup .pfree { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 13px; }
  .mgroup .pprem { display: grid; gap: 3px; justify-items: start; }
  .mgroup .prow { display: flex; flex-wrap: wrap; gap: 4px 5px; }
  .mgroup .prow button { padding: 3px 9px; font-size: 11.5px; }
  .mgroup .prow button .lock { width: 10px; height: 10px; }
  .mgroup .pills .ptag { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
  .mgroup .pills .ptag .lock { width: 9px; height: 9px; }
  .mgroup .pills button.accent[aria-pressed="true"] { background: var(--cat); border-color: var(--cat); color: var(--paper); }
  .mgroup .pills button.free[aria-pressed="false"] { background: var(--panel); border-color: var(--cat); color: var(--cat); }
  .mnone { font-size: 13px; color: var(--ink-soft); font-style: italic; padding: 2px 0; }
  /* Play: the big orange button plays what is chosen; the dice beside it draws a layer, a lens and a game that play */
  .dock { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 10px; padding: 10px 0 8px; margin-top: -6px; background: var(--paper); box-shadow: 0 -12px 12px -10px rgba(20, 30, 40, .18); }
  .play-row { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 2px; }
  .play-pair { display: flex; align-items: center; justify-content: center; gap: 34px; }   /* Play, and the dice a step to its right */
  /* Play and Roll are twins: the same disc, a dashed ring that turns on hover, an icon that springs, a word in the same type */
  .play-big, .dice { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
          font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; transition: transform .08s, box-shadow .08s; }
  .play-big::after, .dice::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .4); pointer-events: none; }
  .play-big:hover::after, .dice:hover::after { animation: ring-turn 6s linear infinite; }
  @keyframes ring-turn { to { transform: rotate(360deg); } }
  .play-big svg, .dice svg { width: 32px; height: 32px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
  .play-big { --play-deep: var(--orange-deep); background: radial-gradient(circle at 32% 26%, #F4A24F 0%, var(--orange) 46%, #D9700F 100%); color: var(--ink);
              box-shadow: 0 6px 0 var(--play-deep), inset 0 0 0 3px rgba(255, 255, 255, .22); }
  .play-big svg { fill: currentColor; margin-left: 4px; filter: drop-shadow(0 2px 0 rgba(140, 70, 5, .35)); }
  .play-big:hover svg { transform: translateX(3px) scale(1.12); }
  .play-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--play-deep), inset 0 0 0 3px rgba(255, 255, 255, .22); }
  .play-big:disabled { background: var(--grey-soft); color: var(--ink-soft); box-shadow: none; cursor: not-allowed; filter: none; transform: none; }
  /* the dice: Play's blue twin, a white die tipped on a blue disc; it rolls over on hover and tumbles when pressed */
  .dice { --dice-deep: #174477; background: radial-gradient(circle at 32% 26%, #4C84C4 0%, var(--blue) 46%, #1F5694 100%); color: #fff;
          box-shadow: 0 6px 0 var(--dice-deep), inset 0 0 0 3px rgba(255, 255, 255, .22); }
  .dice svg { transform: rotate(-14deg); filter: drop-shadow(0 2px 0 var(--dice-deep)); }
  .dice .face { fill: #fff; } .dice .pip { fill: var(--blue); }
  .dice:hover svg { transform: rotate(16deg) scale(1.06); }
  .dice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--dice-deep), inset 0 0 0 3px rgba(255, 255, 255, .22); }
  .dice.rolling svg { animation: dice-roll .5s cubic-bezier(.2, .8, .3, 1); }
  @keyframes dice-roll { from { transform: rotate(-14deg) scale(1); } 50% { transform: rotate(200deg) scale(.82); } to { transform: rotate(346deg) scale(1); } }
  @media (prefers-reduced-motion: reduce) { .dice svg, .dice.rolling svg, .play-big svg, .play-big:hover::after, .dice:hover::after { transition: none; animation: none; } }
  .play-note { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; text-align: center; }
  /* the map preview: the layer's areas through the lens, light to dark; a known zero hatched; no figure at all, grey */
  .pv { stroke: var(--paper); stroke-width: .7; fill: var(--blue); cursor: help; }
  .pv.c0 { fill: url(#pv-hatch); }   /* a known zero: no city of the size counted */
  .pv-hatch-bg { fill: var(--blue-soft); } .pv-hatch-line { fill: var(--blue-4); }
  .pv.cx { fill: var(--grey-soft); }   /* no figure at all for this lens: sits the round out */
  .pv.c1 { fill-opacity: .18; } .pv.c2 { fill-opacity: .34; } .pv.c3 { fill-opacity: .52; } .pv.c4 { fill-opacity: .74; } .pv.c5 { fill-opacity: 1; }
  .pv:hover { stroke: var(--orange); stroke-width: 1.4; }
  .legend .sw { width: 16px; height: 12px; border-radius: 3px; display: inline-block; background: var(--sc, var(--blue)); border: 1px solid var(--sb, transparent); box-sizing: border-box; }
  .legend .scale { display: inline-flex; gap: 2px; }
  .legend .sw.hatch { background: repeating-linear-gradient(45deg, var(--blue-4) 0 2px, color-mix(in srgb, var(--blue) 14%, var(--panel)) 2px 5px); }
  /* More: one frame, the place list on the left and the score toggle on the right */
  .more { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 14px 24px; align-items: start;
          padding: 12px 16px 10px; border-radius: 12px; background: var(--water); border: 1px solid var(--ink-faint); margin-top: 6px; }
  .more-places { display: grid; gap: 8px; min-width: 0; }
  #more-groups { display: grid; gap: 0; }
  #more-groups .group { padding: 12px 0 16px; border-top: 1px solid var(--ink-faint); }   /* a rule between groups, so rows within a group read as one */
  #more-groups .group:first-child { border-top: 0; padding-top: 4px; }
  #more-groups .group:last-child { padding-bottom: 4px; }
  .pin-note { margin: 0 0 2px; font-size: 12.5px; color: var(--ink-soft); }
  .pin-note b { color: var(--ink); }
  .more-side { min-width: 0; padding-left: 20px; border-left: 1px solid var(--ink-faint); }
  .score-box > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink); list-style: none; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
  .score-box > summary::-webkit-details-marker { display: none; }
  .score-box > summary::after { content: "▾"; color: var(--blue); margin-left: auto; }
  .score-box[open] > summary::after { content: "▴"; }
  .score-box > summary small { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .score-box .note { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 10px; }
  .score-box .note:empty { display: none; }
  .score-box .weights { margin: 4px 0 10px; }
  .score-box .dial { width: 150px; height: 150px; }
  .score-explain { display: grid; gap: 6px; margin: 0; font-size: 12.5px; }
  .score-explain div { display: block; }
  .score-explain dt { font-weight: 700; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px; margin-right: 4px; }
  .score-explain dt i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
  .score-explain .cover { background: var(--w-cover); } .score-explain .speed { background: var(--w-speed); } .score-explain .order { background: var(--w-order); }
  .score-explain dd { margin: 0; color: var(--ink-soft); display: inline; }
  .score-formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px !important; }
  .more .group { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 10px; align-items: start; font-size: 12.5px; color: var(--ink-soft); }
  /* ---------- place bubbles ---------- */
  /* six columns to a row, the first flush with the left edge and the sixth with the right (like justified text), so every
     row and every group lines up; a column is --bmax wide when there is room and shrinks to fit when there is not */
  .bubbles { --bmax: 76px; --cg: 12px; display: grid; grid-template-columns: repeat(6, minmax(0, var(--bmax))); justify-content: space-between;
             column-gap: var(--cg); row-gap: 18px; padding-bottom: 18px; }
  .bubbles .row-break { display: none; }   /* rows are six wide; a short row that is not the last is padded with empty cells */
  .bubbles .cell-gap { display: block; }
  /* a place: its bubble, and a pin badge that adds it to or takes it off the pinned rows */
  .place { position: relative; display: block; min-width: 0; }
  .pin { position: absolute; top: -5px; right: -7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; padding: 0;
         border: 1.5px solid var(--bub-ink); background: var(--paper); color: var(--bub-ink); display: grid; place-items: center; cursor: pointer; }
  .pin::before { content: ""; position: absolute; inset: -4px; }   /* a little bigger than the badge, not so big that it eats into the bubble */
  .pin, .bubble { touch-action: manipulation; }   /* a double tap is two taps, not a zoom */
  .pin.armed, .pin.armed[aria-pressed="true"] { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--paper); transform: scale(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-deep) 25%, transparent); }
  #area-pills .pin.armed { opacity: 1; }
  .pin-msg { margin: -10px 0 0; font-size: 12.5px; color: var(--ink-soft); min-height: 0; }
  .pin-msg:empty { display: none; }
  .pin-msg b { color: var(--ink); }
  .pin-msg button { border: 0; background: none; padding: 0 2px; color: var(--blue); font-weight: 700; font-size: inherit; text-decoration: underline; cursor: pointer; }
  .pin svg { width: 12px; height: 12px; }
  .pin[aria-pressed="true"] { background: var(--bub-ink); color: var(--paper); }
  .pin:disabled { opacity: .3; cursor: not-allowed; }
  .pin:hover:not(:disabled) { transform: scale(1.12); }
  #area-pills .pin { opacity: 0; transition: opacity .12s; }   /* on the pinned rows the badge shows on hover or focus */
  #area-pills .place:hover .pin, #area-pills .place:focus-within .pin { opacity: 1; }
  @media (hover: none) { #area-pills .pin { display: none; } }   /* touch screens manage pins under More */
  .pins-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 0 14px; }
  .bubbles.blue { --bub-bg: var(--blue-soft); --bub-ink: var(--blue); }
  .bubbles.orange { --bub-bg: var(--orange-soft); --bub-ink: var(--orange-deep); }
  .bubble { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid transparent; background: var(--bub-bg); color: var(--bub-ink); padding: 0; display: grid; place-items: center; transition: transform .15s, background .15s; }
  .more .bubbles { --bmax: 64px; --cg: 8px; row-gap: 16px; padding-bottom: 0; }
  .bubble svg { width: 76%; height: 76%; fill: currentColor; }
  .bubble:hover { transform: scale(1.08); border-color: var(--bub-ink); }
  .bubble[aria-pressed="true"] { background: var(--bub-ink); color: var(--paper); border-color: var(--bub-ink); }
  .bubble .bl { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .12s; }
  .bubble:hover .bl, .bubble:focus-visible .bl, .bubble[aria-pressed="true"] .bl { opacity: 1; }
  .bubbles:hover .bubble[aria-pressed="true"]:not(:hover) .bl { opacity: 0; }   /* one name at a time */
  .games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }   /* six games, three to a row, two rows */
  .game-card { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 7px; row-gap: 4px; align-content: start; text-align: left; padding: 10px 10px 10px; border: 1.5px solid var(--ink-faint); border-radius: 12px; background: var(--panel); color: var(--ink); min-height: 84px; transition: border-color .15s, transform .15s; }
  .game-card:hover { border-color: var(--blue-2); transform: translateY(-1px); }
  .game-card[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
  .game-card svg { width: 22px; height: 22px; }
  .game-card small { grid-column: 1 / -1; }
  .game-card b { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; }
  .game-card small { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
  .game-card:disabled { opacity: .45; cursor: not-allowed; transform: none; }
  .sentence { margin: 0; padding: 10px 14px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--ink-faint); }
  .sentence-text { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 6px 0 0; }
  .sentence-text b { color: var(--blue); }
  .sentence .detail { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin-top: 6px; }
  .sentence .detail.warn { color: var(--orange-deep); font-weight: 600; }
  .pair-line { margin: 0; }
  /* the kind → measure pair: chips in the colours of the pressed pills, joined by an arrow */
  .pair { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; row-gap: 4px; }
  .pair-core { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }   /* the two chips and their arrow never split across lines */
  .pair-verb { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-right: 1px; }
  .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 1.25; white-space: nowrap; }
  .chip svg { width: 14px; height: 14px; flex: none; }
  .chip.kind { background: var(--ink); color: var(--paper); }
  .chip.measure { background: var(--blue); color: var(--paper); }
  .chip.measure[data-cat="econ"] { background: var(--orange-deep); }
  .chip.measure[data-cat="poli"] { background: var(--ink); }
  .pair .arrow { width: 26px; height: 13px; flex: none; color: var(--ink-soft); }
  .brand p .sub-detail { display: block; margin-top: 5px; }
  .explained span svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
  .explained #explained-noun { color: var(--blue); font-weight: 600; white-space: nowrap; }
  .explained #explained-kind { color: var(--ink); font-weight: 600; white-space: nowrap; }
  details.settings { border-top: 1px solid var(--ink-faint); padding-top: 10px; }
  details.settings summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
  details.settings summary::-webkit-details-marker { display: none; }
  details.settings summary::before { content: "▸"; color: var(--ink-soft); transition: transform .15s; display: inline-block; }
  details.settings[open] summary::before { transform: rotate(90deg); }
  details.settings summary small { font-weight: 400; color: var(--ink-soft); }
  .setting { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-faint); }
  .setting:last-child { border-bottom: 0; }
  .setting > h4 { margin: 0; font-size: 13.5px; font-weight: 600; }
  .setting > h4 small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
  .setting .pills { justify-content: center; gap: 9px; }   /* centred in the space beside the label, and bigger */
  .setting .pills button { padding: 8px 17px; font-size: 14.5px; min-width: 74px; }
  .menu-foot { font-size: 12.5px; color: var(--ink-soft); border-top: 1px solid var(--ink-faint); padding-top: 12px; }
  .menu-foot details { margin-top: 4px; }
  .menu-foot summary { cursor: pointer; font-weight: 600; color: var(--ink); }
  .menu-foot .body p { margin: 8px 0 0; max-width: none; }
  .menu-foot .formula { display: block; width: fit-content; background: var(--water); border-radius: 8px; padding: 6px 12px; margin: 6px 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: left; }   /* on a line of its own, never over the text */
  .load-error { color: var(--orange-deep); font-weight: 600; margin: 0; }

  /* the scoring dial: three spokes, a blob per part; drag along the spoke to re-split a budget of 3 */
  .weights { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .weights.locked { opacity: .55; }
  .dial { width: 170px; height: 170px; flex: none; touch-action: none; user-select: none; -webkit-user-select: none; }
  .dial text { font-family: var(--font); fill: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .dial .ring { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
  .dial .ring.base { stroke: var(--ink); stroke-opacity: .5; stroke-dasharray: 3 3; }
  .dial .spoke { stroke: var(--ink-faint); stroke-width: 1; }
  .dial .wedge { fill-opacity: .22; stroke: none; }
  .dial .blob { cursor: grab; stroke: var(--paper); stroke-width: 2.5; }
  .dial .blob.dragging { cursor: grabbing; }
  .dial .blob:focus-visible { outline: none; stroke: var(--ink); }
  .locked .dial .blob { cursor: not-allowed; }
  .dial .token { font-size: 11px; fill: #fff; text-transform: none; letter-spacing: 0; font-weight: 700; pointer-events: none; }
  .dial .cover { fill: var(--w-cover); } .dial .speed { fill: var(--w-speed); } .dial .order { fill: var(--w-order); }
  .weights .readout { min-width: 0; flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
  .weights .bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--water); }
  .weights .bar b { display: block; height: 100%; }
  .weights .bar .cover { background: var(--w-cover); } .weights .bar .speed { background: var(--w-speed); } .weights .bar .order { background: var(--w-order); }
  .weights .chips { display: flex; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
  .weights .chips span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--water); }
  .weights .chips span.off { opacity: .5; text-decoration: line-through; }
  .weights .chips em { font-style: normal; }
  .weights .chips i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .weights .chips .cover i { background: var(--w-cover); } .weights .chips .speed i { background: var(--w-speed); } .weights .chips .order i { background: var(--w-order); }
  .weights .meaning { color: var(--ink-soft); line-height: 1.4; }
  .weights .meaning b { color: var(--ink); }

  /* ---------- results ---------- */
  .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; margin: 12px 0 6px; }
  .result-grid .r b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  .result-grid .r small { color: var(--ink-soft); font-size: 12.5px; display: block; margin-top: 4px; }
  .result-grid .r.total b { color: var(--blue); font-size: 44px; }
  .verdict { background: var(--orange-soft); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
  .verdict.won { background: var(--blue-soft); }
  .verdict b { font-variant-numeric: tabular-nums; }
  .breakdown { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink-faint); }
  .breakdown li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--ink-faint); font-size: 14px; }
  .breakdown li span { color: var(--ink-soft); }
  .breakdown li b { font-variant-numeric: tabular-nums; }
  .breakdown li.tot span { color: var(--ink); font-weight: 700; } .breakdown li.tot b { font-size: 16px; }
  svg#curve { width: 100%; height: auto; display: block; margin: 14px 0 4px; }
  .curve-caption { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px; }
  .missed-list { margin: 0 0 16px; font-size: 14px; }
  .missed-list span { display: inline-block; margin: 0 8px 4px 0; }
  .missed-list span small { color: var(--ink-soft); }
  ol.ranking { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow: auto; border-top: 1px solid var(--ink-faint); font-size: 13.5px; }
  ol.ranking li { display: grid; grid-template-columns: 2.6ch auto 1fr auto 5.2ch; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--ink-faint); color: var(--ink-soft); }
  ol.ranking li .rk { font-variant-numeric: tabular-nums; text-align: right; }
  ol.ranking li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  ol.ranking li .v { font-variant-numeric: tabular-nums; }
  ol.ranking li .st { font-size: 11px; font-weight: 600; text-align: right; letter-spacing: .03em; text-transform: uppercase; }
  ol.ranking li.stood { color: var(--ink); font-weight: 600; }
  ol.ranking li.stood .st { color: var(--blue); }
  ol.ranking li.fell .nm { text-decoration: line-through; }
  .pth { font-weight: 700; font-size: 13.5px; line-height: 1.5; margin: 0 0 6px; }
  .pth.mine { color: var(--orange-deep); } .pth.opt { color: var(--blue); }
  .overlay.flagbox { background: rgba(20, 30, 40, 0.78); cursor: zoom-out; z-index: 40; }
  .overlay.account-overlay { z-index: 20; }   /* opened from the results' "sign in" link: above the results, not behind them */
  .flagbox figure { margin: 0; line-height: 0; }
  .flagbox img { max-width: min(94vw, 880px); max-height: 80vh; border: 0; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
  .noscript { margin: 0; padding: 14px 28px; background: var(--orange); color: #fff; font-weight: 600; }
  .save-note { font-size: 13.5px; margin: 8px 0 0; color: var(--ink-soft); }
  .save-note b { color: var(--blue); }
  .save-note button.link { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 600; text-decoration: underline; cursor: pointer; font: inherit; }

  /* ---------- accounts ---------- */
  .account .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
  .account input[type=email], .account input[type=text] { padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: 16px; min-width: 0; flex: 1 1 220px; }
  .account input.code { flex: 0 0 150px; font-size: 22px; letter-spacing: .25em; font-variant-numeric: tabular-nums; text-align: center; }
  .account .msg { margin: 0 0 10px; color: var(--ink-soft); }
  /* the provider buttons: plain text buttons; swap in Google's and Facebook's official button artwork from their brand pages before release */
  .account .providers { display: grid; gap: 8px; margin: 4px 0 6px; }
  .account .provider { border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 11px 14px; font-weight: 700; font-size: 15px; text-align: center; cursor: pointer; }
  .account .provider:hover { background: var(--ink-faint); }
  .account .providers .or { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
  .account .providers .or::before, .account .providers .or::after { content: ""; flex: 1; border-top: 1px solid var(--ink-faint); }
  .account .plan:empty { display: none; }
  .account .plan a { color: var(--blue); font-weight: 700; }
  .account .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin: 10px 0 14px; }
  .account .stats b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  .account .stats small { color: var(--ink-soft); font-size: 12.5px; }
  table.history { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
  table.history th, table.history td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--ink-faint); vertical-align: top; }
  table.history th { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
  table.history td.num, table.history th.num { text-align: right; }
  table.history td.score { color: var(--blue); font-weight: 700; }
  table.history tr.pb td.score::after { content: " ★"; }
  table.history td small { color: var(--ink-soft); display: block; font-size: 12px; }
  .account .danger { color: var(--orange-deep); border-color: var(--orange-deep); }
  .account .fine { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; }
  #account-btn { border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  @media (min-width: 901px) {
    .app { height: 100%; }
    main { overflow: hidden; }
    .side { overflow-y: auto; }
    svg#map { max-height: calc(100vh - 190px); }
    .menu-mode main { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
    .menu-top .more { max-height: 48vh; overflow-y: auto; }   /* More opens over the top half: the map and the choices stay in reach below */
    .menu-mode svg#map { max-height: calc(100vh - 250px); }
  }
  @media (max-width: 900px) {
    header.top { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 0 10px; }
    .brand h1 { font-size: 22px; }
    .brand .menu-btn img { height: 48px; }
    .hud { justify-content: space-between; }
    .hud .stat { align-items: flex-start; }
    main { grid-template-columns: 1fr; }
    .map-panel { padding: 10px 0 0; }
    svg#map { max-height: 62vh; }
    .side { border-left: 0; border-top: 1px solid var(--ink-faint); padding: 12px 0 16px; }
    svg#pyramid { max-height: 50vh; }
    ol.found { max-height: 240px; }
    .result-grid { grid-template-columns: 1fr 1fr; }
    .menu-mode .menu-top { grid-template-columns: 1fr; gap: 8px; padding: 10px 0 8px; }
    .brandline .logo { height: 64px; }
    .brandline .tagline { max-width: none; }
    .where { max-width: none; }
    .menu-mode svg#map { max-height: 46vh; }
    /* the dock stays in view on a phone too, but takes less of the screen */
    .dock { padding: 6px 0; gap: 6px; }
    .dock .pair-line, .dock .sentence .detail, .dock .play-note { display: none; }
    .dock .sentence { padding: 8px 12px; } .dock .sentence-text { font-size: 15px; margin: 0; }
    .play-big, .dice { width: 72px; height: 72px; font-size: 15px; } .play-big svg, .dice svg { width: 24px; height: 24px; } .play-big::after, .dice::after { inset: 5px; }
    .play-pair { gap: 26px; }
    .more { grid-template-columns: 1fr; }
    .more .group { grid-template-columns: 1fr; gap: 2px; }
    .more-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-faint); padding-top: 10px; }
    .setting { grid-template-columns: 1fr; }
    .panel { padding: 20px 18px; }
    .overlay { align-items: flex-start; }
    ol.ranking li .v { display: none; }
  }
  @media (max-width: 480px) {
    .game-card { min-height: 0; padding: 8px; } .game-card small { display: none; } .game-card b { font-size: 13px; }   /* three to a row still: icon and name */
    /* the scoreboard fits a phone: smaller figures, the button on one line */
    .brand { grid-template-columns: auto minmax(0, 1fr); } .pair-core { flex-wrap: wrap; row-gap: 4px; }   /* a long pair may take two lines rather than push the page sideways */
    .hud { gap: 8px 12px; flex-wrap: wrap; } .hud .stat b { font-size: 23px; } .hud .stat small { font-size: 11px; } .hud .end { white-space: nowrap; padding: 7px 10px; margin-left: auto; }   /* four figures and a button wrap rather than push the page sideways */
    /* a full row of 6 places fits a phone */
    .bubbles { --cg: 7px; row-gap: 16px; } .more .bubbles { --cg: 6px; }
    .setting .pills { gap: 5px; } .setting .pills button { padding: 7px 8px; font-size: 13px; min-width: 0; }   /* a row of five still fits a phone */
    .more { padding: 10px 10px 8px; }
    .pin { width: 20px; height: 20px; top: -4px; right: -5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .band, .city circle.bubble, .city text, .band-label, .answer.shake input, .unit.nb, .game-card { animation: none !important; transition: none !important; }
  }