/* Gallery selector stays at the top; its left edge aligns with the camp caption. */
/* This detail copy belongs only to the map; gallery captions are untouched. */
#app:not([data-mode="map"]) #mapCampInfo{ visibility:hidden; pointer-events:none; }
.map-camp-copy{
    min-width:0; display:grid; gap:4px;
    text-shadow:0 1px 4px rgba(8,16,12,.85),0 0 12px rgba(8,16,12,.7);
}
.map-camp-info .map-camp-close{ font-size:min(1.8rem,29px); }
.map-camp-info .map-camp-help span{ font-size:min(1rem,16px); }
.map-camp-copy #mapCampName{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    overflow-wrap:normal;
    word-break:normal;
    border:0;
    padding:0;
    background:transparent;
    color:inherit;
    font-family:inherit;
    font-size:clamp(.875rem,4.4vw,1.125rem);
    font-weight:600;
    line-height:1.14;
    text-align:left;
    text-shadow:inherit;
    cursor:pointer;
}
#mapCampName:focus-visible{ outline:2px solid var(--tkcz-accent); outline-offset:3px; }
#campHelpName{
    margin:0 0 18px;
    color:var(--tkcz-secondary);
    font-size:1rem;
    font-weight:600;
    line-height:1.35;
    overflow-wrap:break-word;
}
#campHelpName:focus{ outline:none; }
#mapCampArea{
    color:var(--tkcz-secondary);
    font-size:.8125rem;
    font-weight:400;
    line-height:1.25;
    overflow-wrap:anywhere;
}
.map-camp-info .map-camp-status-icons{
    /* Keep the established icon sizes, but don't spill into the photo on 320px. */
    padding-left:clamp(0px,calc(100% - 156px),40px);
}
#app[data-mode="gallery"] #appMenu{ display:none; }
.gallery-areas{
    position:fixed;
    z-index:560;
    top:calc(env(safe-area-inset-top) + 12px);
    left:max(22px,env(safe-area-inset-left));
    width:max-content;
    max-width:min(360px,calc(100vw - 44px));
}
#app:not([data-mode="gallery"]) .gallery-areas,
#app:not([data-mode="gallery"]) .gallery-area-backdrop{ display:none; }
.gallery-areas[hidden],.gallery-area-list[hidden],.gallery-area-backdrop[hidden]{ display:none; }
.gallery-area-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    width:100%;
    padding:9px 14px;
    border:1px solid rgba(255,246,232,.32);
    border-radius:18px;
    color:#fff6e8;
    background:rgba(13,24,18,.94);
    box-shadow:0 5px 20px rgba(0,0,0,.28);
    font:600 1rem/1.2 system-ui,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
}
.gallery-area-toggle > span{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    text-align:center;
}
.gallery-area-toggle svg{ width:16px; height:16px; flex:0 0 16px; }
.gallery-area-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.gallery-area-toggle[aria-busy="true"]{ opacity:.72; }
.gallery-area-toggle:focus-visible,.gallery-area-option:focus-visible{
    outline:2px solid #ffc33c;
    outline-offset:2px;
}
.gallery-area-list{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:min(360px,calc(100vw - 44px));
    max-height:calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:6px;
    border:1px solid rgba(255,246,232,.32);
    border-radius:18px;
    background:rgba(13,24,18,.97);
    box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.gallery-area-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:48px;
    width:100%;
    padding:12px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#fff6e8;
    font:500 1rem/1.35 system-ui,sans-serif;
    text-align:left;
    cursor:pointer;
}
.gallery-area-option[aria-checked="true"]{ color:#ffc33c; background:rgba(255,195,60,.1); }
.gallery-area-option small{ flex:0 0 auto; color:#c8c5b8; font:inherit; }
.gallery-area-backdrop{ position:fixed; z-index:550; inset:0; background:rgba(0,0,0,.22); }
@media(max-width:360px){ .gallery-area-toggle{ padding:8px 10px; } }