:root{
    --preview-width:240px;
    --preview-height:135px;
    --preview-margin:16px;
    --tkcz-browser-viewport-height:100vh;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
    width:100%; height:100%; overflow:hidden;
    background:#111; font-family:system-ui,sans-serif;
}

html.i18n-pending [data-i18n],
html.i18n-pending [data-i18n-aria-label]{ visibility:hidden; }

#app{
    position:relative;
    width:100vw;
    height:var(--tkcz-browser-viewport-height);
    overflow:hidden;
    isolation:isolate;
}

@supports (height:100dvh){
    :root{ --tkcz-browser-viewport-height:100dvh; }
}

.app-menu{
    position:absolute;
    z-index:80;
    top:max(14px,env(safe-area-inset-top));
    left:max(14px,env(safe-area-inset-left));
    color:#17231e;
}

.app-menu-toggle{
    position:relative;
    display:grid;
    width:46px; height:46px;
    place-content:center;
    gap:5px;
    padding:0;
    border:2px solid rgba(255,255,255,.94);
    border-radius:50%;
    background:#173f32;
    color:#fff;
    box-shadow:0 4px 18px rgba(0,0,0,.4);
    cursor:pointer;
    transition:background .2s ease,transform .2s ease;
}

.app-menu-toggle:hover{ transform:translateY(-1px); }
.app-menu.is-open .app-menu-toggle{ background:#245c49; }

.app-menu-toggle span{
    display:block;
    width:19px; height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
}

.app-menu.is-open .app-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.app-menu.is-open .app-menu-toggle span:nth-child(2){ opacity:0; }
.app-menu.is-open .app-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.app-menu-toggle:focus-visible,
.app-menu-about:focus-visible,
.about-dialog-close:focus-visible,
.about-dialog-links a:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.app-menu-panel{
    position:absolute;
    top:56px; left:0;
    width:min(330px,calc(100vw - 28px));
    max-height:calc(100dvh - 84px - env(safe-area-inset-top));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px;
    border:1px solid rgba(255,255,255,.54);
    border-radius:17px;
    background:rgba(250,249,244,.97);
    box-shadow:0 18px 50px rgba(0,0,0,.38);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

.app-menu-panel[hidden],.about-dialog[hidden]{ display:none; }

.app-menu-heading{
    margin:0 2px 9px;
    color:#627069;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.app-menu-option{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:10px;
    align-items:start;
    padding:11px 8px;
    border-radius:11px;
    cursor:pointer;
}

.app-menu-option:hover{ background:#edf1eb; }

.app-menu-option input{
    width:19px; height:19px;
    margin-top:1px;
    accent-color:#245c49;
    cursor:pointer;
}

.app-menu-option span{ display:grid; gap:3px; }

.app-menu-option strong{
    font-size:.86rem;
    line-height:1.25;
}

.app-menu-option small{
    color:#67726d;
    font-size:.71rem;
    line-height:1.35;
}

.app-menu-language{
    grid-template-columns:1fr auto;
    align-items:center;
    margin-bottom:5px;
    border-bottom:1px solid #d9ded9;
    border-radius:0;
}

.app-menu-language:hover{ background:transparent; }

.app-menu-language select{
    max-width:128px;
    min-height:36px;
    padding:6px 28px 6px 10px;
    border:1px solid #b9c4bd;
    border-radius:9px;
    background:#fff;
    color:#173f32;
    font:inherit;
    font-size:.78rem;
    font-weight:750;
    cursor:pointer;
}

.app-menu-language select:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:2px;
}

.app-menu-about{
    display:grid;
    grid-template-columns:28px 1fr auto;
    align-items:center;
    gap:9px;
    width:100%;
    margin-top:8px;
    padding:12px 8px 4px;
    border:0;
    border-top:1px solid #d9ded9;
    background:transparent;
    color:#173f32;
    font:inherit;
    font-size:.86rem;
    font-weight:800;
    text-align:left;
    cursor:pointer;
}

.app-menu-info{
    display:grid;
    width:24px; height:24px;
    place-items:center;
    border:1.5px solid currentColor;
    border-radius:50%;
    font-family:Georgia,serif;
    font-size:.84rem;
}

.app-menu-tutorial{
    padding-bottom:10px;
}

.app-menu-tutorial + .app-menu-about{
    margin-top:0;
    padding-top:8px;
    border-top:0;
}

.app-menu-tutorial-icon{
    display:grid;
    width:24px; height:24px;
    place-items:center;
    border-radius:8px;
    background:#dfeae4;
    color:#245c49;
    font-size:1rem;
    line-height:1;
}

.app-menu-tutorial-copy{
    display:grid;
    gap:2px;
}

.app-menu-tutorial-copy small{
    color:#67726d;
    font-size:.69rem;
    font-weight:500;
    line-height:1.3;
}

.app-menu-chevron{ font-size:1.45rem; font-weight:400; line-height:1; }


.about-dialog{
    position:fixed;
    z-index:2000;
    inset:0;
    display:grid;
    place-items:center;
    padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
        max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}

.about-dialog-backdrop{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    border:0;
    background:rgba(3,8,6,.72);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
    cursor:pointer;
}

.about-dialog-card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(620px,100%);
    max-height:min(760px,100%);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.62);
    border-radius:22px;
    background:#f7f6f0;
    color:#1b2923;
    box-shadow:0 28px 80px rgba(0,0,0,.5);
}

.about-dialog-header{
    display:flex;
    flex:none;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:24px 24px 18px;
    border-bottom:1px solid #dfe2dc;
}

.about-dialog-kicker{
    margin-bottom:4px;
    color:#66736d;
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-dialog-header h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.7rem,5vw,2.45rem);
    font-weight:500;
    line-height:1.05;
}

.about-dialog-close{
    display:grid;
    flex:none;
    width:38px; height:38px;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#e6e9e3;
    color:#173f32;
    font-size:1.55rem;
    line-height:1;
    cursor:pointer;
}

.about-dialog-content{
    display:grid;
    gap:20px;
    overflow:auto;
    padding:22px 24px 26px;
    overscroll-behavior:contain;
}

.about-dialog-content section{ display:grid; gap:6px; }

.about-dialog-content h3{
    font-size:.94rem;
    line-height:1.3;
}

.about-dialog-content p{
    color:#53615a;
    font-size:.84rem;
    line-height:1.55;
}

.about-dialog-links{
    padding-top:18px;
    border-top:1px solid #dfe2dc;
}

.about-dialog-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:42px;
    padding:10px 12px;
    border-radius:10px;
    background:#e7eee8;
    color:#174b3b;
    font-size:.8rem;
    font-weight:750;
    line-height:1.3;
    text-decoration:none;
}

.about-dialog-links a::after{ content:"↗"; flex:none; }
.about-dialog-links a:hover{ background:#dce8df; }

html.has-about-dialog{ overflow:hidden; }

#mapWrapper,#map{ position:absolute; inset:0; }
#mapWrapper{ z-index:1; }

#galleryWrapper{
    position:absolute; inset:0; z-index:10;
    opacity:0; visibility:hidden; pointer-events:none;
    touch-action:pan-x pan-y;
    transition:opacity .6s ease,visibility 0s linear .6s;
}

#app[data-mode="gallery"] #galleryWrapper{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .6s ease,visibility 0s;
}

#gallery{ position:absolute; inset:0; overflow:hidden; }

#campGallery{
    position:absolute; inset:0;
    overflow-x:hidden; overflow-y:auto;
    overscroll-behavior-y:contain;
    scroll-snap-type:y mandatory;
    scrollbar-width:none;
}

#campGallery.is-timeline-jumping{ scroll-snap-type:none; }

#campGallery::-webkit-scrollbar,.camp-photo-track::-webkit-scrollbar{ display:none; }

.camp-gallery-set{
    position:relative;
    width:100%; height:100%;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    background:#111;
    isolation:isolate;
}

.camp-gallery-backdrop{
    display:none;
}

.camp-gallery-set::after{
    content:""; position:absolute; z-index:2; inset:auto 0 0;
    height:min(46vh,460px); pointer-events:none;
    background:linear-gradient(transparent,rgba(0,0,0,.78));
}

.camp-photo-track{
    position:relative; z-index:1;
    display:flex;
    width:100%; height:100%;
    overflow:hidden;
    align-items:stretch;
    overscroll-behavior-x:contain;
    scroll-snap-type:none;
    scroll-padding-inline:0;
    touch-action:pan-y;
    -webkit-overflow-scrolling:auto;
    scrollbar-width:none;
}

.camp-gallery-set.is-active .camp-photo-track{
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
}

@supports (overflow:clip){
    .camp-gallery-set:not(.is-active) .camp-photo-track{ overflow:clip; }
}

.camp-photo-card{
    position:relative;
    flex:0 0 100%;
    width:100%; height:100%;
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#111;
    box-shadow:none;
    touch-action:manipulation;
}

.camp-photo{
    --photo-cover-scale:1;
    position:absolute;
    left:50%; top:50%;
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transform:translate(-50%,-50%) scale(1);
    transform-origin:center;
    transition:opacity .32s ease,transform .5s cubic-bezier(.22,.7,.2,1);
}

.camp-photo.is-fit-width{
    width:100%; height:auto;
    object-fit:fill;
}

.camp-photo.is-fit-height{
    width:auto; height:100%;
    object-fit:fill;
}

.camp-gallery-set.is-active .camp-photo.is-loaded{ will-change:transform; }

#galleryWrapper.is-photo-zoomed .camp-photo{
    transform:translate(-50%,-50%) scale(var(--photo-cover-scale));
}

.camp-photo.is-loaded{ opacity:1; }

