* { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family:'Ubuntu',system-ui,-apple-system,sans-serif;
            background:#916446; overflow:hidden; height:100vh; width:100vw;
            position:fixed; touch-action:none;
            -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
            box-shadow:inset 0 0 250px rgba(0,0,0,0.5);
        }
        #c { width:100vw; height:100vh; display:block; }

        /* INTRO OVERLAY */
        #intro {
            position:fixed;
            inset:0;
            z-index:200;
            background: #E6643C;
            box-shadow:inset 0 0 250px rgba(0,0,0,0.45);
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            overflow:hidden;
        }
        #intro.hide {
            opacity:0;
            pointer-events:none;
            transition:opacity 0.8s ease;
        }
        #intro.zoom-in #intro-map {
            transform-origin: var(--zoom-origin-x, 25.60%) var(--zoom-origin-y, 29.11%);
            transform: scale(var(--zoom-scale, 4));
            opacity:0;
            transition:transform 2.5s cubic-bezier(0.22,1,0.36,1), opacity 1.5s ease 0.8s;
        }
        #intro.zoom-in #intro-logo {
            opacity:0;
            transition:opacity 0.4s ease;
        }
        #intro.zoom-in #intro-btn {
            opacity:0;
            transition:opacity 0.4s ease;
        }

        #intro-map {
            width:min(75vw, 500px); height:auto;
            transition:transform 2.5s cubic-bezier(0.22,1,0.36,1), opacity 1.5s ease 0.8s;
            position:relative;
        }
        #intro-map svg {
            width:100%; height:auto;
            display:block;
            filter:drop-shadow(0 0 60px rgba(230,100,60,0.15));
        }

        #intro-title {
            color:#F0E6DC;
            text-align:center; margin:0;
            transition:all 0.6s ease;
        }
        #intro-logo {height: 59px;width:auto;display:block;position:absolute;top: 65px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 2px 12px rgba(0,0,0,0.3));z-index:2;}
        #intro-title h1 {
            font-size:clamp(20px, 4vw, 36px);
            font-weight:500; letter-spacing:2px;
            margin-bottom:2px;
        }
        #intro-title .sub {
            font-size:clamp(11px, 1.5vw, 14px);
            color:rgba(240,230,220,0.4);
            letter-spacing:3px; text-transform:uppercase;
        }

        #intro-btn {
            margin-top:-20px;
            padding:14px 52px;
            border:2px solid #E6643C;
            border-radius:40px;
            background:#ffffff;
            color:#E6643C;
            font-size:15px; font-weight:500;
            font-family:'Ubuntu',system-ui,sans-serif;
            letter-spacing:3px; text-transform:uppercase;
            cursor:pointer;
            transition:all 0.3s ease;
        }
        #intro-btn:hover {
            background:rgba(230,100,60,0.06);
            border-color:#E6643C;
            transform:scale(1.04);
            box-shadow:0 0 30px rgba(230,100,60,0.15);
        }
        #intro-btn:active { transform:scale(0.97); }

        /* Province map labels */
        .prov-lbl {
            font-size:4.5px; fill:rgba(240,230,220,0.22);
            font-family:'Ubuntu',system-ui,sans-serif;
            text-anchor:middle; letter-spacing:0.3px;
        }
        .prov-lbl-sj {
            font-size:7px; fill:#E6643C; font-weight:700;
            font-family:'Ubuntu',system-ui,sans-serif;
            text-anchor:middle; letter-spacing:1px;
        }

        /* San Juan pulse dot */
        @keyframes sj-pulse {
            0%, 100% { r:4; opacity:0.8; }
            50% { r:7; opacity:0.3; }
        }
        .sj-dot { animation:sj-pulse 2s ease-in-out infinite; }

        #zc { z-index:10; }
        #sg {
            z-index:10; position:fixed; top:16px; right:16px;
            width:44px; height:44px; border-radius:50%;
            background:rgba(79,79,79,0.85);
            border:1px solid rgba(230,100,60,0.3);
            color:#E6643C; font-size:22px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            backdrop-filter:blur(4px);
            transition:all 0.3s ease;
        }
        #sg:hover { background:rgba(230,100,60,0.25); border-color:#E6643C; transform:scale(1.1); }
        #sg.active { background:rgba(230,100,60,0.2); border-color:#E6643C; }

            /* Auth overlay */
            #auth-overlay {
                position:fixed; inset:0; z-index:2000;
                background:rgba(0,0,0,0.6);
                backdrop-filter:blur(4px);
                display:flex; align-items:center; justify-content:center;
                opacity:0; pointer-events:none;
                transition:opacity 0.3s ease;
            }
            #auth-overlay.v { opacity:1; pointer-events:all; }
            #auth-panel {
                background:#5A2828; border:1px solid rgba(230,100,60,0.2);
                border-radius:14px; padding:24px;
                width:94%; max-width:360px;
                position:relative;
                color:#F0E6DC; font-family:'Ubuntu',system-ui,sans-serif;
                transform:translateY(-20px);
                transition:transform 0.3s ease;
            }
            #auth-overlay.v #auth-panel { transform:translateY(0); }
            .auth-close {
                position:absolute; top:10px; right:12px;
                background:none; border:none; color:rgba(255,255,255,0.4);
                font-size:22px; cursor:pointer;
                font-family:'Ubuntu',system-ui,sans-serif;
            }
            .auth-close:hover { color:#E6643C; }
            .auth-title {
                font-size:16px; font-weight:600; color:#E6643C;
                margin-bottom:14px; text-transform:uppercase; letter-spacing:1px;
            }
            .auth-input {
                width:100%; padding:10px 12px; margin-bottom:8px;
                background:rgba(0,0,0,0.3); border:1px solid rgba(230,100,60,0.15);
                border-radius:8px; color:#F0E6DC; font-size:14px;
                font-family:'Ubuntu',system-ui,sans-serif; outline:none;
                transition:border-color 0.2s; box-sizing:border-box;
            }
            .auth-input:focus { border-color:rgba(230,100,60,0.5); }
            .auth-input::placeholder { color:rgba(255,255,255,0.25); }
            .auth-btn {
                width:100%; padding:10px; margin-top:4px;
                border:1px solid rgba(230,100,60,0.3);
                border-radius:8px; background:rgba(230,100,60,0.15);
                color:#E6643C; font-size:13px; font-weight:600; cursor:pointer;
                transition:all 0.2s;
                font-family:'Ubuntu',system-ui,sans-serif;
                text-transform:uppercase; letter-spacing:1px;
            }
            .auth-btn:hover { background:rgba(230,100,60,0.25); }
            .auth-btn.logout { border-color:rgba(255,80,80,0.3); color:#ff6666; background:rgba(255,80,80,0.1); }
            .auth-btn.logout:hover { background:rgba(255,80,80,0.2); }
            .auth-switch { text-align:center; margin-top:10px; font-size:12px; color:rgba(255,255,255,0.4); }
            .auth-switch a { color:#E6643C; text-decoration:none; font-weight:500; }
            .auth-switch a:hover { text-decoration:underline; }
            .auth-error { text-align:center; margin-top:8px; font-size:12px; color:#ff6666; display:block; }
            .auth-profile-name { font-size:16px; font-weight:600; color:#F0E6DC; margin-bottom:2px; }
            .auth-profile-email { font-size:12px; color:rgba(255,255,255,0.4); margin-bottom:14px; }
        /* Settings tabs */
        #sp .sp-tabs { display:flex; gap:1px; margin-bottom:10px; border-bottom:1px solid rgba(230,100,60,0.15); padding-bottom:6px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; flex-shrink:0; white-space:nowrap; }
        #sp .sp-tabs::-webkit-scrollbar { display:none; }
        #sp .sp-tab { flex-shrink:0; padding:3px 5px; border:none; border-radius:4px; background:transparent; color:rgba(255,255,255,0.35); font-size:8px; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:'Ubuntu',system-ui,sans-serif; text-transform:uppercase; letter-spacing:0.2px; white-space:nowrap; }
        #sp .sp-tab:hover { color:rgba(255,255,255,0.6); background:rgba(230,100,60,0.08); }
        #sp .sp-tab.active { color:#E6643C; background:rgba(230,100,60,0.12); }
        #sp .sp-tab-content { display:none; }
        #sp .sp-tab-content.active { display:block; }
        #sp { z-index:300; position:fixed; top:68px; right:16px; width:370px; max-height:calc(100vh - 90px); overflow-y:auto; background:#5A2828; border:1px solid rgba(230,100,60,0.2); border-radius:12px; padding:12px; opacity:0; pointer-events:none; transform:translateY(-10px); transition:all 0.3s ease; backdrop-filter:blur(8px); }
        #sp::-webkit-scrollbar { width:3px; }
        #sp::-webkit-scrollbar-track { background:transparent; }
        #sp::-webkit-scrollbar-thumb { background:rgba(230,100,60,0.25); border-radius:2px; }
        #sp.v { opacity:1; pointer-events:all; transform:translateY(0); }
        #sp .sp-h { font-size:11px; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; font-family:'Ubuntu',system-ui,sans-serif; }
        .cam-light-btn { background:transparent; border:1px solid rgba(240,230,220,0.15); border-radius:5px; cursor:pointer; padding:3px; display:flex; align-items:center; justify-content:center; color:rgba(240,230,220,0.4); transition:all 0.2s; flex-shrink:0; }
        .cam-light-btn:hover { background:rgba(230,100,60,0.1); border-color:rgba(230,100,60,0.3); color:rgba(240,230,220,0.7); }
        .cam-light-btn.active { background:rgba(230,100,60,0.15); border-color:rgba(230,100,60,0.5); color:#E6643C; }
        #sp .lb { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; transition:all 0.2s; margin-bottom:2px; font-size:13px; font-family:'Ubuntu',system-ui,sans-serif; }
        #sp .lb:hover { background:rgba(230,100,60,0.1); }
        #sp .lb.off { opacity:0.4; }
        #sp .lb-dot { width:8px; height:8px; border-radius:50%; }
        #sp .lb-label { flex:1; color:rgba(255,255,255,0.8); }
        #sp .lb-ind::after { content:'ON'; color:#E6643C; font-weight:700; font-size:10px; }
        #sp .lb.off .lb-ind::after { content:'OFF'; color:rgba(255,255,255,0.3); }
        #sp .sv-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-family:'Ubuntu',system-ui,sans-serif; }
        #sp .sv-label { font-size:11px; color:rgba(255,255,255,0.6); width:40px; }
        #sp .sv-slider { flex:1; -webkit-appearance:none; height:4px; background:rgba(230,100,60,0.2); border-radius:2px; outline:none; }
        #sp .sv-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#E6643C; cursor:pointer; border:2px solid #5A2828; }
        #sp .lgroup { margin-bottom:1px; }
        #sp .lsub { display:flex; align-items:center; gap:6px; padding:2px 8px 6px 16px; }
        #sp .lsub .li-slider { flex:1; -webkit-appearance:none; height:3px; background:rgba(230,100,60,0.15); border-radius:2px; outline:none; }
        #sp .lsub .li-slider::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:#E6643C; cursor:pointer; border:2px solid #5A2828; }
        #sp .lsub .li-color { width:24px; height:20px; padding:0; border:1px solid rgba(230,100,60,0.2); border-radius:3px; cursor:pointer; background:transparent; flex-shrink:0; }
        #sp .lsub .li-color::-webkit-color-swatch-wrapper { padding:0; }
        #sp .lsub .li-color::-webkit-color-swatch { border:none; border-radius:2px; }
        #sp .lsub .li-val { font-size:10px; color:rgba(255,255,255,0.4); width:30px; text-align:right; font-family:'Ubuntu',system-ui,sans-serif; flex-shrink:0; }
        #sp .sv-val { font-size:11px; color:rgba(255,255,255,0.5); width:38px; text-align:right; font-family:'Ubuntu',system-ui,sans-serif; }
        /* Extra spotlight sliders - no azul, terracota, mas separados */
        #sp .es-slider { flex:1; -webkit-appearance:none; height:3px; background:rgba(230,100,60,0.15); border-radius:2px; outline:none; margin:4px 0; }
        #sp .es-slider::-webkit-slider-thumb { -webkit-appearance:none; width:9px; height:9px; border-radius:50%; background:#E6643C; cursor:pointer; border:2px solid #5A2828; }
        #sp .es-slider::-moz-range-thumb { width:9px; height:9px; border-radius:50%; background:#E6643C; cursor:pointer; border:2px solid #5A2828; }
        #sp .es-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; padding-left:28px; }
        #sp .es-label { font-size:9px; color:rgba(255,255,255,0.4); min-width:44px; flex-shrink:0; }
        #sp .es-val { font-size:9px; color:rgba(255,255,255,0.35); min-width:24px; text-align:right; font-family:'Ubuntu',system-ui,sans-serif; }
        /* Eye and delete buttons for extra spotlights */
        #sp .es-eye-btn { background:transparent; border:1px solid rgba(240,230,220,0.12); border-radius:4px; cursor:pointer; padding:2px 4px; font-size:10px; line-height:1; color:rgba(240,230,220,0.5); transition:all 0.2s; }
        #sp .es-eye-btn:hover { background:rgba(230,100,60,0.1); border-color:rgba(230,100,60,0.3); }
        #sp .es-eye-btn.muted { color:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.05); }
        #sp .es-del-btn { background:transparent; border:1px solid rgba(200,60,50,0.2); border-radius:4px; cursor:pointer; padding:2px 5px; font-size:10px; line-height:1; color:rgba(200,60,50,0.5); transition:all 0.2s; margin-left:4px; }
        #sp .es-del-btn:hover { background:rgba(200,60,50,0.15); border-color:rgba(200,60,50,0.4); color:#E6643C; }
        #sp .pp-slider { flex:1; -webkit-appearance:none; height:4px; background:rgba(230,100,60,0.2); border-radius:2px; outline:none; }
        #sp .pp-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#E6643C; cursor:pointer; border:2px solid #5A2828; }
        #sv-save { width:100%; margin-top:8px; padding:8px; border:1px solid rgba(230,100,60,0.3); border-radius:6px; background:rgba(230,100,60,0.1); color:#E6643C; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:'Ubuntu',system-ui,sans-serif; text-transform:uppercase; letter-spacing:1px; }
        #sv-save:hover { background:rgba(230,100,60,0.25); }

        /* Skybox radio buttons - styled for dark panel */
        #sp input[type="radio"] {
            -webkit-appearance:none; appearance:none;
            width:12px; height:12px;
            border:1px solid rgba(230,100,60,0.4);
            border-radius:50%;
            background:transparent;
            cursor:pointer; flex-shrink:0;
            transition:all 0.2s;
        }
        #sp input[type="radio"]:checked {
            border-color:#E6643C;
            background:#E6643C;
            box-shadow:inset 0 0 0 2px #5A2828;
        }
        #sp #skybox-options label {
            display:flex; align-items:center; gap:6px;
            padding:3px 0;
            font-size:11px; color:rgba(255,255,255,0.8);
            cursor:pointer;
        }
        /* Ensure sliders work with touch */
        #sp input[type="range"] { touch-action:manipulation; }
        #mo { z-index:100; position:fixed; inset:0; background:transparent; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; z-index:1000; }
        #mo.a { opacity:1; pointer-events:all; }
        #md {background: rgb(120,120,120);border: 4px solid #E6643C;border-radius:16px;max-width:460px;width:90%;max-height:85vh;padding:0;box-shadow:0 20px 60px rgba(0,0,0,0.4);position:relative;display:flex;flex-direction:column;overflow:hidden;}
        
        /* Modal header bar */
        .modal-header {
            background: #E6643C;
            padding:14px 50px 14px 18px;
            display:flex;
            align-items:center;
            gap:12px;
            position:relative;
            flex-shrink:0;
        }
        .modal-header-info {
            display:flex;
            flex-direction:column;
            flex:1;
            min-width:0;
        }
        .modal-header-title {
            font-size:17px;
            font-weight:600;
            color:#ffffff;
            margin:0;
            line-height:1.2;
            font-family:'Ubuntu',system-ui,sans-serif;
        }
        .modal-header-circuit {
            font-size:10px;
            font-weight:400;
            color:#ffffff;
            letter-spacing:0.5px;
            text-transform:uppercase;
            font-family:'Ubuntu',system-ui,sans-serif;
            margin-top:1px;
        }
        .modal-header-icon {
            height:30px;
            width:auto;
            flex-shrink:0;
            opacity:0.85;
        }
        #md .mc {
            position:absolute; top:8px; right:8px;
            background:rgba(0,0,0,0.12);
            border:none;
            color:#ffffff; font-size:16px;
            width:26px; height:26px; border-radius:50%;
            cursor:pointer; z-index:20;
            display:flex; align-items:center; justify-content:center;
            transition:all 0.2s;
            font-family:'Ubuntu',system-ui,sans-serif;
            line-height:1; font-weight:700;
        }
        #md .mc:hover { background:rgba(0,0,0,0.25); transform:scale(1.15); }
        #md .mi {width:100%;/* height:130px; */object-fit:contain;display:block;}
        #md .mb { padding:0 18px 16px; position:relative; overflow-y:auto; flex:1; min-height:0; color:#ffffff; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; }
        #md .mb > #modal-main { padding-top:16px; }
        #md .mb > #modal-sub { padding-top:16px; }
        #md #md3 {font-size:14px;color: #ffffff;line-height:1.5;margin:0;font-family:'Ubuntu',system-ui,sans-serif;}
        #md #m-sub { font-size:12px; color:#ffffff; margin:0 0 6px; font-family:'Ubuntu',system-ui,sans-serif; }
        #ld { z-index:150; }
        #in {
            position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:10;
            color:rgba(255,255,255,0.35); font-size:12px; font-family:'Ubuntu',system-ui,sans-serif;
            letter-spacing:1px; text-align:center;
            transition:opacity 0.5s ease;
            pointer-events:none;
        }
        #in.h { opacity:0; }
        #zc {
            position:fixed; bottom:20px; right:20px; z-index:10;
            display:flex; flex-direction:column; gap:4px;
        }
        #zc button {
            width:36px; height:36px; border-radius:50%;
            background:rgba(79,79,79,0.9); border:1px solid rgba(230,100,60,0.15);
            color:#E6643C; font-size:18px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:all 0.2s;
            font-family:'Ubuntu',system-ui,sans-serif;
        }
        #zc button:hover { background:rgba(230,100,60,0.2); border-color:#E6643C; }
        #zc button.active { background:rgba(230,100,60,0.25); border-color:#E6643C; color:#ff8a6a; box-shadow:0 0 12px rgba(230,100,60,0.3); }

        /* POI ADMIN PANEL */
        #poi-admin-overlay {
            position:fixed; inset:0; z-index:500;
            background:rgba(0,0,0,0.6);
            backdrop-filter:blur(4px);
            display:flex; align-items:center; justify-content:center;
            opacity:0; pointer-events:none;
            transition:opacity 0.3s ease;
        }
        #poi-admin-overlay.v { opacity:1; pointer-events:all; }
        #poi-admin-panel {
            background:#5A2828; border:1px solid rgba(230,100,60,0.2);
            border-radius:14px; padding:20px;
            width:94%; max-width:480px; max-height:85vh;
            overflow-y:auto; position:relative;
            color:#F0E6DC; font-family:'Ubuntu',system-ui,sans-serif;
            transform:translateY(-20px);
            transition:transform 0.3s ease;
        }
        #poi-admin-overlay.v #poi-admin-panel { transform:translateY(0); }
        #poi-admin-panel::-webkit-scrollbar { width:4px; }
        #poi-admin-panel::-webkit-scrollbar-track { background:transparent; }
        #poi-admin-panel::-webkit-scrollbar-thumb { background:rgba(230,100,60,0.3); border-radius:2px; }
        .poi-list-item {
            display:flex; align-items:center; gap:8px;
            padding:6px 8px; border-radius:6px; cursor:pointer;
            transition:background 0.2s; margin-bottom:2px;
        }
        .poi-list-item:hover { background:rgba(230,100,60,0.1); }
        .poi-list-item.active { background:rgba(230,100,60,0.15); }

        @media (max-width:480px) {
            #intro-map { width:70vw; }
            #intro-btn { padding:12px 36px; font-size:13px; }
            #intro-logo { height:35px; }
        }
        /* Sub-section buttons in modal - compact 2-column grid */
        .m-sub-btn {
            display:flex;
            align-items:center;
            gap:5px;
            width:100%;
            padding:6px 10px;
            border:1px solid rgba(120,72,73,0.25);
            border-radius:7px;
            background: #E6643C;
            color:#ffffff;
            font-size:10.5px;
            font-weight:500;
            font-family:'Ubuntu',system-ui,sans-serif;
            cursor:pointer;
            transition:all 0.15s ease;
            text-align:left;
            line-height:1.3;
        }
        .m-sub-btn:hover {
            background:#663d3e;
            border-color:rgba(120,72,73,0.5);
        }
        .m-sub-btn:active { transform:scale(0.97); }

        .m-sub-label { flex:1; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; }
        .m-sub-arrow { font-size:14px; color:rgba(255,255,255,0.5); flex-shrink:0; }
        .m-sub-btn:hover .m-sub-arrow {
            transform:translateX(3px);
            color:#784849;
        }
        
        /* Cross-fade between main view and sub view */
        #modal-main, #modal-sub {
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        #modal-main.fade-out {
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
        }
        #modal-main.fade-in {
            animation: mainFadeIn 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
        }
        #modal-sub.fade-out {
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
        }
        #modal-sub.fade-in {
            animation: subFadeIn 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
        }
        @keyframes mainFadeIn {
            0% { opacity:0; transform:translateY(8px); }
            100% { opacity:1; transform:translateY(0); }
        }
        @keyframes subFadeIn {
            0% { opacity:0; transform:translateY(8px); }
            100% { opacity:1; transform:translateY(0); }
        }

            @keyframes sjFadeIn {
                0% { opacity:0; transform:translateY(12px) scale(0.95); }
                100% { opacity:1; transform:translateY(0) scale(1); }
            }
            @keyframes sjBarGlow {
                0%,100% { opacity:0.3; transform:translateX(-100%); }
                50% { opacity:1; transform:translateX(100%); }
            }
            @keyframes sjDot {
                0%,100% { opacity:0.3; transform:scale(1); }
                50% { opacity:1; transform:scale(1.5); background:#ff8a6a; }
            }