/* Combi-Nations, "Vintage Atlas / Passport" theme (direction C).
   Parchment page on a guilloche security print, sepia ink, serif headings,
   ink-stamp flourishes. No web fonts, so it works offline.

   COLOR SYSTEM. Every color is a token below and is defined exactly once.
   Three accent roles only:
     --live  oxblood, "this just happened" (fresh chip, OVERLAP, primary button, focus, errors)
     --gold  value and bonus (top-10 count, QUOTA MET, overflow chips, BONUS stat)
     --done  success, used for COMPLETE only
   Difficulty is a single light-to-dark green ramp (--tier-e .. --tier-x), drawn as outlined ink stamps.
   The translucent tokens are those same colors at set alphas.
   The one color not tokenizable is the guilloche stroke baked into the SVG
   data URI on `body` (it equals --ink-soft, #7c6c4f). */
:root {
  /* base: parchment + ink */
  --paper:       #e4d8ba;
  --surface:     #f4ecd6;
  --surface-2:   #e9ddc0;
  --ink:         #2f2616;
  --ink-soft:    #7c6c4f;
  --line:        #c3b08a;
  --line-strong: #9c8862;

  /* three accent roles */
  --live:        #9c3b2c;
  --gold:        #b07d2b;
  --done:        #3f6b4a;
  --on-accent:   #f4ecd6;

  /* difficulty ramp as green ink-stamp shades, Easy (light) to eXtreme (dark) */
  --tier-e:      #5a8a5e;
  --tier-m:      #437a4a;
  --tier-h:      #356641;
  --tier-x:      #244d30;

  /* translucent, derived from the colors above */
  --shadow:          rgba(47, 38, 22, 0.18);
  --shadow-pop:      rgba(47, 38, 22, 0.22);
  --overlay:         rgba(47, 38, 22, 0.55);
  --emboss:          rgba(0, 0, 0, 0.12);
  --highlight:       rgba(255, 255, 255, 0.40);
  --inset:           rgba(156, 136, 98, 0.35);
  --inset-done:      rgba(63, 107, 74, 0.45);
  --live-wash:       rgba(156, 59, 44, 0.08);
  --gold-wash:       rgba(176, 125, 43, 0.12);
  --on-accent-soft:  rgba(244, 236, 214, 0.85);

  --radius: 4px;
  --maxw: 580px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Optima", "Gill Sans", "Segoe UI", Avenir, system-ui, sans-serif;
  --mono:  "OCR B", "Courier New", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--paper);
  /* tiled guilloche rosette. Stroke %237c6c4f is baked in and matches --ink-soft. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237c6c4f' stroke-width='0.7' stroke-opacity='0.16'%3E%3Ccircle cx='60' cy='60' r='44'/%3E%3Ccircle cx='60' cy='60' r='34'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3Cpath d='M0 60 Q30 16 60 60 T120 60'/%3E%3Cpath d='M0 60 Q30 104 60 60 T120 60'/%3E%3Cpath d='M60 0 Q16 30 60 60 T60 120'/%3E%3Cpath d='M60 0 Q104 30 60 60 T60 120'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* the open passport page floats above the cover */
#app {
  max-width: var(--maxw);
  margin: 14px auto;
  padding: 18px 16px 56px;
  min-height: calc(100vh - 28px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--shadow);
}

/* ---- top bar: passport cover plate ---- */
.topbar {
  position: relative;
  text-align: center; padding: 14px 10px 16px; margin-bottom: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line);
}
.help-btn {
  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); font-family: var(--serif); font-weight: 700; font-size: 15px;
  line-height: 1; cursor: pointer;
}
.help-btn:active { transform: translateY(1px); }
.wordmark {
  font-family: var(--serif); font-size: 32px; font-weight: 700; margin: 0;
  letter-spacing: 0.01em; color: var(--ink);
  text-shadow: 0 1px 0 var(--highlight);
}
.wordmark::before, .wordmark::after { content: "\2726"; color: var(--line-strong); font-size: 16px; vertical-align: middle; margin: 0 10px; }
.puzzle-meta {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  color: var(--ink-soft); font-size: 12px; margin-top: 6px;
  font-family: var(--mono); letter-spacing: 0.06em;
}
#puzzle-number { font-weight: 700; color: var(--ink); }
.kind-chip {
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.14em;
  color: var(--live); border: 1px solid var(--live);
  padding: 1px 8px; border-radius: 2px; transform: rotate(-1.5deg);
}
.streak-meta {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold);
  padding: 1px 8px; border-radius: 2px; transform: rotate(1.5deg);
}

