/* ---------- looks ----------
   Each look is a token set on :root[data-look=…]. The canvas reads the same tokens
   (colours, fonts, overlay alpha/blend), so a look restyles map and UI together. */
:root {
  /* shared defaults */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: var(--font-ui);
  --font-display: var(--font-ui);
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius: 12px;
  --radius-lg: 16px;
  --panel-border: 0 solid transparent;
  --overlay-alpha: 0.42;
  --overlay-blend: source-over;
  --world-alpha: 0.55;
  --ghost: 0.35;
  --bigyear-alpha: 0.10;
}

/* Classic: the plain atlas */
:root[data-look="classic"] {
  --ocean: #e8edf0; --outside: #f7f7f4; --land: #d3d1c9; --land-nodata: #e1dfd9;
  --border: #f7f7f5; --grid: rgba(60, 80, 100, 0.10);
  --surface: #fcfcfb; --surface-2: #f1f0ec; --line: #dddcd6;
  --text: #0b0b0b; --text-2: #52514e; --text-3: #7a7973; --accent: #2a78d6;
  --shadow: 0 6px 24px rgba(20, 30, 40, 0.14), 0 1px 3px rgba(20, 30, 40, 0.10);
  --econ: #2a78d6; --econ-line: #fcfcfb;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="classic"] {
    --ocean: #111416; --outside: #070808; --land: #2e302e; --land-nodata: #222423;
    --border: #141615; --grid: rgba(200, 220, 240, 0.07);
    --surface: #1a1a19; --surface-2: #252524; --line: #353533;
    --text: #f0efec; --text-2: #c3c2b7; --text-3: #8f8e86; --accent: #3987e5;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --econ: #3987e5; --econ-line: #111416;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #2f9e2f; --s7: #9085e9; --s8: #e66767;
    color-scheme: dark;
  }
}

/* Ledger: ink on cream paper, serif type, like a financial broadsheet (default) */
:root[data-look="ledger"] {
  --font-ui: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-num: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display-weight: 400; --display-tracking: -0.02em;
  --radius: 4px; --radius-lg: 6px;
  --panel-border: 1px solid #cfc4ad;
  --ocean: #ece4d3; --outside: #f5efe2; --land: #d8cdb5; --land-nodata: #e4dccb;
  --border: #f5efe2; --grid: rgba(90, 70, 40, 0.13);
  --surface: #faf6ec; --surface-2: #efe7d6; --line: #d9cfba;
  --text: #1d1a14; --text-2: #4f4738; --text-3: #7c715d; --accent: #1f3a5f;
  --shadow: 0 2px 0 rgba(60, 45, 20, 0.08), 0 8px 24px rgba(60, 45, 20, 0.10);
  --econ: #1f3a5f; --econ-line: #faf6ec;
  --overlay-alpha: 0.5;
  --s1: #1f3a5f; --s2: #9b2f2f; --s3: #2e6b4f; --s4: #b07415;
  --s5: #7a4a78; --s6: #1d6f75; --s7: #b5532c; --s8: #4a5568;
  --bigyear-alpha: 0.13;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="ledger"] {
    --panel-border: 1px solid #3a352b;
    --ocean: #17150f; --outside: #0e0d09; --land: #2f2b22; --land-nodata: #24211a;
    --border: #17150f; --grid: rgba(230, 210, 170, 0.07);
    --surface: #1e1b15; --surface-2: #29251d; --line: #3a352b;
    --text: #f1eadb; --text-2: #cfc4ad; --text-3: #988d76; --accent: #9cb8de;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --econ: #9cb8de; --econ-line: #17150f;
    --s1: #8fb0dc; --s2: #e07a6e; --s3: #6fbf95; --s4: #e0aa4a;
    --s5: #c792c4; --s6: #5fc0c6; --s7: #e98e62; --s8: #a8b3c4;
    color-scheme: dark;
  }
}

