/* ═══════════════════════════════════════════════════════════
   District Foundry — hub game #3 (map builder).
   Scoped .df-* styles. The hub owns global body/reset; this only
   styles the game surface + map overlays.
   ═══════════════════════════════════════════════════════════ */
.df-shell {
    --df-bg: #0a0a14;
    --df-panel: #14142a;
    --df-panel-2: #1c1c38;
    --df-line: #2a2a4a;
    --df-text: #e8e4f5;
    --df-text-dim: #9a94b8;
    --df-gold: #ffd23c;
    --df-blue: #4da3ff;
    --df-green: #7fe0a0;
    --df-danger: #ff6b6b;
    position: fixed; inset: 0; z-index: 0;
    background: var(--df-bg);
    color: var(--df-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* No browser long-press selection / callout / magnifier anywhere in the game
       (Josh, iPhone). -webkit-* variants are what actually gate this on iOS WebKit. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.df-map-container, #df-map { position: absolute; inset: 0; }
#df-map { width: 100%; height: 100%; background: #0a0a14; }

.df-loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--df-text-dim); font-size: 14px; z-index: 5;
}

/* Back to hub */
.df-back-btn {
    position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; z-index: 25;
    background: rgba(20,20,42,0.9); color: var(--df-text); border: 1px solid var(--df-line);
    border-radius: 10px; width: 40px; height: 40px; font-size: 18px; cursor: pointer;
}
.df-back-btn:active { transform: scale(0.94); }

/* Top resource bar */
.df-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    padding-left: 60px; /* clear the back button */
    background: linear-gradient(180deg, rgba(10,10,20,0.95), rgba(10,10,20,0.6));
    font-size: 14px;
}
.df-res { display: inline-flex; gap: 5px; align-items: center; }
.df-res b { color: var(--df-gold); }
.df-foundry-toggle {
    cursor: pointer; font-size: 12px; font-weight: 700;
    background: var(--df-panel-2); color: var(--df-text); border: 1px solid var(--df-line);
    border-radius: 8px; padding: 4px 10px;
}
.df-foundry-toggle.paused { border-color: var(--df-gold); color: var(--df-gold); }

/* Plant-home banner */
.df-banner {
    position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
    z-index: 20; background: var(--df-panel); border: 1px solid var(--df-gold);
    border-radius: 14px; padding: 20px 26px; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6); max-width: 340px;
}
.df-banner-title { font-size: 20px; font-weight: 900; color: var(--df-gold); }
.df-banner-sub { font-size: 13px; color: var(--df-text-dim); margin: 8px 0 14px; line-height: 1.5; }
.df-error { color: var(--df-danger); font-size: 13px; margin-top: 8px; }

