:root{
  --ink:#14213f; --muted:#6f778a; --paper:#fffdf8; --panel:#ffffff;
  --unsolved:#ffffff; --unsolved-line:#18325d; --half:#00a3e0; --done:#0d47a1;
  --coral:#ff6b5f; --yellow:#ffd447; --purple:#6558ff; --teal:#00c2b8; --darkstar:#1f1534;
  --line:#d8e2ee; --shadow:0 18px 50px rgba(22,34,59,.18);
  font-family: ui-rounded, "Trebuchet MS", "Avenir Next", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html,body{
  height:100%; margin:0;
  background:linear-gradient(155deg,#d8f6ff 0%,#fff1a8 52%,#ffcadc 100%);
  color:var(--ink); overflow:hidden;
}
button,a{font:inherit}
.app-shell{height:100dvh; width:100%; display:grid; grid-template-rows:auto 1fr auto; position:relative; overflow:hidden}
.topbar{z-index:20; display:flex; align-items:center; gap:.7rem; padding:calc(env(safe-area-inset-top) + .55rem) .8rem .4rem; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.58)); backdrop-filter:blur(14px)}
.topbar h2{font-size:1.05rem; margin:0; letter-spacing:.02em}
.topbar p{font-size:.78rem; margin:.05rem 0 0; color:var(--muted)}
.hud{margin-left:auto; display:flex; gap:.5rem; align-items:center; font-weight:900}
.timer{background:var(--coral); color:#fff; padding:.3rem .55rem; border-radius:10px; min-width:3.6rem; text-align:center}
.hidden{display:none!important}

.icon-btn,.mini-btn,.legend-tab,.pill,.choice,.share-grid a,.share-copy,.modal-x,.text-link{border-radius:10px}
.icon-btn,.mini-btn,.legend-tab{border:0; background:#fff; color:var(--ink); box-shadow:0 7px 20px rgba(23,34,59,.14); cursor:pointer; font-weight:900}
.icon-btn{width:2.25rem;height:2.25rem}

.map-stage{position:relative; min-height:0; display:flex; align-items:center; justify-content:center; padding:.25rem .5rem 0;
  background:radial-gradient(circle at 28% 25%,rgba(0,194,184,.18),transparent 35%), radial-gradient(circle at 78% 68%,rgba(255,212,71,.22),transparent 35%);
}
#map{width:min(100%, 900px); height:100%; max-height:calc(100dvh - 12rem); filter:drop-shadow(0 16px 26px rgba(23,34,59,.14)); touch-action:none}
.state{fill:var(--unsolved); stroke:var(--unsolved-line); stroke-width:1.3; vector-effect:non-scaling-stroke; transition:fill .25s ease, opacity .2s ease, stroke .2s ease}
.state.state-half{fill:var(--half); stroke:#0c2550}
.state.state-done{fill:var(--done); stroke:#fff}
.state.active{stroke:#12203b; stroke-width:3.2; filter:url(#softShadow)}
.state.dim{opacity:.42}
.capital-star{font-size:18px; pointer-events:none; text-anchor:middle; dominant-baseline:middle; fill:url(#starGlow); stroke:#7d5d00; stroke-width:1; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); opacity:0; transform-box:fill-box; transform-origin:center}
.capital-star.visible{opacity:1; animation:pop .32s ease-out}
.capital-star.solved{fill:var(--darkstar); stroke:#fff}
@keyframes pop{0%{transform:scale(.25);opacity:0}70%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}

.answer-panel{z-index:25; background:rgba(255,255,255,.96); border-top:1px solid rgba(216,226,238,.75); border-radius:10px 10px 0 0; box-shadow:0 -12px 35px rgba(23,34,59,.12); padding:.75rem .85rem calc(env(safe-area-inset-bottom) + .65rem)}
.prompt{font-weight:650; color:#6d7488; font-size:1.15rem; text-align:center; margin-bottom:.7rem; letter-spacing:.01em}
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem}
.choice{border:0; min-height:3rem; padding:.55rem; background:#fff; color:var(--ink); box-shadow:inset 0 -4px 0 rgba(23,34,59,.09), 0 6px 16px rgba(23,34,59,.1); font-weight:950; cursor:pointer}
.choice:active{transform:translateY(2px)}
.choice.correct{background:#d8ffe1}.choice.wrong{background:#ffe4e4}

.loading{position:absolute; z-index:10; background:#fff; padding:.7rem 1rem; border-radius:10px; box-shadow:var(--shadow); font-weight:900}
.toast{position:absolute; z-index:30; left:50%; top:1rem; transform:translateX(-50%) translateY(-8px); max-width:min(92vw,520px); background:#fff; border:3px solid var(--yellow); border-radius:10px; padding:.75rem .95rem; box-shadow:var(--shadow); font-weight:900; opacity:0; pointer-events:none; text-align:center}
.toast.show{animation:toast 3s ease forwards}
@keyframes toast{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}12%,82%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}

.splash{
  position:absolute; inset:0; z-index:100; display:grid; place-items:center; padding:1rem;
  background:
    radial-gradient(circle at 18% 16%,#fff173 0 11%,transparent 12%),
    radial-gradient(circle at 83% 16%,#4be4ff 0 13%,transparent 14%),
    radial-gradient(circle at 72% 84%,#ff7ba7 0 15%,transparent 16%),
    linear-gradient(145deg,#4548ff 0%,#00c2b8 50%,#ffd447 100%);
  transition:opacity .35s ease;
}
.splash.hidden-splash{opacity:0; pointer-events:none}
.splash-card{width:min(92vw,480px); background:rgba(255,255,255,.92); border:3px solid rgba(255,255,255,.82); border-radius:10px; box-shadow:var(--shadow); padding:1.35rem; text-align:center}
.splash-card:before{content:"★"; display:block; width:3.1rem; height:3.1rem; margin:0 auto .55rem; line-height:3.1rem; border-radius:10px; background:linear-gradient(135deg,var(--yellow),#ff8ab4); color:#17223b; font-size:1.7rem; box-shadow:0 10px 24px rgba(23,34,59,.16)}
.splash-result{background:#eef7ff; border:2px solid #cfe6ff; padding:.65rem .75rem; margin-bottom:.75rem; font-weight:950; color:var(--ink); border-radius:10px}
h1{font-size:clamp(2.2rem,10vw,4.2rem); line-height:.92; margin:.35rem 0 .45rem; letter-spacing:-.06em}
h1 span{font-size:.62em; letter-spacing:-.025em}
.subtitle{font-size:1.05rem; font-weight:850; color:#34415f; margin:.35rem 0}
.game-subtitle{font-size:clamp(1.05rem,4.5vw,1.55rem); color:#14213f; font-weight:950; letter-spacing:.01em}
.splash-actions{display:grid; gap:.6rem; grid-template-columns:1fr 1fr; margin-top:1rem}
.splash-actions .race{grid-column:1 / -1}
.pill{border:0; padding:.85rem 1rem; cursor:pointer; font-weight:950; box-shadow:inset 0 -5px 0 rgba(0,0,0,.13), 0 8px 18px rgba(23,34,59,.15)}
.primary{background:var(--purple); color:#fff}.secondary{background:#fff;color:var(--ink)}.race{background:var(--coral); color:#fff}.wide{width:100%; margin-top:.8rem}
.splash-links{display:flex; gap:.65rem; justify-content:center; align-items:center; margin-top:1rem}
.text-link{border:0; background:#fff; color:var(--ink); font-weight:950; cursor:pointer; padding:.55rem .85rem; box-shadow:0 7px 18px rgba(23,34,59,.12)}
.share-link{background:#17223b;color:#fff}

.modal-backdrop{position:absolute; inset:0; z-index:140; display:grid; place-items:center; background:rgba(23,34,59,.45); padding:1rem}
.modal{position:relative; width:min(92vw,560px); max-height:86dvh; overflow:auto; background:var(--paper); border-radius:10px; box-shadow:var(--shadow); padding:1.25rem}
.modal h2{margin-top:0}.modal-x{position:absolute; right:.7rem; top:.6rem; border:0; width:2.2rem; height:2.2rem; background:#fff; font-weight:950; cursor:pointer}
.source-list{padding-left:1.1rem}.source-list li{margin:.35rem 0}
.share-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin:.8rem 0}
.share-grid a,.share-copy{background:#fff; border:2px solid #e4ecf5; padding:.7rem .35rem; text-align:center; text-decoration:none; color:var(--ink); font-weight:950; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; align-items:center; justify-content:center; min-height:5.1rem}
.share-icon{width:2rem;height:2rem;border-radius:10px;display:grid;place-items:center;font-weight:950;color:#fff;font-size:1.15rem}
.ig{background:linear-gradient(135deg,#7b3ff2,#ff3e8a,#ffd447)}.fb{background:#1877f2}.snap{background:#fffc00;color:#17223b}.xicon{background:#111}.truth{background:#234a92}.copy{background:#00a3e0}

.legend-tab{position:absolute; z-index:40; right:.75rem; top:5.5rem; padding:.5rem .75rem}
.legend{position:absolute; z-index:45; right:.75rem; top:5.5rem; width:245px; background:#fff; border:2px solid #d5e2f2; border-radius:10px; box-shadow:var(--shadow); padding:.95rem; font-size:.88rem; font-weight:800}
.legend.collapsed{display:none}
.legend h3{margin:.1rem 0 .55rem; font-size:1.05rem}
.legend-close{float:right;border:0;background:transparent;font-size:1.25rem;cursor:pointer;color:var(--ink)}
.legend-stat{display:flex; justify-content:space-between; gap:.75rem; margin:.35rem 0; color:#34415f}
.legend-row{display:flex; align-items:center; gap:.55rem; margin:.45rem 0}
.swatch{display:inline-block;width:1.45rem;height:1.45rem;border-radius:6px;vertical-align:-.15rem}
.not-started{background:#fff;border:3px solid var(--unsolved-line)}.half{background:var(--half);border:3px solid #0c2550}.done{background:var(--done);border:3px solid #fff;box-shadow:0 0 0 2px var(--done)}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1rem}

@media (orientation:landscape) and (max-height:560px){
  .topbar{padding:.3rem .7rem}.answer-panel{padding:.45rem .75rem}.choice{min-height:2.4rem}#map{max-height:calc(100dvh - 8.4rem)}
}
@media (min-width:760px){.choices{grid-template-columns:repeat(3,minmax(0,1fr))}.answer-panel{width:min(760px,100%); justify-self:center; border-radius:10px 10px 0 0}}