/* Flag emoji on Windows: no system font has them, so each flag falls back to two
   letters. This small font (Twemoji's flags, via country-flag-emoji-polyfill)
   covers only the flag code points, so every other character uses the system font. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("vendor/fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}
:root {
  --bg: #f6f3ec; --surface: #ffffff; --surface-2: #f0ece2; --border: #e2dcd0;
  --text: #1f2933; --muted: #66707a; --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #d9efec;
  --warm: #f26a1b; --cool: #3b82d6; --start: #f4b63a; --found: #22a55b; --revealed: #d6409f;
  --tabbar-h: 60px; --sheet-collapsed: 150px; --sheet-half: 46vh;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  /* Type scale: the only text sizes in the app. See TYPOGRAPHY.md for which
     step each kind of text uses; tests/styles.test.mjs enforces it. */
  --fs-caption: 0.75rem;    /* 12px   tab labels, stamp lettering, units, tags */
  --fs-small: 0.8125rem;    /* 13px   secondary text, chips, section headings */
  --fs-body: 0.90625rem;    /* 14.5px body copy, facts, buttons, messages */
  --fs-item: 1rem;          /* 16px   list item and option names, key values, inputs */
  --fs-title: 1.125rem;     /* 18px   card and dialog titles, country names on cards */
  --fs-heading: 1.25rem;    /* 20px   page titles, big counts */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: "Twemoji Country Flags", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.45; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
h1 { margin: 0; font-size: var(--fs-heading); }
h2 { margin: 18px 0 8px; font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
h3 { margin: 16px 0 6px; font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
a { color: var(--accent); }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: var(--fs-small); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button { font: inherit; font-size: var(--fs-body); padding: 10px 14px; min-height: 44px; border-radius: 12px; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.ghost { color: var(--muted); background: transparent; }
input[type="search"] { width: 100%; font: inherit; font-size: var(--fs-item); min-height: 46px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); -webkit-appearance: none; }
input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ----------------------------------------------------------- app shell -- */
#app { height: 100%; display: flex; flex-direction: column; }
#screens { flex: 1; min-height: 0; position: relative; }
.screen { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }
#screen-atlas, #screen-settings, #screen-country, #screen-passport { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.appbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--safe-t)) 16px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.appbar .back { min-height: 36px; width: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.back svg { width: 20px; height: 20px; display: block; }
.page { padding: 12px 16px 24px; max-width: 760px; width: 100%; margin: 0 auto; }
.page-actions { padding: 0 16px 20px; max-width: 760px; width: 100%; margin: 0 auto; }
.page-actions.top { padding: 12px 16px 0; flex-wrap: nowrap; }
.page-actions.top button { flex: 1 1 0; min-width: 0; }
.country-head .ctitle { display: grid; line-height: 1.2; min-width: 0; }
.country-head .ctitle p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-head .bigflag { font-size: 2.2rem; /* scale-exempt: flag */ }
.stamps-wide { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; margin: 12px 0 0; }

.tabbar { display: flex; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--surface); border-top: 1px solid var(--border); flex: none; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: var(--fs-caption); font-weight: 600; padding: 6px 0; }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: var(--accent); }
.tab.on svg { background: var(--accent-soft); border-radius: 14px; padding: 2px 10px; width: 46px; }

/* ----------------------------------------------------------- play: globe -- */
.globe-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: var(--sheet-half); touch-action: none; }
#screen-play.clickable #globe canvas { cursor: pointer; }
/* The map runs edge to edge, but never under the phone's status bar: that strip
   gets the paper of the other screens' title bars, with their hairline below it.
   Where there is no status bar (the desktop) the inset, and so the strip, is 0. */