/* Ticker: trading terminal, amber on black, monospace numbers */
:root[data-look="ticker"] {
  --font-ui: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-num: var(--font-ui); --font-display: var(--font-ui);
  --display-weight: 700; --display-tracking: -0.04em;
  --radius: 0px; --radius-lg: 0px;
  --panel-border: 1px solid #3a3320;
  --ocean: #08090b; --outside: #000; --land: #1a1d21; --land-nodata: #121417;
  --border: #08090b; --grid: rgba(255, 176, 0, 0.07);
  --surface: #0e1013; --surface-2: #1a1d21; --line: #2b2a22;
  --text: #f2ede0; --text-2: #ffb000; --text-3: #8f8a7a; --accent: #ffb000;
  --shadow: none;
  --econ: #ffb000; --econ-line: #08090b;
  --overlay-alpha: 0.32; --world-alpha: 0.28; --ghost: 0.6;
  --s1: #ffb000; --s2: #2bd9fe; --s3: #3ddc84; --s4: #ff5fa2;
  --s5: #ff5a4e; --s6: #a78bfa; --s7: #c3f73a; --s8: #f2ede0;
  --bigyear-alpha: 0.16;
  color-scheme: dark;
}

/* Blueprint: white line-work on drafting blue */
:root[data-look="blueprint"] {
  --font-ui: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-weight: 300; --display-tracking: -0.02em;
  --radius: 2px; --radius-lg: 2px;
  --panel-border: 1px solid rgba(220, 235, 255, 0.45);
  --ocean: #12457f; --outside: #0b305c; --land: #1a5596; --land-nodata: #164b86;
  --border: #9cc3ee; --grid: rgba(220, 235, 255, 0.16);
  --surface: #0f3d73; --surface-2: #17508f; --line: rgba(220, 235, 255, 0.3);
  --text: #f2f7ff; --text-2: #c4dbf6; --text-3: #8fb3dc; --accent: #ffd23f;
  --shadow: none;
  --econ: #ffffff; --econ-line: #ffffff;
  --overlay-alpha: 0.22; --world-alpha: 0.38; --ghost: 0.3;
  --s1: #ffffff; --s2: #ffd23f; --s3: #ff8c69; --s4: #7ef0c8;
  --s5: #ff9ad5; --s6: #9ad0ff; --s7: #c9f27a; --s8: #ffab40;
  --bigyear-alpha: 0.18;
  color-scheme: dark;
}

/* Riso: two-ink risograph print, overprinting colours, heavy type */
:root[data-look="riso"] {
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-num: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-weight: 900; --display-tracking: -0.05em;
  --radius: 0px; --radius-lg: 0px;
  --panel-border: 2px solid #1a1a1a;
  --ocean: #f4efe4; --outside: #fbf8f1; --land: #ded6c6; --land-nodata: #e9e3d6;
  --border: #f4efe4; --grid: rgba(0, 120, 191, 0.12);
  --surface: #fbf8f1; --surface-2: #efe8da; --line: #1a1a1a;
  --text: #1a1a1a; --text-2: #3c3a36; --text-3: #6d6a63; --accent: #ff48b0;
  --shadow: 4px 4px 0 #1a1a1a;
  --econ: #0078bf; --econ-line: #f4efe4;
  --overlay-alpha: 0.72; --overlay-blend: multiply; --world-alpha: 0.6; --ghost: 0.5;
  --s1: #ff48b0; --s2: #0078bf; --s3: #ffe800; --s4: #00a95c;
  --s5: #ff6c2f; --s6: #765ba7; --s7: #e8323c; --s8: #00838a;
  --bigyear-alpha: 0.9;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--ocean);
  color: var(--text);
  font: 14px/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font-family: inherit; }

#app { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }
#map.over-shape { cursor: move; }

/* ---------- top bar ---------- */
#top {
  position: absolute; z-index: 3;
  top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px 0 10px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: var(--panel-border);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px;
  letter-spacing: -0.01em; white-space: nowrap;
}
.logo { width: 20px; height: 20px; fill: var(--accent); flex: 0 0 auto; }
:root[data-look="riso"] .brand { text-transform: uppercase; font-size: 15px; }
:root[data-look="ticker"] .brand-text::before { content: "> "; color: var(--accent); }
.search { position: relative; flex: 1 1 auto; max-width: 420px; }
.search input {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  border: var(--panel-border); border-radius: var(--radius); outline: none;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  font-size: 16px; /* >=16px stops iOS zoom-on-focus */
  -webkit-appearance: none; appearance: none;
}
.search input:focus-visible { box-shadow: var(--shadow), 0 0 0 2px var(--accent); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-icon {
  position: absolute; left: 13px; top: 12px; width: 20px; height: 20px;
  fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
#results {
  position: absolute; top: 50px; left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: var(--panel-border);
  max-height: min(360px, 50vh); overflow-y: auto; overscroll-behavior: contain;
}
#results li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 10px; border-radius: calc(var(--radius) * 0.66); cursor: pointer;
}
#results li[aria-selected="true"] { background: var(--surface-2); }
#results .r-name { flex: 1 1 auto; font-weight: 550; }
#results .r-alt { color: var(--text-3); font-weight: 400; font-size: 12px; }
#results .r-gdp { color: var(--text-2); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
#results .r-empty { color: var(--text-3); cursor: default; }