.camp-photo-loading{
    position:absolute; z-index:3;
    left:50%; top:50%;
    display:flex;
    align-items:center;
    gap:.58rem;
    transform:translate(-50%,-50%);
    padding:.62rem .82rem .62rem .72rem;
    border:1px solid rgba(205,235,185,.24);
    border-radius:999px;
    background:linear-gradient(135deg,rgba(11,24,17,.68),rgba(20,31,21,.46));
    box-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06);
    color:rgba(255,255,255,.86);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
    contain:layout paint;
    animation:none;
    transition:opacity .2s ease;
}

.camp-photo-loading::before{
    content:"";
    flex:none;
    width:15px; height:10px;
    border:1.5px solid rgba(209,239,183,.96);
    border-radius:100% 0 100% 0;
    box-shadow:inset 2px -2px rgba(129,181,96,.15);
    transform:rotate(-38deg);
    transform-origin:88% 88%;
}

.camp-photo-loading::after{
    content:"";
    flex:none;
    width:3px; height:3px;
    margin-left:-.18rem;
    border-radius:50%;
    background:#efffc9;
    box-shadow:6px -3px rgba(220,248,175,.78),12px 1px rgba(173,225,125,.62);
    opacity:.45;
}

.camp-gallery-set.is-loader-active .camp-photo-card:not(.is-loaded):not(.is-error) .camp-photo-loading{
    animation:gallery-loading-breathe 1.55s ease-in-out infinite alternate;
}

.camp-gallery-set.is-loader-active .camp-photo-card:not(.is-loaded):not(.is-error) .camp-photo-loading::before{
    animation:gallery-loading-leaf 1.35s ease-in-out infinite alternate;
}

.camp-gallery-set.is-loader-active .camp-photo-card:not(.is-loaded):not(.is-error) .camp-photo-loading::after{
    animation:gallery-loading-fireflies 1.45s ease-in-out infinite;
}

.camp-photo-loading[hidden]{ display:none; }

.camp-photo-card.is-loaded .camp-photo-loading{
    opacity:0;
    pointer-events:none;
}

.camp-photo-card.is-error .camp-photo-loading{
    animation:none;
    color:rgba(255,255,255,.65);
}

.camp-photo-card.is-error .camp-photo-loading::before,
.camp-photo-card.is-error .camp-photo-loading::after{
    display:none;
}

@keyframes gallery-loading-breathe{
    from{ opacity:.72; }
    to{ opacity:1; }
}

@keyframes gallery-loading-leaf{
    from{ transform:rotate(-43deg) translate3d(-1px,1px,0); }
    to{ transform:rotate(-27deg) translate3d(1px,-1px,0); }
}

@keyframes gallery-loading-fireflies{
    0%,100%{ opacity:.28; transform:translate3d(0,2px,0); }
    45%{ opacity:1; transform:translate3d(1px,-2px,0); }
    70%{ opacity:.58; transform:translate3d(-1px,0,0); }
}

.camp-gallery-caption{
    position:absolute; z-index:3;
    left:max(20px,env(safe-area-inset-left));
    right:calc(var(--preview-width) + var(--preview-margin) + 24px);
    bottom:max(22px,env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    color:#fff; pointer-events:none;
    text-shadow:0 2px 14px rgba(0,0,0,.75);
}

.camp-gallery-name{
    font-size:clamp(1.5rem,4vw,3.4rem);
    line-height:1; font-weight:750;
}

.camp-gallery-count{
    order:-1;
    flex:none;
    font-size:.72rem;
    font-weight:750;
    letter-spacing:.18em;
    opacity:.72;
}
.gallery-affordance{
    position:absolute;
    z-index:4;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.gallery-edge-shadow{
    position:absolute;
    opacity:0;
    transition:opacity .28s ease;
    will-change:opacity;
}

.gallery-edge-shadow-left,
.gallery-edge-shadow-right{
    top:0; bottom:0;
    width:clamp(34px,7vw,110px);
}

.gallery-edge-shadow-left{
    left:0;
    background:linear-gradient(to right,rgba(0,0,0,.4),transparent);
}

.gallery-edge-shadow-right{
    right:0;
    background:linear-gradient(to left,rgba(0,0,0,.4),transparent);
}

.gallery-edge-shadow-top,
.gallery-edge-shadow-bottom{
    left:0; right:0;
    height:clamp(36px,8vh,110px);
}

.gallery-edge-shadow-top{
    top:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.34),transparent);
}

.gallery-edge-shadow-bottom{
    bottom:0;
    background:linear-gradient(to top,rgba(0,0,0,.38),transparent);
}

#galleryWrapper.can-photo-prev .gallery-edge-shadow-left,
#galleryWrapper.can-photo-next .gallery-edge-shadow-right,
#galleryWrapper.can-camp-prev .gallery-edge-shadow-top,
#galleryWrapper.can-camp-next .gallery-edge-shadow-bottom{
    opacity:1;
}