/* Buttons */
.df-btn {
    background: var(--df-panel-2); color: var(--df-text); border: 1px solid var(--df-line);
    border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.df-btn:active { transform: scale(0.96); }
.df-btn-primary { background: var(--df-gold); color: #1a1400; border-color: var(--df-gold); }
.df-btn-active { background: var(--df-green); color: #04201f; border-color: var(--df-green); }

/* Controls (build) */
.df-controls { position: absolute; top: 60px; left: 10px; z-index: 12; display: flex; flex-direction: column; gap: 8px; }
.df-palette {
    background: var(--df-panel); border: 1px solid var(--df-line); border-radius: 12px;
    padding: 10px; display: flex; flex-direction: column; gap: 6px; width: 180px;
}
.df-plot {
    display: flex; align-items: center; gap: 8px; background: var(--df-panel-2);
    border: 1px solid var(--df-line); border-radius: 8px; padding: 8px 10px;
    color: var(--df-text); font-size: 14px; cursor: pointer; text-align: left;
}
.df-plot span { flex: 1; }
.df-plot em { color: var(--df-text-dim); font-style: normal; font-size: 12px; }
.df-plot.sel { border-color: var(--df-gold); }
.df-plot.disabled { opacity: 0.4; cursor: not-allowed; }
.df-hint { font-size: 11px; color: var(--df-text-dim); text-align: center; margin-top: 4px; }

/* Squad panel — the wrap is the single positioned container; the switcher and the
   squad card stack inside it in normal flow so they can NEVER overlap (the old bug
   had both absolutely positioned at fixed bottoms, so the card covered the switch
   buttons and they weren't tappable). */
.df-squad-wrap {
    position: absolute; bottom: 44px; left: 10px; right: 10px; z-index: 12;
    max-width: 420px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 8px;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.df-squad {
    background: var(--df-panel); border: 1px solid var(--df-line); border-radius: 12px;
    padding: 10px 14px;
}
.df-squad-head { font-size: 13px; }
.df-squad-head b { color: var(--df-gold); text-transform: capitalize; }
.df-eta { float: right; color: var(--df-blue); }
.df-squad-held { font-size: 12px; color: var(--df-text-dim); margin: 2px 0 6px; }
.df-squad-held b { color: var(--df-gold); }
.df-squad-body { display: flex; gap: 6px; margin: 8px 0; }
.df-folk {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--df-panel-2); border: 1px solid var(--df-line); border-radius: 8px; font-size: 18px;
}
.df-squad-actions { display: flex; gap: 8px; }

/* Selection info */
.df-selinfo {
    position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); z-index: 11;
    background: rgba(20,20,42,0.92); border: 1px solid var(--df-line); border-radius: 20px;
    padding: 6px 14px; font-size: 12px; display: flex; gap: 10px; align-items: center;
}
.df-tag { color: var(--df-gold); }
.df-tag.home { color: var(--df-green); }

/* Dev / speed panel — vertical strip on the RIGHT edge, mid-screen: clear of the
   iPhone home indicator at the bottom (#3) and the map zoom control at top-right. */
.df-dev {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%); z-index: 26;
    display: flex; flex-direction: column; gap: 5px; align-items: center;
    background: rgba(10,10,20,0.85); border: 1px solid var(--df-line); border-radius: 12px;
    padding: 8px 6px; font-size: 12px;
}
.df-dev > span { opacity: 0.7; }
.df-dev-btn {
    background: var(--df-panel-2); color: var(--df-text-dim); border: 1px solid var(--df-line);
    border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.df-dev-btn.on { background: var(--df-blue); color: #041a2e; border-color: var(--df-blue); }
.df-dev-btn.danger { color: var(--df-danger); }

/* Live debug overlay (🐞) — deterministic engine-state dump for diagnosing bugs.
   Top-left, scrollable, monospace; ignores pointer events so it never blocks the map. */
.df-debug {
    position: absolute; top: 6px; left: 6px; right: 6px; z-index: 40; pointer-events: none;
    max-width: 92vw; max-height: 52vh; overflow: auto;
    background: rgba(6,8,16,0.92); border: 1px solid var(--df-line); border-radius: 8px;
    padding: 6px 8px;
}
.df-debug pre {
    margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 10.5px; line-height: 1.35; color: #b7f7c8; white-space: pre-wrap; word-break: break-word; tab-size: 2;
}

/* MapLibre tweaks */
.maplibregl-ctrl-attrib { font-size: 10px; opacity: 0.7; }

/* Map HTML markers (icons + labels) — fixed square boxes so anchor:center keeps
   the glyph pinned to the hex centre and it never drifts downward (#1). */
.df-map-marker {
    pointer-events: none; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; line-height: 1; text-align: center;
}
/* Node glyph + remaining-count badge live in an inner wrapper lifted UP off the hex
   centre so an occupying squad marker (👣 / 🧑‍🌾, sits dead centre) is fully visible on
   the node. Josh: "Can't see squad icon on the node. You move the icons up instead of
   the labels." → the whole node marker (glyph AND its count) is raised clear of centre,
   and the COUNT badge sits ABOVE the glyph (not below it, where it used to fall back onto
   the squad icon). The offset MUST be on the inner element — MapLibre owns the marker
   element's own transform for hex anchoring. */
.df-mk-node { font-size: 22px; filter: drop-shadow(0 1px 2px #000); }
.df-node-inner { position: relative; transform: translateY(-28px); }
.df-mk-building { font-size: 20px; filter: drop-shadow(0 1px 2px #000); }
.df-mk-squad { font-size: 26px; filter: drop-shadow(0 2px 4px #000); transition: none; }
.df-mk-hauler { font-size: 20px; filter: drop-shadow(0 1px 3px #000); }
/* Unit badges — a bright ringed disc behind each squad's emoji so units read
   clearly on the map and aren't lost under the base buildings. Squad 1 = blue,
   squad 2 = gold, matching the switcher buttons. */
.df-unit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    box-shadow: 0 0 0 2px #0a0a14, 0 2px 6px rgba(0,0,0,0.6);
}
.df-unit1 { background: radial-gradient(circle at 50% 35%, #6fb6ff, #1c5fd6); }
.df-unit2 { background: radial-gradient(circle at 50% 35%, #ffe08a, #e0a11a); }
.df-node-rem {
    position: absolute; top: -14px; bottom: auto; left: 50%; transform: translateX(-50%);
    background: rgba(10,10,20,0.85); color: var(--df-gold); border: 1px solid var(--df-gold);
    border-radius: 5px; padding: 0 3px; font-size: 9px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.df-hint-inline { font-size: 10px; color: var(--df-text-dim); margin-left: 6px; }
/* Squad switcher — two pills above the squad card, IN FLOW inside .df-squad-wrap
   (not absolutely positioned) so the card can't cover them. The active one is
   highlighted. Squad 1 = blue accent, squad 2 = gold accent. */
.df-squad-switch {
    display: flex; gap: 8px; justify-content: center;
}
.df-switch-btn {
    flex: 1; max-width: 200px; cursor: pointer;
    background: var(--df-panel); color: var(--df-text); border: 1px solid var(--df-line);
    border-radius: 10px; padding: 10px 10px; font-size: 13px; font-weight: 700;
}
.df-switch-btn.on { border-color: var(--df-gold); box-shadow: 0 0 0 1px var(--df-gold); background: var(--df-panel-2); }
.df-camp-lbl {
    background: rgba(10,10,20,0.85); color: var(--df-gold); border: 1px solid var(--df-gold);
    border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* Squad selected state (#6) */
.df-squad.sel { border-color: var(--df-green); box-shadow: 0 0 0 1px var(--df-green), 0 8px 30px rgba(0,0,0,0.5); }
.df-squad-head { cursor: pointer; }
.df-squad-toggle { float: right; font-size: 10px; color: var(--df-text-dim); }

/* ── #3 polish ──────────────────────────────────────────────
   Node depletion fade: a marker leaving the map (vein mined out) puffs up and
   fades instead of popping instantly. Applied by syncMarkers(fadeOut=true). */
.df-fade-out {
    animation: df-puff 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes df-puff {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 0.9; transform: scale(1.35); }
    100% { opacity: 0; transform: scale(1.6); }
}

/* Bank toast: floating "+N ore / +N logs" when haulers deliver a load. Rises
   and fades from the top-centre of the map so the payoff is visible. */
.df-toast-host {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 4px;
    pointer-events: none;
}
.df-toast {
    background: rgba(10,10,20,0.9); color: var(--df-gold);
    border: 1px solid var(--df-gold); border-radius: 12px;
    padding: 4px 12px; font-size: 13px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6);
    animation: df-toast-rise 1.6s ease-out forwards;
}
@keyframes df-toast-rise {
    0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
    15%  { opacity: 1; transform: translateY(0) scale(1); }
    70%  { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-24px); }
}