/* ---- score bar: passport data strip ---- */
.scorebar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden; margin: 0 0 18px;
}
.score-block { text-align: center; padding: 9px 6px; }
.score-block + .score-block { border-left: 1px dashed var(--line-strong); }
.score-label { display: block; font-size: 9px; letter-spacing: 0.16em; color: var(--ink-soft); font-family: var(--mono); }
.score-block span:last-child { font-family: var(--mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#bonus-value { color: var(--gold); }

/* ---- categories: atlas insets ---- */
.categories { display: flex; flex-direction: column; gap: 14px; }
.cat {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 13px 15px;
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--inset);
}
.cat-head { display: flex; align-items: center; gap: 9px; }
.tier {
  font-family: var(--serif); font-size: 12px; font-weight: 800;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 auto; background: transparent; border: 2px solid currentColor;
  transform: rotate(-6deg);
}
.tier.E { color: var(--tier-e); }
.tier.M { color: var(--tier-m); }
.tier.H { color: var(--tier-h); }
.tier.X { color: var(--tier-x); }
.cat-title { font-family: var(--serif); font-weight: 700; font-size: 16px; flex: 1; line-height: 1.25; }
.cat-bucket { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--mono); }

/* glossary tooltip: a small circled "?" on the card that reveals a short
   explanation on hover or focus (tap focuses it on touch devices). */
.cat-info { position: relative; flex: 0 0 auto; display: inline-flex; cursor: help; }
.cat-info-mark {
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--gold); border: 1px solid var(--gold);
}
.cat-info:focus { outline: none; }
.cat-info:focus .cat-info-mark { box-shadow: 0 0 0 2px var(--gold-wash); }
.cat-info-bubble {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  width: max-content; max-width: 240px;
  padding: 7px 9px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: 0 3px 10px var(--shadow-pop);
  font-family: var(--sans); font-size: 11.5px; font-style: normal; line-height: 1.35;
  letter-spacing: 0; text-transform: none;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
.cat-info:hover .cat-info-bubble,
.cat-info:focus .cat-info-bubble { opacity: 1; visibility: visible; }

.cat-rule { font-size: 12.5px; color: var(--ink-soft); margin: 5px 0 9px; font-style: italic; }
.cat-progress {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--ink-soft); margin-bottom: 7px;
  font-family: var(--mono); letter-spacing: 0.04em;
  border-top: 1px dotted var(--line); padding-top: 6px;
}
.cat-progress .pts { color: var(--ink); }
.top-found { color: var(--gold); }
.more-bonus {
  align-self: center; font-family: var(--mono); font-size: 11px; color: var(--gold);
  letter-spacing: 0.03em; padding: 3px 4px;
}

/* a finished category collapses to a stamped summary row */
.cat.done {
  padding: 10px 15px; background: var(--surface); border-color: var(--done);
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--inset-done);
}
.clickable { cursor: pointer; }
.cat.done .cat-title { font-size: 14px; }
.cat.done .cat-progress { border-top: none; padding-top: 0; margin-bottom: 0; margin-top: 4px; }
.done-stamp {
  font-family: var(--serif); font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--done); border: 2px double var(--done);
  border-radius: 4px; padding: 2px 7px; transform: rotate(-4deg); white-space: nowrap;
}
/* milestone stamp shown when the 10 scoring slots are filled (gold, distinct from the green COMPLETE stamp) */
.cap-stamp {
  font-family: var(--serif); font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold); border: 2px double var(--gold);
  border-radius: 4px; padding: 2px 7px; transform: rotate(3deg); white-space: nowrap;
}

