/* style.css — all styling */
:root{
  --bg:#05060d; --fg:#e8edf7; --muted:#8b97b6;
  --panel:rgba(16,22,40,0.72); --border:rgba(120,140,190,0.18);
  --accent:#ffb347; --accent2:#6aa6ff;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#e9eef7; --fg:#15203a; --muted:#566187;
  --panel:rgba(255,255,255,0.82); --border:rgba(60,80,130,0.2);
  --accent:#c9711f; --accent2:#2a6fc9;
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(106,166,255,0.12), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(255,179,71,0.10), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.stage{
  display:flex; flex-direction:column; height:100vh; height:100dvh;
  max-width:1100px; margin:0 auto; padding:14px; gap:10px;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:12px;}
.mark{font-size:22px; color:var(--accent2); text-shadow:0 0 14px rgba(106,166,255,0.6);}
.topbar h1{font-size:16px; margin:0; letter-spacing:.3px; font-weight:650;}
.sub{margin:0; font-size:11.5px; color:var(--muted);}
.controls{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  appearance:none; border:1px solid var(--border); background:rgba(255,255,255,0.04);
  color:var(--fg); font:600 12px system-ui; padding:8px 13px; border-radius:999px;
  cursor:pointer; transition:transform .12s ease, background .18s, border-color .18s;
  touch-action:manipulation;
}
.chip:hover{background:rgba(255,255,255,0.1); transform:translateY(-1px);}
.chip:active{transform:translateY(0);}
.chip.on{background:var(--accent); color:#2a1a05; border-color:transparent;}
.chip.ghost{background:transparent;}
html[data-theme="light"] .chip{background:rgba(0,0,0,0.04);}

.globe-wrap{
  position:relative; flex:1; min-height:0; border-radius:20px;
  border:1px solid var(--border); background:var(--panel); overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
}
#globe{display:block; width:100%; height:100%; touch-action:none;}
.hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  font-size:11.5px; color:var(--muted); background:rgba(8,12,24,0.55);
  padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  transition:opacity .5s ease; pointer-events:none;
}
.hint.fade{opacity:0;}
.legend{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  font-size:11.5px; color:var(--muted); padding:2px 4px;
}
.legend b{color:var(--accent); font-weight:650;}
@media (max-width:480px){
  .topbar h1{font-size:14px;} .sub{display:none;}
  .chip{padding:7px 10px; font-size:11px;}
  .legend{font-size:10.5px; gap:10px;}
}