/* Integration of the supplied Observer design with the existing real map. */
@font-face{font-family:'Cormorant Garamond';src:url('assets/observer/fonts/latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Shippori Mincho';src:url('assets/observer/fonts/serif.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Zen Kaku Gothic New';src:url('assets/observer/fonts/sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/observer/fonts/mono.woff2') format('woff2');font-weight:400 500;font-display:swap}
body{padding:0}main#viewerApp{width:100%;max-width:none;margin:0;gap:0;padding-bottom:calc(155px + env(safe-area-inset-bottom))}
.hdr,footer{max-width:none;width:100%;margin:0}.hdr h1.logo{margin:0;color:var(--c-text);font-weight:600;letter-spacing:0}
section.col-map{display:contents;border:0;border-radius:0;background:none;padding:0;margin:0;min-width:0}
aside.content{display:flex;margin:0;min-width:0}.content section{background-color:transparent;margin-bottom:0}
button,input,select{font-family:var(--f-sans)}button{max-width:none}.inp{font-family:var(--f-sans)}
#regionSearch{padding-left:44px;min-width:0}.search{min-width:0}.searchwrap{flex-shrink:0}
.chip{min-height:48px}.maptools{margin-top:8px}
#regionList{margin:0;max-height:260px;overflow:auto;overscroll-behavior:contain}
#regionList button{margin:0;border-radius:0;white-space:normal}#regionList p{padding:12px;font-size:12px}
#geographyNavigation{z-index:2;position:relative;margin:0 12px 10px}#geographyNavigation>label{display:block;font-size:12px;margin:0 0 6px;color:var(--c-muted)}
#geographyNavigation select{background:#131633;color:var(--c-text);border:1px solid var(--c-line);border-radius:12px;min-height:48px;font:inherit;padding:10px;width:100%}
#regionNavigation{font-size:13px;margin:10px 0}#regionNavigation summary{min-height:44px;line-height:44px;cursor:pointer}
#regionNavigation .toolbar{gap:6px}#regionNavigation button{font-size:12px;background:#191b3c;border-color:var(--c-line)}
#mapframe.mapbox{--map-sea:#070a1d;--map-land:#30346f;--map-coast:#b4bbf0;--map-country:#b4bbf0;--map-district:#777cab;height:clamp(260px,calc(100svh - 380px),480px);min-height:260px;border-radius:0;margin:0;isolation:isolate;background:var(--c-space-2)}
#map{width:100%;height:100%;background:transparent;stroke:none;touch-action:none}
#overviewCanvas{pointer-events:none}.scan,.corner,#mapHint{z-index:1;pointer-events:none}
#mapHint{max-width:calc(100% - 20px);white-space:normal;text-align:center;font-size:12px;line-height:1.7;margin:0}
#geometryStatus,#selectionNote{position:relative;left:auto;right:auto;top:auto;bottom:auto;background:#171935;color:var(--c-text-2);border:1px solid var(--c-line);font-size:12px;border-radius:10px;margin:8px 12px;padding:8px;pointer-events:none}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:7;margin:0;gap:6px;padding:6px 10px calc(7px + env(safe-area-inset-bottom))}
#selectionInfo{white-space:nowrap;color:var(--c-gold-2);font-size:13px}#clearSelection{min-height:44px;padding:0 12px;font-size:13px}
.mode-icon{font:24px/1 var(--f-sans)}.selrow{min-height:38px}.selection-disclaimer{font-size:10px;color:var(--c-muted);line-height:1.4;text-align:center;margin:0}
#linePopup{gap:8px;min-width:215px}#linePopup label{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:18px;padding:0 8px;color:var(--c-text)}
#linePopup input{min-height:24px;width:24px;height:24px;accent-color:#9f8ae9;order:2}
.public-status{margin:8px 14px 0;font-size:11px;color:var(--c-muted);line-height:1.7;position:relative}
#regionInfo{background:none;border:0;border-radius:0;padding:0;margin:0;line-height:1.8;font-size:13px;color:var(--c-text-2)}
#inspectedName{margin:0;font-size:26px;font-weight:500}#inspectedId{overflow-wrap:anywhere;font-size:9px}
#nationLegend p{margin:0 0 6px}#nationLegend{font-size:14px;color:var(--c-text-2)}
.observer-text{z-index:1}.observer-text h2{color:var(--c-text)}.observer .deck{z-index:0}
footer{position:relative;z-index:1;padding:18px 16px;margin-top:12px;font-size:11px;color:var(--c-muted);border-top:1px solid var(--c-line)}
footer a{color:var(--c-lav)}footer details summary{min-height:44px;cursor:pointer}.grain{opacity:.22}
.busy *,.motion-paused *,.decor-paused *{animation-play-state:paused!important}.decor-paused .stage{transition:none}
@media(min-width:960px){main#viewerApp{gap:0 20px;padding:0 24px 28px}.hdr{grid-column:1/-1}section.col-map{display:flex;gap:12px;align-self:start}aside.content{padding-top:0}.searchwrap{flex-wrap:wrap}.search{flex:1 1 330px}.chips{flex:0 1 auto;min-width:0}#mapframe.mapbox{height:auto;min-height:420px;aspect-ratio:925/560;border-radius:22px}.bar{position:relative;left:auto;right:auto;bottom:auto;padding:8px;flex-wrap:wrap}.bar .selection-disclaimer{width:100%;font-size:11px;text-align:left;padding:0 6px}.maptools{margin:0}.public-status{margin:0 4px}footer{grid-column:1/-1;padding:20px 0}.content section.card{margin:0}.content .observer{margin:110px 0 0}#geometryStatus,#selectionNote{margin:0}#geographyNavigation{margin:0}.mapbox .scan{border-radius:22px}}
@media(min-width:960px) and (max-width:1200px){.bar{flex-direction:column;align-items:stretch}.bar .modes-row{flex:auto}.mode{padding:0 8px}.mode span{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scan{display:none}}

/* Legible line icons; independent of emoji and font glyph metrics. */
.ui-icon{display:block;width:26px;height:26px;flex:none;pointer-events:none}
.refresh{min-width:48px;min-height:48px;gap:8px}.refresh .ui-icon{width:27px;height:27px}
.search-ic{top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center}.search-ic .ui-icon{width:24px;height:24px}
.mode .mode-icon,.layers-btn .mode-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:0}
.mode-icon .ui-icon{width:26px;height:26px}
.observer .quote{font-size:clamp(12px,3.6vw,15px);letter-spacing:0;line-height:1.8}
.quote-line{display:block;white-space:nowrap}.quote-pause{margin-top:8px}
@media(min-width:960px){.observer .quote{font-size:15px}}

/* The cold SVG fallback uses the same palette as the first canvas frame. */
#mapframe #map{background:var(--map-sea)}
#mapframe #map>rect{fill:var(--map-sea)}
#mapframe .country-land{fill:var(--map-land);stroke:var(--map-coast)}
#mapframe .japan-coast{stroke:var(--map-coast)}

/* At overview scale the canvas owns the LOD highlight; avoid duplicate exact-island strokes. */
.canvas-map.coarse-selection .province.selected,.canvas-map.coarse-selection .province-boundary{stroke:none!important}