/* country chips: gummed stamps */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--serif); font-size: 12.5px; padding: 3px 9px; border-radius: 2px;
  border: 1px dashed var(--line-strong); color: var(--ink); animation: pop 0.2s ease-out;
}
.chip .sc { font-family: var(--mono); font-size: 10px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.chip.scoring { background: var(--surface-2); }
.chip.scoring .sc { color: var(--ink-soft); }
.chip.overflow { background: var(--gold-wash); border-color: var(--gold); color: var(--ink-soft); }
.chip.overflow .sc { color: var(--gold); }
/* a category's 10 highest-value members get a small solid gold border */
.chip.top10 { border-style: solid; border-color: var(--gold); }
.chip.fresh { background: var(--live); color: var(--on-accent); border-color: var(--live); border-style: solid; }
.chip.fresh .sc { color: var(--on-accent-soft); }
.chip.ghost { opacity: 0.5; font-style: italic; border-style: dotted; background: transparent; }
/* a hinted answer: revealed for free, scores 0 (dotted gold, the unearned-value language) */
.chip.hint { background: transparent; border-style: dotted; border-color: var(--gold); color: var(--ink-soft); font-style: italic; }
.chip.hint .sc { color: var(--gold); }

/* per-category hint button, tucked at the foot of an open category card */
.cat-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.cat-hint { font-size: 12px; padding: 6px 13px; color: var(--gold); border-color: var(--gold); }
@keyframes pop { from { transform: scale(0.6) rotate(-3deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* ---- Saturday Pinpoint: guess markers + status ---- */
.pin-markers { display: flex; gap: 8px; margin: 12px 0 8px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; }
.pin-dot.hit { border-color: var(--done); background: var(--done); }
.pin-dot.miss { border-color: var(--live); background: var(--live); }
.pin-status { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; margin-bottom: 8px; }

/* ---- guess area with autocomplete ---- */
.guess-area { display: flex; gap: 8px; margin: 20px 0 4px; align-items: flex-start; }
.guess-field { position: relative; flex: 1; }
.guess-input {
  width: 100%; font-family: var(--serif); font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.guess-input::placeholder { color: var(--ink-soft); font-style: italic; }
.guess-input:focus { outline: 2px solid var(--live); border-color: var(--live); }
.guess-input.shake { animation: shake 0.3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.ac-list {
  list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 6px 16px var(--shadow-pop); z-index: 5; max-height: 260px; overflow-y: auto;
}
.ac-item {
  font-family: var(--serif); font-size: 15px; padding: 8px 10px; border-radius: 3px; cursor: pointer; color: var(--ink);
}
.ac-item.active, .ac-item:hover { background: var(--surface-2); }

.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius); padding: 12px 18px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); letter-spacing: 0.02em;
}
.btn.primary { background: var(--live); color: var(--on-accent); border-color: var(--live); }
.btn.ghost { background: transparent; color: var(--ink-soft); border-style: dashed; }
.btn:active { transform: translateY(1px); }

.feedback { min-height: 20px; text-align: center; font-size: 13px; margin: 8px 0; color: var(--ink-soft); font-style: italic; }
.feedback.ok { color: var(--gold); font-style: normal; }
.feedback.bad { color: var(--live); font-style: normal; }
.controls { text-align: center; margin-top: 14px; }

/* countries the player tried that are not in today's puzzle */
.misses { margin: 10px 0 2px; }
.misses-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.chip.miss { background: transparent; border: 1px dotted var(--live); color: var(--ink-soft); opacity: 0.85; font-style: italic; }

/* ---- OVERLAP: red ink stamp ---- */
.overlap-flash {
  position: fixed; left: 50%; top: 36%;
  transform: translate(-50%, -50%) rotate(-12deg) scale(0.5);
  font-family: var(--serif); font-size: 30px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--live);
  padding: 8px 18px; border: 3px double var(--live); border-radius: 6px;
  background: var(--live-wash); pointer-events: none; opacity: 0;
}
.overlap-flash.show { animation: stamp 1s ease-out; }
@keyframes stamp {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(1.7); }
  18%  { opacity: 0.95; transform: translate(-50%,-50%) rotate(-12deg) scale(0.95); }
  28%  { transform: translate(-50%,-50%) rotate(-12deg) scale(1.02); }
  80%  { opacity: 0.95; transform: translate(-50%,-50%) rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-52%) rotate(-12deg) scale(1); }
}

