/* Map Challenge — earthy theme, crisp cartography pass */
:root{
  --bg:#f5f0e6; --card:#fffdf8; --ink:#3a3129; --muted:#8a7a64;
  --accent:#b4663a; --accent-ink:#fffaf2; --blue:#3f6b5e;
  --good:#5e8f5a; --bad:#b04a3a; --line:#e3d5bd;
  --land:#e6ebcf; --land-stroke:#141414; --hover:#d4dcab;
  --water:#c8dcea;
  --shadow:0 6px 20px rgba(122,90,58,.14);
}
[data-theme="dark"]{
  --bg:#1e1a14; --card:#241f16; --ink:#efe6d4; --muted:#a2937a;
  --accent:#d08a4e; --blue:#7ba08e;
  --good:#7fae7a; --bad:#d0695a; --line:#3d342a;
  --land:#4c5437; --land-stroke:#ece4d2; --hover:#616b46;
  --water:#1c232d;
  --shadow:0 6px 20px rgba(0,0,0,.4);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh;
  /* page scrolls, but the browser never pinch-zooms the page:
     map zoom is handled by the map's own pinch/buttons instead */
  touch-action:pan-x pan-y;
}
.hidden{display:none !important;}
.view{max-width:1100px;margin:0 auto;padding:12px 14px 40px;}

/* top bar */
.topbar{
  display:flex;align-items:center;gap:10px;
  max-width:1100px;margin:0 auto;padding:12px 14px 4px;
}
.topbar h1{flex:1;text-align:center;font-size:1.6rem;margin:0;letter-spacing:.5px;}
.icon-btn{
  width:44px;height:44px;border-radius:14px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font-size:1.3rem;cursor:pointer;
}
.icon-btn:active{transform:scale(.94);}

/* home */
.tagline{text-align:center;color:var(--muted);font-size:1.05rem;margin:6px 0 16px;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.card{
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.card .thumb{
  border-radius:14px;overflow:hidden;background:var(--water);aspect-ratio:2/1;
  display:flex;align-items:center;justify-content:center;
}
.card .thumb svg{width:100%;height:100%;display:block;}
.card .thumb path{fill:var(--land);stroke:var(--land-stroke);stroke-width:3;}
.card .thumb path.hl{fill:var(--accent);stroke:#8f4e2a;stroke-width:3;}
.card h3{margin:0;font-size:1.02rem;text-align:center;}
.card .stats{margin:0;text-align:center;color:var(--muted);font-size:.85rem;min-height:2.4em;}
.card-btns{display:flex;gap:8px;}
.card-btns .btn{flex:1;}
.footnote{text-align:center;color:var(--muted);font-size:.8rem;margin-top:22px;}

/* buttons */
.btn{
  border:none;border-radius:14px;padding:12px 16px;font-size:1rem;font-weight:700;
  cursor:pointer;color:var(--ink);background:var(--line);
  font-family:inherit;
}
.btn:active{transform:scale(.96);}
.btn.primary{background:var(--accent);color:var(--accent-ink);}
.btn.accent{background:var(--blue);color:#fff;}
.btn.secondary{background:var(--line);color:var(--ink);}
.btn.small{padding:8px 10px;font-size:.85rem;border-radius:10px;}
.btn-row{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap;}

/* HUD */
.hud{display:flex;gap:8px;align-items:center;justify-content:center;margin:6px 0 10px;flex-wrap:wrap;}
.hud-chip{
  background:var(--card);border:2px solid var(--line);border-radius:999px;
  padding:6px 14px;font-weight:700;font-size:.95rem;
}
.hud-chip.timer.low{color:var(--bad);border-color:var(--bad);animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.6;}}

/* first-tap onboarding hint: tells a first-timer exactly what to do */
.game-hint{
  text-align:center;color:var(--muted);font-size:.95rem;margin:2px 0 8px;
}

/* map */
#map-wrap,#learn-wrap{
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow);
}
#map-wrap{position:relative;}
#map,#learn-map{display:block;width:100%;height:auto;max-height:62vh;}
/* pinch/zoom gestures stay on the maps, never the page (both game + learn) */
#map,#learn-map{touch-action:none;}
/* water backdrop: covers the base viewBox, pans/zooms with the map */
#map rect.water,#learn-map rect.water,#res-map rect.water{
  fill:var(--water);pointer-events:none;
}
.zoom-ctrls{
  position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:8px;z-index:5;
}
.zoom-ctrls button{
  width:44px;height:44px;border-radius:12px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font-size:1.4rem;font-weight:800;
  cursor:pointer;box-shadow:var(--shadow);line-height:1;
  touch-action:manipulation;
}
.zoom-ctrls button:active{transform:scale(.94);}
#map path.region,#learn-map path.region{
  fill:var(--land);stroke:var(--land-stroke);stroke-width:1.5;cursor:pointer;
  transition:fill .15s;
}
#map path.region:hover,#learn-map path.region:hover{fill:var(--hover);}
#map path.region.selected{stroke:var(--accent);stroke-width:3;}
#map path.region.correct{fill:var(--good);stroke:#1e7a44;stroke-width:1.5;cursor:default;}
#map path.region.missed{fill:var(--bad);stroke:#a83226;stroke-width:1.5;cursor:default;opacity:.75;}
#learn-map path.region{cursor:default;}
#learn-map path.region.target{
  fill:var(--accent);stroke:#8f4e2a;stroke-width:2.5;
  animation:targetpulse 1.2s infinite;
}
@keyframes targetpulse{50%{opacity:.55;}}

