*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#080c14;--accent:#00ff88;--accent2:#ff6b35;--blue:#3b82f6;
  --text:#e8e8f0;--muted:#555570;--border:#2a2a3a;
  --pixel:'Press Start 2P',cursive;--mono:'Share Tech Mono',monospace}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--mono)}
#map-svg{width:100%;height:100vh;display:block;cursor:grab}
#map-svg:active{cursor:grabbing}
.country{stroke:#1a3040;stroke-width:0.4px;transition:opacity .12s}
.country:hover{opacity:.75;stroke-width:.9px}

/* STATSBAR */
.statsbar{position:fixed;top:0;left:0;right:0;background:rgba(8,12,20,.97);border-bottom:1px solid var(--border);padding:.55rem 1.5rem;display:flex;align-items:center;gap:1.8rem;z-index:100;pointer-events:none}
.statsbar-logo{font-family:var(--pixel);font-size:.48rem;color:var(--accent);white-space:nowrap}
.statsbar-logo span{color:var(--accent2)}
.stat-item{font-family:var(--pixel);font-size:.34rem;color:var(--muted);white-space:nowrap}
.stat-item b{color:var(--accent)}
.hint{font-size:.54rem;color:var(--muted);margin-left:auto;white-space:nowrap}

/* CONTROLS */
.controls{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.4rem;z-index:100}
.ctrl-btn{width:38px;height:38px;background:rgba(8,12,20,.92);border:1px solid var(--accent);color:var(--accent);font-family:var(--pixel);font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ctrl-btn:hover{background:var(--accent);color:var(--bg)}
.ctrl-btn.small-text{font-size:.26rem}

/* LEGEND */
.legend{position:fixed;bottom:1.5rem;left:1.5rem;background:rgba(8,12,20,.96);border:1px solid var(--border);padding:.85rem 1.1rem;z-index:100}
.legend-title{font-family:var(--pixel);font-size:.3rem;color:var(--accent);letter-spacing:.1em;margin-bottom:.65rem}
.legend-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-size:.58rem;color:var(--muted)}
.leg-sw{width:13px;height:13px;border-radius:2px;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}
.leg-sw.bg-none{background:#0f1c2a}
.leg-sw.bg-visited{background:#1e3a6e}
.leg-sw.bg-1{background:#1a5c30}
.leg-sw.bg-2{background:#2d8a47}
.leg-sw.bg-4{background:#b45309}
.leg-sw.bg-7{background:#dc2626}
.leg-sw.bg-16{background:#00ff88}
.legend-sep{height:1px;background:var(--border);margin:.45rem 0}

/* POPUP */
#popup{position:fixed;z-index:200;display:none;pointer-events:none}
.popup-inner{background:rgba(8,12,20,.98);border:2px solid #8b5cf6;padding:1.05rem;width:320px;pointer-events:all;position:relative;text-align:center}
.popup-close{position:absolute;top:.35rem;right:.45rem;background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--pixel);font-size:.42rem}
.popup-close:hover{color:var(--accent2)}
.popup-img{width:100%;height:110px;object-fit:contain;background:#1a1a24;padding:.35rem;margin-bottom:.75rem;display:block}
.popup-noimg{width:100%;height:90px;background:#1a1a24;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:.75rem}
.popup-name{font-family:var(--pixel);font-size:.85rem;color:var(--text);line-height:1.4;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em;word-break:break-word}
.popup-player{font-family:var(--mono);font-size:.8rem;color:var(--accent);margin-bottom:.35rem;line-height:1.4;text-align:left;word-break:break-word}
.popup-meta{font-family:var(--mono);font-size:.68rem;color:var(--muted);line-height:1.45;display:block;text-align:left;word-break:break-word}
.popup-meta span{flex:1 1 48%;min-width:calc(50% - .2rem)}
.popup-badge{display:inline-block;border:1px solid var(--border);padding:.1rem .42rem;font-family:var(--pixel);font-size:.32rem;color:var(--accent2);margin-top:.35rem}
.popup-star{position:absolute;top:.6rem;right:.6rem;font-size:1.45rem}
.popup-label{display:block;font-family:var(--pixel);font-size:.32rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.45rem}
.popup-inner.legendary{background:rgba(109,40,217,.95);border-color:#7c3aed}
.popup-inner.legendary .popup-player,.popup-inner.legendary .popup-meta{color:#f8f8ff}
.popup-inner.magic .popup-player,.popup-inner.magic .popup-meta{color:#f8f8ff}
.popup-inner.rare .popup-player,.popup-inner.rare .popup-meta{color:#000}
.popup-inner.common .popup-player,.popup-inner.common .popup-meta{color:#000}
.popup-inner.rare{background:rgba(217,119,6,.95);border-color:#c2410c;color:#000}
.popup-inner.rare .popup-name,.popup-inner.rare .popup-player,.popup-inner.rare .popup-meta{color:#000}
.popup-inner.magic{background:rgba(37,99,235,.95);border-color:#2563eb}
.popup-inner.common{background:rgba(148,163,184,.95);border-color:#64748b;color:#000}
.popup-inner.common .popup-name,.popup-inner.common .popup-player,.popup-inner.common .popup-meta{color:#000}

/* COUNTRY TOOLTIP */
#ctip{position:fixed;background:rgba(8,12,20,.95);border:1px solid var(--border);padding:.55rem .9rem;font-family:var(--pixel);font-size:.42rem;color:var(--text);pointer-events:none;display:none;z-index:150;line-height:1.5;white-space:nowrap}

/* LOADING */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;gap:1.5rem}
#loading p{font-family:var(--pixel);font-size:.55rem;color:var(--accent)}
#loading span{font-size:.6rem;color:var(--muted)}
.spinner{width:30px;height:30px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}