.camp-timeline{
    --timeline-position:0%;
    position:absolute;
    z-index:8;
    top:max(72px,calc(env(safe-area-inset-top) + 60px));
    right:max(10px,env(safe-area-inset-right));
    bottom:calc(var(--preview-height) + var(--preview-margin) + 24px);
    width:28px;
    min-height:160px;
    color:#fff;
    opacity:.76;
    transition:opacity .25s ease;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.camp-timeline.is-expanded,
.camp-timeline:focus-within{
    opacity:1;
}

.camp-timeline-rail{
    position:absolute;
    z-index:2;
    top:0; right:0; bottom:0;
    width:28px;
    border-radius:999px;
    cursor:ns-resize;
    outline:none;
}

.camp-timeline-rail::before{
    content:"";
    position:absolute;
    inset:0 -3px;
    border-radius:999px;
    background:rgba(5,10,8,.01);
    pointer-events:none;
}

.camp-timeline-line{
    position:absolute;
    top:8px; right:9px; bottom:8px;
    width:4px;
    overflow:visible;
    border-radius:999px;
    background:
        repeating-linear-gradient(to bottom,rgba(255,255,255,.3) 0 1px,transparent 1px 7px),
        rgba(5,10,8,.36);
    box-shadow:0 1px 8px rgba(0,0,0,.55);
}

.camp-timeline-progress{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:var(--timeline-position);
    border-radius:999px;
    background:#f1cf86;
    box-shadow:0 0 8px rgba(241,207,134,.45);
}

.camp-timeline-thumb{
    position:absolute;
    z-index:2;
    left:50%; top:var(--timeline-position);
    width:12px; height:12px;
    border:2px solid #fff;
    border-radius:50%;
    background:#173f32;
    box-shadow:0 2px 8px rgba(0,0,0,.58);
    transform:translate(-50%,-50%);
    transition:width .2s ease,height .2s ease,background .2s ease;
}

.camp-timeline.is-expanded .camp-timeline-thumb,
.camp-timeline.is-scrubbing .camp-timeline-thumb{
    width:16px; height:16px;
    background:#f1cf86;
}

.camp-timeline-rail:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.camp-timeline-label{
    position:absolute;
    z-index:12;
    top:50%;
    right:max(44px,calc(env(safe-area-inset-right) + 34px));
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:10px;
    width:min(230px,60vw);
    padding:8px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:11px;
    background:rgba(9,15,12,.82);
    box-shadow:0 7px 24px rgba(0,0,0,.35);
    color:#fff;
    opacity:0;
    transform:translateY(-50%) translateX(8px);
    transition:opacity .18s ease,transform .22s ease;
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
    pointer-events:none;
}

.camp-timeline-label > img{
    display:block;
    width:56px; height:56px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:9px;
    object-fit:cover;
    background:#17231e;
}

.camp-timeline-label-text{
    display:grid;
    min-width:0;
    gap:4px;
}

.camp-timeline.is-scrubbing + .camp-timeline-label,
.camp-timeline.is-previewing + .camp-timeline-label,
.camp-timeline:focus-within + .camp-timeline-label{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

@media (hover:hover) and (pointer:fine){
    .camp-timeline.is-expanded + .camp-timeline-label{
        opacity:1;
        transform:translateY(-50%) translateX(0);
    }
}

.camp-timeline.is-preview-dismissed + .camp-timeline-label{
    opacity:0;
    transform:translateY(-50%) translateX(8px);
}

.camp-timeline-label strong{
    overflow:hidden;
    font-size:.76rem;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.camp-timeline-label small{
    color:rgba(255,255,255,.66);
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.12em;
}

.gallery-onboarding{
    position:absolute;
    z-index:90;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
        max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    background:rgba(3,8,6,.64);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    transition:background .32s ease;
}

.gallery-onboarding[hidden]{ display:none; }
.gallery-onboarding [hidden]{ display:none !important; }

.gallery-onboarding[data-phase="practice"]{
    pointer-events:none;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.gallery-onboarding-card{
    position:relative;
    z-index:3;
    width:min(500px,100%);
    padding:clamp(24px,5vw,38px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:24px;
    background:rgba(248,247,241,.97);
    box-shadow:0 24px 70px rgba(0,0,0,.48);
    color:#17231e;
    text-align:center;
}

.gallery-onboarding-lead{
    max-width:390px;
    margin:14px auto 0;
    color:#56655e;
    font-size:.9rem;
    line-height:1.55;
}

.gallery-onboarding-route{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:24px 0;
}

.gallery-onboarding-route span{
    display:grid;
    width:42px; height:42px;
    place-items:center;
    border:1px solid rgba(23,63,50,.12);
    border-radius:14px;
    background:#e7eee8;
    color:#173f32;
    font-size:1.15rem;
    font-weight:850;
}

.gallery-onboarding-kicker{
    margin-bottom:7px;
    color:#65736c;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.gallery-onboarding-card h2{
    font-size:clamp(1.55rem,5vw,2.3rem);
    line-height:1.08;
}

.gallery-gesture-demo{
    position:relative;
    display:block;
    width:68px;
    height:68px;
    flex:none;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;
    background:linear-gradient(145deg,#173f32,#0b2019);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 20px rgba(14,35,27,.18);
}

.gallery-gesture-trail,
.gallery-gesture-touch{
    position:absolute;
    left:50%;
    top:50%;
}

.gallery-gesture-trail{
    width:3px;
    height:48px;
    border-radius:999px;
    background:linear-gradient(to bottom,transparent,rgba(241,207,134,.75),transparent);
    transform:translate(-50%,-50%);
}

.gallery-gesture-demo.is-horizontal .gallery-gesture-trail{
    width:48px;
    height:3px;
    background:linear-gradient(to right,transparent,rgba(241,207,134,.75),transparent);
}

.gallery-gesture-demo.is-double-tap .gallery-gesture-trail{
    width:38px;
    height:38px;
    border:1px solid rgba(241,207,134,.5);
    border-radius:10px;
    background:rgba(255,255,255,.07);
}

.gallery-gesture-demo.is-scrubber .gallery-gesture-trail{
    width:5px;
    height:48px;
    background:linear-gradient(to bottom,rgba(255,255,255,.18),#f1cf86,rgba(255,255,255,.18));
}

.gallery-gesture-demo.is-scrubber::after{
    content:"";
    position:absolute;
    left:50%; top:9px; bottom:9px;
    width:18px;
    border-top:1px solid rgba(255,255,255,.22);
    border-bottom:1px solid rgba(255,255,255,.22);
    transform:translateX(-50%);
}

.gallery-gesture-demo.is-map .gallery-gesture-trail{
    width:44px;
    height:38px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    background:
        linear-gradient(90deg,transparent 31%,rgba(255,255,255,.26) 32%,rgba(255,255,255,.26) 34%,transparent 35%,transparent 66%,rgba(255,255,255,.2) 67%,rgba(255,255,255,.2) 69%,transparent 70%),
        linear-gradient(0deg,transparent 46%,rgba(241,207,134,.55) 47%,rgba(241,207,134,.55) 51%,transparent 52%),
        #326b50;
}

.gallery-gesture-touch{
    width:18px;
    height:18px;
    border:3px solid rgba(255,255,255,.94);
    border-radius:50%;
    background:#f1cf86;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
}

.gallery-gesture-demo.is-vertical .gallery-gesture-touch{
    animation:gallery-swipe-vertical 1.8s ease-in-out infinite;
}

.gallery-gesture-demo.is-horizontal .gallery-gesture-touch{
    animation:gallery-swipe-horizontal 1.8s ease-in-out infinite;
}

.gallery-gesture-demo.is-double-tap .gallery-gesture-touch{
    animation:gallery-double-tap 1.8s ease-in-out infinite;
}

.gallery-gesture-demo.is-scrubber .gallery-gesture-touch{
    animation:gallery-scrubber-drag 1.9s ease-in-out infinite;
}

.gallery-gesture-demo.is-map .gallery-gesture-touch{
    animation:gallery-map-tap 1.8s ease-in-out infinite;
}

.gallery-onboarding-skip{
    position:absolute;
    z-index:4;
    top:max(14px,env(safe-area-inset-top));
    right:max(14px,env(safe-area-inset-right));
    min-height:40px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(7,18,13,.7);
    color:rgba(255,255,255,.82);
    font:inherit;
    font-size:.72rem;
    font-weight:760;
    cursor:pointer;
    pointer-events:auto;
}

.gallery-onboarding-skip:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.gallery-onboarding-spotlight{
    position:absolute;
    z-index:1;
    left:var(--onboarding-focus-left,15%);
    top:var(--onboarding-focus-top,18%);
    width:var(--onboarding-focus-width,70%);
    height:var(--onboarding-focus-height,60%);
    border:2px solid rgba(241,207,134,.88);
    border-radius:var(--onboarding-focus-radius,30px);
    box-shadow:0 0 0 200vmax rgba(2,7,5,.58),0 0 0 6px rgba(241,207,134,.12);
    pointer-events:none;
    transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease,border-radius .28s ease;
}

.gallery-onboarding[data-step="timeline"] .gallery-onboarding-spotlight,
.gallery-onboarding[data-step="map"] .gallery-onboarding-spotlight{
    animation:gallery-onboarding-focus 1.45s ease-in-out infinite alternate;
}

.gallery-onboarding-coach{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:13px;
    width:min(470px,calc(100% - 36px));
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:22px;
    background:rgba(248,247,241,.96);
    box-shadow:0 18px 52px rgba(0,0,0,.42);
    color:#17231e;
    transform:translateX(-50%);
    transition:background .22s ease,transform .22s ease;
}

.gallery-onboarding-progress{
    position:absolute;
    top:-11px;
    left:18px;
    padding:4px 9px;
    border-radius:999px;
    background:#173f32;
    color:#fff;
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.12em;
}

.gallery-onboarding-copy{
    display:grid;
    gap:4px;
    min-width:0;
    padding-right:26px;
}

.gallery-onboarding-copy strong{
    font-size:1rem;
    line-height:1.2;
}

.gallery-onboarding-copy small{
    color:#5b6962;
    font-size:.78rem;
    line-height:1.4;
}

.gallery-onboarding-done{
    position:absolute;
    right:17px;
    display:grid;
    width:30px; height:30px;
    place-items:center;
    border-radius:50%;
    background:#277459;
    color:#fff;
    font-weight:900;
    opacity:0;
    transform:scale(.55);
    transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1.3);
}

.gallery-onboarding.is-step-complete .gallery-onboarding-coach{
    background:rgba(235,247,237,.98);
    transform:translateX(-50%) scale(1.015);
}

.gallery-onboarding.is-step-complete .gallery-onboarding-done{
    opacity:1;
    transform:scale(1);
}

.gallery-onboarding-dismiss{
    min-width:150px;
    min-height:48px;
    padding:11px 24px;
    border:0;
    border-radius:999px;
    background:#173f32;
    box-shadow:0 7px 18px rgba(23,63,50,.25);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    transition:background .18s ease,transform .18s ease;
}

.gallery-onboarding-dismiss:hover{
    background:#245c49;
    transform:translateY(-1px);
}

.gallery-onboarding-dismiss:focus-visible{
    outline:3px solid #d39c2f;
    outline-offset:3px;
}

@keyframes gallery-swipe-vertical{
    0%,100%{ transform:translate(-50%,-50%) translateY(-21px); }
    50%{ transform:translate(-50%,-50%) translateY(21px); }
}

@keyframes gallery-swipe-horizontal{
    0%,100%{ transform:translate(-50%,-50%) translateX(-21px); }
    50%{ transform:translate(-50%,-50%) translateX(21px); }
}

@keyframes gallery-double-tap{
    0%,12%,38%,50%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    22%,60%{ transform:translate(-50%,-50%) scale(.68); opacity:.72; }
}

@keyframes gallery-scrubber-drag{
    0%,100%{ transform:translate(-50%,-50%) translateY(-18px); }
    50%{ transform:translate(-50%,-50%) translateY(18px); }
}

@keyframes gallery-map-tap{
    0%,35%,72%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    50%{ transform:translate(-50%,-50%) scale(.66); opacity:.7; }
}

@keyframes gallery-onboarding-focus{
    from{ border-color:rgba(241,207,134,.58); }
    to{ border-color:rgba(241,207,134,1); }
}

#galleryEmpty{ position:absolute; inset:0; }
#gallery.has-camps #galleryEmpty{ display:none; }

#galleryToggle,#mapToggle{
    position:absolute; inset:0;
    border:0; background:transparent; cursor:pointer;
}

#galleryMiniPreview,#mapPreview{
    position:absolute; z-index:20;
    right:var(--preview-margin); bottom:var(--preview-margin);
    width:var(--preview-width); height:var(--preview-height);
    overflow:hidden;
    border-radius:18px;
    clip-path:inset(0 round 18px);
    box-shadow:0 12px 40px rgba(0,0,0,.45);
    transition:opacity .45s ease;
}

/* Smaller desktop previews; keep the original bottom/right anchor and margins. */
@media (min-width:601px) and (hover:hover) and (pointer:fine){
    #galleryMiniPreview,#mapPreview{
        width:calc(var(--preview-width) * .7);
        height:calc(var(--preview-height) * .7);
    }
}

#galleryMiniPreview{ opacity:1; pointer-events:auto; }
#mapPreview{ opacity:0; pointer-events:none; }
#app[data-mode="gallery"] #galleryMiniPreview{ opacity:0; pointer-events:none; }
#app[data-mode="gallery"] #mapPreview{ opacity:1; pointer-events:auto; }

#galleryMiniContent,#miniMap{ position:absolute; inset:0; }
#miniMap{ z-index:0; background:#153b2d; pointer-events:none; }
#mapToggle{ z-index:4; }

#galleryMiniImage,#galleryMiniEmpty{ position:absolute; inset:0; width:100%; height:100%; }
#galleryMiniImage{ display:block; object-fit:cover; opacity:0; transition:opacity .2s ease; }
#galleryMiniContent.has-camp #galleryMiniImage{ opacity:1; }
#galleryMiniContent.has-camp #galleryMiniEmpty{ display:none; }

#galleryToggle:focus-visible,#mapToggle:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.camp-panorama-tooltip{
    padding:0;
    border:1px solid rgba(255,195,60,.7);
    border-radius:12px;
    background:#173f32;
    color:#ffc33c;
    box-shadow:0 3px 12px rgba(0,0,0,.35);
    white-space:nowrap;
    pointer-events:auto;
}
.camp-panorama-tooltip::after{
    content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
    border:5px solid transparent;border-top-color:#173f32;pointer-events:none;
}
.camp-panorama-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:34px;
    padding:5px 11px;
    border-radius:11px;
    color:#ffc33c !important;
    font:750 13px/1.2 system-ui,sans-serif;
    text-decoration:none;
    touch-action:manipulation;
}
.camp-panorama-link:hover{ background:#245c49; }
.camp-panorama-link svg{ display:block; flex:0 0 auto; width:34px; height:24px; }
.camp-panorama-link.is-compact{ min-width:48px; padding-inline:8px; }
.camp-panorama-link:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (pointer:coarse), (max-width:600px){
    .camp-panorama-link{ min-height:44px; padding:7px 12px; }
}

.placeholder{
    display:grid; width:100%; height:100%; place-items:center;
    color:#fff; font-size:clamp(2rem,8vw,4rem); font-weight:700;
}

.placeholder.gallery{ background:#3158b5; }

.camp-popup{
    min-width:220px;
    color:#17231e;
}

.camp-popup-title{
    display:block;
    padding:0 2px;
    font-size:1rem;
    line-height:1.25;
}

.camp-popup-statuses{
    display:grid;
    gap:6px;
    margin-top:10px;
}

.camp-popup-status{
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    min-height:36px;
    padding:4px 9px 4px 4px;
    border-radius:9px;
    font-size:.78rem;
    font-weight:700;
    line-height:1.15;
}

.camp-popup-status.is-positive{
    background:#e5f2e9;
    color:#245a3d;
}

.camp-popup-status.is-negative{
    background:#f7e4e1;
    color:#8d352e;
}

.camp-popup-icon{
    position:relative;
    display:grid;
    width:27px; height:27px;
    place-items:center;
    border-radius:50%;
    background:currentColor;
    color:inherit;
}

.camp-popup-icon svg{
    width:17px; height:17px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.camp-popup-status.is-negative .camp-popup-icon::after{
    content:"×";
    position:absolute;
    right:-3px; bottom:-3px;
    display:grid;
    width:13px; height:13px;
    place-items:center;
    border:2px solid #f7e4e1;
    border-radius:50%;
    background:#8d352e;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
}

.gps-locate-control{
    display:block;
    border:0;
    background:transparent;
}

.gps-locate-button{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:44px; height:44px;
    max-width:calc(100vw - 32px);
    gap:0;
    overflow:hidden;
    box-sizing:border-box;
    padding:0 8.5px;
    border:2px solid rgba(255,255,255,.96);
    border-radius:999px;
    background:#173f32;
    color:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.42);
    cursor:pointer;
    transition:width .32s cubic-bezier(.2,.8,.2,1),background .2s ease,transform .2s ease,opacity .2s ease,box-shadow .2s ease;
}

.gps-locate-button.is-message-visible{ width:var(--gps-message-width,240px); }
.gps-locate-button.is-distance-visible{ width:var(--gps-distance-width,96px); }

.gps-locate-button:hover{ transform:translateY(-1px); }

.gps-locate-button:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.gps-locate-icon,
.gps-locate-button svg{
    display:block;
    width:23px; height:23px;
}

.gps-locate-icon{ flex:0 0 23px; }

.gps-locate-button svg{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.gps-symbol{ display:none; }
.gps-locate-button.is-idle .gps-symbol-idle,
.gps-locate-button.is-locating .gps-symbol-locating,
.gps-locate-button.is-following .gps-symbol-following,
.gps-locate-button.is-weak .gps-symbol-weak,
.gps-locate-button.is-unavailable .gps-symbol-weak,
.gps-locate-button.is-denied .gps-symbol-denied,
.gps-locate-button.is-outside .gps-symbol-outside,
.gps-locate-button.is-unsupported .gps-symbol-error,
.gps-locate-button.is-error .gps-symbol-error{ display:block; }

.gps-locate-button.is-locating{ background:#315c73; cursor:progress; }
.gps-locate-button.is-following{
    background:#176d59;
    box-shadow:0 0 0 5px rgba(23,109,89,.2),0 3px 12px rgba(0,0,0,.42);
}
.gps-locate-button.is-weak,
.gps-locate-button.is-unavailable{ background:#a66d20; }
.gps-locate-button.is-denied,
.gps-locate-button.is-error,
.gps-locate-button.is-unsupported{ background:#a33d36; }
.gps-locate-button.is-outside{ background:#735231; }

.gps-radar-sweep{
    transform-origin:12px 12px;
    animation:gps-radar-spin 1.15s linear infinite;
}

.gps-radar-ring{
    transform-origin:12px 12px;
    animation:gps-radar-ring 1.15s ease-out infinite;
}

.gps-radar-dot{ fill:currentColor; stroke:none; }
.gps-navigation-arrow{
    fill:currentColor;
    stroke:currentColor;
    transform-origin:12px 12px;
    animation:gps-follow-breathe 1.7s ease-in-out infinite;
}

.gps-locate-button.is-weak .gps-weak-wave,
.gps-locate-button.is-unavailable .gps-weak-wave{
    transform-origin:12px 17px;
    animation:gps-weak-signal 1.35s ease-in-out infinite;
}
.gps-locate-button.is-weak .gps-weak-wave-two,
.gps-locate-button.is-unavailable .gps-weak-wave-two{ animation-delay:.18s; }

.gps-locate-button.is-denied .gps-symbol,
.gps-locate-button.is-error .gps-symbol,
.gps-locate-button.is-unsupported .gps-symbol,
.gps-locate-button.is-outside .gps-symbol{ animation:gps-state-nudge .42s ease-out; }

.gps-locate-state-label{
    display:block;
    flex:0 1 auto;
    max-width:0;
    overflow:hidden;
    color:#fff;
    font-size:.7rem;
    font-weight:800;
    line-height:1.15;
    opacity:0;
    white-space:nowrap;
    transform:translateX(10px);
    transition:max-width .3s cubic-bezier(.2,.8,.2,1),margin .3s ease,opacity .18s ease,transform .28s ease;
    pointer-events:none;
}

.gps-locate-button.is-message-visible .gps-locate-state-label{
    max-width:280px;
    margin-right:10px;
    opacity:1;
    transform:translateX(0);
}

.gps-locate-button.is-distance-visible .gps-locate-state-label{
    max-width:90px;
    margin-right:9px;
    opacity:1;
    transform:translateX(0);
}

.gps-locate-button.is-message-info{
    box-shadow:0 0 0 4px rgba(76,139,172,.18),0 3px 12px rgba(0,0,0,.42);
}
.gps-locate-button.is-message-success{
    box-shadow:0 0 0 4px rgba(65,185,139,.2),0 3px 12px rgba(0,0,0,.42);
}
.gps-locate-button.is-message-error{
    box-shadow:0 0 0 4px rgba(191,72,62,.2),0 3px 12px rgba(0,0,0,.42);
}

.gps-heading-marker{
    border:0;
    background:transparent;
    pointer-events:none;
}

.gps-heading-arrow,
.gps-heading-pulse{
    position:absolute;
    inset:0;
    border-radius:50%;
}

.gps-heading-pulse{
    border:2px solid rgba(68,190,155,.72);
    animation:gps-position-pulse 1.8s ease-out infinite;
}

.gps-heading-arrow{
    opacity:0;
    transform:rotate(var(--gps-heading,0deg));
    transition:transform .22s linear,opacity .2s ease;
}

.gps-heading-arrow::before{
    content:"";
    position:absolute;
    top:0; left:50%;
    width:13px; height:17px;
    background:#176d59;
    border:2px solid #fff;
    clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
    transform:translateX(-50%);
}

.gps-heading-marker.has-heading .gps-heading-arrow{ opacity:1; }
.gps-heading-marker.is-weak .gps-heading-pulse{ border-color:rgba(227,169,71,.8); }
.gps-heading-marker.is-weak .gps-heading-arrow::before{ background:#b87924; }

@keyframes gps-radar-spin{ to{ transform:rotate(360deg); } }
@keyframes gps-radar-ring{
    0%{ transform:scale(.55); opacity:.25; }
    65%{ opacity:1; }
    100%{ transform:scale(1.18); opacity:0; }
}
@keyframes gps-follow-breathe{
    0%,100%{ transform:scale(.9); opacity:.82; }
    50%{ transform:scale(1); opacity:1; }
}
@keyframes gps-weak-signal{
    0%,100%{ opacity:.28; }
    50%{ opacity:1; }
}
@keyframes gps-state-nudge{
    0%,100%{ transform:translateX(0); }
    35%{ transform:translateX(-2px); }
    70%{ transform:translateX(2px); }
}
@keyframes gps-position-pulse{
    0%{ transform:scale(.45); opacity:.8; }
    100%{ transform:scale(1.15); opacity:0; }
}
#appLoading{
    position:absolute; z-index:1000; inset:0;
    display:grid; place-items:center;
    overflow:hidden;
    background:rgba(3,7,6,.78);
    color:#f3f1e8;
    -webkit-backdrop-filter:blur(12px) saturate(.72);
    backdrop-filter:blur(12px) saturate(.72);
    transition:opacity .72s ease,visibility .72s ease;
}

html.skip-bootstrap #appLoading{ display:none; }

#appLoading::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(circle at 22% 18%,rgba(76,104,72,.2),transparent 34%),
        radial-gradient(circle at 78% 74%,rgba(82,59,38,.18),transparent 38%),
        linear-gradient(150deg,rgba(0,0,0,.08),rgba(3,10,7,.34));
    filter:blur(28px);
    animation:bootstrap-atmosphere 8s ease-in-out infinite alternate;
}

#appLoading::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background:
        repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px),
        radial-gradient(circle at center,transparent 22%,rgba(0,0,0,.62) 100%);
}

.bootstrap-stage{
    position:relative; z-index:1;
    display:grid;
    justify-items:center;
    width:min(92vw,860px);
    transform:translateY(-2vh);
    text-align:center;
}

.bootstrap-kicker{
    margin-bottom:.8rem;
    color:rgba(233,235,220,.48);
    font-size:.68rem;
    font-weight:750;
    letter-spacing:.32em;
    text-transform:uppercase;
}

.bootstrap-title{
    max-width:12ch;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.45rem,7.4vw,6.4rem);
    font-weight:400;
    line-height:.92;
    letter-spacing:-.045em;
    text-wrap:balance;
    text-shadow:0 10px 50px rgba(0,0,0,.6);
}

.camp-reel{
    position:relative;
    width:100%;
    height:clamp(230px,35vh,340px);
    margin-top:clamp(20px,4vh,46px);
    overflow:hidden;
    -webkit-mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 18%,
        #000 82%,
        transparent
    );
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 18%,
        #000 82%,
        transparent
    );
}

#campReelTrack{
    position:absolute;
    inset:0;
}

.camp-reel-item{
    position:absolute;
    left:50%; top:50%;
    width:100%;
    color:#e9e7da;
    font-size:clamp(1rem,2.4vw,1.55rem);
    font-weight:530;
    letter-spacing:.08em;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
    will-change:transform,opacity,filter;
}

#appLoading.is-landed .camp-reel-item{
    opacity:0 !important;
    transition:opacity .5s ease,filter .5s ease;
}