/* answer panel */
.answer-panel{
  position:sticky;bottom:10px;margin-top:10px;
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  padding:14px;box-shadow:var(--shadow);
}
.answer-q{font-weight:700;font-size:1.05rem;margin-bottom:10px;text-align:center;}
.ac-wrap{position:relative;}
#answer-input,#learn-input{
  width:100%;padding:14px;font-size:16px;border-radius:14px;
  border:2px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;
}
#answer-input:focus,#learn-input:focus{outline:none;border-color:var(--accent);}
.ac-list{
  position:absolute;left:0;right:0;bottom:calc(100% + 6px);
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  max-height:220px;overflow-y:auto;z-index:20;box-shadow:var(--shadow);
}
.ac-item{padding:12px 14px;cursor:pointer;font-size:1rem;}
.ac-item:hover,.ac-item.active{background:var(--line);}
.answer-btns{display:flex;gap:10px;margin-top:10px;}
.answer-btns .btn{flex:1;}
.shake{animation:shake .4s;}
@keyframes shake{25%{transform:translateX(-6px);}50%{transform:translateX(6px);}75%{transform:translateX(-4px);}}

/* results */
.result-card{
  background:var(--card);border:2px solid var(--line);border-radius:24px;
  padding:28px 20px;box-shadow:var(--shadow);text-align:center;max-width:480px;margin:20px auto;
}
.result-card h2{margin:0 0 8px;}
.res-score{
  font-size:4rem;font-weight:900;color:var(--accent);margin:8px 0;
}
.res-detail{color:var(--muted);margin:4px 0;}
.res-best{font-weight:700;margin:4px 0 8px;}
.copied{color:var(--good);font-weight:700;}

/* learn */
.learn-empty{
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  padding:30px 20px;text-align:center;font-size:1.1rem;margin-top:12px;
}
.learn-feedback{min-height:1.6em;text-align:center;font-weight:700;margin:8px 0 0;}
.learn-feedback.good{color:var(--good);}
.learn-feedback.bad{color:var(--bad);}

#view-continent h2{text-align:center;}
#continent-back{display:block;margin:18px auto 0;}

@media (orientation:landscape) and (max-height:500px){
  /* landscape phone: let the map use the short screen height */
  #map,#learn-map{max-height:82vh;}
  .view{padding-bottom:20px;}
}

/* rotate hint: portrait phones only — landscape already renders the map ~1.7x bigger */
.rotate-tip{display:none;}

@media (max-width:700px) and (orientation:portrait){
  /* Portrait phones: the map frame goes tall (58vh) and the map fills it via
     a full-height vertical slice (see portraitView in app.js) — the map
     renders ~2.5x bigger than the old 2:1 strip, and drag/pinch still reach
     every country. JS mirrors the 58vh constant. */
  #map-wrap,#learn-wrap{
    margin-left:-14px;margin-right:-14px;
    border-radius:0;border-left:none;border-right:none;
    height:58vh;
  }
  #map,#learn-map{height:100%;max-height:none;}
  .rotate-tip{
    display:block;text-align:center;color:var(--muted);
    font-size:.82rem;margin:10px 0 0;
  }
}

@media (min-width:700px){
  .cards{grid-template-columns:repeat(3,1fr);}
  .topbar h1{font-size:2rem;}
}

/* fat-finger hit areas: invisible, generous tap targets for tiny countries */
#map circle.hit{fill:rgba(0,0,0,0);stroke:none;pointer-events:all;cursor:pointer;}

/* results map */
.result-map-wrap{margin-top:14px;}
#res-map{width:100%;height:auto;display:block;background:var(--card);
  border:2px solid var(--line);border-radius:20px;box-shadow:var(--shadow);}
#res-map path{fill:var(--muted);opacity:.4;stroke:var(--land-stroke);stroke-width:1.2;}
#res-map path.correct{fill:var(--good);opacity:1;}
#res-map path.missed{fill:var(--bad);opacity:1;}
.map-legend{display:flex;gap:16px;justify-content:center;margin-top:10px;
  color:var(--muted);font-size:.85rem;flex-wrap:wrap;}
.map-legend .sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;}
.map-legend .sw.good{background:var(--good);}
.map-legend .sw.bad{background:var(--bad);}
.map-legend .sw.unasked{background:var(--muted);opacity:.4;}