/* ═══════════════════════════════════════════════════════════════════════
    MINEDEV — narrative HUD, compass, story card, character loader, info-heist
    Split from original index.html lines 924-1140
    ═══════════════════════════════════════════════════════════════════════ */

        /* ── NARRATIVE HUD ─────────────────────────── */
        #story-hud {
            position: fixed; top: 24px; left: 24px; z-index: 30;
            display: none; opacity: 0; pointer-events: none;
            transition: opacity 0.6s ease;
        }
        #story-hud.visible { display: block; opacity: 1; }
        .hud-row {
            display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
        }
        .hud-label {
            font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
            color: rgba(255,255,255,0.35); font-variation-settings: "wght" 300;
        }
        .hud-value {
            font-size: 14px; color: #fff; font-variation-settings: "wght" 600;
            letter-spacing: 0.5px;
        }
        .hud-bar {
            width: 140px; height: 2px; background: rgba(255,255,255,0.1);
            position: relative; overflow: hidden;
        }
        .hud-bar-fill {
            position: absolute; top: 0; left: 0; height: 100%;
            background: linear-gradient(90deg, #4488ff, #88aaff);
            transition: width 0.4s ease;
        }

        /* ── COMPASS ──────────────────────────────── */
        #compass {
            position: fixed; top: 24px; right: 24px; z-index: 30;
            width: 72px; height: 72px;
            border-radius: 50%;
            background: rgba(3,3,3,0.55);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.1);
            display: none; opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }
        #compass.visible { display: block; opacity: 1; }
        #compass .ring {
            position: absolute; inset: 6px;
            border-radius: 50%;
            border: 1px dashed rgba(255,255,255,0.15);
        }
        #compass .needle {
            position: absolute; top: 50%; left: 50%;
            width: 4px; height: 30px;
            margin-left: -2px; margin-top: -28px;
            transform-origin: 2px 28px;
            transition: transform 0.18s ease;
        }
        #compass .needle::before {
            content: ""; position: absolute; top: 0; left: 0;
            width: 0; height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 12px solid #ffaa44;
        }
        #compass .needle::after {
            content: ""; position: absolute; top: 12px; left: 1px;
            width: 2px; height: 16px;
            background: rgba(255,255,255,0.35);
        }
        #compass .label {
            position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
            font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;
            color: rgba(255,255,255,0.45); white-space: nowrap;
        }

        /* ── STORY CARD ───────────────────────────── */
        #story-card {
            position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%) translateY(20px);
            width: min(520px, 88vw);
            background: rgba(3,3,6,0.88);
            backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 14px;
            padding: 22px 26px 20px;
            z-index: 35; opacity: 0; pointer-events: none;
            transition: opacity 0.6s ease, transform 0.6s ease;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(80,120,200,0.15);
        }
        #story-card.visible {
            opacity: 1; transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        .story-chapter {
            font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
            color: #88aaff; font-variation-settings: "wght" 500;
            margin-bottom: 6px;
        }
        .story-title {
            font-size: 22px; color: #fff; font-variation-settings: "wght" 700;
            margin-bottom: 10px; letter-spacing: -0.3px; line-height: 1.15;
        }
        .story-body {
            font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.78);
            font-variation-settings: "wght" 400; margin-bottom: 14px;
        }
        .story-continue {
            font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
            color: rgba(255,255,255,0.4); text-align: right;
            cursor: pointer; pointer-events: auto;
        }
        .story-continue:hover { color: #fff; }

        /* ── COLLECTIBLE TOAST ────────────────────── */
        #collect-toast {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            font-size: 22px; font-variation-settings: "wght" 700;
            color: #88aaff; letter-spacing: 1px;
            text-shadow: 0 0 20px rgba(80,120,200,0.8);
            z-index: 32; opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease, transform 0.4s ease;
        }
        #collect-toast.visible {
            opacity: 1; transform: translate(-50%, -50%) scale(1);
        }

        /* ── ZONE ENTRY TOAST (smaller, top) ─────── */
        #zone-toast {
            position: fixed; top: 110px; left: 50%; transform: translateX(-50%) translateY(-10px);
            font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
            color: rgba(255,255,255,0.85);
            font-variation-settings: "wght" 500;
            padding: 8px 18px;
            background: rgba(3,3,3,0.6);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 50px;
            z-index: 32; opacity: 0; pointer-events: none;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        #zone-toast.visible {
            opacity: 1; transform: translateX(-50%) translateY(0);
        }


        /* ── CHARACTER LOADER (circular, shown after INITIALIZE) ── */
        #character-loader {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 96px; height: 96px;
            z-index: 40;
            display: none; opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }
        #character-loader.visible { display: block; opacity: 1; }
        #character-loader svg {
            width: 100%; height: 100%;
            transform: rotate(-90deg);
        }
        #character-loader .track {
            stroke: rgba(255,255,255,0.08);
            stroke-width: 2; fill: none;
        }
        #character-loader .progress {
            stroke: #88aaff;
            stroke-width: 2; fill: none;
            stroke-linecap: round;
            stroke-dasharray: 283;   /* 2 * PI * 45 */
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 0.25s ease;
            filter: drop-shadow(0 0 6px rgba(80,120,200,0.6));
        }
        #character-loader .label {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
            color: rgba(255,255,255,0.6); font-variation-settings: "wght" 500;
            text-align: center; line-height: 1.4;
        }
        #character-loader .label .pct {
            display: block; font-size: 14px; color: #fff;
            font-variation-settings: "wght" 700;
            margin-top: 2px;
        }


        /* ── NARRATIVE UI REPOSITIONING (above the copyright text) ── */
        /* Copyright text sits at: bottom:25px; left:60px (single short line).
           We move the story HUD to bottom-left, just above it. */
        #story-hud {
            top: auto !important; left: 60px !important;
            bottom: 55px !important;
        }
        /* Compass stays top-right */
        /* Story card stays bottom-center but lifted to not overlap
           the build-controls bar (bottom:36px) */
        #story-card {
            bottom: 130px !important;
        }
        /* Zone toast stays top-center but pushed below the burger */
        #zone-toast {
            top: 80px !important;
        }



        /* ── FINAL POLISH: hide compass, add vignette ── */
        #compass { display: none !important; }
        #vignette-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: radial-gradient(ellipse at center,
                transparent 35%,
                rgba(0,0,0,0.35) 75%,
                rgba(0,0,0,0.7) 100%);
            pointer-events: none; z-index: 4;
            mix-blend-mode: multiply;
        }