/* Flag Atlas — dressed like the other games on brooksgroves.com/games (same parchment, ink and DM Mono
   console as Plate Hunter and /games/engine.css). */
:root {
  --ink:#1c1a16; --parchment:#f5f0e8; --cream:#ede8dc;
  --stone:#7a7268; --gold:#c8922a; --mist:#d6d0c4;
  --white:#fdfaf4; --rust:#8b3a2a; --sage:#4a5c45; --sky:#2a4a6b;
  --accent:var(--sky); --right:var(--sage); --wrong:var(--rust);
  --serif:'Libre Baskerville', Georgia, serif; --display:'Playfair Display', Georgia, serif; --mono:'DM Mono', ui-monospace, Menlo, monospace;
}
[data-theme="dark"] {
  --ink:#ece6da; --parchment:#17150f; --cream:#211e17;
  --stone:#a2988a; --gold:#d9a63f; --mist:#3a352d;
  --white:#12100d; --rust:#cf6b52; --sage:#83a077; --sky:#6fa0cc;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--parchment); color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.65;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
}
button { font:inherit; color:inherit; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- site chrome (same as the other games) ---------- */
.topline { width:100%; height:4px; background:linear-gradient(90deg,var(--rust) 0%,var(--gold) 50%,var(--sage) 100%); }
.sitebar { width:100%; border-bottom:2px solid var(--ink); background:var(--parchment); }
.masthead-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:900px; margin:0 auto; padding:0.75rem 1.25rem; }
.site-name { font-family:var(--display); font-size:1.15rem; font-weight:900; text-decoration:none; color:var(--ink); }
.sitenav { display:flex; gap:1.25rem; align-items:center; }
.sitenav a { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--stone); }
.sitenav a:hover { color:var(--rust); }
.theme-toggle { background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:0.8rem; color:var(--stone); line-height:1; padding:4px; }
.theme-toggle:hover { color:var(--gold); }

.console { width:100%; max-width:900px; padding:0 14px; margin-top:24px; }
.gamehead { border:1px solid var(--mist); border-bottom:none; background:var(--cream); padding:16px 20px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.gamehead h1 { font-family:var(--display); font-weight:900; font-size:1.35rem; letter-spacing:-0.01em; line-height:1.2; }
.gamehead .sub { font-family:var(--mono); font-size:0.6rem; color:var(--stone); letter-spacing:0.08em; margin-top:4px; text-transform:uppercase; }
.badge { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.1em; color:var(--white); background:var(--accent); padding:3px 9px; border-radius:3px; white-space:nowrap; text-transform:uppercase; }
.statusbar { border:1px solid var(--mist); border-top:none; background:var(--cream); padding:9px 20px; display:flex; gap:6px 18px; flex-wrap:wrap; font-family:var(--mono); font-size:0.62rem; color:var(--stone); letter-spacing:0.03em; text-transform:uppercase; min-height:36px; }
.statusbar b { color:var(--accent); font-weight:400; }
.navbar { border:1px solid var(--mist); border-top:none; background:var(--cream); display:flex; gap:1px; }
.navbtn { flex:1; background:var(--cream); border:none; border-right:1px solid var(--mist); font-family:var(--mono); font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); padding:11px 6px; cursor:pointer; text-decoration:none; text-align:center; }
.navbtn:last-child { border-right:none; }
.navbtn:hover { color:var(--rust); }
.navbtn[aria-selected=true] { background:var(--white); color:var(--ink); box-shadow:inset 0 -2px 0 var(--rust); }
.navbtn.narrow { flex:0 0 52px; }
.navbar.bottom .navhome { color:var(--accent); }
main { border:1px solid var(--mist); border-top:none; background:var(--white); min-height:380px; }
.empty { text-align:center; padding:60px 20px; color:var(--stone); font-style:italic; }
.empty b { display:block; font-size:2.2rem; margin-bottom:8px; font-style:normal; }

