/* Responsive town atlas. */
#atlas.atlas-explore { width:min(1060px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:22px; overflow:auto; border:1px solid #aac9ca55; border-radius:24px; background:linear-gradient(145deg,#172c35,#122330); color:#f5faf5; }
#atlas.atlas-explore .dialog-head { margin-bottom:16px; }
#atlas.atlas-explore .dialog-head h2 { font-size:27px; }
#atlas.atlas-explore button,#atlas.atlas-explore summary { min-height:48px; }
#atlas.atlas-explore button:focus-visible,#atlas.atlas-explore input:focus-visible,#atlas.atlas-explore summary:focus-visible,.atlas-beacon button:focus-visible { outline:3px solid #a6e9ff; outline-offset:3px; }
#atlas .atlas-toolbar { margin-bottom:16px; }
#atlas .atlas-search-label { display:block; color:#c5e4d7; font-size:13px; margin-bottom:7px; }
#atlas .atlas-search-row { display:flex; gap:10px; }
#atlas #atlas-search { flex:1; min-width:0; min-height:48px; margin:0; padding:12px 15px; font-size:16px; color:#153d3b; background:#f1f9ef; border:2px solid transparent; border-radius:16px; }
#atlas .atlas-home { flex-shrink:0; background:#d3eed7; color:#173f32; border-radius:16px; padding:10px 16px; font-weight:650; }
#atlas .atlas-filters { display:flex; gap:7px; overflow-x:auto; padding:10px 3px 6px; scrollbar-width:thin; }
#atlas .atlas-filters button { flex-shrink:0; padding:9px 13px; color:#d5e8e7; background:#ffffff0a; border:1px solid #ffffff20; border-radius:15px; font-size:13px; }
#atlas .atlas-filters button[aria-pressed=true] { background:#e2cf99; color:#293d33; border-color:#e2cf99; }
#atlas .atlas-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#atlas .atlas-where { margin:0; font-size:13px; line-height:1.5; color:#d4e9e1; }
#atlas .atlas-sort { flex-shrink:0; font-size:12px; background:transparent; color:#cfdddc; padding:8px; text-decoration:underline; text-underline-offset:3px; }
#atlas .atlas-result-count { font-size:12px; color:#a5bfbf; margin:2px 0 0; }
#atlas .atlas-split { display:grid; grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr); align-items:start; gap:18px; }
#atlas .atlas-visual { min-width:0; padding:10px; background:#0b1c2366; border:1px solid #aac8cc22; border-radius:17px; }
#atlas .atlas-visual summary { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:#d9e5e1; }
#atlas .atlas-visual summary::after { content:'＋'; margin-left:auto; font-size:20px; }
#atlas .atlas-visual[open] summary::after { content:'−'; }
#atlas .atlas-visual #town-map { display:block; width:100%; height:auto; margin:0; border-radius:12px; }
#atlas .atlas-visual .map-legend { font-size:10px; gap:9px; margin:12px 0 3px; }
#atlas .atlas-place-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#atlas .atlas-place { position:relative; min-width:0; padding:14px; background:#ffffff07; border:1px solid #a9c5ce30; border-radius:18px; }
#atlas .atlas-place.selected { border-color:#efcf7e; box-shadow:0 0 0 1px #efcf7e; }
#atlas .atlas-place-head { display:flex; align-items:start; gap:9px; }
#atlas .atlas-place-icon { font-size:25px; line-height:1.15; }
#atlas .atlas-place h3 { margin:0; font-size:15px; line-height:1.35; overflow-wrap:anywhere; color:#f0f6f1; }
#atlas .atlas-place-meta { margin:9px 0 6px; color:#b4ccca; font-size:11px; line-height:1.5; }
#atlas .atlas-place-note { min-height:36px; margin:0 0 12px; color:#d1ded9; font-size:12px; line-height:1.5; }
#atlas .atlas-place-actions { display:flex; gap:7px; }
#atlas .atlas-place-actions button { flex:1; padding:8px; border:1px solid #ffffff24; border-radius:12px; font-size:12px; color:#f0f5eb; background:#ffffff0c; }
#atlas .atlas-place-actions .atlas-go { color:#23372f; background:#e5ce96; border-color:#e5ce96; font-weight:650; }
#atlas .atlas-here { display:inline-block; background:#c2efd8; color:#163f35; border-radius:12px; padding:4px 8px; margin-bottom:10px; font-size:11px; }
#atlas .atlas-more { display:block; width:100%; margin-top:12px; padding:10px; border:1px solid #abc6ce33; border-radius:13px; color:#d3e4dc; background:#ffffff05; }
#atlas .atlas-empty { grid-column:1/-1; padding:24px 15px; text-align:center; color:#c6d5d0; }
#atlas .atlas-empty button { padding:10px 15px; border-radius:12px; background:#d2ecd8; color:#16382e; }
#atlas.atlas-explore .fineprint { margin-top:17px; font-size:12px; line-height:1.6; color:#c1d0ce; }
.atlas-beacon { position:absolute; left:50%; bottom:max(160px,calc(env(safe-area-inset-bottom) + 120px)); transform:translateX(-50%); max-width:min(650px,calc(100vw - 24px)); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border:1px solid #d2e8ca60; border-radius:20px; background:#1b3c38e8; color:#f4f8e9; z-index:6; font-size:13px; box-shadow:0 8px 30px #0003; }
.atlas-beacon span { min-width:0; overflow-wrap:anywhere; }
.atlas-beacon-close { min-width:48px; min-height:48px; background:#ffffff14; color:#fff; border-radius:12px; font-size:24px; flex-shrink:0; }
.movie-mode .atlas-beacon { display:none; }
#atlas .atlas-visual #town-map{max-height:none!important;aspect-ratio:1000/640;height:auto}
.atlas-beacon[hidden]{display:none}
@media(max-width:760px) { #atlas .atlas-split { grid-template-columns:1fr; } #atlas .atlas-visual #town-map { max-height:260px; object-fit:contain; } }
@media(max-width:480px) { #atlas.atlas-explore,.touch-town #atlas.atlas-explore { padding:16px; } #atlas.atlas-explore .dialog-head h2 { font-size:23px; } #atlas .atlas-home { padding:9px 11px; font-size:13px; } #atlas .atlas-place-grid { grid-template-columns:1fr; } #atlas .atlas-place-note { min-height:0; } #atlas .atlas-visual #town-map { max-height:190px; } .atlas-beacon { font-size:12px; bottom:max(120px,calc(env(safe-area-inset-bottom) + 110px)); } }
@media(max-height:430px) and (orientation:landscape) { #atlas.atlas-explore,.touch-town #atlas.atlas-explore { padding:14px 18px; } #atlas.atlas-explore .dialog-head { margin-bottom:7px; } #atlas.atlas-explore .dialog-head h2 { font-size:22px; } #atlas .atlas-toolbar { margin-bottom:10px; } #atlas .atlas-split { grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); } #atlas .atlas-place-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #atlas .atlas-visual #town-map { max-height:190px; } .atlas-beacon { bottom:max(18px,env(safe-area-inset-bottom)); } }