:root{
  --paper:#f3ead6; --paper2:#efe3c9; --ink:#2c2318; --muted:#8a755a;
  --line:#e2d3b4; --ocean:#dbe4e0; --forest:#2a3b2e; --fire:#d9662a; --gold:#c9982f;
  --shadow:0 14px 40px rgba(58,42,20,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Inter",-apple-system,system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 70% -10%, #f7f0df, transparent 60%),
    var(--paper);
  -webkit-tap-highlight-color:transparent; overflow:hidden;
}
h1{font-family:"Fraunces",Georgia,serif; font-weight:600; margin:0}
.mark{color:var(--fire)}

/* header */
header{
  position:fixed; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; gap:18px;
  justify-content:space-between; padding:14px 22px;
  background:linear-gradient(180deg,rgba(243,234,214,.96),rgba(243,234,214,.82)); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{font-size:26px}
header h1{font-size:20px; letter-spacing:.2px}
header .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.stats{display:flex; gap:10px}
.stat{background:var(--paper2); border:1px solid var(--line); border-radius:12px; padding:8px 13px; text-align:center; min-width:74px}
.stat .n{font-family:"Fraunces",serif; font-size:22px; font-weight:700; line-height:1}
.stat .l{font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-top:3px}

/* map */
main{position:absolute; inset:0}
#map{position:absolute; inset:0}
#svg{width:100%; height:100%; display:block; cursor:grab}
#svg:active{cursor:grabbing}
.country{stroke:var(--paper); stroke-width:.5px}
.ocean{fill:var(--ocean)}
.lan{stroke:#fff; stroke-width:1.1px; cursor:pointer; transition:filter .15s,opacity .15s}
.lan:hover{filter:brightness(1.08) saturate(1.1)}
.lan.dim{opacity:.28}
.count-badge{font-family:"Fraunces",serif; font-weight:700; fill:#fff; pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:3px; stroke-linejoin:round}
.ort-dot{fill:var(--fire); stroke:rgba(110,38,12,.55); opacity:.85}
/* screen-space pill labels — crisp at any zoom */
.ort-lab{pointer-events:none}
.ort-pill{fill:#f7f0df; stroke:rgba(44,35,24,.14); stroke-width:1; filter:url(#pillsh)}
.ort-pill-text{font-family:"Inter",sans-serif; font-weight:600; font-size:12.5px; fill:#2c2318}
.ort-pill-text .cnt{fill:var(--fire); font-weight:700}
.ort-leader{stroke:rgba(44,35,24,.35); stroke-width:1}
.tip{position:fixed; z-index:20; pointer-events:none; background:var(--forest); color:#f3ead6; padding:6px 10px; border-radius:8px; font-size:12.5px; box-shadow:var(--shadow); opacity:0; transition:opacity .12s; white-space:nowrap}
.tip.on{opacity:1}
.tip b{font-family:"Fraunces",serif}

/* controls */
.controls{position:fixed; left:22px; bottom:22px; z-index:7; display:flex; gap:9px; flex-wrap:wrap; max-width:70vw}
.ctl{
  font-family:"Inter",sans-serif; font-size:13.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:var(--paper2); color:var(--ink);
  padding:10px 15px; border-radius:11px; box-shadow:0 4px 14px rgba(58,42,20,.1);
}
.ctl:hover{background:#fff}
.ctl.accent{background:var(--fire); color:#fff; border-color:var(--fire)}
.ctl.inzoomat{background:var(--forest); color:#f3ead6; border-color:var(--forest)}
.ctl.on{outline:2px solid var(--gold); outline-offset:1px}

/* legend */
.legend{position:fixed; right:22px; bottom:22px; z-index:7; background:rgba(243,234,214,.94);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); max-width:230px; font-size:12.5px}
.legend h4{margin:0 0 8px; font-family:"Fraunces",serif; font-size:13px}
.legend .row{display:flex; align-items:center; gap:8px; margin:3px 0}
.legend .sw{width:13px; height:13px; border-radius:3px; flex:0 0 auto}
.legend .muted{color:var(--muted); margin-top:8px; font-size:11.5px}

/* login */
#login{position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(900px 500px at 50% 20%, #35492f, #223221)}
#login .box{max-width:340px; width:100%; text-align:center; color:#f3ead6}
#login .mark{font-size:44px}
#login h1{color:#f7f0df; font-size:26px; margin:6px 0 2px}
#login p{color:#c9c0a6; margin:0 0 18px; font-size:14px}
.field{width:100%; padding:13px 14px; border-radius:12px; border:1px solid #4a5c40; background:#1c2a1b; color:#f3ead6; font-size:16px; font-family:inherit}
.field:focus{outline:none; border-color:var(--gold)}
#pw-err{color:#f0a; min-height:18px; font-size:13px; margin:8px 0}
#pw-btn{width:100%; margin-top:4px; padding:13px; border:0; border-radius:12px; background:var(--fire); color:#fff; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:40; background:var(--forest); color:#f3ead6;
  padding:13px 20px; border-radius:12px; font-weight:600; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; max-width:90vw; text-align:center}
.toast.show{opacity:1}
.hidden{display:none!important}
@media (max-width:720px){
  header{flex-direction:column; align-items:flex-start; gap:8px; padding:10px 14px}
  .stats{flex-wrap:wrap}
  .controls{left:12px; bottom:12px; max-width:92vw}
  .legend{display:none}
}