:root {
  color-scheme: light;
  --ink: #173349;
  --muted: #627584;
  --paper: #fffdf7;
  --sea: #dceff0;
  --teal: #2b8f85;
  --teal-dark: #17645f;
  --coral: #ef735e;
  --gold: #f0c553;
  --line: #c9d9d9;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-width: 900px; height: 100%; margin: 0; }

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 18%, rgba(240,197,83,.16) 0 2px, transparent 3px) 0 0 / 27px 27px,
    #f3eee3;
  font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}

button { font: inherit; }

.game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(650px, 1fr) 230px;
  gap: 20px;
  width: min(1180px, calc(100vw - 48px));
  height: calc(100vh - 40px);
  margin: 0 auto;
}

.play-card, .progress-card {
  border: 1px solid rgba(23,51,73,.12);
  border-radius: 28px;
  background: rgba(255,253,247,.96);
  box-shadow: 0 18px 50px rgba(46,63,68,.12);
}

.play-card {
  display: grid;
  grid-template-rows: auto minmax(310px, 1fr) auto 24px 52px;
  min-height: 0;
  padding: 28px 38px 24px;
}

.mission { text-align: center; }
.eyebrow { margin: 0 0 6px; color: var(--teal-dark); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.nudge { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

.board { position: relative; display: grid; place-items: center; min-height: 0; padding: 10px 0 2px; }
.silhouette-zone {
  position: relative;
  display: grid;
  place-items: center;
  width: min(650px, 88%);
  height: min(390px, 100%);
  min-height: 300px;
  overflow: hidden;
  border: 2px dashed #aacbca;
  border-radius: 27px;
  background: var(--sea);
  transition: border-color 150ms ease-out, background 150ms ease-out, transform 150ms ease-out;
}
.silhouette-zone.is-over { border-color: var(--teal); background: #d0ece7; transform: scale(1.012); }
.silhouette-zone.is-wrong { animation: shake 260ms ease-out; border-color: var(--coral); }
.silhouette-zone.is-matched { border-style: solid; border-color: #75bca1; background: #dff4e7; }
.map-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(43,143,133,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(43,143,133,.16) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(circle, black, transparent 78%); }
.country-svg { z-index: 1; width: 88%; height: 78%; overflow: visible; filter: drop-shadow(0 12px 0 rgba(23,51,73,.08)); animation: slide-in 440ms cubic-bezier(.2,.85,.25,1); }
.country-svg path { fill: var(--ink); stroke: #0f2738; stroke-width: 4; stroke-linejoin: round; }
.drop-label { position: absolute; z-index: 2; bottom: 15px; padding: 8px 14px; border-radius: 999px; color: var(--teal-dark); background: rgba(255,255,255,.83); font-size: 13px; font-weight: 800; box-shadow: 0 4px 15px rgba(23,51,73,.08); }
.match-glow { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.is-matched .match-glow { animation: glow 700ms ease-out; }

.choice-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(720px, 100%); margin: 4px auto 0; }
.country-token {
  min-height: 62px;
  padding: 12px 18px;
  border: 2px solid #d6dfdc;
  border-radius: 18px;
  color: var(--ink);
  background: white;
  box-shadow: 0 6px 0 #d6dfdc;
  font-size: 17px;
  font-weight: 800;
  cursor: grab;
  transition: transform 130ms ease-out, border-color 130ms ease-out, box-shadow 130ms ease-out;
}
.country-token:hover { transform: translateY(-3px); border-color: #8bbcb8; box-shadow: 0 9px 0 #b8d2cf; }
.country-token:active { cursor: grabbing; transform: translateY(4px); box-shadow: 0 2px 0 #b8d2cf; }
.country-token:focus-visible, .continue:focus-visible, .mute:focus-visible { outline: 4px solid #f0c553; outline-offset: 3px; }
.country-token[disabled] { opacity: .42; cursor: default; transform: none; }
.feedback { min-height: 24px; margin: 8px 0 0; color: var(--coral); text-align: center; font-size: 14px; font-weight: 800; }
.continue { align-self: end; justify-self: center; min-width: 210px; min-height: 50px; padding: 11px 24px; border: 0; border-radius: 16px; color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-size: 16px; font-weight: 900; cursor: pointer; }
.continue:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark); }

.fact-card { z-index: 4; position: absolute; right: 4px; bottom: 12px; width: 245px; padding: 18px; border: 2px solid #deb344; border-radius: 20px 20px 6px 20px; background: #fff7cf; box-shadow: 0 14px 34px rgba(67,63,36,.18); transform: rotate(1.5deg); animation: fact-pop 420ms cubic-bezier(.2,.85,.25,1); }
.fact-card span { color: #8a6711; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.fact-card strong { display: block; margin: 4px 0 6px; font-size: 22px; }
.fact-card p { margin: 0; color: #5b4a22; font-size: 14px; line-height: 1.4; }

.progress-card { display: flex; flex-direction: column; padding: 28px 24px; }
.passport-mark { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 28px; border: 3px double var(--coral); border-radius: 50%; color: var(--coral); text-align: center; transform: rotate(-5deg); }
.passport-mark span { font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.passport-mark b { font-size: 16px; line-height: 1.05; }
.mode-block { padding-bottom: 22px; border-bottom: 1px solid #dfe7e3; }
.mode-block span, .stat-row span, .difficulty-block span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mode-block strong { display: block; margin-top: 5px; font-size: 23px; line-height: 1.08; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 0; }
.stat-row div { padding: 14px; border-radius: 16px; background: #edf4f1; }
.stat-row strong { display: block; margin-top: 2px; font-size: 28px; }
.difficulty-block { padding: 4px 0 20px; }
.difficulty-block > div:first-child { display: flex; align-items: end; justify-content: space-between; }
.difficulty-block b { font-size: 18px; }
.difficulty-track { height: 9px; margin: 9px 0 7px; overflow: hidden; border-radius: 9px; background: #dfe8e5; }
.difficulty-track i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--coral)); transition: width 300ms ease-out; }
.difficulty-block p, .side-hint { color: var(--muted); font-size: 13px; line-height: 1.45; }
.stamp-line { display: flex; gap: 9px; margin-top: auto; }
.stamp-line i { width: 18px; height: 18px; border: 2px solid #b8c9c7; border-radius: 50%; }
.stamp-line i.is-filled { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 4px var(--paper); }
.side-hint { min-height: 54px; margin: 14px 0 0; }
.mute { position: absolute; z-index: 10; top: 16px; right: 260px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #d5dfda; border-radius: 50%; color: var(--ink); background: white; cursor: pointer; box-shadow: 0 6px 18px rgba(23,51,73,.1); }
.mute svg { width: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mute .sound-off, .mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: block; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; padding: 12px 20px; border-radius: 999px; color: white; background: var(--ink); font-weight: 800; opacity: 0; transform: translate(-50%, 16px); transition: 180ms ease-out; pointer-events: none; }
.toast.is-showing { opacity: 1; transform: translate(-50%, 0); }

@keyframes slide-in { from { opacity: 0; transform: translateX(-45px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes fact-pop { from { opacity: 0; transform: scale(.75) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(1.5deg); } }
@keyframes glow { 0% { box-shadow: inset 0 0 0 0 rgba(240,197,83,.9); } 60% { box-shadow: inset 0 0 70px 20px rgba(240,197,83,.72); } 100% { box-shadow: inset 0 0 0 0 rgba(240,197,83,0); } }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Game-feel polish: explorer mascot + atlas backdrop --- */
.explorer-mascot {
  mix-blend-mode: multiply;
  display: block;
  width: 78%;
  max-width: 150px;
  margin: -6px auto 10px;
  filter: drop-shadow(0 8px 14px rgba(15, 40, 70, 0.18));
  animation: explorer-bob 3s ease-in-out infinite;
}
@keyframes explorer-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .explorer-mascot { animation: none; } }

.silhouette-zone {
  background-image: linear-gradient(rgba(233, 243, 250, 0.72), rgba(233, 243, 250, 0.82)), url(./assets/atlas-01.webp);
  background-size: cover;
  background-position: center;
}
.country-svg #countryPath, .country-svg path { filter: drop-shadow(0 6px 10px rgba(12, 32, 60, 0.28)); }