/* ---------- zoom buttons ---------- */
.map-buttons {
  position: absolute; z-index: 2; right: 12px;
  top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: var(--panel-border); overflow: hidden;
}
.map-buttons button {
  width: 40px; height: 40px; border: 0; background: none;
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.map-buttons button + button { border-top: 1px solid var(--line); }
.map-buttons button:hover { background: var(--surface-2); }
.map-buttons svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- panel ---------- */
#panel {
  position: absolute; z-index: 2;
  left: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  width: 400px; max-width: calc(100% - 24px);
  padding: 14px 14px 10px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: var(--panel-border);
  display: flex; flex-direction: column; gap: 12px;
  /* never taller than the space under the top bar; scroll inside instead */
  max-height: calc(100% - max(10px, env(safe-area-inset-top)) - 44px - 10px - max(12px, env(safe-area-inset-bottom)));
  overflow-y: auto; overscroll-behavior: contain;
}
#hint p { margin: 0; color: var(--text-2); }
#hint strong { color: var(--text); font-weight: 600; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.suggest button, .chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; min-height: 32px;
}
.suggest button:hover { background: var(--surface-2); }

/* chips wrap rather than scroll, so every chip (and "Clear all") stays visible */
#chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 0 4px 0 10px; white-space: nowrap;
}
.chip .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.chip .x {
  border: 0; background: none; width: 26px; height: 26px; border-radius: 50%;
  color: var(--text-3); font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.chip .x:hover { background: var(--surface-2); color: var(--text); }
.chip[aria-current="true"] { border-color: var(--text-2); background: var(--surface-2); font-weight: 600; }
.chip.clear { padding: 0 12px; color: var(--text-2); }

#info { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
#info .i-name { font-weight: 650; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; min-width: 0; }
#info .i-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#info .i-name .dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
#info .i-gdp { font-family: var(--font-num); font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
#info .i-sub { color: var(--text-2); font-size: 13px; }
#info .i-rank { color: var(--text-2); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#info .i-note { grid-column: 1 / -1; color: var(--text-3); font-size: 12px; }

/* ---------- timeline ---------- */
#timeline { display: flex; align-items: center; gap: 12px; }
#play {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--text); color: var(--surface); display: grid; place-items: center;
}
#play svg { width: 20px; height: 20px; fill: currentColor; }
#play .i-pause, #play.playing .i-play { display: none; }
#play.playing .i-pause { display: block; }
.track { position: relative; flex: 1 1 auto; padding-top: 18px; }
#year {
  position: absolute; top: -4px; left: 0;
  font-family: var(--font-num); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
#slider {
  width: 100%; margin: 0; height: 28px; background: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
#slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
#slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
#slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--text-2); }
#slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
#slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--text);
}
#slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ticks { position: relative; height: 14px; margin: 0 11px; }
.ticks span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}

#foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mode { display: inline-flex; background: var(--surface-2); border-radius: calc(var(--radius) * 0.75); padding: 2px; }
.mode button {
  border: 0; background: none; white-space: nowrap; padding: 5px 10px; border-radius: calc(var(--radius) * 0.6);
  font-size: 12px; color: var(--text-2); min-height: 28px;
}
.mode button[aria-checked="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
#scale-note { margin: 0; font-size: 12px; color: var(--text-3); flex: 1 1 100%; font-family: var(--font-num); }
#scale-note a { color: inherit; }
#credit { margin: 0; flex: 1 1 100%; font-size: 12px; color: var(--text-3); font-family: var(--font-num); }
#credit a { color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#credit a:hover { color: var(--text); text-decoration: underline; }
#credit svg { width: 13px; height: 13px; }
#scale-note .src { opacity: 0.8; }
#scale-note .legend { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: 6px; }
#scale-note .key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 4px; }

/* ---------- measure picker ---------- */
#metric-row { display: flex; align-items: center; gap: 8px; }
#metric-mode { flex: 1 1 auto; min-width: 0; }
#metric-mode button { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 5px 8px; }
#vs-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: none; border-radius: 999px;
  padding: 0 10px 0 7px; min-height: 30px; font-size: 12px; color: var(--text-2); white-space: nowrap;
}
#vs-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#vs-btn:hover:not(:disabled) { background: var(--surface-2); }
#vs-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
#vs-btn:disabled { opacity: 0.4; cursor: default; }
#info .i-sub b { color: var(--text); }

#loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-2); background: var(--ocean); z-index: 10;
}
#loading.err { color: #c03; }

/* ---------- whole-world toggle ---------- */
#world-btn, #games-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px 0 11px;
  background: var(--surface); color: var(--text); border: var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-weight: 600; white-space: nowrap;
}
#world-btn svg, #games-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#world-btn:hover, #games-btn:hover { background: var(--surface-2); }
#games-btn { text-decoration: none; }
#world-btn[aria-pressed="true"] { background: var(--text); color: var(--surface); }
#world-btn[aria-pressed="true"] svg { fill: currentColor; fill-opacity: 0.35; }
#world-btn:focus-visible, #games-btn:focus-visible, .map-buttons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the year, large, behind everything ---------- */
#bigyear {
  position: absolute; z-index: 1; right: 28px; bottom: max(14px, env(safe-area-inset-bottom));
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(48px, 7vw, 112px); line-height: 0.85; font-variant-numeric: tabular-nums;
  color: var(--text); opacity: var(--bigyear-alpha);
  pointer-events: none; user-select: none;
}
:root[data-look="riso"] #bigyear {
  color: transparent; -webkit-text-stroke: 1.5px var(--accent); opacity: 0.5;
}
:root[data-look="blueprint"] #bigyear { color: transparent; -webkit-text-stroke: 1px var(--text); opacity: 0.4; }

/* ---------- opening story caption ---------- */
#story {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 120px);
  padding: 8px 6px 8px 14px;
  background: var(--surface); border: var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
#story .story-year { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
#story .story-text { font-size: 15px; }
#story .story-text b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
#story .story-btn {
  border: 1px solid var(--line); background: none; border-radius: 999px; padding: 4px 12px; font-size: 13px; min-height: 30px;
}
#story .story-btn:hover { background: var(--surface-2); }
#story .x {
  border: 0; background: none; width: 30px; height: 30px; border-radius: 50%;
  color: var(--text-3); font-size: 18px; line-height: 1; display: grid; place-items: center;
}
#story .x:hover { background: var(--surface-2); color: var(--text); }

/* ---------- look menu ---------- */
#looks {
  position: absolute; z-index: 4; right: 60px;
  top: calc(max(10px, env(safe-area-inset-top)) + 56px);
  display: flex; flex-direction: column; padding: 6px; min-width: 220px;
  background: var(--surface); border: var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
