/* World Capitals — modern skin. Loaded after styles.css; still driven by the country-theme variables. */
:root { --r-xl: 36px; --r-lg: 26px; --hair: color-mix(in srgb, var(--text-main) 8%, transparent);
  --soft: 0 1px 1px rgba(0,0,0,.03), 0 14px 32px -18px color-mix(in srgb, var(--ink) 45%, transparent);
 }
body { background:
  radial-gradient(90% 38% at 105% -8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%),
  radial-gradient(70% 30% at -10% 4%, color-mix(in srgb, var(--sun, var(--accent)) 18%, transparent), transparent 65%), var(--bg-base);
  background-attachment: fixed; }

/* header: floats on the page instead of a bar */
.app-header { background: linear-gradient(var(--bg-base) 55%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding-bottom: 14px; }
.brand-pill .mark { font-size: 1.45rem; font-weight: 800; letter-spacing: -.035em; }
.home-btn { background: var(--bg-surface); box-shadow: var(--soft); border-radius: 50%; }
.due-pill { box-shadow: 0 10px 22px -10px rgba(225,29,72,.7); }

/* surfaces */
.panel, .stat, .list-row, .opt, .input, .search { border: 1px solid var(--hair); box-shadow: var(--soft); }
.panel { border-radius: var(--r-lg); padding: 20px; }
h2 { font-size: 1.5rem; letter-spacing: -.03em; }

/* dock navigation */
.bottom-nav { left: 50%; right: auto; width: min(400px, calc(100% - 24px)); transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 6px; gap: 2px; border: 1px solid var(--hair); border-radius: 28px;
  background: color-mix(in srgb, var(--bg-surface) 74%, transparent); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.4); }
.bottom-nav button { border-radius: 22px; padding: 9px 2px 7px; gap: 3px; transition: background .2s, color .2s; }
.bottom-nav .ni { display: flex; filter: none; opacity: .8; } .bottom-nav .ni svg { width: 22px; height: 22px; }
.bottom-nav button.active { background: var(--primary); color: #fff; box-shadow: 0 8px 18px -8px var(--primary); }
.bottom-nav button.active .ni { transform: none; opacity: 1; }
.app-shell { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* buttons & chips: pills */
.btn { border-radius: 999px; border-width: 1px; border-color: var(--hair); box-shadow: var(--soft); }
.btn-primary { box-shadow: 0 14px 26px -12px var(--primary); }
.btn-sm { border-radius: 999px; }
.chip { border-radius: 999px; border-color: var(--hair); background: color-mix(in srgb, var(--bg-surface) 80%, transparent); }
.seg, .st-mode { border-radius: 999px; } .seg button, .st-mode-btn { border-radius: 999px; }
.input, .search { border-radius: 999px; padding-inline: 20px; }
.tag { border-radius: 8px; }

/* home hero */
.hm-hero { border-radius: var(--r-xl); padding: 26px 22px 22px; box-shadow: 0 30px 50px -28px var(--ink); }
.hm-ring { width: 112px; height: 112px; } .hm-ring-num { font-size: 1.75rem; }
.hm-hero-status { font-size: 1.7rem; line-height: 1.1; letter-spacing: -.035em; }
.btn-hero { border-radius: 999px; padding: 16px; font-size: 1.05rem; box-shadow: 0 14px 28px -14px rgba(0,0,0,.6); transition: transform .12s; }
.btn-hero:active { transform: scale(.98); }

/* stats as a bento row: the streak tile leads */
.stats { grid-template-columns: 1.35fr 1fr 1fr; }
.stat { border-radius: var(--r-lg); padding: 16px 10px; }
.stat:first-child { background: color-mix(in srgb, var(--sun, var(--accent)) 24%, var(--bg-surface)); } .stat:first-child b { font-size: 1.9rem; }
.stat b { letter-spacing: -.03em; }
.bar { height: 8px; }

/* flashcard */
.fc { min-height: 0; height: clamp(210px, calc(100dvh - 430px), 390px); } /* the card shrinks on short screens so Explore + the rating buttons stay visible */
.fc-face { border-radius: var(--r-xl); gap: 8px; padding: 28px; }
.fc-front { border-color: var(--hair); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--primary) 9%, var(--bg-surface)), var(--bg-surface)); }
.fc-back { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 50px -26px var(--ink); }
.fc-flag { font-size: 6.2rem; filter: drop-shadow(0 12px 14px rgba(0,0,0,.22)); }
.fc-label { text-transform: none; letter-spacing: 0; font-size: .95rem; opacity: .75; }
.fc-big { font-size: 2.6rem; letter-spacing: -.045em; }
.icon-btn { border-radius: 50%; width: 42px; height: 42px; backdrop-filter: blur(8px); }
.rate { gap: 10px; } .rate button { border-radius: 22px; padding: 14px 4px; box-shadow: 0 12px 20px -12px rgba(0,0,0,.45); }

