:root{
  --void:#0a0d14; --void-2:#131a29; --void-3:#1b2438;
  --ember:#ff6a3d; --ember-2:#ffb37a;
  --sea:#59b0d8; --air:#b98cff;
  --parchment:#f3ead6; --parchment-2:#e7d9b8; --parchment-3:#fbf6ea;
  --ink:#2b2013; --ink-soft:#6f6250;
  --steel:#8b96ab; --gold:#c9a45c; --good:#4c8f6a; --danger:#b8493f;
  --radius-lg:26px; --radius-md:16px; --radius-sm:10px;
  --font-fa:'Vazirmatn',system-ui,'Segoe UI',sans-serif;
  --font-hud:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:#050710;font-family:var(--font-fa);display:flex;
  align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}

/* ── phone frame ───────────────────────────────── */
.phone{position:relative;width:100%;max-width:430px;height:100dvh;max-height:900px;min-height:620px;
  background:var(--void);overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);contain:layout paint}
@media (min-width:460px){ .phone{border-radius:40px;border:8px solid #0d0f16} }

/* ── map ───────────────────────────────────────── */
.map-layer{position:absolute;inset:0;background:radial-gradient(120% 70% at 30% 0%,#10182a 0,var(--void) 60%)}
.map-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.map-svg.grabbing{cursor:grabbing}
#viewport{transition:transform .5s cubic-bezier(.22,.9,.32,1)}
#viewport.no-anim{transition:none}

/* borders / realms */
.realm-shape{fill:var(--void-2);fill-opacity:.85;stroke:rgba(201,164,92,.30);stroke-width:1.3;
  transition:fill-opacity .25s,stroke .25s}
.realm-shape.island{stroke-dasharray:5 4}
.realm-shape.mine{stroke:var(--ember);stroke-width:1.8}
.realm-shape.hot{fill-opacity:1;stroke:var(--gold)}
.realm-shape.editing{stroke:var(--sea);stroke-width:2;stroke-dasharray:6 4}

/* road network */
.net-hidden{display:none}
.net-edge{fill:none;stroke-width:1.1;opacity:.35;stroke-linecap:round}
.net-edge.land{stroke:var(--gold)}
.net-edge.sea{stroke:var(--sea);stroke-dasharray:4 4}
.net-edge.sel{opacity:1;stroke-width:2.6}

/* hubs & castles */
.hub-dot{fill:var(--void-3);stroke:var(--steel);stroke-width:1.2}
.hub-dot.mine{fill:var(--ember);stroke:var(--ember-2)}
.hub-hit{fill:transparent;cursor:pointer}
.hub-label{fill:var(--steel);font-weight:600;pointer-events:none;font-size:12px;text-anchor:middle}
.hub-label.mine{fill:var(--ember-2)}
.castle-dot{fill:var(--void-3);stroke:rgba(201,164,92,.7);stroke-width:1;cursor:pointer;transition:fill .18s}
.castle-dot:hover,.castle-dot.hot{fill:var(--gold)}
.castle-dot.port{stroke:var(--sea)}
.castle-dot.home{fill:var(--ember);stroke:var(--ember-2);stroke-width:2}
.castle-dot.picked{fill:var(--good);stroke:#bfe6cf;stroke-width:2}
.castle-dot.dim{opacity:.35}
.castle-label{fill:var(--steel);font-size:9.5px;text-anchor:middle;pointer-events:none}
.castle-label.home{fill:var(--ember-2);font-weight:700}
.castle-label.picked{fill:#bfe6cf;font-weight:700}

/* route */
.route-leg{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.route-leg.land{stroke:var(--ember);stroke-dasharray:2 7;animation:dashMove 1.1s linear infinite}
.route-leg.sea{stroke:var(--sea);stroke-dasharray:6 6;animation:dashMove 1.4s linear infinite}
.route-leg.air{stroke:var(--air);stroke-dasharray:1 6}
.route-leg.lit{stroke-dasharray:0;animation:none;stroke-width:3.2;filter:drop-shadow(0 0 6px currentColor)}
@keyframes dashMove{to{stroke-dashoffset:-26}}
.wp{fill:var(--void-3);stroke:var(--gold);stroke-width:1.2}
.route-flag{font-size:18px;text-anchor:middle;dominant-baseline:central}

/* armies */
.army-glyph{cursor:pointer}
.army-glyph .ring{fill:none;stroke:var(--ember);stroke-width:2;opacity:.55}
.army-glyph .core{fill:var(--void-3);stroke:var(--ember-2);stroke-width:1.6}
.army-glyph text{font-size:14px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.army-glyph.selected .core{fill:var(--ember)}
.army-glyph.selected .ring{opacity:1}
.army-glyph .pulse{transform-origin:center;transform-box:fill-box;fill:none;stroke:var(--ember);stroke-width:2;
  animation:pulseRing 2.2s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}

/* edit handles (admin) */
.vx{fill:var(--sea);stroke:#fff;stroke-width:1;cursor:move}
.vx.mid{fill:none;stroke:var(--sea);stroke-dasharray:2 2;cursor:copy}

/* ── chrome ────────────────────────────────────── */
.topbar{position:absolute;top:0;inset-inline:0;z-index:6;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 8px;display:flex;align-items:center;gap:10px}
.topbar>*{pointer-events:auto}
.icon-btn{width:40px;height:40px;border-radius:50%;background:rgba(10,13,20,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(201,164,92,.35);color:var(--parchment);font-size:17px;display:flex;
  align-items:center;justify-content:center;cursor:pointer}
.house-chip{flex:1;background:rgba(10,13,20,.72);backdrop-filter:blur(6px);border:1px solid rgba(201,164,92,.35);
  border-radius:999px;padding:8px 14px;color:var(--parchment);font-weight:700;font-size:13px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint-bar{position:absolute;top:62px;inset-inline:14px;z-index:5;text-align:center;pointer-events:none}
.hint-bar span{display:inline-block;background:rgba(10,13,20,.7);backdrop-filter:blur(6px);color:var(--gold);
  font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid rgba(201,164,92,.3)}
.map-tools{position:absolute;inset-inline-end:12px;top:112px;z-index:5;display:flex;flex-direction:column;gap:8px}
.tool-btn{width:34px;height:34px;border-radius:12px;background:rgba(10,13,20,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(201,164,92,.3);color:var(--parchment);cursor:pointer;font-size:14px}
.tool-btn.on{background:var(--ember);border-color:var(--ember-2);color:#fff}
.legend{position:absolute;inset-inline-start:12px;top:112px;z-index:5;display:flex;flex-direction:column;gap:5px;
  pointer-events:none}
.legend i{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--steel);font-style:normal}
.legend i b{width:16px;height:0;border-top:2px dashed currentColor;display:inline-block}
.legend i.land{color:var(--ember)} .legend i.sea{color:var(--sea)} .legend i.air{color:var(--air)}

/* ── bottom sheet ──────────────────────────────── */
.sheet{position:absolute;inset-inline:0;bottom:0;z-index:10;height:44%;background:var(--parchment);
  background-image:radial-gradient(rgba(43,32,19,.05) 1px,transparent 1px);background-size:14px 14px;
  border-radius:24px 24px 0 0;box-shadow:0 -18px 40px -18px rgba(0,0,0,.55);
  transition:height .38s cubic-bezier(.22,.9,.32,1);display:flex;flex-direction:column;will-change:height}
.sheet.dragging{transition:none}
.sheet-handle{flex:none;padding:10px 0 4px;display:flex;justify-content:center;cursor:grab;touch-action:none}
.sheet-handle::before{content:'';width:38px;height:5px;border-radius:99px;background:var(--parchment-2)}
.sheet-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:2px 16px calc(env(safe-area-inset-bottom,0px) + 18px)}
.sheet-scroll::-webkit-scrollbar{width:0}

.sheet-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheet-title h1{margin:0;font-size:18px;color:var(--ink);font-weight:800}
.count{font-family:var(--font-hud);font-size:12px;color:var(--ink-soft);background:var(--parchment-3);
  border:1px solid var(--parchment-2);border-radius:999px;padding:3px 10px}
.link-btn{border:0;background:none;color:var(--ink-soft);font:600 13px var(--font-fa);cursor:pointer;
  padding:6px 0;display:flex;align-items:center;gap:5px}
.link-btn:hover{color:var(--ink)}

.army-row{display:flex;align-items:center;gap:11px;background:var(--parchment-3);border:1px solid var(--parchment-2);
  border-radius:var(--radius-md);padding:11px 13px;margin-bottom:9px;cursor:pointer;transition:transform .14s}
.army-row:active{transform:scale(.985)}
.glyph-box{width:44px;height:44px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:linear-gradient(160deg,#fff,var(--parchment-2));border:1px solid var(--parchment-2)}
.army-row .body{flex:1;min-width:0}
.army-row .name{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:2px}
.army-row .meta{font-size:11.5px;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:wrap}
.status-chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.status-chip.home{background:#e4ecdf;color:var(--good)}
.status-chip.moving{background:#f7e3d8;color:var(--ember)}

.detail-card,.route-card{background:var(--parchment-3);border:1px solid var(--parchment-2);
  border-radius:var(--radius-lg);padding:15px;margin-bottom:12px}
.detail-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.detail-head .glyph-box{width:52px;height:52px;font-size:24px;border-radius:16px}
.detail-head .name{font-size:16.5px;font-weight:800;color:var(--ink)}
.detail-head .sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
.position-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);background:#fff;
  border:1px dashed var(--parchment-2);border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:12px}
.position-line b{color:var(--ember)}
.section-h{margin:12px 0 8px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.progress-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);
  margin-bottom:6px;font-family:var(--font-hud)}
.progress-track{height:7px;border-radius:99px;background:var(--parchment-2);overflow:hidden;margin-bottom:12px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--ember))}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-cell{background:#fff;border:1px solid var(--parchment-2);border-radius:var(--radius-sm);
  padding:9px 10px;display:flex;align-items:center;gap:9px}
.stat-cell .n{font-family:var(--font-hud);font-weight:700;color:var(--ink);font-size:14px}
.stat-cell .l{font-size:11px;color:var(--ink-soft)}
.total-line{display:flex;justify-content:space-between;padding-top:10px;margin-top:8px;
  border-top:1px solid var(--parchment-2);font-size:12.5px;color:var(--ink-soft)}
.total-line b{font-family:var(--font-hud);color:var(--ink);font-size:14px}

.btn{width:100%;border:0;border-radius:var(--radius-md);padding:14px 16px;font:800 15px var(--font-fa);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:disabled{opacity:.65;cursor:progress}
.btn-primary{background:linear-gradient(180deg,var(--ember),#e0542a);color:#fff;
  box-shadow:0 10px 22px -10px rgba(255,106,61,.7)}
.btn-ghost{background:var(--parchment-3);color:var(--ink);border:1px solid var(--parchment-2)}
.btn-danger{background:#f7ecea;color:var(--danger);border:1px solid #eeded9}
.btn-row{display:flex;gap:10px;margin-top:10px}
.btn-row .btn{flex:1}
.btn-sm{padding:10px 12px;font-size:13px;border-radius:var(--radius-sm)}

.search-wrap{position:relative;margin-bottom:10px}
.search-wrap input{width:100%;border:1px solid var(--parchment-2);background:#fff;border-radius:999px;
  padding:11px 40px 11px 14px;font:400 14px var(--font-fa);color:var(--ink);outline:none}
.search-wrap input:focus{border-color:var(--ember)}
.search-wrap .ic{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);color:var(--ink-soft)}
.chip-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:none;font:700 12.5px var(--font-fa);color:var(--ink-soft);background:var(--parchment-3);
  border:1px solid var(--parchment-2);border-radius:999px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.chip.active{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.rg-title{font:700 11.5px var(--font-fa);color:var(--ink-soft);margin:12px 2px 4px}
.dest-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-radius:var(--radius-sm);cursor:pointer}
.dest-row:active{background:var(--parchment-3)}
.dest-row.blocked{opacity:.5;cursor:not-allowed}
.dest-row .pin{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.dest-row .pin.port{background:var(--sea)}
.dest-row .name{font:600 13.5px var(--font-fa);color:var(--ink);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest-row .name em{color:var(--ink-soft);font-weight:400;font-style:normal}
.dest-row .eta{font-family:var(--font-hud);font-size:11.5px;color:var(--ink-soft)}
.empty-state{text-align:center;padding:24px 10px;color:var(--ink-soft);font-size:13px}

.route-points{display:flex;align-items:center;gap:10px}
.route-point{flex:1;min-width:0}
.route-point .l{font-size:10.5px;color:var(--ink-soft);margin-bottom:3px}
.route-point .v{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-point.dest .v{color:var(--ember)}
.route-arrow{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-soft)}
.route-arrow .ln{width:38px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 9px)}
.eta-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:13px;
  border-top:1px dashed var(--parchment-2)}
.eta-row .big{font-family:var(--font-hud);font-size:21px;font-weight:700;color:var(--ink)}
.eta-row .lbl{font-size:11px;color:var(--ink-soft)}
.eta-row .clock{text-align:start;font-size:12px;color:var(--ink-soft)}
.leg-list{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.leg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink);background:#fff;
  border:1px solid var(--parchment-2);border-radius:var(--radius-sm);padding:7px 9px}
.leg .m{font-family:var(--font-hud);color:var(--ink-soft);margin-inline-start:auto;font-size:11px}
.desc-box{background:#fff;border:1px solid var(--parchment-2);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:12.8px;line-height:1.9;color:var(--ink);margin-bottom:10px}
.warn-box{background:#fbeee0;border:1px solid #eccfa5;color:#7a5313;border-radius:var(--radius-sm);
  padding:9px 11px;font-size:12.3px;line-height:1.8;margin-bottom:10px}
.warn-box.bad{background:#f9ecea;border-color:#e6bfb8;color:#8b342a}

.success-wrap{text-align:center;padding:8px 4px}
.success-badge{width:62px;height:62px;border-radius:50%;margin:4px auto 12px;
  background:radial-gradient(circle at 35% 30%,var(--ember-2),var(--ember));display:flex;align-items:center;
  justify-content:center;font-size:27px;color:#fff;box-shadow:0 10px 26px -8px rgba(255,106,61,.65)}
.success-wrap h1{font-size:18px;color:var(--ink);margin:0 0 6px}
.success-wrap p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.8}
.eta-hud{font-family:var(--font-hud);font-size:29px;font-weight:700;color:var(--ember);
  background:var(--parchment-3);border:1px solid var(--parchment-2);border-radius:var(--radius-md);
  padding:13px;margin-bottom:14px}
.eta-hud .u{font-size:12px;color:var(--ink-soft);font-family:var(--font-fa);display:block;margin-top:4px}

.spinner{width:17px;height:17px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .26s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* toasts */
.toast-root{position:fixed;inset-inline:0;bottom:24px;z-index:9999;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none}
.toast{background:#1b2438;color:#f3ead6;border:1px solid rgba(201,164,92,.4);border-radius:999px;
  padding:9px 16px;font:600 13px var(--font-fa);box-shadow:0 10px 24px -10px #000;animation:fadeIn .2s ease both}
.toast.err{background:#3a1c19;border-color:#8b342a;color:#ffd9d2}
.toast.ok{background:#16301f;border-color:#4c8f6a;color:#d6f0e0}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}