/* TKCZ Liquid Glass — approved 2026-11-01. Presentation only. */
html[data-skin="glass"]{
    --glass-dock-width:min(400px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    --glass-dock-right:max(12px,env(safe-area-inset-right));
    --glass-dock-bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));
    --glass-photo-size:112px;
    --glass-photo-right:15px;
    --glass-photo-bottom:15px;
    --glass-tint:rgba(8,16,12,.64);
    --glass-light:rgba(255,255,255,.12);
    --glass-rim:rgba(247,255,246,.4);
    --glass-blur:18px;
    --glass-shadow:0 12px 36px rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.07);
}
/* A single backdrop filter per surface. No per-frame JS, map captures or SVG filters. */
html[data-skin="glass"] :is(.app-menu-toggle,.gps-locate-button,.app-menu-panel,.gallery-area-list,.map-camp-info,.about-dialog-card,.camp-help-dialog-card,.removed-dialog-card,.gallery-photo-arrow,.panorama-open,.panorama-dialog button,.panorama-message,.android-app-promo-layout,.android-app-promo-compact){
    background:linear-gradient(145deg,var(--glass-light),transparent 45%,rgba(255,255,255,.035)),var(--glass-tint);
    border:1px solid var(--glass-rim);
    border-bottom-color:rgba(255,255,255,.14);
    border-right-color:rgba(255,255,255,.2);
    box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(115%);
    backdrop-filter:blur(var(--glass-blur)) saturate(115%);
    color:#fff6e8;
}
html[data-skin="glass"] :is(.app-menu-toggle,.gps-locate-button,.gallery-photo-arrow){
    --glass-tint:rgba(8,16,12,.48);--glass-blur:12px;
    border-radius:50%;
    box-shadow:0 7px 22px #0004,inset 0 1px 2px #ffffff6b,inset 0 -1px 2px #ffffff1f;
}
html[data-skin="glass"] :is(.app-menu-toggle:hover,.app-menu.is-open .app-menu-toggle,.gallery-photo-arrow:hover:not(:disabled)){
    background:linear-gradient(145deg,#ffffff25,transparent 65%),rgba(12,25,17,.65);
}
html[data-skin="glass"] .app-menu-panel{border-radius:24px;--glass-tint:rgba(8,16,12,.76);--glass-blur:22px;}
html[data-skin="glass"] .app-menu.is-open::before{background:rgba(0,0,0,.08);}
html[data-skin="glass"] :is(.app-menu-language-buttons button,.app-menu-about){
    background:linear-gradient(160deg,#ffffff0c,#ffffff03);border:1px solid #ffffff19;
    box-shadow:inset 0 1px #ffffff0a;
}
html[data-skin="glass"] .app-menu-language-buttons button.is-selected{background:#ffc33c14;border-color:#f1cf8680;}
html[data-skin="glass"] :is(.app-menu-option input,.bootstrap-preference input){accent-color:#ffc33c;}

/* The camp detail becomes one floating dark glass surface. No full-width opaque strip. */
html[data-skin="glass"] .map-info-shadow{background:transparent;}
html[data-skin="glass"] .map-camp-info{
    left:auto;
    right:var(--glass-dock-right);
    bottom:var(--glass-dock-bottom);
    padding:12px 14px 14px 8px;border-radius:26px;
    width:var(--glass-dock-width);
    grid-template-columns:minmax(0,1fr) var(--glass-photo-size);
    grid-template-rows:minmax(48px,auto) 46px;gap:8px 14px;
}
html[data-skin="glass"] .map-camp-info-main{grid-column:1;grid-row:1;}
html[data-skin="glass"] .map-camp-info .map-camp-status-icons{grid-column:1;grid-row:2;}
/* Reserve the photo's space without putting it inside the dismissible card. */
html[data-skin="glass"] .map-camp-info::after{
    content:"";grid-column:2;grid-row:1 / span 2;
    min-height:var(--glass-photo-size);pointer-events:none;
}
html[data-skin="glass"] .map-camp-copy{text-shadow:0 1px 3px #0003;}
html[data-skin="glass"] .map-camp-help span{background:#e0bd5412;border-color:#f1cf8666;box-shadow:inset 0 1px #ffffff15;}
html[data-skin="glass"] .map-camp-status-icon{
    background:linear-gradient(150deg,#ffffff12,transparent 70%),rgba(74,37,40,.7);
    box-shadow:inset 0 1px #ffffff20,0 3px 8px #0002;
}
html[data-skin="glass"] .map-camp-status-icon.is-positive{background:linear-gradient(150deg,#ffffff12,transparent 70%),rgba(27,73,53,.72);}
html[data-skin="glass"] :is(#galleryMiniPreview,#mapPreview){
    position:absolute;z-index:500;left:auto;top:auto;
    right:calc(var(--glass-dock-right) + var(--glass-photo-right));
    bottom:calc(var(--glass-dock-bottom) + var(--glass-photo-bottom));
    width:var(--glass-photo-size);height:var(--glass-photo-size);
    margin:0;border:1px solid #ffffff38;border-radius:18px;clip-path:inset(0 round 18px);
    box-shadow:0 3px 10px #0003;
}

/* Territory trigger is intentionally matte; only its expanded list is glass. */
html[data-skin="glass"] .gallery-area-toggle{
    background:#0d1812;
    border:1px solid transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
html[data-skin="glass"] .gallery-area-list{border-radius:22px;--glass-tint:rgba(8,16,12,.78);--glass-blur:22px;}
html[data-skin="glass"] .gallery-area-backdrop{background:#0000000d;}
html[data-skin="glass"] .gallery-area-option[aria-checked="true"]{background:#ffc33c14;}
html[data-skin="glass"] .gallery-area-option:hover{background:#ffffff0c;}
/* Gallery caption/gradient and the territory toggle retain the original design.
   Only the expanded territory list uses the glass material.
   Moving scrubber previews retain their solid original background, too. */
html[data-skin="glass"] .camp-timeline-label{
    background:#111713;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
html[data-skin="glass"] :is(.about-dialog-card,.camp-help-dialog-card,.removed-dialog-card){--glass-tint:rgba(8,16,12,.79);--glass-blur:24px;border-radius:28px;}
html[data-skin="glass"] .about-dialog-header{background:transparent;border-color:#ffffff16;}
html[data-skin="glass"] :is(.about-dialog-backdrop,.camp-help-dialog-backdrop,.removed-dialog-backdrop){background:#0005;}
html[data-skin="glass"] :is(.about-dialog-links a,.camp-help-dialog-close){background:#ffffff0c;border-color:#ffffff2b;}
html[data-skin="glass"] .panorama-header{background:none;}
html[data-skin="glass"] .panorama-footer{background:none;}
html[data-skin="glass"] .panorama-hint{padding:9px 13px;border-radius:16px;background:#08100cb3;}
.panorama-hint{transition:opacity .45s ease-out;}
.panorama-hint.is-dismissed{opacity:0;pointer-events:none;}
/* Opening focuses the viewer, while keyboard users retain a neutral focus ring. */
.panorama-dialog .panorama-close:focus-visible{outline:2px solid #fff6e8;outline-offset:3px;}
.panorama-dialog .panorama-close:hover{color:#fff6e8;border-color:#ffffff66;}
html[data-skin="glass"] .android-app-promo-layout{--glass-tint:rgba(8,16,12,.83);--glass-blur:22px;}
html[data-skin="glass"] .android-app-promo-actions{background:transparent;box-shadow:none;}

@media(max-width:600px){
    html[data-skin="glass"]{--glass-photo-size:104px;--glass-photo-right:9px;--glass-photo-bottom:11px;}
    html[data-skin="glass"] .map-camp-info{padding:8px 8px 10px 3px;border-radius:23px;gap:5px 8px;}
    html[data-skin="glass"] .map-camp-info-main{grid-template-columns:28px minmax(0,1fr) 34px;gap:3px;}
    html[data-skin="glass"] .map-camp-close{width:28px;}
    html[data-skin="glass"] .map-camp-help{width:34px;}
    html[data-skin="glass"] .map-camp-status-icons{padding-left:0;padding-right:0;gap:6px;}
    html[data-skin="glass"] .about-dialog{padding:12px;}
    html[data-skin="glass"] .about-dialog-card{max-height:calc(100dvh - 36px);border-width:1px;border-radius:26px;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    html[data-skin="glass"]{--glass-tint:rgba(8,16,12,.92);}
}
@media(prefers-reduced-transparency:reduce){
    html[data-skin="glass"] :is(.app-menu-toggle,.gps-locate-button,.app-menu-panel,.gallery-area-list,.map-camp-info,.about-dialog-card,.camp-help-dialog-card,.removed-dialog-card,.gallery-photo-arrow,.panorama-open,.panorama-dialog button,.panorama-message,.android-app-promo-layout,.android-app-promo-compact){background:#102019;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media(prefers-reduced-motion:reduce){.panorama-hint{transition:none;}}