/* ---------- buttons ---------- */
.btn { background:var(--accent); color:var(--white); border:1px solid var(--accent); padding:10px 22px; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }
.btn:hover { background:var(--rust); border-color:var(--rust); }
.btn.ghost { background:var(--white); color:var(--ink); border-color:var(--mist); }
.btn.ghost:hover { color:var(--white); }

/* ---------- start screen ---------- */
.start { padding:28px 22px 30px; text-align:center; }
.start h2 { font-family:var(--display); font-size:1.5rem; font-weight:900; line-height:1.25; }
.start p { color:var(--stone); max-width:560px; margin:10px auto 0; font-size:0.95rem; }
.peek { display:flex; justify-content:center; gap:10px; margin:22px auto 6px; flex-wrap:wrap; }
.peek img { height:48px; width:auto; border:1px solid var(--mist); box-shadow:0 2px 6px rgba(0,0,0,.08); transform:rotate(var(--t,0deg)); }
.packs { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:22px 0 18px; }
.pack { border:1px solid var(--mist); background:var(--cream); padding:10px 16px; min-width:200px; text-align:left; cursor:pointer; }
.pack[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 3px 0 0 var(--rust); background:var(--white); }
.pack[disabled] { opacity:.5; cursor:default; }
.pack b { display:block; font-family:var(--display); font-size:1rem; }
.pack small { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); }
.area { margin:18px auto 0; max-width:760px; }
.area-name { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--stone); text-align:left; margin-bottom:6px; }
.area .packs { justify-content:flex-start; margin:0; }
.area .pack { min-width:0; flex:1 1 170px; }
.deep select { width:100%; background:var(--cream); color:var(--ink); border:1px solid var(--mist); padding:10px 12px; font-family:var(--serif); font-size:0.95rem; }
.deep.on select { border-color:var(--ink); box-shadow:inset 3px 0 0 var(--rust); background:var(--white); }
.start > .btn { margin-top:22px; }
.wait { margin-top:22px !important; font-style:italic; }
.best { margin-top:12px; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); }