#screen-play::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--safe-t); z-index: 5; background: var(--bg); border-bottom: min(1px, var(--safe-t)) solid var(--border); pointer-events: none; }
/* The globe sits on a cool slate desk (so the sand land stands off it): a vignette centred on the globe under a fine grain. */
#globe { position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.28 0 0 0 0 0.32 0.07 0.07 0.07 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 70% 60% at 50% var(--globe-cy, 50%), #e4e8ec 0%, #d2d9df 55%, #bfc8d1 100%);
}
#globe canvas { width: 100% !important; height: 100% !important; display: block; }
.loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-size: var(--fs-body); text-align: center; padding: 20px; }
.loading .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: none; }
.swatch.line { height: 4px; border-radius: 2px; width: 16px; }
.swatch.hatch { background: repeating-linear-gradient(135deg, #e9e0c7 0 2px, rgba(31,41,51,0.6) 2px 3px); border: 1px solid #7c8794; }
.compass { position: absolute; right: 10px; top: calc(10px + var(--safe-t)); width: 64px; height: 64px; padding: 0; min-height: 0; border: 0; border-radius: 50%; background: none; z-index: 3; cursor: pointer; }
.compass:hover { border: 0; }
.compass svg { width: 100%; height: 100%; display: block; }
.compass[hidden] { display: none; } /* until the world has loaded */
.compass .c-bg { fill: rgba(255,255,255,0.88); stroke: var(--border); stroke-width: 1.5; }
.compass .c-ring { fill: none; stroke: #c9c2b4; stroke-width: 1; }
.compass .c-minor { fill: #c9c2b4; }
.compass .c-major { fill: #fff; stroke: #1f2933; stroke-width: 1.6; stroke-linejoin: round; }
.compass .c-north { fill: #d6409f; }
.compass .c-hub { fill: #1f2933; }
.compass .c-txt { /* scale-exempt: compass artwork */ font: 700 13.5px system-ui, sans-serif; fill: #1f2933; text-anchor: middle; dominant-baseline: middle; }
.compass:active svg { transform: scale(0.94); }
.toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); text-align: center; text-wrap: balance; padding: 10px 14px; border-radius: 12px; background: #1f2933; color: #fff; font-size: var(--fs-body); box-shadow: 0 6px 20px rgba(0,0,0,0.25); z-index: 3; pointer-events: none; }
.toast.warmer { background: var(--warm); } .toast.cooler { background: var(--cool); } .toast.warn { background: #b45309; }

/* ------------------------------------------------------- explorer mode -- */
#screen-play.exploring .sheet, #screen-play.picking .sheet { display: none; }
#screen-play.exploring .globe-wrap, #screen-play.picking .globe-wrap { bottom: 0 !important; }
.explore-bar { position: absolute; left: 10px; right: 84px; top: calc(10px + var(--safe-t)); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: rgba(255,255,255,0.92); border: 1px solid var(--border); border-radius: 14px; }
.explore-bar[hidden], .explore-pop[hidden] { display: none; }
/* The explorer's header: a round back button floating on its own, then the card. */
.explore-head { position: absolute; left: 10px; right: 84px; top: calc(10px + var(--safe-t)); z-index: 3; display: flex; align-items: center; gap: 8px; }
.explore-head[hidden] { display: none; }
.explore-head .explore-card { position: static; flex: 1; min-width: 0; width: auto; padding: 10px 14px; }
.back.float { flex: none; width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); }
.explore-title { display: grid; line-height: 1.2; min-width: 0; }
.explore-title strong { font-size: var(--fs-title); }
.explore-pop { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 4; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 14px 12px; box-shadow: 0 10px 30px rgba(31,41,51,0.2); animation: menuUp .2s ease-out; }
.explore-pop .close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.2rem; /* scale-exempt: × glyph */ line-height: 1; }
.explore-pop .rhead { padding-right: 36px; } /* clear of the close button */
.start-pop .rhead { padding-right: 80px; } /* clear of the info and close buttons */
.explore-pop .close.info { right: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.explore-pop .close.info svg { width: 20px; height: 20px; }
.explore-pop .rhead h2 { font-size: var(--fs-title); }
.explore-pop .credits { font-size: var(--fs-body); row-gap: 8px; }
.credits dd a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.credits .lic { display: block; color: var(--muted); font-size: var(--fs-small); }
.facts-grid { margin-top: 8px; font-size: var(--fs-body); }
.explore-pop .btnrow { margin-top: 10px; }
@media (min-width: 900px) { .explore-pop { left: auto; width: 380px; right: 16px; } .explore-bar { right: auto; width: 440px; } .explore-head { right: auto; width: 492px; } } /* on a phone the compass follows the bar's right edge; on the desktop it keeps the corner */
/* New-round screen: the globe fills the view, with the title floating over it. */
.start-bar { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
.start-bar h1 { font-size: var(--fs-title); }
.start-bar p { margin: 0; font-size: var(--fs-small); line-height: 1.3; color: var(--muted); }
.start-pop .btnrow { flex-direction: column; }

/* ----------------------------------------------------------- play: sheet -- */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; height: auto; max-height: var(--sheet-h, var(--sheet-half)); background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(31,41,51,0.12); display: flex; flex-direction: column; z-index: 4; }
.sheet[data-state="collapsed"] { --sheet-h: var(--sheet-collapsed); }
.sheet[data-state="half"] { --sheet-h: 56vh; }
.sheet[data-state="full"] { --sheet-h: calc(100% - var(--safe-t) - 170px); height: var(--sheet-h); }
.sheet[data-state="collapsed"] .sheet-body { overflow: hidden; }
.grip { flex: none; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 18px 18px 0 0; background: none; display: flex; align-items: center; justify-content: center; touch-action: none; }
.grip span { width: 44px; height: 5px; border-radius: 3px; background: var(--border); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
.titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 4px; }
.intro { margin: 0 0 4px; font-size: var(--fs-item); }
@keyframes menuUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.chip { min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.picker { position: relative; margin: 10px 0 10px; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(31,41,51,0.18); max-height: 40vh; overflow-y: auto; }
.result { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; padding: 8px 12px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.result:last-child { border-bottom: 0; }
.result:hover, .result:focus-visible { background: var(--surface-2); outline: none; }
.result:disabled { color: var(--muted); cursor: default; }
.result .flag { font-size: 1.2rem; width: 1.6em; /* scale-exempt: flag */ }
.result .name { flex: 1; }
.result .tag { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.results .empty { padding: 10px 12px; color: var(--muted); font-size: var(--fs-body); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btnrow button { flex: 1 1 auto; }

.status { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 8px; }
.status .right { text-align: right; }
.status strong { font-size: var(--fs-item); }
.clue { margin: 0 0 8px; font-size: var(--fs-item); font-weight: 600; }
.cluebox { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #eaf5ea; border: 1px solid #bfe3c4; font-size: var(--fs-body); }
.flash { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-body); }
.flash.warmer { border-color: var(--warm); background: #fdebdf; } .flash.cooler { border-color: var(--cool); background: #e3eefb; } .flash.warn { border-color: var(--start); background: #fff4d6; }
.log { list-style: none; margin: 0 0 8px; padding: 0; font-size: var(--fs-body); }
.guess { display: grid; grid-template-columns: 22px 18px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.guess .gnum { width: 20px; height: 20px; border-radius: 50%; color: #1f2933; font-size: var(--fs-caption); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #1f2933; }
.guess .gline { height: 4px; border-radius: 2px; }
.guess .gdist { color: var(--muted); font-variant-numeric: tabular-nums; }
.guess .gverdict { font-weight: 600; font-size: var(--fs-small); }
.guess.warmer .gverdict { color: var(--warm); } .guess.cooler .gverdict { color: var(--cool); }
.guess.correct .gverdict { color: var(--found); } .guess.same .gverdict { color: var(--muted); }

.outcome { margin: 4px 0 10px; font-weight: 700; color: var(--found); font-size: var(--fs-item); }
.rhead { display: flex; gap: 12px; align-items: center; }
.rhead h2 { margin: 0; font-size: var(--fs-title); color: var(--text); text-transform: none; letter-spacing: 0; }
.rhead p { margin: 0; }
.bigflag { font-size: 2.6rem; line-height: 1; /* scale-exempt: flag */ }
.facts-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: var(--fs-body); }
.facts-grid dt { color: var(--muted); }
.facts-grid dd { margin: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: var(--fs-small); min-height: 0; color: var(--text); cursor: pointer; }
.chip-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.factlist { margin: 0; padding-left: 18px; font-size: var(--fs-body); }
.factlist li { margin-bottom: 4px; }
.sheet-footer { flex: none; padding: 10px 16px 12px; background: var(--surface); border-top: 1px solid var(--border); } /* the tab bar below already reserves the safe-area inset */
.sheet-footer .btnrow { margin-top: 0; }
.sheet-footer .btnrow .primary { flex-basis: 100%; }

/* -------------------------------------------------------------- passport -- */
/* The page itself uses the app theme; the stamps and the crooked entry boxes carry the passport feel. */
.passport .page { position: relative; }
/* Mottled ink: an alpha mask from fractal noise, so stamps and flags look unevenly pressed. */
.inked {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.4 0 0 0 -0.55'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.4 0 0 0 -0.55'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  -webkit-mask-size: 90px 90px; mask-size: 90px 90px;
}

.stamp { white-space: pre-line; --ink: #8a94a0; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; border: 3px double var(--ink); color: var(--ink); font-weight: 800; font-size: var(--fs-caption); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.05; transform: rotate(var(--rot, -9deg)); position: relative; background: transparent; flex: none; font-family: Georgia, "Times New Roman", serif; }
.stamp::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--ink); opacity: 0.6; }
.stamp.easy { --ink: #2f7d4f; } .stamp.intermediate { --ink: #3b63a8; } .stamp.hard { --ink: #a3352f; }
/* The real-life stamp: a rectangular visa-style stamp in violet ink. */
.stamp.visited { --ink: #6b3fa0; border-radius: 7px; width: 92px; height: 60px; font-size: var(--fs-caption); letter-spacing: 0.04em; }
.stamp.visited::after { border-radius: 4px; inset: 3px; }
.stamp.visited.sm { width: 52px; height: 34px; font-size: var(--fs-caption); letter-spacing: 0; line-height: 1; } /* two lines: Been / here */
.stamp.visited.sm::after { inset: 2px; border-radius: 3px; }
.stamp.visited.lg { width: 112px; height: 76px; font-size: var(--fs-small); }
.stamp.visited.lg::after { inset: 5px; border-radius: 5px; }
.stamp.got { background: color-mix(in srgb, var(--ink) 9%, transparent); opacity: 0.92; }
.stamp.missing { --ink: #cbc3b2; border-style: dashed; color: #cbc3b2; font-weight: 600; letter-spacing: 0.05em; } /* placeholders: the same light lettering on every page */
.stamp.missing::after { display: none; }
.stamp.sm { width: 34px; height: 34px; font-size: var(--fs-caption); border-width: 2px; letter-spacing: 0; }
.stamp.sm::after { inset: 2px; }
.stamp.lg { width: 100px; height: 100px; font-size: var(--fs-small); border-width: 4px; }
.stamp.lg::after { inset: 7px; }
.stamp.hard:not(.sm) { letter-spacing: 0; }
.stamp small { display: block; font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.04em; opacity: 0.9; }
/* Clue mark: how many clues the best round at this level needed. */
/* It sits on the ring at the top right, wholly inside the circle: the inked mask clips to the rounded border. */
.stamp .cm { /* scale-exempt: badge dot */ position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); color: var(--ink); font: 700 10px/1 system-ui, sans-serif; font-style: normal; display: flex; align-items: center; justify-content: center; transform: rotate(calc(-1 * var(--rot, -9deg))); }
.stamp.sm .cm { width: 14px; height: 14px; font-size: 9px; /* scale-exempt: badge dot */ top: 1px; right: 1px; }
.stamp.sm.has-cm { padding-right: 7px; } /* nudge the letter clear of the badge */
.stamp.lg .cm { width: 22px; height: 22px; font-size: 12px; /* scale-exempt: badge dot */ top: 6px; right: 6px; }
.stamped { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); animation: stampIn .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stampIn { from { transform: scale(1.6) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.stamped .t { font-weight: 700; } .stamped .s { color: var(--muted); font-size: var(--fs-small); }

/* Travel summary: one compact line per level, just above the collection. */
.travel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 14px; }
.tile { display: grid; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); outline: none; }
.tile .thead { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.tile .tname { font-weight: 600; font-size: var(--fs-item); color: var(--text); }
.tile .tcount { font-size: var(--fs-heading); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.tile .bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.tile .bar i { display: block; height: 100%; background: var(--ink, var(--accent)); }
.tile .tgo { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--accent); font-weight: 600; font-size: var(--fs-small); }
.tile .tgo svg { width: 18px; height: 18px; }
@media (min-width: 640px) { .travel { grid-template-columns: repeat(4, 1fr); } }

/* The collection: one ruled box per country, the name as its caption and a
   slot for each stamp spread across the width. Everything sits slightly crooked. */
.book { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 12px; }
.entry { display: grid; gap: 2px; padding: 8px 12px 8px; cursor: pointer; border: 2px dotted #c9c2b4; border-radius: 12px; background: var(--surface); transform: rotate(var(--rot, 0deg)); }
.entry:hover, .entry:focus-visible { border-color: var(--accent); outline: none; }
.entry .ename { font-size: var(--fs-item); font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .erow { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); align-items: center; justify-items: center; min-height: 40px; }
.entry .eflag { /* scale-exempt: flag */ font-size: 1.9rem; line-height: 1; width: 1.3em; text-align: center; } /* a plain flag, as elsewhere in the app */
.entry .slot-empty { width: 34px; height: 34px; }
.ministamps { display: inline-flex; gap: 3px; vertical-align: middle; }
.ministamps i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #d6dbe0; font-style: normal; /* scale-exempt: 12px icon dot */ font-size: 7px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: #c5cbd2; }
.ministamps i.got.easy { border-color: #1f8a4c; color: #1f8a4c; background: #e3f3ea; }
.ministamps i.got.intermediate { border-color: #2f6fcf; color: #2f6fcf; background: #e3edfb; }
.ministamps i.got.hard { border-color: #b3261e; color: #b3261e; background: #fbe5e3; }
.ministamps i.visited { border-radius: 3px; }
.ministamps i.got.visited { border-color: #6b3fa0; color: #6b3fa0; background: #efe6f8; }
button.visit { border: 2px solid #6b3fa0; color: #6b3fa0; }
button.visit.on { background: #efe6f8; }
.confirm { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); padding: 0; width: min(420px, calc(100vw - 32px)); }
.confirm::backdrop { background: rgba(5, 8, 12, 0.55); }
.confirm-inner { padding: 20px; }
.confirm h2 { margin: 0 0 6px; font-size: var(--fs-title); color: var(--text); text-transform: none; letter-spacing: 0; }
.confirm p { margin: 0 0 14px; }

/* Gameplay numbers, out of the way at the bottom. */
/* ----------------------------------------------------------------- atlas -- */
/* Title, search and sort chips stay pinned together while the list scrolls. */
.atlas-head { position: sticky; top: 0; z-index: 2; background: var(--bg); }
.atlas-head .appbar { position: static; } /* the title bar keeps its line; the tools sit below it in the page column */
.atlas-tools { max-width: 760px; width: 100%; margin: 0 auto; padding: 12px 16px 8px; display: grid; gap: 8px; }
.chips.sort { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
.chips.sort::-webkit-scrollbar { display: none; }
.sortchip { flex: none; min-height: 34px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; background: var(--surface); }
.sortchip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.atlas { list-style: none; margin: 0; padding: 0 16px 24px; max-width: 760px; width: 100%; margin: 0 auto; }
.row { display: grid; grid-template-columns: 2em 1fr auto; gap: 10px; align-items: center; padding: 10px 6px; min-height: 56px; border-bottom: 1px solid var(--border); cursor: pointer; }
.row:hover, .row:focus-visible { background: var(--surface-2); outline: none; }
.row.selected { background: var(--accent-soft); }
.row .flag { font-size: 1.5rem; line-height: 1; /* scale-exempt: flag */ }
.row .name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row .sub { color: var(--muted); font-size: var(--fs-small); }
.row .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.row .val .l { display: block; color: var(--muted); font-size: var(--fs-caption); font-weight: 400; }
.badge { font-size: var(--fs-caption); font-weight: 700; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.badge.found { background: #dff5e6; color: #146c3a; }

/* -------------------------------------------------------------- settings -- */
.difficulty { display: grid; gap: 8px; }
.diff { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.diff:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.diff input { grid-row: 1 / 3; accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.app-version { margin: 28px 0 8px; text-align: center; font-variant-numeric: tabular-nums; } /* the build, for bug reports */
.diff .dname { font-weight: 600; font-size: var(--fs-item); }
.diff .dblurb { grid-column: 2; color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.switch .sh { display: block; color: var(--muted); font-size: var(--fs-small); }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seg input { accent-color: var(--accent); }

/* ---------------------------------------------------------- wide screens -- */
@media (min-width: 900px) {
  #app { flex-direction: row-reverse; }
  .tabbar { flex-direction: column; width: 84px; height: auto; padding: 12px 0 0; border-top: 0; border-right: 1px solid var(--border); justify-content: flex-start; gap: 6px; }
  .tab { flex: none; }
  #screens { flex: 1; }
  #screen-play { flex-direction: row; }
  .globe-wrap, #screen-play[data-sheet] .globe-wrap { position: absolute; top: 0; left: 0; bottom: 0 !important; right: 420px; transition: none; }
  #screen-play.exploring .globe-wrap, #screen-play.picking .globe-wrap { right: 0; }
  .sheet { left: auto; width: 420px; top: 0; height: 100% !important; max-height: none; border-radius: 0; border-left: 1px solid var(--border); box-shadow: none; }
  .grip { display: none; }
  .sheet-body { padding: 16px 20px 24px; }
}