#appLoading.is-landed .camp-reel-item.is-center{
    opacity:1 !important;
    filter:blur(0) !important;
    color:#fffdf1;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,6vw,4.8rem);
    font-weight:400;
    letter-spacing:.04em;
    text-shadow:0 8px 36px rgba(0,0,0,.72);
}

.bootstrap-result{
    margin-top:clamp(-44px,-5vh,-26px);
    color:rgba(244,241,225,.7);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1rem,2.5vw,1.35rem);
    font-style:italic;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .5s ease .15s,transform .5s ease .15s;
}

.bootstrap-preference{
    display:flex;
    align-items:center;
    gap:.58rem;
    margin-top:clamp(16px,2.6vh,28px);
    color:rgba(239,238,226,.68);
    font-size:.76rem;
    font-weight:650;
    letter-spacing:.035em;
    cursor:pointer;
    user-select:none;
}

.bootstrap-preference input{
    width:17px; height:17px;
    margin:0;
    accent-color:#83d35e;
    cursor:pointer;
}

.bootstrap-preference:focus-within{
    outline:2px solid rgba(255,255,255,.9);
    outline-offset:5px;
    border-radius:2px;
}

#appLoading.is-landed .bootstrap-result{
    opacity:1;
    transform:translateY(0);
}

.bootstrap-network-status{
    position:fixed;
    z-index:2;
    left:50%;
    bottom:max(22px,env(safe-area-inset-bottom));
    display:grid;
    justify-items:center;
    width:min(88vw,420px);
    color:rgba(239,238,226,.58);
    font-size:.72rem;
    letter-spacing:.035em;
    opacity:0;
    transform:translate(-50%,8px);
    transition:opacity .5s ease,transform .5s ease;
}