/* quiz */
.opt { border-radius: var(--r-lg); padding: 16px 18px; border-width: 1px; }
.opt .k { border-radius: 50%; width: 30px; height: 30px; }
.q-card .fc-flag { font-size: 5rem; } .q-card .fc-big { font-size: 2.1rem; }
.list-row { border-radius: 22px; } .sheet { border-radius: 34px 34px 0 0; }
.sheet-back { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }


/* Explore sheet */
.ai-back { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,10,28,.5); backdrop-filter: blur(6px); animation: fadeb .2s ease; }
.ai-sheet { width: 100%; max-width: 560px; height: min(86dvh, 720px); display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-main); border-radius: 34px 34px 0 0; animation: up .25s ease; }
.ai-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; }
.ai-head b { display: block; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 1.15rem; letter-spacing: -.02em; } .ai-head span.s { font-size: .8rem; color: var(--text-muted); }
.ai-head .grow { flex: 1; min-width: 0; }
.ai-log { flex: 1; overflow-y: auto; padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ai-msg { max-width: 88%; padding: 11px 15px; border-radius: 20px; line-height: 1.45; font-size: .98rem; word-wrap: break-word; }
.ai-msg.err { align-self: stretch; max-width: none; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-weight: 600; font-size: .9rem; }
.ai-dots { display: inline-flex; gap: 4px; padding: 4px 0; } .ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: aidot 1s infinite ease-in-out; } .ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 18px 10px; scrollbar-width: none; } .ai-chips::-webkit-scrollbar { display: none; } .ai-chips .chip { flex: 0 0 auto; white-space: nowrap; }

/* Explore: capital of the day, passport, country profile */
.lp-daily { width: 100%; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 16px 18px; text-align: left; border: 1px solid var(--hair); border-radius: var(--r-xl); color: var(--text-main);
  background: linear-gradient(120deg, color-mix(in srgb, var(--sun, var(--accent)) 26%, var(--bg-surface)), var(--bg-surface) 70%); box-shadow: var(--soft); }
