:root{--bg: #0e1420;--panel: #151d2c;--line: #2a3547;--text: #e6ecf5;--muted: #8a99b0;--accent: #4fd1c5;--green: #2f9e6b;--yellow: #c9a227;--orange: #d1712f;--white: #6b7891}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:#05080f;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden}.hud{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}.hud .title{font-weight:800;letter-spacing:2px;color:var(--accent)}.hud .date{color:var(--muted);font-size:13px;margin-left:auto}.hud .count{font-variant-numeric:tabular-nums;font-weight:700;background:var(--panel);padding:2px 8px;border-radius:999px;border:1px solid var(--line)}.map-wrap{flex:0 0 45%;display:flex;align-items:center;justify-content:center;padding:6px 10px;min-height:0}.map{width:100%;height:100%;display:block}.map-bg{fill:#0a101c;stroke:var(--line);stroke-width:.5}.grid-line{stroke:#26314a;stroke-width:.5;stroke-dasharray:2 2}.dot{fill:var(--accent);stroke:#04121a;stroke-width:.6}.dot-win{fill:#ffd54a}.dot-target{fill:#ff5470;stroke:#fff;stroke-width:.8}.dot-label{fill:var(--text);font-size:6px;font-weight:600;paint-order:stroke;stroke:#05080f;stroke-width:1.4;stroke-linejoin:round}.target-label{fill:#ff9fb0}.panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:8px 12px 12px;gap:8px}.search{flex:0 0 auto;width:100%;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:16px}.search::placeholder{color:var(--muted)}.scroll-area{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.feedback{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}.fb{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--panel);border-left:4px solid var(--line);font-size:14px}.fb-green{border-left-color:var(--green)}.fb-yellow{border-left-color:var(--yellow)}.fb-orange{border-left-color:var(--orange)}.fb-white{border-left-color:#6b7891}.fb-city{font-weight:600}.fb-dist{color:var(--muted);font-variant-numeric:tabular-nums}.fb-dir{font-weight:700}.city-list{list-style:none;margin:0;padding:0}.city-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font-size:15px;text-align:left;cursor:pointer}.city-row:active{background:#1c2740}.city-name{font-weight:600}.city-country{color:var(--muted);font-size:13px}.empty{padding:16px;text-align:center;color:var(--muted)}.result{display:flex;flex-direction:column;gap:8px}.banner{padding:10px;border-radius:10px;font-weight:700;text-align:center}.banner-win{background:#12321f;color:#7ee2a8;border:1px solid var(--green)}.banner-lose{background:#331519;color:#ff9fb0;border:1px solid #a13a44}.share-grid{margin:0;padding:10px;background:var(--panel);border-radius:10px;border:1px solid var(--line);font-family:system-ui,sans-serif;font-size:18px;line-height:1.35;white-space:pre;text-align:center}.copy-btn{height:44px;border-radius:10px;border:none;background:var(--accent);color:#04121a;font-weight:800;font-size:15px;cursor:pointer}.copy-btn:active{filter:brightness(.9)}.mode-select{display:flex;gap:2px;margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px}.mode-btn{min-height:30px;padding:0 10px;border:none;border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}.mode-btn-on{background:var(--accent);color:#04121a}.region-chip{flex:0 0 auto;align-self:flex-start;padding:6px 12px;border-radius:999px;background:#13303a;border:1px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700}.stats{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.stats-row{display:flex;justify-content:space-around;gap:8px}.stat{text-align:center}.stat-value{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.stats-title{font-size:12px;color:var(--muted)}.dist{display:flex;flex-direction:column;gap:3px}.dist-row{display:flex;align-items:center;gap:6px}.dist-n{width:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.dist-bar-wrap{flex:1 1 auto}.dist-bar{min-width:20px;height:18px;border-radius:4px;background:var(--accent);display:flex;align-items:center;justify-content:flex-end;padding-right:6px}.dist-count{font-size:11px;font-weight:800;color:#04121a;font-variant-numeric:tabular-nums}.onboarding-modal{position:fixed;top:0;left:0;right:0;bottom:0;transform:translateZ(0);background:#05080fe6;display:flex;align-items:center;justify-content:center;z-index:9999}.onboarding-content{background:linear-gradient(160deg,#151d2c,#0e1420);border:1px solid rgba(79,209,197,.22);border-radius:6px;padding:26px 22px 22px;max-width:360px;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 10px 40px #0009}.onboarding-title{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--accent);font-size:17px;letter-spacing:1px;margin-bottom:14px;text-align:center;font-weight:600}.onboarding-body p{margin-bottom:10px;font-size:13px;line-height:1.55;color:var(--text)}.onboarding-body strong{color:var(--accent)}.onboarding-dots{display:flex;justify-content:center;gap:6px;margin:14px 0}.onboarding-dot{width:6px;height:6px;border-radius:50%;background:#4fd1c540}.onboarding-dot.active{background:var(--accent)}.onboarding-close{min-height:44px;width:100%;padding:12px;background:linear-gradient(160deg,var(--accent),#3fb8aa);color:#04121a;border:none;border-radius:4px;font-weight:700;font-size:13px;letter-spacing:.5px;cursor:pointer;-webkit-user-select:none;user-select:none}.onboarding-close:active{opacity:.85;transform:scale(.98)}.info-button{width:44px;height:44px;padding:0;background:var(--line);color:var(--muted);border:1px solid var(--accent);border-radius:4px;font-weight:600;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:all .2s}.info-button:active{transform:scale(.95);background:var(--accent);color:#04121a}