#appLoading.is-slow .bootstrap-network-status{
    opacity:1;
    transform:translate(-50%,0);
}

#appLoading.is-resolving .bootstrap-network-status{
    opacity:0;
    transform:translate(-50%,6px);
}

.bootstrap-slow-note{
    line-height:1.4;
    text-align:center;
}

.bootstrap-progress{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:8px;
    width:min(100%,290px);
}

.bootstrap-progress[hidden],.bootstrap-retry[hidden]{ display:none; }

.bootstrap-spinner{
    width:10px; height:10px;
    border:1px solid rgba(239,238,226,.2);
    border-top-color:rgba(239,238,226,.8);
    border-radius:50%;
    animation:bootstrap-spinner .85s linear infinite;
}

.bootstrap-progress-line{
    grid-column:1 / -1;
    display:block;
    width:100%; height:1px;
    overflow:hidden;
    background:rgba(239,238,226,.12);
}

#bootstrapProgressFill{
    display:block;
    width:0; height:100%;
    background:rgba(239,238,226,.62);
    transition:width .25s ease;
}

#appLoading.is-progress .bootstrap-slow-note{ display:none; }

.bootstrap-retry{
    margin-top:14px;
    padding:.55rem .9rem;
    border:1px solid rgba(239,238,226,.3);
    border-radius:999px;
    background:rgba(6,9,8,.28);
    color:rgba(255,253,241,.86);
    font:inherit;
    font-weight:700;
    letter-spacing:.08em;
    cursor:pointer;
}

.bootstrap-retry:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
}

#appLoading.is-hidden{ visibility:hidden; opacity:0; pointer-events:none; }

@keyframes bootstrap-atmosphere{
    from{ transform:translate3d(-1.5%,-1%,0) scale(1); }
    to{ transform:translate3d(1.5%,1%,0) scale(1.05); }
}

@keyframes bootstrap-spinner{
    to{ transform:rotate(360deg); }
}

#app.is-initializing #galleryWrapper,
#app.is-initializing #galleryMiniPreview,
#app.is-initializing #mapPreview{ transition:none; }

@media (prefers-reduced-motion:reduce){
    #galleryWrapper,#galleryMiniPreview,#mapPreview{ transition-duration:1ms; }
    .camp-photo-track{ scroll-behavior:auto; }
    .camp-photo{ transition:none; }
    .camp-photo-loading,
    .camp-photo-loading::before,
    .camp-photo-loading::after{ animation:none !important; }
    .mini-map-loader-contour,
    .mini-map-loader-frame,
    .mini-map-loader-pulse,
    .mini-map-loader-scan{ animation:none !important; }
    #appLoading::before{ animation:none; }
    .bootstrap-spinner{ animation:none; }
    .gps-locate-button .gps-symbol *,
    .gps-heading-pulse{ animation:none !important; }
    .gps-locate-button,.gps-locate-state-label{ transition:none !important; }
    .gallery-edge-shadow{ transition:none; }
    .gallery-gesture-touch{ animation:none !important; transform:translate(-50%,-50%); }
    .gallery-onboarding-dismiss{ transition:none; }
    .gallery-onboarding-spotlight,
    .gallery-onboarding-coach,
    .gallery-onboarding-done{ animation:none !important; transition:none; }
    .app-menu-toggle,.app-menu-toggle span{ transition:none; }
    .camp-timeline,.camp-timeline-label,.camp-timeline-thumb{ transition:none; }
}