.lp-dflag { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); }
.lp-dt small { display: block; font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.lp-dt b { display: block; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 1.6rem; letter-spacing: -.035em; line-height: 1.1; }
.lp-dt span { font-size: .88rem; color: var(--text-muted); }
.lp-stamps { display: flex; gap: 8px; flex-wrap: wrap; font-size: 1.7rem; }
.lp-hflag { font-size: 2.6rem; line-height: 1; }
.lp-body { font-size: 1.02rem; }
.lp-text { line-height: 1.6; font-size: 1.04rem; }
.lp-stamp { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: .88rem; color: var(--secondary); background: color-mix(in srgb, var(--secondary) 16%, transparent); animation: stampin .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes stampin { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.lp-foot { padding: 8px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hair); }
#admin-link[hidden] { display: none; }

/* Urdu: right-to-left, Nastaliq needs generous line height */
.lp-text[lang="ur"], .ai-msg[lang="ur"] { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; line-height: 2.3; font-size: 1.04rem; text-align: right; }
.chip.on { background: var(--primary); color: #fff; border-color: transparent; }

/* Map quiz: unlabelled outline / regional map, the yellow pin is the capital */
.wm { max-width: 460px; margin: 0 auto; }
.wm-svg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; border-radius: 22px; background: color-mix(in srgb, var(--primary) 13%, var(--bg-surface)); }
.wm-svg.sq { aspect-ratio: 1; max-width: 300px; margin: 0 auto; }
.wm-svg .land { fill: color-mix(in srgb, var(--text-main) 14%, var(--bg-surface)); stroke: var(--bg-surface); stroke-width: .6px; }
.wm-svg .hl { fill: var(--primary); stroke: var(--bg-surface); stroke-width: .8px; }
.wm-svg use.hl { stroke: var(--primary); stroke-width: 1.6px; } /* keeps tiny countries visible */
.wm-svg .halo { fill: rgba(255,196,0,.38); }
.wm-svg .pin { fill: #FFC400; stroke: #fff; stroke-width: 2px; }
.q-card .wm { margin-bottom: 10px; }

/* Explore: the big, golden call to action (same gold as the map pin) */
.explore-cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; margin: 10px 0 10px; padding: 12px 14px; border: 0; border-radius: 24px; text-align: left; cursor: pointer; color: #1D1500;
  background: linear-gradient(135deg, #FFD43B, #FF9F1C); box-shadow: 0 18px 30px -14px rgba(255,159,28,.85), inset 0 1px 0 rgba(255,255,255,.55); animation: ctaPop .45s cubic-bezier(.3,1.5,.5,1); transition: transform .15s; }
.explore-cta:active { transform: scale(.98); }
.explore-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%); transform: translateX(-120%); animation: ctaShine 1.1s .5s ease-out 1 forwards; pointer-events: none; }
.explore-cta .ex-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: rgba(29,21,0,.13); }
.explore-cta .ex-t { flex: 1; min-width: 0; line-height: 1.2; }
.explore-cta .ex-t b { display: block; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.explore-cta .ex-t small { display: block; margin-top: 2px; font-size: .86rem; font-weight: 600; opacity: .78; }
.explore-cta .ex-go { flex: 0 0 auto; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: rgba(29,21,0,.14); }
.stack .explore-cta { margin: 0; }
@keyframes ctaPop { from { transform: scale(.92); opacity: 0; } }
@keyframes ctaShine { to { transform: translateX(120%); } }

/* Explore profile: map block above the story */
.wm-ph { aspect-ratio: 5 / 3; max-width: 460px; margin: 0 auto; border-radius: 22px; background: var(--progress-bg); }
.lp-mapbar { max-width: 460px; margin: 8px auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-mapbar .chip { padding: 5px 12px; font-size: .82rem; }
#lp-map .wm-svg { box-shadow: var(--soft); }

/* Small / short phones: tighter card, compact Explore button */
@media (max-height: 740px), (max-width: 360px) {
  .fc-face { padding: 14px; gap: 4px; border-radius: 28px; }
  .fc-flag { font-size: 3.4rem; } .fc-big { font-size: 1.85rem; } .fc-label { font-size: .85rem; }
  .fc-note { margin-top: 4px; font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fc-scene { margin: 2px 0 8px; } .fc-hint { display: none; }
  .explore-cta { padding: 9px 12px; gap: 10px; border-radius: 20px; margin: 8px 0; }
  .explore-cta .ex-ic { width: 38px; height: 38px; font-size: 1.3rem; border-radius: 13px; }
  .explore-cta .ex-t b { font-size: 1.05rem; } .explore-cta .ex-t small { display: none; } .explore-cta .ex-go { width: 26px; height: 26px; }
  .rate button { padding: 8px 4px; border-radius: 18px; } .rate { gap: 6px; }
  .sess-top { margin-bottom: 4px; }
}
@media (max-height: 620px) { .fc-flag { font-size: 2.6rem; } .fc-big { font-size: 1.55rem; } .fc { height: clamp(170px, calc(100dvh - 400px), 390px); } }

/* Atoll nations (Maldives, Kiribati, Tonga...): islands are only a few pixels wide, so draw them with a thick same-colour edge */
.wm-svg .hl.s { stroke: var(--primary); stroke-width: 3px; stroke-linejoin: round; }