/* ---------- the question ---------- */
.q { padding:22px 18px 26px; display:flex; flex-direction:column; align-items:center; }
.q-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--stone); }
.flagframe { margin:14px 0 20px; width:min(420px,100%); aspect-ratio:5/3; display:flex; align-items:center; justify-content:center; background:var(--cream); border:1px solid var(--mist); padding:14px; }
.flagframe img { max-width:100%; max-height:100%; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(560px,100%); }
.choice { background:var(--cream); border:1px solid var(--mist); padding:12px 12px; cursor:pointer; text-align:left; line-height:1.25; min-height:58px; transition:background .15s, border-color .15s; }
.choice:hover:not(:disabled) { border-color:var(--ink); background:var(--white); }
.choice span { display:block; font-family:var(--display); font-weight:700; font-size:1.02rem; }
.choice small { display:block; font-family:var(--mono); font-size:0.56rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-top:3px; }
.choice:disabled { cursor:default; }
.choice.right { background:var(--right); border-color:var(--right); color:#fff; }
.choice.right small { color:rgba(255,255,255,.8); }
.choice.wrong { background:var(--wrong); border-color:var(--wrong); color:#fff; }
.choice.wrong small { color:rgba(255,255,255,.8); }
.choice.dim { opacity:.45; }
@media (max-width:480px) { .choices { grid-template-columns:1fr; } }

/* ---------- the reveal: about the place, the flag and the map ---------- */
.reveal { width:min(720px,100%); margin-top:20px; border:1px solid var(--mist); background:var(--cream); display:grid; grid-template-columns:1fr 1fr; }
.reveal .txt { padding:16px 18px; }
.verdict { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; }
.verdict.right { color:var(--right); } .verdict.wrong { color:var(--wrong); }
.place { font-family:var(--display); font-weight:900; font-size:1.35rem; line-height:1.2; margin-top:4px; }
.about { font-size:0.85rem; color:var(--stone); margin-top:2px; }
.note { font-size:0.9rem; margin-top:10px; line-height:1.55; }
.credit { font-family:var(--mono); font-size:0.54rem; letter-spacing:0.03em; color:var(--stone); margin-top:12px; line-height:1.5; }
.credit a { color:var(--stone); }
.more { display:inline-block; margin-top:10px; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; }
.minimap { min-height:240px; border-left:1px solid var(--mist); }
.next-row { display:flex; justify-content:center; margin-top:18px; }
@media (max-width:640px) { .reveal { grid-template-columns:1fr; } .minimap { border-left:none; border-top:1px solid var(--mist); min-height:200px; } }

/* ---------- end of a round ---------- */
.done { padding:28px 18px; text-align:center; }
.done .big { font-family:var(--display); font-weight:900; font-size:2.6rem; line-height:1; }
.done .verdict-line { color:var(--stone); font-style:italic; margin-top:8px; }
.recap { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin:22px auto; max-width:760px; text-align:left; }
.recap button { background:var(--cream); border:1px solid var(--mist); border-top:3px solid var(--mist); padding:8px; cursor:pointer; }
.recap button.r { border-top-color:var(--right); } .recap button.w { border-top-color:var(--wrong); }
.recap img { width:100%; aspect-ratio:5/3; object-fit:contain; background:var(--white); }
.recap span { display:block; font-family:var(--display); font-size:0.85rem; font-weight:700; margin-top:4px; line-height:1.2; }
.recap small { font-family:var(--mono); font-size:0.52rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone); }

/* ---------- Name it / Pin it ---------- */
.modes { display:flex; justify-content:center; gap:10px; margin:18px auto 0; flex-wrap:wrap; }
.mode { background:var(--cream); border:1px solid var(--mist); padding:9px 18px; cursor:pointer; font-family:var(--display); font-weight:700; font-size:1rem; min-width:170px; }
.mode small { display:block; font-family:var(--mono); font-weight:400; font-size:0.56rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-top:2px; }
.mode[aria-pressed=true] { background:var(--ink); color:var(--parchment); border-color:var(--ink); }
.mode[aria-pressed=true] small { color:var(--mist); }
.flagframe.small { width:min(300px,100%); margin:12px 0 14px; padding:10px; }
.pinmap { width:100%; height:min(460px,60vh); border:1px solid var(--mist); cursor:crosshair; background:#cfdbe0 !important; position:relative; }
[data-theme="dark"] .pinmap { background:#1b242b !important; }
.pinmap.leaflet-container { cursor:crosshair; }
.maperr { position:absolute; left:10px; bottom:26px; z-index:500; background:var(--white); border:1px solid var(--mist); padding:4px 8px; font-family:var(--mono); font-size:0.6rem; }
.pinmap .leaflet-tooltip { font-family:var(--display); font-weight:700; }
.reveal.solo { grid-template-columns:1fr; }
.done .big small { font-size:1rem; font-weight:400; color:var(--stone); }

/* ---------- Flag of the Day ---------- */
.guessbox { position:relative; width:min(460px,100%); }
.guessbox input { width:100%; background:var(--cream); color:var(--ink); border:1px solid var(--ink); padding:11px 14px; font-family:var(--serif); font-size:1rem; }
.guessbox input::placeholder { color:var(--stone); font-style:italic; }
.sugg { list-style:none; position:absolute; left:0; right:0; top:100%; background:var(--white); border:1px solid var(--mist); border-top:none; z-index:50; max-height:320px; overflow:auto; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.sugg:empty { display:none; }
.sugg li { padding:8px 14px; cursor:pointer; font-family:var(--display); font-weight:700; font-size:0.95rem; }
.sugg li small { margin-left:8px; font-family:var(--mono); font-weight:400; font-size:0.56rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone); }
.sugg li[aria-selected=true], .sugg li:hover { background:var(--cream); }
.tries { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-top:8px; text-align:center; }
.guesses { list-style:none; width:min(460px,100%); margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.g { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--cream); border:1px solid var(--mist); border-left:3px solid var(--wrong); padding:8px 12px; }
.g span { font-family:var(--display); font-weight:700; }
.g small { display:block; font-family:var(--mono); font-weight:400; font-size:0.54rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone); }
.g b { font-family:var(--mono); font-weight:400; font-size:0.8rem; white-space:nowrap; }
.g.win { border-left-color:var(--right); }
.daily .next-row { gap:10px; flex-wrap:wrap; }
.tomorrow { text-align:center; font-style:italic; color:var(--stone); font-size:0.85rem; margin-top:10px; }

/* ---------- all flags ---------- */
.picker-row { display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--mist); }
.picker-row select, .picker-row input { background:var(--cream); color:var(--ink); border:1px solid var(--mist); padding:7px 10px; font-family:var(--serif); font-size:0.88rem; }
.picker-row input { flex:1; min-width:160px; }
.fb { padding:10px 14px; display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--mist); }
.ch { background:var(--cream); border:1px solid var(--mist); padding:5px 10px; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone); cursor:pointer; }
.ch[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:var(--parchment); }
.ch .n { opacity:.6; margin-left:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; padding:14px; }
.tile { background:var(--cream); border:1px solid var(--mist); padding:10px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:6px; }
.tile:hover { border-color:var(--ink); }
.tile .fw { aspect-ratio:5/3; display:flex; align-items:center; justify-content:center; background:var(--white); }
.tile img { max-width:92%; max-height:88%; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.tile span { font-family:var(--display); font-weight:700; font-size:0.92rem; line-height:1.2; }
.tile small { font-family:var(--mono); font-size:0.54rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone); }
.tile .got { color:var(--right); }

