/* The Phoenix Nebula map (Pages/Map.cshtml, js/map.js). Sizes in the SVG are light-years; --k (set by map.js) is the
   zoom-out factor, so multiplying by it keeps a thing the same size on screen. Styled after the map art: a crimson-black
   field, white dotted borders, italic serif labels. */

.sm { --k: 1; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.sm-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; background: #0c0103; }
.sm-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sm-svg.dragging { cursor: grabbing; }
.sm-svg text { font-family: "EB Garamond", Garamond, "Cormorant Garamond", Georgia, serif; font-style: italic; text-anchor: middle; }

.sm-grid line { stroke: rgba(255, 255, 255, .035); stroke-width: calc(.15px * var(--k)); }

/* Territory: each realm a faint wash of its colour (--c, from the map page) deepening into a glow inside its border. */
.sm-territory .wash { fill: var(--c); fill-opacity: .07; stroke: none; }
.sm-territory .glow { fill: none; stroke: var(--c); stroke-linejoin: round; stroke-opacity: .35; stroke-width: calc(1.6px * var(--k)); }
.sm-territory .glow.wide { stroke-opacity: .12; stroke-width: calc(5px * var(--k)); }

.sm-area { fill: rgba(255, 255, 255, 0); cursor: pointer; transition: fill .2s; outline: none; }
.sm-area:hover { fill: rgba(255, 255, 255, .03); }
.sm-area:focus-visible, .sm-area.selected { fill: rgba(255, 255, 255, .07); }
/* Fiefs (duchies) take clicks only once zoomed in (map.js sets .near); further out a click picks the realm. */
.sm-fief { pointer-events: none; }
.sm-svg.near .sm-fief { pointer-events: auto; }

.sm-borders polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sm-borders .realm { stroke: rgba(250, 244, 236, .82); stroke-width: calc(.24px * var(--k)); }
.sm-borders .fief {
    stroke: rgba(250, 244, 236, .38); stroke-width: calc(.16px * var(--k));
    stroke-dasharray: calc(.9px * var(--k)) calc(.7px * var(--k));
}

.sm-area-labels text { fill: rgba(244, 238, 232, .8); font-size: min(calc(2.3px * var(--k)), var(--fit, 2.3px)); letter-spacing: .02em; cursor: pointer; }
/* Realm names give way as fief names come in. */
.sm-area-labels text.realm { opacity: clamp(.25, calc((var(--k) - .25) * 1.6), 1); }
.sm-area-labels text.fief {
    font-style: normal; font-family: var(--sans); text-transform: uppercase; letter-spacing: .28em;
    font-size: min(calc(1.4px * var(--k)), var(--fit, 1.5px)); fill: rgba(244, 238, 232, .72);
    opacity: clamp(0, calc((.85 - var(--k)) * 3.5), 1); pointer-events: none;
}
.sm-svg.near .sm-area-labels text.fief { pointer-events: auto; }
.sm-beyond text { fill: rgba(244, 238, 232, .9); font-size: calc(3.6px * var(--k)); pointer-events: none; }

/* Unnamed lifeweb systems: pinpricks that keep their size on screen, faint from afar and clearer close in. */
.sm-field { pointer-events: none; opacity: clamp(.45, calc(1.15 - var(--k) * .55), .95); transition: opacity .25s; }
.sm-field circle { r: calc(.3px * var(--k)); fill: #ffe3a0; }
.sm-field circle.orange { fill: #ffbf7a; }
.sm-field circle.white { fill: #eef1ff; }
.sm-svg.no-field .sm-field { display: none; }

.sm-place { cursor: pointer; outline: none; }
.sm-pin { transform: scale(var(--k)); }
.sm-pin .dot { fill: #ffd76a; stroke: #2d0407; stroke-width: .15px; transition: r .15s; }
.sm-pin .halo { fill: #ffcf4d; opacity: .35; }
.sm-pin text { fill: #f4eee8; font-size: 1.85px; paint-order: stroke; stroke: rgba(12, 1, 3, .85); stroke-width: .35px; }
/* Star colours: the main star's dot and glow, and companions. */
.sm-pin.star-blue .dot { fill: #a9cbff; } .sm-pin.star-blue .halo { fill: #7fb0ff; }
.sm-pin.star-white .dot { fill: #f4f6ff; } .sm-pin.star-white .halo { fill: #dfe6ff; }
.sm-pin.star-red .dot { fill: #ff8f73; } .sm-pin.star-red .halo { fill: #ff6a4d; }
.sm-pin.star-orange .dot { fill: #ffb35c; } .sm-pin.star-orange .halo { fill: #ff9a3c; }
.sm-pin .companion { stroke: #2d0407; stroke-width: .1px; filter: drop-shadow(0 0 .35px rgba(220, 230, 255, .9)); }
.companion.star-white { fill: #fff; } .companion.star-blue { fill: #bcd6ff; } .companion.star-yellow { fill: #ffd76a; }
.companion.star-red { fill: #ff8f73; } .companion.star-orange { fill: #ffb35c; }
.sm-pin .seat { fill: none; stroke: rgba(255, 230, 170, .75); stroke-width: .14px; }
.sm-place:hover .dot, .sm-place:focus-visible .dot { r: 0.95px; }
.sm-place.selected .dot { fill: #fff; }
.sm-place.selected .halo { fill: var(--crimson-hi, #e04555); opacity: .8; }

.sm-scale line { stroke: rgba(244, 238, 232, .8); stroke-width: calc(.25px * var(--k)); }
.sm-scale text { fill: rgba(244, 238, 232, .8); font-size: calc(1.7px * var(--k)); font-style: normal; font-family: var(--sans); }

/* ---- Overlays ---------------------------------------------------------------------------------------------------- */

.sm-head { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; width: min(90%, 720px); }
.sm-head h1 { margin: 0; font-family: "EB Garamond", Garamond, Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); color: #f4eee8; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.sm-head p { margin: 4px 0 0; color: rgba(244, 238, 232, .6); font-size: .85rem; }

.sm-zoom { position: absolute; right: 18px; bottom: 22px; display: grid; gap: 6px; }
.sm-zoom button {
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(244, 238, 232, .25); background: rgba(18, 23, 34, .8);
    color: #f4eee8; font-size: 1.2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
}
.sm-zoom button:hover { border-color: rgba(244, 238, 232, .6); }
.sm-zoom button:focus-visible { outline: 2px solid var(--cyan); }
.sm-zoom .sm-layer { margin-top: 6px; font-size: 1rem; color: #ffe3a0; }
.sm-zoom .sm-layer[aria-pressed="false"] { color: rgba(244, 238, 232, .35); }

.sm-info {
    position: absolute; top: 18px; right: 18px; width: min(360px, calc(100% - 36px)); max-height: calc(100% - 110px); overflow: auto;
    padding: 18px 20px; border-radius: 12px; background: rgba(18, 23, 34, .92); border: 1px solid var(--border);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); backdrop-filter: blur(8px); animation: sm-in .18s ease;
}
.sm-info[hidden] { display: none; }
@keyframes sm-in { from { opacity: 0; transform: translateY(-6px); } }
.sm-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.sm-close:hover { color: #fff; }
.sm-info-kind { font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sm-info-name { font-family: "EB Garamond", Garamond, Georgia, serif; font-style: italic; font-size: 1.7rem; margin: 6px 0 10px; color: #fff; }
.sm-info-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: .88rem; }
.sm-info-facts dt { color: var(--faint); font-weight: 400; }
.sm-info-facts dd { margin: 0; color: var(--text); }
.sm-info-summary { color: var(--muted); font-size: .9rem; line-height: 1.5; }

@media (max-width: 640px) {
    .sm-info { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 45%; }
    .sm-head p { display: none; }
}