/* Charlie's Geography: pastel, SimCity-style theme. Loaded after app.css (forked from History's dark holo look)
   and geo.css, so it only has to restate colours, corners and shadows. Palette for the maps lives in GEO.theme (core.js). */

:root {
  --bg: #cfeafb;
  --ink: #2f4466;
  --muted: #5f7696;
  --dim: #8da0bb;
  --glass: rgba(255, 255, 255, .9);
  --glass-2: rgba(255, 255, 255, .95);
  --line: rgba(90, 135, 190, .30);
  --cyan: #3da5e6;
  --pink: #ff6f9f;
  --gold: #e8a02f;
  --good: #2fb585;
  --bad: #e8627c;
  --era: #3da5e6;
  --hud: "Lexend", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cut: 0px;
  --r: 20px;
  --shadow: 0 10px 26px rgba(70, 115, 170, .22), 0 2px 0 rgba(255, 255, 255, .9) inset;
}
html, body { background: linear-gradient(180deg, #b9e3fa 0%, #dff3ff 52%, #fff4dc 100%) fixed; color: var(--ink); }
a { color: #2a82bd; }
.stars, .scan { display: none; }
.fxbg { background: radial-gradient(900px 520px at 12% -8%, rgba(255, 214, 230, .55), transparent 60%), radial-gradient(900px 600px at 105% 108%, rgba(255, 240, 190, .6), transparent 60%); }
#app.dim #globe { filter: saturate(.95) brightness(1.02); opacity: .9; }

/* ---- cards: white, rounded, soft shadow instead of dark glass with cut corners */
.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid #fff; box-shadow: var(--shadow); }
.cut { clip-path: none !important; border-radius: var(--r); }
.hud, .btn, .tool, .gtab, .chip { letter-spacing: .6px; }

/* ---- buttons: chunky candy */
.btn { clip-path: none; border-radius: 15px; border: 2px solid #fff; border-bottom: 5px solid color-mix(in srgb, var(--era) 55%, #5c7fa8);
  background: color-mix(in srgb, var(--era) 16%, #fff); color: var(--ink); box-shadow: 0 4px 10px rgba(70, 115, 170, .18);
  font-family: var(--hud); letter-spacing: .5px; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--era) 62%, #fff), color-mix(in srgb, var(--era) 90%, #fff)); color: #1d3358; border-color: #fff; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn.ghost { background: #fff; border-color: #fff; border-bottom-color: rgba(90, 135, 190, .35); }
.btn.danger { --era: #e8627c; }
.btn.danger.solid { background: linear-gradient(180deg, #ff9db0, #e8627c); color: #fff; }
.iconbtn { background: #fff; border: 2px solid #fff; box-shadow: 0 3px 0 rgba(90, 135, 190, .28); color: var(--ink); border-radius: 14px; }
.iconbtn:hover { background: #eaf6ff; }
.iconbtn.on { background: #cfeaff; border-color: #fff; }
.iconbtn.hot { background: #ffe3c7; border-color: #fff; box-shadow: 0 3px 0 rgba(240, 150, 80, .45); }
.linkbtn { background: #fff; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(90, 135, 190, .25); color: var(--ink); border-radius: 10px; }
.linkbtn:hover { background: #eaf6ff; }
.badge-n { background: var(--pink); }

/* ---- HUD */
.home { color: var(--muted); } .home:hover { color: var(--ink); }
.logo-sm { background: linear-gradient(90deg, #3da5e6, #ff6f9f); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 1.5px; }
.xpbox { border-radius: 16px; }
.rank { color: #d8861d; }
.xpbar { background: rgba(90, 135, 190, .2); }
.xpbar i { background: linear-gradient(90deg, #7fd0ff, #ff9fc0); box-shadow: none; }
.xpnum { color: var(--ink); }

/* ---- title */
.kicker { color: #2a82bd; letter-spacing: 5px; }
.big-logo { background: linear-gradient(180deg, #4fb0ee 8%, #8a9bff 55%, #ff8fb4); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(255, 255, 255, .95)) drop-shadow(0 12px 18px rgba(70, 115, 170, .35)); animation: none; letter-spacing: 3px; }
.tag { color: var(--muted); }
.press { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(1.06); box-shadow: 0 0 0 8px rgba(255, 255, 255, .55); } }

/* ---- hub / mission tiles */
.camp-head h1 { color: var(--ink); text-shadow: 0 2px 0 #fff; }
.camp-head p { color: var(--muted); }
.tool { background: #fff; color: var(--ink); border: 2px solid #fff; border-radius: 14px; box-shadow: 0 3px 0 rgba(90, 135, 190, .28); backdrop-filter: none; }
.tool:hover { background: #eaf6ff; border-color: #fff; }
.tool.go { background: linear-gradient(180deg, #8fd6ff, #4fb3e8); color: #123456; border-color: #fff; }
.era { background: linear-gradient(150deg, color-mix(in srgb, var(--era) 34%, #fff), #fff 85%); border: 2px solid #fff; border-radius: 22px; color: var(--ink);
  box-shadow: 0 8px 20px rgba(70, 115, 170, .2), inset 0 -4px 0 color-mix(in srgb, var(--era) 40%, transparent); }
.era:hover, .era:focus-visible { filter: none; transform: translateY(-4px) scale(1.01); box-shadow: 0 0 0 3px var(--era), 0 14px 26px rgba(70, 115, 170, .28); }
.era-icon { background: rgba(255, 255, 255, .85); border: 2px solid #fff; border-radius: 18px; box-shadow: 0 3px 8px rgba(70, 115, 170, .18); }
.era-title { color: var(--ink); }
.era-dates, .era .era-meta { color: color-mix(in srgb, var(--era) 55%, #234a78); }
.era-blurb { color: var(--muted); }
.era-bar { background: rgba(90, 135, 190, .18); }
.era-bar i { box-shadow: none; }
.era-stars { color: rgba(90, 135, 190, .5); } .era-stars.some { color: #e8a02f; }
.badge-slot { filter: grayscale(1) opacity(.45); } .badge-slot.won { filter: none; opacity: 1; }
.pager { color: var(--muted); }
.gtab { background: #fff; color: var(--ink); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(90, 135, 190, .25); backdrop-filter: none; }
.gtab:hover { border-color: #bfe0f7; }
.gtab.on { background: linear-gradient(180deg, #9bd9ff, #54b6ea); color: #123456; border-color: #fff; }
.gtab .gn { background: rgba(90, 135, 190, .15); }
.seg { background: #fff; border: 2px solid #fff; border-radius: 14px; box-shadow: 0 3px 0 rgba(90, 135, 190, .25); }
.seg button { color: var(--ink); } .seg button + button { border-left-color: rgba(90, 135, 190, .2); }
.seg button.on { background: #cfeaff; color: #123456; }

/* ---- explorer */
.searchbox input { background: #fff; color: var(--ink); border: 2px solid #fff; border-radius: 14px; box-shadow: 0 3px 0 rgba(90, 135, 190, .25); backdrop-filter: none; }
.searchbox input::placeholder { color: var(--dim); }
.searchbox input:focus { border-color: #8fd0ff; }
.results { background: #fff; border: 2px solid #fff; border-radius: 16px; box-shadow: var(--shadow); }
.results button { color: var(--ink); border-bottom-color: rgba(90, 135, 190, .15); }
.results button:hover, .results button:focus { background: #eaf6ff; }
.results .rflag { background: #eef4fa; }
.chip { color: color-mix(in srgb, var(--era) 55%, #234a78); border-color: color-mix(in srgb, var(--era) 55%, #fff); background: color-mix(in srgb, var(--era) 14%, #fff); border-radius: 8px; }
.flagban { background: linear-gradient(160deg, color-mix(in srgb, var(--era) 40%, #fff), #fff); border: 2px solid #fff; border-radius: 16px; }
.flagban .flag { box-shadow: 0 6px 16px rgba(70, 115, 170, .3), 0 0 0 3px #fff; }
.flagban .nameplate { background: linear-gradient(transparent, rgba(255, 255, 255, .94) 62%); }
.flagban h2 { color: var(--ink); text-shadow: none; }
.flagban .nick { color: color-mix(in srgb, var(--era) 50%, #234a78); }
.flagban .emojiart, .banner .emojiart { filter: drop-shadow(0 4px 8px rgba(70, 115, 170, .3)); }
.flagban .shapeart svg { filter: drop-shadow(0 4px 8px rgba(70, 115, 170, .3)); }
.flagban .shapeart path { stroke: #fff !important; fill-opacity: .9 !important; }
.zh { background: #ffe9f0; border: 1px solid #ffc2d4; }
.zh .py { color: #c24468; } .zh .hz { color: var(--ink); } .zh .en { color: var(--muted); }
.stats-grid .sg { background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 14px; }
.sg small { color: var(--muted); } .sg b { color: var(--ink); } .sg b em { color: var(--muted); }
.sg .rk { background: #fff0c9; color: #a36a05; }
.nbr { background: #fff; color: var(--ink); border: 2px solid #e2eef9; } .nbr:hover { background: #eaf6ff; border-color: #8fd0ff; }
.sec-h { color: #2a82bd; }
.factbox { background: #fff6d6; border: 2px solid #ffe08a; color: var(--ink); border-radius: 16px; }
.factbox b { color: #1d3358; }
.tagpill { background: #eef4fa; color: var(--muted); }
.stampbadge { color: var(--good); border-color: var(--good); }
.emptycard { color: var(--muted); } .emptycard h3 { color: var(--ink); }
.sources, .sources summary { color: var(--muted); }
.mini { color: var(--muted); }
.card-nav, .card-actions { border-top-color: rgba(90, 135, 190, .2); }

/* ---- map pins */
.gm-plabel { background: #fff; color: var(--ink); border: 2px solid var(--c); box-shadow: 0 3px 8px rgba(70, 115, 170, .25); border-radius: 10px; }
.gm-dot { box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(70, 115, 170, .35); color: #fff; }
.gm-dot::after { border-color: var(--c); }
.kind-capital .gm-dot { --c: #f2a93b; }
.gm-stop.current .gm-plabel { background: var(--gold); color: #fff; }
.tapmark { border-color: #fff; box-shadow: 0 0 0 2px rgba(70, 115, 170, .4); }

/* ---- games + quiz */
.boss-title { color: #d8548a; }
.q-text { color: var(--ink); }
.q-dots i { background: rgba(90, 135, 190, .2); } .q-dots i.cur { outline-color: #3da5e6; }
.choice { background: #fff; color: var(--ink); border: 2px solid #e2eef9; border-radius: 14px; box-shadow: 0 3px 0 rgba(90, 135, 190, .18); }
.choice:hover { background: #eaf6ff; border-color: #8fd0ff; }
.choice.ok { background: #d9f7e8; border-color: var(--good); }
.choice.no { background: #ffe0e7; border-color: var(--bad); }
.explain { background: #fff; color: var(--ink); border: 2px solid #e2eef9; border-radius: 14px; }
.explain.ok h4 { color: var(--good); } .explain.no h4 { color: #c77a10; }
.maphint { border-color: #8fd0ff; color: #2a82bd; background: rgba(255, 255, 255, .6); border-radius: 14px; }
.stars3 .off { color: rgba(90, 135, 190, .25); } .stars3 .on { color: #f2b43a; text-shadow: 0 2px 0 #fff; }
.flaglg { box-shadow: 0 8px 20px rgba(70, 115, 170, .3), 0 0 0 3px #fff; }
.flagchoice { background: #fff; border: 2px solid #e2eef9; border-radius: 14px; box-shadow: 0 3px 0 rgba(90, 135, 190, .18); }
.flagchoice:hover { border-color: #8fd0ff; background: #eaf6ff; }
.flagchoice.ok { border-color: var(--good); background: #d9f7e8; } .flagchoice.no { border-color: var(--bad); background: #ffe0e7; }
.hlcard { background: #fff; border: 2px solid #e2eef9; border-radius: 18px; box-shadow: 0 4px 0 rgba(90, 135, 190, .18); }
.hlcard:hover { background: #eaf6ff; border-color: #8fd0ff; }
.hlcard .val { color: #d8861d; } .hlcard.ok { background: #d9f7e8; border-color: var(--good); } .hlcard.no { background: #ffe0e7; border-color: var(--bad); }
.streakline { color: var(--muted); }
.pp-bar { background: rgba(90, 135, 190, .18); } .pp-bar i { background: linear-gradient(90deg, #7fd0ff, #6fdcb0); }

/* ---- passport, records, compare */
.stamp { border-color: rgba(90, 135, 190, .3); background: rgba(255, 255, 255, .6); border-radius: 14px; }
.stamp .nm { color: var(--muted); } .stamp.won .nm { color: var(--ink); } .stamp .sk { color: rgba(90, 135, 190, .35); } .stamp.won .sk { color: #e8a02f; }
.stamp.won { background: color-mix(in srgb, var(--era, #3da5e6) 22%, #fff); border-color: var(--era, #3da5e6); }
.rec { background: #fff; border: 2px solid #e2eef9; border-radius: 14px; }
.rec .n { color: #d8861d; } .rec .v { color: var(--ink); }
.cmp-row h4 { color: #2a82bd; }
.cmp-bar i em { color: #1d3358; }
.cmp-pick select { background: #fff; color: var(--ink); border: 2px solid #e2eef9; border-radius: 12px; }

/* ---- modal, settings, toasts */
#modal { background: rgba(190, 220, 245, .6); backdrop-filter: blur(4px); }
.modal-box h2 { color: var(--ink); } .modal-box p { color: var(--ink); }
.set-row { border-bottom-color: rgba(90, 135, 190, .2); } .set-row small { color: var(--muted); }
.switch { background: #d5e3f0; border-color: #fff; } .switch.on { background: var(--good); }
.set-h { color: #2a82bd; } .set-h.danger { color: var(--bad); }
.stat { background: #fff; border: 2px solid #e2eef9; border-radius: 14px; } .stat b { color: #d8861d; } .stat span { color: var(--muted); }
.confirm { background: #ffe9ee; border-color: var(--bad); }
.toast { background: #fff; color: #b9740f; border: 2px solid #ffd27a; box-shadow: 0 6px 16px rgba(70, 115, 170, .25); }
.toast.cyan { color: #2a82bd; border-color: #9bd6f7; } .toast.pink { color: #d8548a; border-color: #ffb3cd; }
.linkbox { background: #fff; color: var(--ink); border-color: #8fd0ff; }
.box { color: var(--ink); } .fact.box { background: #fff6d6; } .word.box { background: #e6f5ff; }

/* ---- missions: section panel, chapter card, scrubber */
#sec-panel .back, #era-panel .back { color: var(--muted); } #sec-panel .back:hover { color: var(--ink); }
.ep-blurb { color: var(--muted); }
.ep-lvl { background: #fff; border: 2px solid #e2eef9; border-radius: 16px; color: var(--ink); box-shadow: 0 3px 0 rgba(90, 135, 190, .15); }
.ep-lvl:hover { background: color-mix(in srgb, var(--era) 18%, #fff); border-color: var(--era); }
.ep-lvl.next { box-shadow: 0 0 0 3px var(--era), 0 6px 14px rgba(70, 115, 170, .2); }
.ep-lvl .lvn { background: color-mix(in srgb, var(--era) 40%, #fff); color: #1d3358; }
.ep-lvl .lvt small { color: var(--muted); } .ep-lvl .st { color: rgba(90, 135, 190, .3); } .ep-lvl.done .st { color: #f2b43a; text-shadow: none; }
.banner { background: linear-gradient(160deg, color-mix(in srgb, var(--era) 38%, #fff), #fff); border: 2px solid #fff; border-radius: 16px; }
.banner-text { background: linear-gradient(transparent, rgba(255, 255, 255, .94) 60%); }
.ch-title, .beat-page p, .beat-page b { color: var(--ink); text-shadow: none; }
.pu { background: #fff; color: var(--ink); border: 2px solid color-mix(in srgb, var(--era) 45%, #fff); border-radius: 12px; }
.pu:hover { background: color-mix(in srgb, var(--era) 18%, #fff); }
.pu.pu-fact { opacity: .7; } .pu.pu-fact.glow { opacity: 1; box-shadow: 0 0 0 3px #ffe08a; }
.bd { background: rgba(90, 135, 190, .25); } .bd.on { box-shadow: none; }
.rail::before { background: rgba(90, 135, 190, .22); }
.rail .fill { box-shadow: none; background: linear-gradient(90deg, var(--era), #fff); }
.node { background: #fff; border-color: rgba(90, 135, 190, .4); } .node.cur { border-color: #fff; box-shadow: 0 0 0 3px var(--era); }
.node.boss { background: #ffe0ec; border-color: var(--pink); } .node.boss.done { background: #ffe08a; border-color: #fff; }
.scrub-head { color: var(--muted); } .node .tip { color: var(--muted); } .node:hover .tip { color: var(--ink); }
.srclist li { color: var(--ink); }

/* ---- 3D controls */
.t3d-row .t3d-l { color: #2a82bd; } .t3d-row output { color: var(--ink); } .t3d-hint { color: var(--muted); }

@media (prefers-color-scheme: dark) { /* the app stays pastel in dark mode: it is a daytime map */ html, body { color-scheme: light; } }

/* the soft background glows must sit BEHIND the map, or they wash its colours out */
.fxbg { z-index: 0; }
#globe { z-index: 1; }
.banner .ch-title { text-shadow: none; color: var(--ink); }