/* ---- pre-launch coming-soon splash ---- */
.splash { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; }
.splash-card {
  width: 100%; max-width: 460px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 34px 26px;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line), 0 2px 10px var(--shadow);
}
.splash-flourish { font-size: 20px; color: var(--line-strong); }
.splash-word {
  font-family: var(--serif); font-size: 34px; font-weight: 700; margin: 4px 0 2px;
  letter-spacing: 0.01em; color: var(--ink); text-shadow: 0 1px 0 var(--highlight);
}
.splash-tag { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 0 0 18px; }
.splash-soon {
  display: inline-block; font-family: var(--serif); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--live);
  border: 2px double var(--live); border-radius: 4px; padding: 4px 12px;
  transform: rotate(-2deg); margin: 0 0 22px;
}
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 18px; }
.cd-block {
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 4px;
}
.cd-num {
  display: block; font-family: var(--mono); font-size: 26px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.cd-unit {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 3px;
}
.splash-foot { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.05em; margin: 0; }

/* ---- result ---- */
.result { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 20px; z-index: 10; }
.result.hidden { display: none; }
.result-card {
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line);
  border-radius: var(--radius); padding: 24px; width: 100%; max-width: 360px; text-align: center;
}
#result-title { font-family: var(--serif); margin: 0 0 4px; }
.result-score { font-family: var(--mono); font-size: 18px; font-weight: 700; margin: 4px 0 14px; }
.share-text {
  font-family: var(--mono); font-size: 14px; background: var(--paper);
  border: 1px dashed var(--line-strong); border-radius: 4px; padding: 12px;
  white-space: pre-wrap; text-align: left; margin: 0 0 14px;
}
.result-actions { display: flex; gap: 8px; justify-content: center; }

.footnote { text-align: center; color: var(--ink-soft); font-size: 11px; margin-top: 26px; font-family: var(--mono); letter-spacing: 0.06em; }
.hidden { display: none; }

/* ---- how-to-play ---- */
.howto { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 20px; z-index: 15; }
.howto.hidden { display: none; }
.howto-card {
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line);
  border-radius: var(--radius); padding: 24px; width: 100%; max-width: 420px;
}
.howto-title { font-family: var(--serif); margin: 0 0 14px; text-align: center; }
.howto-list { margin: 0 0 18px; padding-left: 18px; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.howto-list li { margin-bottom: 11px; }
.howto-list li:last-child { margin-bottom: 0; }
.howto-card .btn { display: block; width: 100%; }

/* ---- ad gate / house promo overlay (ads.js) ---- */
.adgate { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 20px; z-index: 20; }
.adgate-card {
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line);
  border-radius: var(--radius); padding: 24px; width: 100%; max-width: 360px; text-align: center;
}
.adgate-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.adgate-title { font-family: var(--serif); margin: 6px 0 4px; }
.adgate-blurb { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.adgate-timer { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; }
.adgate-continue[disabled] { opacity: 0.5; cursor: default; }

/* dark mode: aged map by lamplight. Only base and accents flip, the tier ramp
   and translucent tokens read correctly on both backgrounds. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d180f; --surface: #2a2316; --surface-2: #332a19;
    --ink: #ece0c4; --ink-soft: #b3a07c; --line: #5a4c33; --line-strong: #7a6743;
    --live: #c9614f; --gold: #cda24f; --done: #6fae7c; --on-accent: #1d180f;
    --tier-e: #8ec78f; --tier-m: #6cae71; --tier-h: #57965f; --tier-x: #429a52;
  }
}