:root{--bg: #060b14;--panel: rgba(11, 18, 30, .78);--panel-solid: #0d1522;--border: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .18);--text: #e9f0f9;--muted: #91a3bb;--accent: #38bdf8;--accent-dim: rgba(56, 189, 248, .16);--amber: #fbbf24;--radius: 16px;--shadow: 0 18px 44px rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Noto Sans Arabic,Segoe UI,Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}.app{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(1200px 700px at 78% -10%,#16324e,#060b1400 62%),radial-gradient(900px 600px at 8% 108%,#12283c,#060b1400 60%),linear-gradient(170deg,#070e19,#050a12 55%,#04070d)}.map-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.map-canvas:active{cursor:grabbing}.label-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.mono{font-family:SFMono-Regular,ui-monospace,Menlo,monospace;letter-spacing:.2px}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px;z-index:20;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:var(--shadow);pointer-events:auto}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(150deg,#38bdf8,#2563eb 70%);color:#04121f;font-family:Noto Naskh Arabic,serif;font-size:22px;font-weight:700;box-shadow:0 6px 18px #38bdf859}.brand h1{margin:0;font-family:Noto Naskh Arabic,Noto Sans Arabic,serif;font-size:19px;font-weight:600;letter-spacing:.1px;line-height:1.25}.brand p{margin:2px 0 0;font-size:11.5px;color:var(--muted);letter-spacing:.2px}.topbar-meta{display:flex;align-items:center;gap:8px;pointer-events:auto}.chip{font-size:11.5px;color:#bfd4ea;background:var(--panel);border:1px solid var(--border);padding:7px 11px;border-radius:999px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.icon-btn{width:36px;height:36px;display:grid;place-items:center;font-size:17px;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:11px;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:.18s ease}.icon-btn:hover{border-color:var(--border-strong);transform:translateY(-1px)}.icon-btn.on{color:var(--accent);border-color:#38bdf873}.panel{position:absolute;top:96px;right:18px;width:296px;max-height:calc(100vh - 200px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:18px;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow);z-index:18;overflow:hidden}.panel-head{display:flex;align-items:center;gap:8px;padding:13px 15px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;width:100%;text-align:right}.panel-head span{flex:1}.panel-head .head-chev{color:var(--muted);transition:transform .22s ease}.panel.collapsed .head-chev{transform:rotate(180deg)}.panel.collapsed .panel-body{display:none}.panel-body{overflow-y:auto;padding:4px 14px 16px}.panel-body::-webkit-scrollbar{width:6px}.panel-body::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:3px}.panel-section{padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.07)}.panel-section:last-child{border-bottom:0}.panel-section h3{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}.panel-section h3 svg{color:var(--accent)}.toggles{display:grid;gap:4px}.toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;background:#ffffff06;border:1px solid transparent;border-radius:10px;color:#cfdcea;font-family:inherit;font-size:12.5px;cursor:pointer;transition:.16s ease}.toggle:hover{background:#ffffff0f}.toggle.on{border-color:#38bdf847;background:#38bdf814;color:#eaf6ff}.toggle-txt{display:flex;align-items:center;gap:8px}.toggle-txt svg{color:var(--muted)}.toggle.on .toggle-txt svg{color:var(--accent)}.switch{width:32px;height:18px;border-radius:999px;background:#ffffff1f;position:relative;transition:.18s ease;flex:none}.switch span{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#cbd5e1;transition:.18s cubic-bezier(.4,0,.2,1)}.toggle.on .switch{background:#38bdf873}.toggle.on .switch span{right:16px;background:#e0f5ff}.slider-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#cbd8e7;margin:6px 0 4px}.slider-row b{color:var(--accent);font-size:12px;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:linear-gradient(90deg,#38bdf8b3,#fbbf248c);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#f0f9ff;border:2px solid #0b1220;box-shadow:0 0 0 3px #38bdf84d;transition:.16s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f0f9ff;border:2px solid #0b1220}.range-hint{display:flex;justify-content:space-between;font-size:10px;color:#6f8199;margin-top:5px}.sun-presets{display:flex;gap:6px;margin-top:9px}.sun-presets button{flex:1;padding:6px 0;font-family:inherit;font-size:11.5px;color:#cfdcea;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:.16s ease}.sun-presets button:hover{border-color:#fbbf2473;color:#ffe9b8}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.btn-grid button{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;font-family:inherit;font-size:11.5px;color:#cfdcea;background:#ffffff0a;border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:.16s ease}.btn-grid button:hover{background:#38bdf81f;border-color:#38bdf866;color:#eaf6ff;transform:translateY(-1px)}.btn-grid button.active{background:#38bdf82e;border-color:#38bdf880;color:#eaf6ff}.stats{list-style:none;margin:0;padding:0;display:grid;gap:6px}.stats li{display:flex;justify-content:space-between;font-size:12px;color:#c3d1e0}.stats li b{color:#f1f7ff;font-variant-numeric:tabular-nums}.lbl{position:absolute;top:0;left:0;display:flex;align-items:center;gap:5px;will-change:transform,opacity;transition:opacity .22s ease}.lbl-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #38bdf838;flex:none}.lbl-txt{padding:3px 9px;font-size:12px;line-height:1.5;color:#eaf4ff;background:#070d16b8;border:1px solid rgba(255,255,255,.12);border-radius:999px;white-space:nowrap;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);text-shadow:0 1px 2px rgba(0,0,0,.6)}.lbl-town .lbl-txt{font-family:Noto Naskh Arabic,serif;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(140deg,#0e7490eb,#2563ebe6);border-color:#7dd3fca6;box-shadow:0 8px 22px #082f4999;padding:4px 13px}.lbl-town .lbl-dot{width:9px;height:9px;background:#7dd3fc;box-shadow:0 0 0 4px #7dd3fc40}.lbl-village .lbl-txt{font-size:12.5px;font-weight:500;border-color:#ffffff29}.lbl-small .lbl-txt{font-size:11px;color:#b9c9dc;background:#070d168c}.lbl-small .lbl-dot{width:5px;height:5px;background:#94a3b8;box-shadow:none}.lbl-poi .lbl-txt{font-size:10.5px;color:#ffeec9;background:#1e140699;border-color:#fbbf2452;padding:2px 7px}.lbl-poi .lbl-dot{width:6px;height:6px;background:var(--amber);box-shadow:0 0 0 2px #fbbf2433}.hud-left{position:absolute;left:18px;bottom:18px;z-index:14;display:grid;gap:8px}.minimap{position:relative;width:168px;height:168px;border-radius:14px;overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow);background:#0a1220}.minimap canvas{display:block;width:100%;height:100%}.minimap-tag{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;font-size:10px;color:#cfe3f5;background:linear-gradient(0deg,#050a12d9,#050a1200)}.attrib{max-width:300px;font-size:9.5px;line-height:1.6;color:#7c8ea6;direction:ltr;text-align:left;unicode-bidi:plaintext}.hud-right{position:absolute;right:18px;bottom:18px;z-index:14;display:flex;align-items:flex-end;gap:10px}.compass{position:relative;width:56px;height:56px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--border);border-radius:50%;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);cursor:pointer;transition:.18s ease}.compass:hover{border-color:#38bdf873}.compass-ring{position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:50%;border:1px dashed rgba(255,255,255,.16)}.needle{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transition:transform .12s linear}.n-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:16px solid var(--amber);filter:drop-shadow(0 0 5px rgba(251,191,36,.5));transform:translateY(-9px)}.compass b{position:absolute;bottom:-1px;font-size:8.5px;color:#9fb2c8;font-weight:500}.scalebar{display:grid;gap:3px;justify-items:start}.scale-fill{display:block;height:5px;width:80px;border-left:2px solid #cfe3f5;border-right:2px solid #cfe3f5;border-bottom:2px solid #cfe3f5;border-radius:1px;transition:width .12s linear}.scale-label{font-size:10px;color:#b9c9dc;font-variant-numeric:tabular-nums}.recenter{position:absolute;right:18px;bottom:84px;display:flex;align-items:center;gap:6px;padding:8px 12px;font-family:inherit;font-size:11.5px;color:#dbe8f6;background:var(--panel);border:1px solid var(--border);border-radius:999px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);cursor:pointer;z-index:14;transition:.18s ease}.recenter:hover{border-color:#38bdf880;color:#eaf6ff;transform:translateY(-1px)}.hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);padding:7px 15px;font-size:11px;color:#a9bbd0;background:#060b149e;border:1px solid var(--border);border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:12;white-space:nowrap}.info-card{position:absolute;left:18px;bottom:226px;width:236px;padding:14px 14px 12px;background:var(--panel);border:1px solid var(--border-strong);border-radius:14px;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow);z-index:16;animation:rise .26s cubic-bezier(.16,1,.3,1)}.info-card h4{margin:0 0 9px;font-size:12px;font-weight:600;color:var(--accent)}.info-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.info-card li{display:flex;justify-content:space-between;font-size:11.5px;color:#b8c8da}.info-card li b{color:#f0f7ff;font-size:11px}.info-close{position:absolute;top:8px;left:8px;width:22px;height:22px;display:grid;place-items:center;color:#9fb2c8;background:#ffffff0d;border:0;border-radius:7px;cursor:pointer}.info-close:hover{color:#fff;background:#ffffff1f}.go-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:11px;padding:8px 0;font-family:inherit;font-size:11.5px;color:#04121f;background:linear-gradient(140deg,#7dd3fc,#38bdf8);border:0;border-radius:9px;cursor:pointer;font-weight:600;transition:.18s ease}.go-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #38bdf859}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.loader{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(900px 600px at 50% 40%,#0e1c2e,#050a12 65%);z-index:40}.loader-card{width:min(360px,84vw);text-align:center}.loader-icon{width:56px;height:56px;margin:0 auto 14px;display:grid;place-items:center;border-radius:16px;color:#7dd3fc;background:#38bdf81f;border:1px solid rgba(56,189,248,.3);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #38bdf82e}50%{box-shadow:0 0 0 14px #38bdf800}}.loader-card h2{margin:0 0 6px;font-family:Noto Naskh Arabic,serif;font-size:21px;font-weight:600}.loader-card p{margin:0 0 16px;font-size:12.5px;color:var(--muted);min-height:18px}.bar{height:4px;border-radius:3px;background:#ffffff1a;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#2563eb);transition:width .32s ease}.loader-meta{margin-top:8px;font-size:11px;color:#7d90a8}@media (max-width: 900px){.brand h1{font-size:16px}.brand p{font-size:10px}.chip{display:none}.panel{width:258px;top:84px;right:12px;max-height:calc(100vh - 230px)}.minimap{width:118px;height:118px}.attrib,.hint{display:none}.info-card{bottom:auto;top:84px}}@media (max-width: 640px){.topbar{padding:10px 12px}.brand{padding:8px 12px;gap:9px}.brand-mark{width:34px;height:34px;font-size:18px}.brand h1{font-size:14.5px}.panel{right:8px;left:8px;width:auto;top:auto;bottom:8px;max-height:46vh}.hud-left{display:none}.recenter{bottom:auto;top:74px;right:8px}.info-card{left:8px;right:8px;width:auto;top:118px}.scalebar{display:none}}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}