/* a picture still on its way from Commons */
.recap .noimg, .tile .noimg { aspect-ratio:5/3; height:auto; min-height:0; font-size:0.5rem; text-align:center; }
.noimg { width:100%; height:100%; min-height:60px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); border:1px dashed var(--mist); }

/* ---------- drawer ---------- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s; z-index:900; }
.overlay.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); width:min(760px,100%); max-height:92vh; overflow:auto; background:var(--white); border:1px solid var(--mist); border-top:4px solid var(--gold); z-index:901; transition:transform .25s ease; padding:20px 18px 24px; }
.drawer.open { transform:translate(-50%,0); visibility:visible; }
.drawer:not(.open) { visibility:hidden; transition:transform .25s ease, visibility 0s .25s; }
.drawer-x { position:absolute; top:10px; right:12px; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--stone); }
.drawer .bigflag { display:flex; justify-content:center; padding:6px 0 4px; }
.drawer .bigflag img { max-height:170px; max-width:min(320px,90%); box-shadow:0 4px 16px rgba(0,0,0,.18); }
.drawer .reveal { margin:14px auto 0; }
.about-page h3 { font-family:var(--display); font-size:1.1rem; margin:14px 0 4px; }
.about-page p, .about-page li { font-size:0.9rem; line-height:1.6; }
.about-page ul { padding-left:20px; }

/* ---------- footer ---------- */
.site-footer { width:100%; margin-top:40px; background:var(--ink); color:var(--parchment); }
[data-theme="dark"] .site-footer { background:#0f0d0a; }
.footer-inner { max-width:900px; margin:0 auto; padding:26px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-name { font-family:var(--display); font-weight:900; font-size:1.15rem; }
.footer-tagline { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.04em; opacity:.75; margin-top:4px; }
.footer-links { display:flex; gap:18px; }
.footer-links a { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--parchment); opacity:.75; text-decoration:none; }

.leaflet-container { font-family:var(--mono); background:var(--cream); }