/* Where's the Plastic? "Deep sea": a night-ocean navy, frosted glass panels, mint and coral light.
   System fonts only (SF Pro / Segoe / Roboto), tabular numbers, an 8-point spacing rhythm. Phone first. */
:root {
  --abyss: #040d16;
  --deep: #071a2a;
  --sea: #0c2a40;
  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .085);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .07);
  --text: #eaf4ff;
  --text-2: #a9bfd3;
  --text-3: #6f8aa3;
  --mint: #3ee6b0;
  --mint-2: #17b897;
  --coral: #ff6f91;
  --sun: #ffcf5c;
  --ember: #ff7a6b;
  --slate: #5b7389;
  --ink-on-mint: #03231b;
  --radius: 18px;
  --radius-sm: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 50px rgba(0, 0, 0, .38);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--abyss); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: 16px/1.55 var(--font);
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(62, 230, 176, .10), transparent 60%),
    radial-gradient(800px 600px at 110% 20%, rgba(255, 111, 145, .08), transparent 60%),
    radial-gradient(1200px 800px at 50% 0%, #0d2f47 0%, var(--deep) 45%, var(--abyss) 100%) fixed;
}
a { color: var(--mint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2 { line-height: 1.15; letter-spacing: -.02em; font-weight: 750; }
h2 { font-size: 1.05rem; margin: 0 0 14px; }
.muted { color: var(--text-2); }
.small { font-size: .875rem; }
.label { font-size: .72rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(62, 230, 176, .3); }

/* Frosted glass, the one surface of the whole site. */
.card, .clue, .story, .detail, .tile, .promo, .versus, .bars, .field-card, .menu {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.card { border-radius: 26px; padding: 22px 20px; }

/* ---------- header and menu ---------- */
/* The bar's background runs edge to edge; only its contents keep to the page width. */
#site-header {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(4, 13, 22, .85), rgba(4, 13, 22, .55));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.site-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 0 auto; max-width: 1100px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 750; font-size: 1.04rem; letter-spacing: -.01em; white-space: nowrap; }
.logo img { width: 30px; height: 30px; filter: drop-shadow(0 4px 10px rgba(95, 202, 216, .3)); }
.logo b, h1 b { color: var(--mint); font-weight: inherit; }
.head-cta {
  margin-left: auto; font-size: .86rem; font-weight: 650; color: var(--text); text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.head-cta:hover { background: var(--glass-2); border-color: rgba(255, 255, 255, .2); }
.menu-btn {
  flex: none; width: 40px; height: 40px; padding: 12px 11px; display: grid; gap: 4px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass);
}
.menu-btn span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.menu-btn span:nth-child(2) { width: 65%; justify-self: end; }
@media (max-width: 440px) { .head-cta { display: none; } .menu-btn { margin-left: auto; } }
.menu { position: fixed; z-index: 40; top: 10px; right: 10px; bottom: 10px; width: min(320px, 86vw); padding: 18px 12px 28px; overflow-y: auto; border-radius: 24px; background: rgba(9, 28, 44, .92); }
.menu-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(2, 8, 14, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.menu-group { font-size: .7rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 20px 10px 6px; }
.menu-group:first-child { margin-top: 4px; }
.menu-link { display: block; padding: 10px 10px; color: var(--text); text-decoration: none; border-radius: 12px; transition: background .15s; }
.menu-link:hover, .menu-link.is-current { background: rgba(255, 255, 255, .07); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px;
  border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--text);
  font: 650 1rem var(--font); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .22); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  border: 0; color: var(--ink-on-mint);
  background: linear-gradient(180deg, #5cf0c2, var(--mint) 45%, var(--mint-2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 28px rgba(62, 230, 176, .30), 0 2px 6px rgba(0, 0, 0, .3);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 34px rgba(62, 230, 176, .42), 0 2px 6px rgba(0, 0, 0, .3); }

/* ---------- home ---------- */
.home { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }
.hero { text-align: center; padding: 48px 0 28px; }
.hero h1 { font-size: clamp(2.5rem, 10vw, 3.6rem); margin: 18px 0 12px; letter-spacing: -.035em; }
.tag { margin: 0 auto; max-width: 30em; color: var(--text-2); font-size: 1.08rem; }
.facts { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.facts li { font-size: .8rem; font-weight: 650; color: var(--text-2); padding: 5px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); }
.hero .btn { margin-top: 30px; min-width: 260px; }
/* The home page's one job: start today's round. Full width on phones, bigger than any other button. */
.hero .btn-hero { display: flex; width: 100%; max-width: 420px; margin: 26px auto 0; padding: 19px 24px; font-size: 1.2rem; border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 44px rgba(62, 230, 176, .45), 0 2px 6px rgba(0, 0, 0, .3); }
.hero .btn-hero + .facts { margin-top: 14px; gap: 0 8px; }
/* Under the big button the facts read as one quiet line, not chips: "About 2 minutes · New every day at …". */
.hero .btn-hero + .facts li { padding: 0; border: 0; background: none; font-weight: 600; color: var(--text-3); }
.hero .btn-hero + .facts li + li::before { content: '·'; margin-right: 8px; }
.home-done { color: var(--text-2); font-size: .92rem; margin-top: 16px; }
/* The glow is a soft round gradient behind the logo, not a CSS filter: Safari clips filters to a square. */
.globe-mark { width: 144px; height: 144px; margin: -24px auto; background: url(logo-288.png) center / 96px no-repeat, radial-gradient(circle closest-side, rgba(95, 202, 216, .3), rgba(95, 202, 216, 0)) center / 144px no-repeat; }
.home-about { border-top: 1px solid var(--glass-line); padding-top: 20px; color: var(--text-2); }

/* ---------- play ---------- */
/* Safari's floating bar sits below the visible area (100dvh); 100vh counts the area behind it, so
   the play screen must never be taller than 100dvh or its bottom row slips under the bar. */
body.is-play { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.is-play #site-header { flex: none; position: relative; }
.play { flex: 1; display: flex; flex-direction: column; min-height: 0; max-width: 1200px; width: 100%; margin: 0 auto; padding-top: 8px; }
/* The top row: the score in its own box on the left, the question beside it. */
.clue { display: flex; gap: 12px; margin: 0 12px 10px; padding: 12px; border-radius: 22px; }
.scorecard { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px solid rgba(62, 230, 176, .55); border-radius: 16px; background: rgba(62, 230, 176, .06); box-shadow: 0 0 18px rgba(62, 230, 176, .12) inset; }
.scorecard span { font-size: .64rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.scorecard b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.clue-body { flex: 1; min-width: 0; }
.clue-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--text-2); }
.qnum { font-weight: 700; color: var(--text); }
.steps { display: flex; gap: 4px; margin: 8px 0 0; }
.steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .10); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.steps i.is-current { background: rgba(255, 255, 255, .38); }
.steps i.band-perfect { background: var(--sun); box-shadow: 0 0 10px rgba(255, 207, 92, .6); }
.steps i.band-great { background: var(--mint); box-shadow: 0 0 10px rgba(62, 230, 176, .5); }
.steps i.band-ballpark { background: var(--sun); }
.steps i.band-off { background: var(--ember); }
.steps i.band-antipodal { background: var(--slate); }
.clue-date { font-weight: 600; letter-spacing: .02em; }
.prompt { margin: 8px 0 0; font-size: 1.04rem; line-height: 1.42; font-weight: 600; letter-spacing: -.01em; }
.prompt:focus { outline: none; }
.play-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0 12px; border-radius: 24px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.map-wrap { position: relative; flex: 1; min-height: 200px; background: radial-gradient(circle at 50% 42%, #0d3350 0%, #061523 62%, #030b13 100%); }
body.is-revealed .map-wrap { flex: 0 0 42%; }
#map { position: absolute; inset: 0; }
.map-status { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--text); background: rgba(4, 13, 22, .75); border: 1px solid var(--glass-line); padding: 5px 12px; border-radius: 999px; pointer-events: none; }
.map-status:empty { display: none; }
.map-credit { position: absolute; right: 10px; bottom: 6px; margin: 0; font-size: 10px; color: rgba(234, 244, 255, .45); pointer-events: none; }
.country { font: 700 10px/1 var(--font); color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; letter-spacing: .06em; opacity: .9; }
.play-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.confirm { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-2); cursor: pointer; }
.confirm input { width: 18px; height: 18px; accent-color: var(--mint); }
.btn-lock { margin-left: auto; min-height: 44px; }
/* After a tap: the result and the story scroll inside their own box when they are long, so the Next
   button under it always stays in view. */
.reveal { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(9, 30, 47, .96), rgba(6, 21, 35, .98)); border-top: 1px solid var(--glass-line); }
.reveal[hidden] { display: none; }
.reveal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.reveal-actions { flex: none; padding-top: 12px; }
.reveal-actions .btn-brag { margin-bottom: 10px; }
.r-line { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.r-calc { margin: 2px 0 8px; color: var(--text-2); font-size: .86rem; }
.r-off { margin: 0 0 2px; color: var(--text-2); font-size: .92rem; }
.r-quip { margin: 0 0 14px; font-size: .95rem; color: var(--text); opacity: .92; }
.story { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 0 var(--glass-hi) inset; }
.story p { margin: 0 0 8px; }
.story p:last-child { margin: 0; }
.story b { font-size: 1.02rem; }
.source { font-size: .84rem; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
/* Question photos, after the tap: 16:9, right under the place name, caption and credit underneath. */
.photo { margin: 2px 0 12px; }
.photo-box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.photo-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-kind { position: absolute; left: 10px; top: 10px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(4, 13, 22, .8); padding: 3px 9px; border-radius: 999px; }
.photo figcaption { padding: 6px 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-3); }
.photo-caption { display: block; color: var(--text-2); font-size: .84rem; margin-bottom: 3px; }
.photo-credit a { color: var(--text-2); }
.detail .photo { margin: 10px 0; }
.grade { display: inline-block; max-width: 100%; font-size: .7rem; line-height: 1.45; color: var(--sun); background: rgba(255, 207, 92, .12); border: 1px solid rgba(255, 207, 92, .3); padding: 3px 9px; border-radius: 10px; }
.grade-name { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* The gloss reads as a plain phrase, and may wrap to a second line on a phone. */
.grade-gloss { font-size: .76rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.reveal .btn { width: 100%; }
.bonus { font-size: .72rem; font-weight: 750; color: #2b1d00; background: linear-gradient(180deg, #ffe08a, var(--sun)); padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255, 207, 92, .35); }
@media (min-width: 900px) {
  .play { padding-top: 14px; }
  .clue { margin: 0 24px 14px; padding: 16px 20px 18px; }
  .prompt { font-size: 1.22rem; }
  .play-stage { flex-direction: row; margin: 0 24px 18px; }
  body.is-revealed .map-wrap { flex: 1; }
  .reveal { flex: 0 0 420px; padding: 22px; border-top: 0; border-left: 1px solid var(--glass-line); }
}

/* ---------- ads and our own banners ---------- */
.ad { display: flex; justify-content: center; align-items: center; }
.ad-strip { min-height: 50px; padding: 4px 12px 8px; }
.ad-banner { min-height: 90px; margin: 28px 0; }
.ad-box { min-height: 250px; margin: 28px 0; }
.house {
  display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 728px; min-height: inherit; padding: 10px 16px;
  border: 1px dashed rgba(255, 255, 255, .16); border-radius: 16px; color: var(--text); text-decoration: none; text-align: center; background: rgba(255, 255, 255, .03);
  transition: background .2s;
}
.house:hover { background: rgba(255, 255, 255, .06); }
.house b { font-size: .95rem; font-weight: 650; }
.house span { color: var(--mint); font-size: .88rem; font-weight: 650; }
.ad-strip .house { flex-direction: row; gap: 10px; align-items: center; justify-content: center; padding: 0 12px; min-height: 42px; }
.ad-strip .house b { font-size: .86rem; }
@media (min-width: 900px) { .ad-strip { display: none; } }

/* ---------- results ---------- */
.page { max-width: 600px; margin: 0 auto; padding: 18px 16px 56px; }
.page > * + *, #played > * + * { margin-top: 16px; }
.results #unplayed { text-align: center; padding-top: 24px; }
.hero-card { text-align: center; }
.hero-meta { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.eyebrow { font-size: .72rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.streak { font-size: .78rem; font-weight: 700; color: var(--sun); background: rgba(255, 207, 92, .1); border: 1px solid rgba(255, 207, 92, .28); padding: 3px 10px; border-radius: 999px; margin: 0; }
.streak:empty { display: none; }
.gauge-wrap { position: relative; width: 196px; height: 196px; margin: 14px auto 6px; }
.gauge { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.g-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 9; }
.g-fill { fill: none; stroke: url(#gGrad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 1.4s var(--ease); filter: drop-shadow(0 0 6px rgba(62, 230, 176, .55)); }
.gauge-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-num b { font-size: 3.3rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.gauge-num span { color: var(--text-3); font-size: .8rem; font-weight: 600; margin-top: 6px; letter-spacing: .04em; }
.dots { text-align: center; font-size: 1.35rem; letter-spacing: .18em; margin: 6px 0 18px; }
.bars { display: grid; gap: 10px; border-radius: var(--radius); padding: 14px 16px; text-align: left; background: rgba(0, 0, 0, .18); box-shadow: none; }
.bars-head { margin: 0; color: var(--text-3); font-size: .82rem; line-height: 1.4; }
.bar-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.bar-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .82rem; font-weight: 800; color: #06182a; background: var(--slate); }
.bar-num.band-perfect, .bar-num.band-ballpark { background: var(--sun); }
.bar-num.band-great { background: var(--mint); }
.bar-num.band-off { background: var(--ember); }
.bar-body { display: grid; gap: 3px; min-width: 0; }
.bar-place { font-size: .92rem; font-weight: 650; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bar-off { font-size: .8rem; color: var(--text-2); }
.bar-row > .bar-track { grid-column: 2 / -1; margin-top: -4px; height: 6px; }
.bar-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .9rem; color: var(--text-2); }
.bar-total b { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; background: rgba(255, 255, 255, .07); border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--mint); transition: width 1s var(--ease); }
.bar-fill.band-great { background: linear-gradient(90deg, var(--mint-2), var(--mint)); box-shadow: 0 0 10px rgba(62, 230, 176, .5); }
.bar-fill.band-perfect { background: linear-gradient(90deg, var(--mint), var(--sun)); box-shadow: 0 0 12px rgba(255, 207, 92, .55); }
.bar-fill.band-ballpark { background: linear-gradient(90deg, #e9a93a, var(--sun)); }
.bar-fill.band-off { background: linear-gradient(90deg, #e2535f, var(--ember)); }
.bar-fill.band-antipodal { background: var(--slate); }
.bar-pts { display: grid; justify-items: end; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.bar-pts b { font-size: 1.05rem; font-weight: 750; color: var(--text); }
.bar-pts span { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 180px; }
.share-hint { text-align: center; font-size: .82rem; color: var(--text-3); margin: 10px 0 0; }
.field-card { border-radius: 26px; padding: 20px; }
.histogram { display: flex; align-items: flex-end; gap: 3px; height: 112px; padding: 0 2px; border-bottom: 1px solid var(--glass-line); }
.h-col { flex: 1; background: linear-gradient(180deg, rgba(169, 191, 211, .35), rgba(169, 191, 211, .12)); border-radius: 5px 5px 0 0; }
.h-col.is-mine { background: linear-gradient(180deg, var(--mint), var(--mint-2)); box-shadow: 0 0 14px rgba(62, 230, 176, .5); }
.hist-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-3); margin-top: 6px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; }
.tiles-5 { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.tile { border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.tile b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.tile span { font-size: .76rem; color: var(--text-2); }
.field-notes { margin: 14px 0 0; font-size: .88rem; color: var(--text-2); }
.field-notes b { color: var(--text); font-weight: 650; }
.section-title { margin: 28px 4px 12px; }
.results #unplayed .btn { margin-top: 18px; }
.details { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.detail { border-radius: var(--radius); padding: 14px 16px; }
.detail-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .95rem; }
.detail-head span { font-size: .85rem; color: var(--text-2); }
.detail-clue { color: var(--text-2); font-size: .88rem; margin: 6px 0; }
.detail-story { margin: 6px 0; font-size: .95rem; }
.detail-source { font-size: .84rem; display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin: 0; }
.next-round { text-align: center; font-size: .9rem; color: var(--text-2); }
.next-round span { color: var(--text); font-weight: 650; }
.promo { display: block; text-align: center; padding: 18px; border-radius: 22px; color: var(--text); text-decoration: none; transition: transform .2s var(--ease); }
.promo:hover { transform: translateY(-1px); }
.promo b { display: block; font-weight: 650; }
.promo span { color: var(--mint); font-size: .92rem; font-weight: 650; }

/* ---------- stats, prose ---------- */
.days { display: flex; align-items: flex-end; gap: 3px; height: 92px; border-bottom: 1px solid var(--glass-line); }
.d-col { flex: 1; background: linear-gradient(180deg, var(--mint), var(--mint-2)); border-radius: 4px 4px 0 0; }
.d-col.is-empty { background: rgba(255, 255, 255, .06); }
.dist { display: grid; gap: 8px; }
.dist-row { display: grid; grid-template-columns: 70px 1fr 28px; gap: 10px; align-items: center; font-size: .85rem; }
.dist-label { color: var(--text-2); }
.dist-track { height: 8px; background: rgba(255, 255, 255, .07); border-radius: 6px; overflow: hidden; display: block; }
.dist-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--mint-2), var(--mint)); }
.dist-n { text-align: right; }
.prose h1 { font-size: 2rem; }
.prose h2 { margin-top: 28px; }
.prose p, .prose li { color: var(--text-2); }
.prose li { margin: 6px 0; }
.prose h3 { margin: 20px 0 4px; font-size: 1.05rem; color: var(--text); }
.prose h3 + p { margin-top: 0; }
.score-table { width: 100%; border-collapse: collapse; margin: 12px 0; border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .04); }
.score-table th, .score-table td { text-align: right; padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.score-table th { color: var(--text-3); font-weight: 650; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.bands { list-style: none; padding: 0; }
.bands span { display: inline-block; width: 1.6em; }
.draft { background: rgba(255, 207, 92, .1); border: 1px solid rgba(255, 207, 92, .35); color: var(--sun); padding: 10px 14px; border-radius: 12px; font-size: .88rem; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; transition: .25s var(--ease); background: rgba(9, 28, 44, .95); border: 1px solid var(--glass-line); color: var(--text); padding: 12px 18px; border-radius: 14px; font-weight: 650; z-index: 50; pointer-events: none; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the reveal: pins, the growing line, the distance label ---------- */
/* The marker root must keep MapLibre's own position:absolute (never override it), or pins drift off their spot. */
.pin { width: 18px; height: 18px; --c: #5aa9ff; pointer-events: none; }
.pin-guess { --c: #5aa9ff; } .pin-temp { --c: #ffb547; } .pin-answer { --c: var(--mint); }
.pin-answer.band-perfect { --c: var(--sun); }
.pin-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 20px var(--c); }
.pin-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.pin.drop .pin-dot { animation: pin-drop .55s cubic-bezier(.2, 1.7, .45, 1) both; }
.pin.ripple .pin-ring { animation: pin-ring 1.1s ease-out .15s 1 both; }
.pin.ripple .pin-ring.r2 { animation-delay: .45s; }
.pin.celebrate .pin-ring { animation: pin-ring 1.2s ease-out .2s 3 both; }
.pin.celebrate .pin-ring.r2 { animation-delay: .6s; }
.pin-head { width: 12px; height: 12px; }
.pin-head .pin-dot { border: 2px solid #03101a; background: #fff; box-shadow: 0 0 10px 4px rgba(255, 111, 145, .9), 0 0 26px 10px rgba(255, 111, 145, .35); }
.pin-head .pin-ring { display: none; }
.spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--sun); animation: spark .9s ease-out both; }
.spark:nth-child(3n) { background: var(--mint); } .spark:nth-child(3n+1) { background: #fff; }
@keyframes pin-drop { from { transform: translateY(-34px) scale(.3); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes pin-ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
@keyframes spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }
.meter { font: 750 14px/1 var(--font); letter-spacing: -.01em; color: var(--text); background: rgba(4, 13, 22, .86); border: 1px solid rgba(255, 111, 145, .7); padding: 8px 12px; border-radius: 999px; pointer-events: none; z-index: 2; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 111, 145, .25); }
.meter.band-perfect { border-color: var(--sun); color: var(--sun); box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 207, 92, .35); }
.meter.band-great { border-color: var(--mint); color: var(--mint); box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(62, 230, 176, .3); }
.meter.band-ballpark { border-color: var(--sun); color: var(--sun); }
.meter.band-off, .meter.band-antipodal { border-color: var(--ember); color: var(--ember); }
.reveal > * { transition: opacity .35s ease, transform .35s var(--ease); }
.reveal > :nth-child(2) { transition-delay: .06s; } .reveal > :nth-child(3) { transition-delay: .12s; } .reveal > :nth-child(4) { transition-delay: .18s; } .reveal > :nth-child(5) { transition-delay: .24s; }
.reveal.is-pending > * { opacity: 0; transform: translateY(10px); pointer-events: none; }
.reveal.is-pending::before { content: "Measuring the distance… tap the globe to skip"; display: block; color: var(--text-3); font-size: .85rem; padding: 4px 0; }

/* ---------- challenges and sharing ---------- */
.vs-chip { font-size: .72rem; font-weight: 750; color: #fff; background: linear-gradient(180deg, #ff86a5, var(--coral)); padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255, 111, 145, .35); }
.btn-brag { width: 100%; margin-bottom: 10px; background: rgba(255, 111, 145, .1); border-color: rgba(255, 111, 145, .5); color: #ffb3c7; }
.challenge-banner { margin: 22px auto 0; max-width: 30em; padding: 12px 16px; border-radius: 16px; background: rgba(255, 111, 145, .1); border: 1px solid rgba(255, 111, 145, .45); color: #ffc2d2; font-weight: 650; }
.versus { margin: 18px 0 0; padding: 16px; border-radius: var(--radius); text-align: center; border-color: rgba(255, 111, 145, .45); }
.verdict { margin: 0 0 10px; font-size: 1.15rem; font-weight: 750; }
.vs-head { font-weight: 650; color: var(--text-2); margin-bottom: 8px; }
.vs-row { white-space: pre; font-size: .9rem; line-height: 1.7; }
.challenge { text-align: center; padding-top: 44px; }
.challenge h1 { font-size: clamp(2.1rem, 8vw, 3rem); letter-spacing: -.035em; }
.challenge .lead { color: var(--text-2); max-width: 30em; margin: 0 auto 26px; }
.challenge .btn { min-width: 270px; margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Result dots, drawn (not emoji) so they match the theme; a perfect tap gets a gold ring. */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%), var(--c, var(--slate)); box-shadow: 0 0 10px var(--c, transparent); }
.dot.band-perfect { --c: var(--sun); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 14px var(--sun); }
.dot.band-great { --c: var(--mint); }
.dot.band-ballpark { --c: var(--sun); box-shadow: none; }
.dot.band-off { --c: var(--ember); box-shadow: none; }
.dot.band-antipodal { --c: var(--slate); box-shadow: none; }
.dots .dot { width: 26px; height: 26px; margin: 0 5px; vertical-align: middle; }
.dot-lg { width: 20px; height: 20px; vertical-align: -1px; margin-right: 4px; }
.dots { letter-spacing: 0; }

/* Phone polish: after a tap the clue gets a little smaller (still whole) so the story has room; the
   pinned button fades the text behind it instead of cutting it; the ad strip's fallback is one line. */
body.is-revealed .prompt { font-size: .98rem; }
.reveal #next { box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 28px rgba(62, 230, 176, .3); }
@media (min-width: 900px) { body.is-revealed .prompt { font-size: 1.22rem; } }
@media (max-width: 440px) { .ad-strip .house b { display: none; } .ad-strip .house { border: 0; background: none; } }

/* ---------- review fixes, 8 Oct ---------- */
.zoom-btns { position: absolute; top: 12px; right: 12px; display: grid; gap: 6px; z-index: 3; }
.zoom-btns button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--glass-line); background: rgba(4, 13, 22, .72); color: var(--text); font: 600 20px/1 var(--font); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.zoom-btns button:hover { background: rgba(9, 28, 44, .9); }
body.is-revealed .zoom-btns { display: none; }
.country.is-name { font-size: 11px; font-weight: 650; letter-spacing: 0; }
.story-name { margin-bottom: 6px !important; }
.story .kicker { margin: 0 0 6px; font-size: 1.22rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.story .kicker:not([hidden]) + .story-name b { font-size: .92rem; font-weight: 650; color: var(--text-2); }
.source-meta { flex-basis: 100%; font-size: .78rem; color: var(--text-3); }
.source-meta a { color: var(--text-2); }
.r-off { margin: 0 0 2px; }
body.is-revealed .map-wrap { flex-basis: 35%; }
@media (min-width: 900px) { body.is-revealed .map-wrap { flex: 1; } }
/* Phones and narrow windows: an ordinary page that scrolls as a whole, sized from the height really
   visible (play.js sizeMap), never from 100vh or 100dvh, which in-app browsers (Instagram, Messenger...)
   report differently. The globe runs edge to edge: before a tap it takes the room left under the
   question; after it, about a third of the screen, with the result and the story below. The Next
   button floats at the bottom of the screen while the story scrolls under it, and settles at the end. */
@media (max-width: 899px) {
  body.is-play { height: auto; min-height: 0; display: block; overflow: visible; }
  body.is-play .play { display: block; }
  .play-stage { display: block; overflow: clip; margin: 0; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .map-wrap { height: 56svh; min-height: 240px; }
  body.is-revealed .map-wrap { height: 34svh; min-height: 200px; }
  .reveal { display: block; }
  .reveal-body { overflow: visible; }
  .reveal-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 22px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 21, 35, 0), rgba(6, 21, 35, .94) 38%); }
}
/* The Next button's focus ring is for keyboard players only (play.js adds .kbd on a key press). */
html:not(.kbd) .reveal #next:focus-visible { outline: none; }
/* Ads never sit next to the game's buttons: on the play screen a slot shows only a real ad, and only during a reveal. */
body.is-play .ad-strip.is-house, body.is-play:not(.is-revealed) .ad-strip.has-ad { display: none; }
.ad-strip { margin-top: 8px; }
.ad-box.is-house { min-height: 0; }
.verdict-line { text-align: center; font-size: 1.2rem; font-weight: 750; margin: 4px 0 0; letter-spacing: -.01em; }
.top-chip { font-size: .74rem; font-weight: 700; color: var(--mint); border: 1px solid rgba(62, 230, 176, .45); background: rgba(62, 230, 176, .08); padding: 3px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 3px; }
.hero-card .actions { margin-top: 16px; }
.hero-card .dots { margin-top: 20px; }
.teaser { margin: 22px auto 0; max-width: 32em; padding: 14px 16px; border-radius: 18px; text-align: left; background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--glass-line); }
.teaser span { display: block; font-size: .7rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.teaser em { display: block; font-style: normal; font-weight: 600; margin-top: 4px; }
.challenge .globe-mark { margin-bottom: 8px; }
.challenge .facts { margin-bottom: 24px; }
.tiles-5 { grid-template-columns: repeat(6, 1fr); }
.tiles-5 .tile { grid-column: span 2; }
.tiles-5 .tile:nth-child(n+4) { grid-column: span 3; }
.tiles + h2 { margin-top: 28px; }
.player-id { margin-top: 28px; overflow-wrap: anywhere; }
.player-id code { font-size: .85em; color: var(--text-2); }
@media (min-width: 600px) { .tiles-5 { grid-template-columns: repeat(5, 1fr); } .tiles-5 .tile, .tiles-5 .tile:nth-child(n+4) { grid-column: auto; } }
.clue-body .latest-round { display: inline-flex; margin-top: 12px; text-decoration: none; }