@media (max-width:600px){
    .app-menu{
        top:max(12px,env(safe-area-inset-top));
        left:max(12px,env(safe-area-inset-left));
    }

    .app-menu-toggle{ width:43px; height:43px; }
    .app-menu-panel{ top:52px; }

    .about-dialog{
        align-items:end;
        padding:0;
    }

    .about-dialog-card{
        width:100%;
        max-height:92dvh;
        border-width:1px 0 0;
        border-radius:22px 22px 0 0;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .about-dialog-header{ padding:20px 18px 15px; }
    .about-dialog-content{ padding:18px 18px 22px; }

    .camp-gallery-caption{
        right:calc(var(--preview-width) + var(--preview-margin) + 14px);
    }

    .camp-gallery-name{
        font-size:clamp(1.35rem,7vw,2.15rem);
    }

    .camp-timeline{
        top:max(64px,calc(env(safe-area-inset-top) + 52px));
        right:max(7px,env(safe-area-inset-right));
        bottom:calc(var(--preview-height) + var(--preview-margin) + 16px);
    }

    .camp-timeline-label{
        right:max(40px,calc(env(safe-area-inset-right) + 33px));
        grid-template-columns:50px minmax(0,1fr);
        width:min(210px,64vw);
    }

    .camp-timeline-label > img{ width:50px; height:50px; }

    .gallery-onboarding-card{
        padding:24px 18px 22px;
        border-radius:21px;
    }

    .gallery-onboarding-route{ margin:20px 0; }
    .gallery-onboarding-route span{ width:38px; height:38px; border-radius:12px; }
    .gallery-onboarding-coach{
        grid-template-columns:58px minmax(0,1fr);
        gap:11px;
        bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
        width:calc(100% - 28px);
        padding:15px 14px;
        border-radius:19px;
    }
    .gallery-onboarding[data-step="timeline"] .gallery-onboarding-coach{
        left:14px;
        width:calc(100% - 88px);
        transform:none;
    }
    .gallery-onboarding[data-step="timeline"].is-step-complete .gallery-onboarding-coach{
        transform:scale(1.015);
    }
    .gallery-onboarding[data-step="map"] .gallery-onboarding-coach{
        top:max(70px,calc(env(safe-area-inset-top) + 58px));
        bottom:auto;
    }
    .gallery-onboarding-copy{ padding-right:20px; }
    .gallery-onboarding-copy strong{ font-size:.9rem; }
    .gallery-onboarding-copy small{ font-size:.72rem; }
    .gallery-onboarding-done{ right:12px; }
    .gallery-gesture-demo{ width:58px; height:58px; border-radius:16px; }
    .gallery-onboarding-dismiss{ width:100%; }
}

/* Mobile-first app offer. Native dialog isolates map gestures while open. */
.android-app-promo-compact{
    --tkcz-app-promo-ready:1;
    position:fixed;
    top:max(84px,calc(env(safe-area-inset-top, 0px) + 80px));
    left:max(16px,calc(env(safe-area-inset-left, 0px) + 4px));
    z-index:460;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-sizing:border-box;
    max-width:calc(100% - 96px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    min-height:44px;
    padding:10px 13px;
    border:1px solid rgba(255,195,60,.65);
    border-radius:22px;
    background:rgba(17,28,21,.95);
    color:#fff6e8;
    box-shadow:0 2px 10px rgba(0,0,0,.3);
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    text-decoration:none;
    pointer-events:auto;
}
.android-app-promo-compact[hidden]{ display:none; }
.android-app-promo-compact span{ color:#ffc33c; font-size:16px; }
.android-app-promo-compact:hover{ background:#173f32; text-decoration:none; }
.android-app-promo-compact:focus-visible{ outline:2px solid #ffc33c; outline-offset:3px; }
.android-app-promo{
    --tkcz-app-promo-ready:1;
    position:fixed;
    inset:0;
    margin:auto;
    box-sizing:border-box;
    width:560px;
    max-width:calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow:hidden;
    padding:0;
    border:1px solid rgba(255,195,60,.5);
    border-radius:20px;
    background:#111c15;
    color:var(--tkcz-primary, #fff6e8);
    box-shadow:0 20px 72px rgba(0,0,0,.55);
    text-align:left;
    pointer-events:auto;
}
.android-app-promo[hidden]{ display:none; }
.android-app-promo::backdrop{ background:rgba(4,12,8,.72); }
.android-app-promo-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    box-sizing:border-box;
    max-height:calc(100dvh - 26px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:24px;
}
.android-app-promo h2{ order:1; margin:0 0 20px; font-size:30px; line-height:1.1; font-weight:750; }
.android-app-promo-media{ order:2; position:relative; min-width:0; margin-bottom:20px; }
.android-app-promo-screens{ display:grid; grid-auto-flow:column; grid-auto-columns:142px; gap:12px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:12px; scrollbar-width:thin; scrollbar-color:#ffc33c #26362c; }
.android-app-promo-screens::-webkit-scrollbar{ height:4px; }
.android-app-promo-screens::-webkit-scrollbar-track{ background:#26362c; border-radius:4px; }
.android-app-promo-screens::-webkit-scrollbar-thumb{ background:#ffc33c; border-radius:4px; }
.android-app-promo-screens figure{ min-width:0; margin:0; scroll-snap-align:start; }
.android-app-promo-screens img{ display:block; box-sizing:border-box; width:100%; height:auto; aspect-ratio:9/16; border:2px solid #536558; border-radius:14px; background:#08100c; object-fit:contain; }
.android-app-promo-screens figcaption{ margin-top:8px; min-height:36px; color:var(--tkcz-primary, #fff6e8); font-size:12px; line-height:1.5; font-weight:600; text-align:center; }
.android-app-promo-screens figcaption small{ display:block; margin-top:3px; color:var(--tkcz-secondary, #c8c5b8); font-size:11px; line-height:1.4; font-weight:400; }
.android-app-promo-scroll{ position:absolute; top:100px; width:44px; height:44px; padding:0; border:1px solid #ffc33c; border-radius:50%; background:#173f32; color:#fff6e8; font:32px/1 sans-serif; box-shadow:0 2px 10px rgba(0,0,0,.6); cursor:pointer; }
.android-app-promo-scroll.previous{ left:-8px; }
.android-app-promo-scroll.next{ right:-8px; }
.android-app-promo-scroll[hidden]{ display:none; }
.android-app-promo-actions{ order:4; position:sticky; bottom:-24px; margin:0 -24px -24px; padding:12px 24px 8px; background:#111c15; box-shadow:0 -8px 12px #111c15; }
.android-app-promo-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    box-sizing:border-box;
    width:100%;
    min-height:52px;
    padding:12px;
    border-radius:10px;
    background:var(--tkcz-accent, #ffc33c);
    color:#102217;
    font-size:15px;
    line-height:1.25;
    font-weight:750;
    text-decoration:none;
    text-align:center;
}
.android-app-promo-link:hover{ background:#ffd36b; text-decoration:none; }
.android-app-promo-link span{ font-size:19px; line-height:1; }
.android-app-promo-later{ display:block; width:100%; min-height:44px; margin-top:4px; padding:8px; border:0; background:transparent; color:var(--tkcz-secondary, #c8c5b8); font:inherit; font-size:12px; text-align:center; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.android-app-promo :focus-visible{ outline:2px solid #ffc33c; outline-offset:2px; }
.android-app-promo h2:focus{ outline:none; }
.android-app-promo-later:focus-visible{ outline:1px solid #c8c5b8; outline-offset:-4px; }
@media(max-width:640px){
    .android-app-promo{ width:420px; border-radius:16px; }
    .android-app-promo-layout{ padding:20px; }
    .android-app-promo h2{ margin-bottom:16px; font-size:26px; }
    .android-app-promo-screens{ grid-auto-columns:130px; }
    .android-app-promo-media{ margin-bottom:16px; }
    .android-app-promo-actions{ bottom:-20px; margin:0 -20px -20px; padding:12px 20px 8px; }
}
@media(max-width:640px) and (max-height:700px){
    .android-app-promo-screens{ grid-auto-columns:114px; }
    .android-app-promo-media{ margin-bottom:12px; }
}
@media(max-height:500px) and (min-width:641px){
    .android-app-promo-layout{ padding:20px; }
    .android-app-promo h2{ font-size:26px; }
    .android-app-promo-screens{ grid-auto-columns:99px; }
    .android-app-promo-actions{ bottom:-20px; margin:0 -20px -20px; padding:12px 20px 8px; }
}

/* Native Android visual parity layer. The loading and photo-buffer rules above
   stay intact; these overrides only reshape the presentation. */
:root{
    --tkcz-bg:#08100c;
    --tkcz-surface:#111713;
    --tkcz-surface-raised:rgba(13,24,18,.965);
    --tkcz-primary:#fff6e8;
    --tkcz-secondary:#c8c5b8;
    --tkcz-accent:#ffc33c;
    --tkcz-green:#173f32;
}

html,body{ background:var(--tkcz-bg); color:var(--tkcz-primary); }

.app-menu{
    top:max(16px,calc(env(safe-area-inset-top) + 12px));
    left:max(16px,calc(env(safe-area-inset-left) + 4px));
    color:var(--tkcz-primary);
}

.app-menu.is-open::before{
    content:"";
    position:fixed;
    z-index:0;
    inset:0;
    background:rgba(0,0,0,.2);
}

.app-menu-toggle{
    z-index:2;
    width:52px;
    height:52px;
    gap:5px;
    border:2px solid rgba(255,255,255,.96);
    background:#173f32;
    box-shadow:0 7px 20px rgba(0,0,0,.42);
}

.app-menu-toggle span{ width:23px; height:2.5px; }
.app-menu-toggle:active{ background:#245c49; }
.app-menu.is-open .app-menu-toggle{ background:#173f32; }
.app-menu.is-open .app-menu-toggle span:nth-child(1){
    opacity:1;
    transform:translateY(7.5px) rotate(45deg);
}
.app-menu.is-open .app-menu-toggle span:nth-child(2){ opacity:0; }
.app-menu.is-open .app-menu-toggle span:nth-child(3){
    opacity:1;
    transform:translateY(-7.5px) rotate(-45deg);
}

.app-menu-panel{
    z-index:1;
    top:64px;
    left:-4px;
    width:min(388px,calc(100vw - 24px));
    max-height:calc(100dvh - 96px - env(safe-area-inset-top));
    padding:24px 20px 20px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:24px;
    background:var(--tkcz-surface-raised);
    box-shadow:0 18px 50px rgba(0,0,0,.48);
    color:var(--tkcz-primary);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
}

.app-menu-title{
    margin:0;
    color:var(--tkcz-primary);
    font-size:1.38rem;
    font-weight:700;
    line-height:1.1;
}

.app-menu-heading{
    margin:5px 0 18px;
    color:var(--tkcz-accent);
    font-size:.78rem;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
}

.app-menu-option{
    grid-template-columns:1fr auto;
    gap:14px;
    min-height:52px;
    padding:10px 0;
    border-radius:0;
    align-items:center;
}

.app-menu-option:hover{ background:transparent; }
.app-menu-option input{
    order:2;
    width:42px;
    height:24px;
    margin:0;
    accent-color:var(--tkcz-accent);
}
.app-menu-option span{ order:1; }
.app-menu-option strong{ color:var(--tkcz-primary); font-size:.9rem; font-weight:500; }
.app-menu-option small{ display:none; }

.app-menu-language{
    display:block;
    margin:12px 0 0;
    padding:0;
    border:0;
    color:var(--tkcz-secondary);
}
.app-menu-language legend{ margin-bottom:7px; font-size:.78rem; }
.app-menu-language-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.app-menu-language-buttons button{
    min-height:42px;
    border:1px solid transparent;
    border-radius:13px;
    background:#29302c;
    color:var(--tkcz-primary);
    font:inherit;
    font-size:.88rem;
    cursor:pointer;
}
.app-menu-language-buttons button.is-selected{
    border-color:rgba(255,195,60,.75);
    color:var(--tkcz-accent);
}

.app-menu-about.app-menu-tutorial{ display:none; }
#gpsTestBoundsOption[hidden]{ display:none !important; }
.app-menu-about{
    display:block;
    width:100%;
    min-height:46px;
    margin-top:16px;
    padding:0 16px;
    border:0;
    border-radius:13px;
    background:#29302c;
    color:var(--tkcz-primary);
    font-size:.88rem;
    font-weight:500;
}
.app-menu-about .app-menu-info,.app-menu-about .app-menu-chevron{ display:none; }

#mapWrapper{
    opacity:1;
    visibility:visible;
    transition:opacity .42s ease,visibility 0s;
}
#app[data-mode="gallery"] #mapWrapper{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .42s ease,visibility 0s linear .42s;
}
#galleryWrapper{ transition:opacity .42s ease,visibility 0s linear .42s; }
#app[data-mode="gallery"] #galleryWrapper{ transition:opacity .42s ease,visibility 0s; }

.camp-gallery-set,.camp-photo-card{ background:var(--tkcz-bg); }
.camp-gallery-set::after{
    height:min(31vh,300px);
    background:linear-gradient(transparent,rgba(8,16,12,.92));
}
.camp-gallery-caption{
    left:max(22px,env(safe-area-inset-left));
    right:calc(var(--preview-width) + var(--preview-margin) + 22px);
    bottom:max(25px,calc(env(safe-area-inset-bottom) + 8px));
    gap:8px;
    text-shadow:none;
}
.camp-gallery-name{ color:var(--tkcz-primary); font-size:1.7rem; font-weight:600; }
.camp-gallery-count{ color:rgba(255,255,255,.75); font-size:.72rem; letter-spacing:.16em; }

#galleryMiniPreview,#mapPreview{
    border:1px solid rgba(255,255,255,.4);
    border-radius:18px;
    clip-path:inset(0 round 18px);
    box-shadow:0 10px 30px rgba(0,0,0,.48);
}
#miniMap{ background:#153b2d; }
.mini-map-loader{
    position:absolute;
    z-index:1;
    inset:0;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 45%,rgba(73,142,107,.24),transparent 48%),
        linear-gradient(180deg,#153b2d 0%,#07100c 100%);
    opacity:1;
    visibility:visible;
    transition:opacity .16s ease,visibility 0s linear 0s;
    pointer-events:none;
}
#mapPreview.is-map-ready .mini-map-loader{
    opacity:0;
    visibility:hidden;
    transition:opacity .16s ease,visibility 0s linear .16s;
}
.mini-map-loader svg{
    width:76%;
    height:76%;
    overflow:visible;
    filter:drop-shadow(0 0 10px rgba(131,211,94,.14));
}
.mini-map-loader-contour{
    fill:none;
    stroke:rgba(182,219,194,.22);
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-dasharray:8 5;
    animation:mini-map-contours 1.05s ease-out 1 both;
}
.mini-map-loader-contour.contour-b{ animation-delay:.06s; opacity:.8; }
.mini-map-loader-contour.contour-c{ animation-delay:.12s; opacity:.6; }
.mini-map-loader-frame{
    fill:none;
    stroke:#83d35e;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:mini-map-frame 1.05s ease-out 1 both;
}
.mini-map-loader-pulse{
    fill:none;
    stroke:rgba(131,211,94,.62);
    stroke-width:2;
    transform-origin:50px 50px;
    animation:mini-map-pulse .9s ease-out 1 both;
}
.mini-map-loader-dot{ fill:#d8f7cc; }
.mini-map-loader-scan{
    position:absolute;
    left:18%;
    right:18%;
    height:1px;
    top:27%;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(216,247,204,.85),transparent);
    box-shadow:0 0 12px rgba(131,211,94,.42);
    animation:mini-map-scan .9s cubic-bezier(.4,0,.2,1) 1 both;
}
#miniMapSnapshot,
#miniMapSnapshotIncoming{
    position:absolute;
    z-index:2;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    pointer-events:none;
}
#miniMapSnapshot{ transition:none; }
#miniMapSnapshotIncoming{ transition:opacity .28s cubic-bezier(.4,0,.2,1); }
#miniMapSnapshot.is-visible,
#miniMapSnapshotIncoming.is-visible{ opacity:1; }

#miniMapIndicator{
    --mini-map-indicator-color:#83d35e;
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    width:21px;
    height:21px;
    box-sizing:border-box;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--mini-map-indicator-color);
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    opacity:0;
    transform:translate(-50%,-50%);
    transition:opacity .12s ease;
    pointer-events:none;
}
#mapPreview.is-map-ready #miniMapIndicator.is-visible{ opacity:1; }

@keyframes mini-map-contours{
    to{ stroke-dashoffset:-26; }
}
@keyframes mini-map-frame{
    0%,100%{ opacity:.58; filter:drop-shadow(0 0 0 rgba(131,211,94,0)); }
    50%{ opacity:1; filter:drop-shadow(0 0 5px rgba(131,211,94,.5)); }
}
@keyframes mini-map-pulse{
    0%{ opacity:.9; transform:scale(.45); }
    72%,100%{ opacity:0; transform:scale(2.15); }
}
@keyframes mini-map-scan{
    0%{ opacity:0; transform:translateY(0); }
    18%{ opacity:1; }
    82%{ opacity:1; }
    100%{ opacity:0; transform:translateY(calc(var(--preview-height) * .46)); }
}

.camp-timeline{
    top:max(84px,calc(env(safe-area-inset-top) + 72px));
    right:max(4px,env(safe-area-inset-right));
    bottom:calc(var(--preview-height) + var(--preview-margin) + 28px);
    width:48px;
    opacity:1;
}
.camp-timeline-rail{ width:48px; }
.camp-timeline-line{ right:17px; width:3px; }
.camp-timeline-progress{ background:#ffd16b; box-shadow:0 0 8px rgba(255,195,60,.45); }
.camp-timeline-thumb{ width:14px; height:14px; background:var(--tkcz-green); }
.camp-timeline-label{
    right:max(52px,calc(env(safe-area-inset-right) + 46px));
    grid-template-columns:64px minmax(0,1fr);
    width:min(208px,67vw);
    min-height:72px;
    padding:4px;
    border-radius:18px;
    background:rgba(17,23,19,.96);
}
.camp-timeline-label > img{ width:64px; height:64px; border:0; border-radius:14px; }
.camp-timeline-label strong{ font-size:.84rem; }
.camp-timeline-label small{ font-size:.68rem; }

#mapWrapper > .camp-timeline{ z-index:430; }
#mapWrapper > .camp-timeline-label{ z-index:440; }

.map-info-shadow{
    position:absolute;
    z-index:390;
    right:0;
    bottom:0;
    left:0;
    height:220px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(8,16,12,.78);
    transition:opacity .3s ease,visibility 0s linear .3s;
}
.map-info-shadow.is-visible{ opacity:1; visibility:visible; transition:opacity .3s ease,visibility 0s; }

.map-camp-info{
    position:absolute;
    z-index:410;
    right:auto;
    bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px));
    left:max(12px,env(safe-area-inset-left));
    width:min(520px,calc(100% - var(--preview-width) - var(--preview-margin) - 24px - env(safe-area-inset-left)));
    display:grid;
    grid-template-rows:minmax(48px,auto) 46px;
    gap:8px;
    min-height:102px;
    color:var(--tkcz-primary);
    opacity:1;
    transform:translateY(0);
    transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.map-camp-info[hidden]{ display:grid; opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; }
.map-camp-info-main{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 44px;
    align-items:center;
    gap:6px;
    min-height:48px;
}
.map-camp-close{
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:var(--tkcz-secondary);
    font-size:1.8rem;
    font-weight:300;
    line-height:1;
    cursor:pointer;
}
.map-camp-info-main strong{
    display:-webkit-box;
    overflow:hidden;
    font-size:clamp(.875rem,4.4vw,1.125rem);
    font-weight:600;
    line-height:1.14;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.map-camp-help{
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
}
.map-camp-help span{
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    border:1px solid rgba(241,207,134,.72);
    border-radius:50%;
    background:rgba(58,50,30,.74);
    color:var(--tkcz-accent);
    font-size:1rem;
    font-weight:800;
    line-height:1;
}
.map-camp-help:focus-visible span{
    outline:2px solid #fff6e8;
    outline-offset:2px;
}
.map-camp-status-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding-left:40px;
    padding-right:2px;
}
.map-camp-status-icon{
    display:grid;
    width:46px;
    height:46px;
    flex:0 0 46px;
    place-items:center;
    border:1.5px solid rgba(127,71,74,.85);
    border-radius:50%;
    background:rgba(74,37,40,.9);
    box-sizing:border-box;
}
.map-camp-status-icon.is-positive{
    border-color:rgba(134,213,150,.8);
    background:rgba(27,73,53,.9);
}
.map-camp-status-icon.is-negative{
    border-color:rgba(127,71,74,.85);
    background:rgba(74,37,40,.9);
}
.map-camp-status-icon svg{
    display:block;
    width:32px;
    height:32px;
    overflow:visible;
}
.status-icon-symbols{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.camp-help-dialog{
    position:fixed;
    z-index:2550;
    inset:0;
    display:grid;
    place-items:center;
    padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
.camp-help-dialog[hidden]{ display:none; }
.camp-help-dialog-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(0,0,0,.72);
}
.camp-help-dialog-card{
    position:relative;
    z-index:1;
    width:min(520px,100%);
    max-height:calc(var(--tkcz-browser-viewport-height) - max(40px,env(safe-area-inset-top)) - max(40px,env(safe-area-inset-bottom)));
    overflow:auto;
    padding:22px 20px 20px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:20px;
    background:#0d1812;
    box-shadow:0 24px 70px rgba(0,0,0,.55);
    color:var(--tkcz-primary);
    overscroll-behavior:contain;
}
.camp-help-dialog-card h2{
    margin:0 0 18px;
    color:#fff6e8;
    font-size:1.35rem;
    line-height:1.15;
}
.camp-help-rows{
    display:grid;
    gap:16px;
}
.camp-help-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
}
.camp-help-row-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
}
.camp-help-row-copy{
    display:grid;
    gap:4px;
    padding-top:2px;
}
.camp-help-row-copy strong{
    color:#fff6e8;
    font-size:.98rem;
    line-height:1.2;
}
.camp-help-row-copy > span{
    color:rgba(255,246,232,.72);
    font-size:.8rem;
    line-height:1.42;
}
.camp-help-disclaimer{
    margin:20px 0 0;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.14);
    color:rgba(255,246,232,.66);
    font-size:.76rem;
    line-height:1.45;
}
.camp-help-removed-more,
.camp-help-dialog-close{
    width:100%;
    min-height:46px;
    margin-top:14px;
    padding:10px 16px;
    border-radius:13px;
    font:inherit;
    font-size:.86rem;
    font-weight:750;
    cursor:pointer;
}
.camp-help-removed-more{
    border:1px solid rgba(241,207,134,.42);
    background:rgba(241,207,134,.08);
    color:var(--tkcz-accent);
}
.camp-help-removed-more[hidden]{ display:none; }
.camp-help-dialog-close{
    border:1px solid rgba(134,213,150,.62);
    background:#1b4935;
    color:#fff6e8;
}
html.has-camp-help-dialog,
html.has-camp-help-dialog body{
    overflow:hidden;
}

.removed-dialog{
    position:fixed;
    z-index:2500;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
}
.removed-dialog[hidden]{ display:none; }
.removed-dialog-backdrop{ position:absolute; inset:0; border:0; background:rgba(0,0,0,.68); }
.removed-dialog-card{
    position:relative;
    z-index:1;
    width:min(500px,100%);
    max-height:85dvh;
    overflow:auto;
    padding:26px 22px 22px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    background:#0d1812;
    box-shadow:0 24px 70px rgba(0,0,0,.5);
    color:var(--tkcz-primary);
}
.removed-dialog-card h2{ padding-right:38px; font-size:1.35rem; }
.removed-dialog-card p{ margin-top:14px; color:var(--tkcz-secondary); font-size:.9rem; line-height:1.55; }
.removed-dialog-card a{
    display:block;
    margin-top:18px;
    padding:12px 14px;
    border-radius:13px;
    background:#29302c;
    color:var(--tkcz-primary);
    font-size:.84rem;
    text-decoration:none;
}
.removed-dialog-close{
    position:absolute;
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:var(--tkcz-primary);
    font-size:1.8rem;
    cursor:pointer;
}
html.has-removed-dialog{ overflow:hidden; }

#map .maplibregl-ctrl-top-right{
    top:max(16px,calc(env(safe-area-inset-top) + 12px));
    right:max(16px,calc(env(safe-area-inset-right) + 4px));
}
#map .maplibregl-ctrl{ margin:0; }
.map-camp-accessibility{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
.map-camp-accessibility:focus-within{
    z-index:10;top:76px;left:12px;width:auto;height:auto;max-height:50%;overflow:auto;
    clip-path:none;display:grid;padding:8px;background:#102c24;color:#fff6e8;border-radius:8px;
}
.map-camp-accessibility button{color:inherit;background:transparent;border:0;padding:8px;text-align:left;}
.gps-locate-button{
    width:52px;
    height:52px;
    padding:0 13px;
    border:2px solid rgba(255,255,255,.96);
    background:#104536;
}
.gps-locate-icon,.gps-locate-button svg{ width:25px; height:25px; }
.gps-locate-icon{ flex-basis:25px; }

#appLoading{
    background:linear-gradient(180deg,#153b2d 0%,#07100c 100%);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
#appLoading::before,#appLoading::after{ display:none; }
.bootstrap-stage{ width:min(88vw,650px); transform:translateY(-1.5vh); }
.bootstrap-kicker{
    margin-bottom:18px;
    color:rgba(233,235,220,.48);
    font-size:.68rem;
    letter-spacing:.28em;
}
.bootstrap-title{
    max-width:12.2ch;
    color:var(--tkcz-primary);
    font-size:clamp(2.55rem,10.5vw,5.4rem);
    line-height:.96;
    text-shadow:none;
}
.camp-reel{ height:clamp(230px,31vh,300px); margin-top:14px; }
.camp-reel-item{ color:var(--tkcz-secondary); font-weight:600; }
#appLoading.is-landed .camp-reel-item.is-center{ color:var(--tkcz-primary); text-shadow:none; }
.bootstrap-result{ color:var(--tkcz-secondary); }
.bootstrap-preference{ color:var(--tkcz-secondary); font-weight:500; margin-top:28px; }
.bootstrap-preference input{ width:19px; height:19px; accent-color:var(--tkcz-accent); }
/* Keep loading status below the reel and preference in normal flow. A fixed
   child of the transformed stage was anchored over the reel instead. */
.bootstrap-network-status{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:22px;
    transform:translateY(8px);
}
#appLoading.is-slow .bootstrap-network-status{ transform:translateY(0); }
#appLoading.is-resolving .bootstrap-network-status{ transform:translateY(6px); }
@media(max-height:650px){
    #appLoading{ overflow-y:auto; padding:16px 0; box-sizing:border-box; }
    .bootstrap-stage{ transform:none; }
    .bootstrap-title{ font-size:clamp(1.8rem,6vh,2.4rem); }
    .bootstrap-kicker{ margin-bottom:12px; }
    .camp-reel{ height:clamp(100px,26vh,165px); margin-top:10px; }
    .bootstrap-preference{ margin-top:24px; }
    .bootstrap-network-status{ margin-top:18px; }
}

@media (max-width:600px){
    .app-menu{ top:max(16px,calc(env(safe-area-inset-top) + 12px)); left:max(16px,env(safe-area-inset-left)); }
    .app-menu-toggle{ width:52px; height:52px; }
    .app-menu-panel{ top:64px; }
    .camp-gallery-name{ font-size:1.7rem; }
    .camp-timeline{ top:max(84px,calc(env(safe-area-inset-top) + 72px)); right:max(4px,env(safe-area-inset-right)); }
    .camp-timeline-label{ right:max(52px,calc(env(safe-area-inset-right) + 46px)); grid-template-columns:64px minmax(0,1fr); width:min(208px,67vw); }
    .camp-timeline-label > img{ width:64px; height:64px; }
}

/* Dark native surfaces and stronger map legibility. */
#map{
    z-index:0;
}

.map-info-shadow{
    /* A short, uniform translucent footer. The photo preview still protrudes
       above it; no fading band across the map. */
    height:calc(140px + max(0px,env(safe-area-inset-bottom) - 12px));
    background:rgba(8,16,12,.78);
}
@media (max-width:600px){
    /* Keep room for two-line camp titles on narrow screens. */
    .map-info-shadow{ height:calc(156px + max(0px,env(safe-area-inset-bottom) - 12px)); }
}

.app-menu-tutorial + .app-menu-about{
    margin-top:28px;
}

.gallery-onboarding-card,
.gallery-onboarding-coach{
    border-color:rgba(255,255,255,.25);
    background:var(--tkcz-surface-raised);
    color:var(--tkcz-primary);
}

.gallery-onboarding-lead,
.gallery-onboarding-kicker,
.gallery-onboarding-copy small{
    color:var(--tkcz-secondary);
}

.gallery-onboarding-kicker,
.gallery-onboarding-progress{
    color:var(--tkcz-accent);
}

.gallery-onboarding-route span{
    border-color:rgba(255,255,255,.16);
    background:#29302c;
    color:var(--tkcz-primary);
}

.gallery-onboarding-progress{
    border:1px solid rgba(255,195,60,.45);
    background:#29302c;
}

.gallery-onboarding.is-step-complete .gallery-onboarding-coach{
    background:#173f32;
}

.gallery-onboarding-dismiss{
    background:var(--tkcz-accent);
    box-shadow:0 7px 18px rgba(0,0,0,.3);
    color:#17231e;
}

.gallery-onboarding-dismiss:hover{
    background:#ffd16b;
}

.about-dialog-card{
    border-color:rgba(255,255,255,.25);
    background:#0d1812;
    color:var(--tkcz-primary);
}

.about-dialog-header{
    border-bottom-color:rgba(255,255,255,.12);
}

.about-dialog-kicker{
    color:var(--tkcz-accent);
}

.about-dialog-close{
    background:#29302c;
    color:var(--tkcz-primary);
}

.about-dialog-content p{
    color:var(--tkcz-secondary);
}

.about-dialog-links{
    border-top-color:rgba(255,255,255,.12);
}

.about-dialog-links a{
    border:1px solid rgba(255,255,255,.1);
    background:#29302c;
    color:var(--tkcz-primary);
}

.about-dialog-links a:hover{
    background:#344039;
}

.about-dialog-tour{
    padding:2px 0;
}

.about-dialog-tour button{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:64px;
    padding:10px 13px;
    border:1px solid rgba(255,195,60,.38);
    border-radius:14px;
    background:#29302c;
    color:var(--tkcz-primary);
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.about-dialog-tour button:hover{
    background:#344039;
}

.about-dialog-tour button:focus-visible{
    outline:3px solid var(--tkcz-accent);
    outline-offset:3px;
}

.about-dialog-tour-icon{
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:12px;
    background:#173f32;
    color:var(--tkcz-accent);
    font-size:1.15rem;
}

.about-dialog-tour button > span:nth-child(2){
    display:grid;
    gap:3px;
}

.about-dialog-tour strong{
    font-size:.86rem;
    line-height:1.25;
}

.about-dialog-tour small{
    color:var(--tkcz-secondary);
    font-size:.7rem;
    line-height:1.35;
}

.about-dialog-tour-chevron{
    color:var(--tkcz-accent);
    font-size:1.45rem;
}