#looks button {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; text-align: left;
  border: 0; background: none; padding: 8px 10px; border-radius: calc(var(--radius) * 0.66);
}
#looks button:hover { background: var(--surface-2); }
#looks button[aria-checked="true"] { background: var(--surface-2); }
#looks button[aria-checked="true"] .l-name::after { content: " ✓"; color: var(--accent); }
#looks .sw { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
#looks .l-name { font-weight: 600; }
#looks .l-note { font-size: 12px; color: var(--text-3); }
.sw-ledger    { background: linear-gradient(135deg, #ece4d3 50%, #1f3a5f 50%); }
.sw-ticker    { background: linear-gradient(135deg, #08090b 50%, #ffb000 50%); }
.sw-blueprint { background: linear-gradient(135deg, #12457f 50%, #ffffff 50%); }
.sw-riso      { background: linear-gradient(135deg, #ff48b0 50%, #0078bf 50%); }
.sw-classic   { background: linear-gradient(135deg, #e8edf0 50%, #2a78d6 50%); }

/* ---------- phones (portrait first) ---------- */
@media (max-width: 640px) {
  #top { left: 10px; right: 10px; gap: 8px; }
  .brand { padding: 0 12px; }
  .brand-text { display: none; }
  #world-btn, #games-btn { padding: 0 11px; }
  #world-btn span, #games-btn span { display: none; }
  #bigyear { right: auto; left: 14px; bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 118px); font-size: 44px; }
  #story { left: 10px; right: 58px; transform: none; max-width: none; gap: 8px; padding: 6px 4px 6px 12px; }
  #story .story-text { font-size: 13px; flex: 1 1 auto; line-height: 1.25; }
  #story .story-btn { display: none; }
  #looks { right: 58px; }
  .search { max-width: none; }
  .map-buttons { right: 10px; }
  .map-buttons button[data-zoom="in"], .map-buttons button[data-zoom="out"] { display: none; }
  #panel {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 12px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  #hint p { font-size: 13px; }
  .mode button { padding: 5px 8px; }
  #scale-note { font-size: 11px; line-height: 1.3; }
  #metric-row { flex-wrap: wrap; }
  #metric-mode { flex: 1 1 100%; }
  #metric-mode button { font-size: 12px; padding: 5px 4px; }
}
@media (max-width: 360px) {
  .mode button { padding: 5px 6px; font-size: 11px; }
}
/* tablets in portrait (iPad 768–1024 wide): a centred card docked at the bottom,
   so the map fits in the free space above it rather than under it */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  #panel {
    left: 12px; right: 12px; width: auto; max-width: 640px; margin: 0 auto;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  #bigyear { right: auto; left: 18px; bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 120px); font-size: 72px; }
}

/* landscape phones (and any short window): compact panel to the side, top bar slimmed,
   everything clear of the notch. Comes after the phone rules so it overrides the bottom sheet. */
@media (max-height: 540px) and (orientation: landscape) {
  #top { top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); gap: 8px; }
  .brand, .search input, #world-btn, #games-btn { height: 38px; }
  .search-icon { top: 9px; }
  #results { top: 44px; max-height: min(300px, 60vh); }
  .map-buttons { top: calc(max(8px, env(safe-area-inset-top)) + 46px); right: max(10px, env(safe-area-inset-right)); }
  .map-buttons button { width: 36px; height: 36px; }
  .map-buttons button[data-zoom="in"], .map-buttons button[data-zoom="out"] { display: none; }
  #looks { top: calc(max(8px, env(safe-area-inset-top)) + 46px); right: calc(max(10px, env(safe-area-inset-right)) + 46px); }
  #panel {
    left: max(10px, env(safe-area-inset-left)); right: auto; bottom: max(8px, env(safe-area-inset-bottom));
    width: min(340px, 46vw); max-width: none;
    max-height: calc(100% - max(8px, env(safe-area-inset-top)) - 38px - 8px - max(8px, env(safe-area-inset-bottom)));
    border-radius: var(--radius-lg);
    padding: 10px 12px 8px; gap: 8px;
  }
  #hint p { font-size: 13px; }
  #hint .suggest { display: none; }
  #info .i-name, #info .i-gdp { font-size: 15px; }
  #info .i-sub, #info .i-rank { font-size: 12px; }
  #metric-row { flex-wrap: wrap; }
  #metric-mode { flex: 1 1 100%; }
  #metric-mode button { font-size: 12px; padding: 4px 4px; }
  #play { width: 38px; height: 38px; }
  .mode button { padding: 4px 8px; min-height: 26px; }
  #scale-note { font-size: 11px; line-height: 1.3; }
  #bigyear { left: auto; top: auto; right: max(20px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); font-size: min(8vw, 15vh); }
  #story {
    left: calc(max(10px, env(safe-area-inset-left)) + min(340px, 46vw) + 10px); right: 56px;
    top: calc(max(8px, env(safe-area-inset-top)) + 46px);
    transform: none; max-width: none; gap: 8px; padding: 6px 4px 6px 12px;
  }
  #story .story-text { font-size: 13px; flex: 1 1 auto; line-height: 1.25; }
  #story .story-btn { display: none; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 760px) {
  .brand { padding: 0 10px; }
  .brand-text { display: none; }
  #world-btn, #games-btn { padding: 0 10px; }
  #world-btn span { display: none; }
  .search { max-width: none; }
}

/* touch screens (phones, iPads): roomier tap targets */
@media (pointer: coarse) {
  .mode button { min-height: 34px; }
  .chip .x { width: 30px; height: 30px; }
}
@media (pointer: coarse) and (max-height: 540px) and (orientation: landscape) {
  .mode button { min-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}