/* Immersive exploration. Original typography, colours and style.css are preserved. */
[hidden] { display:none!important; }
#player-shell { position:absolute; inset:0; z-index:1; }
#app[data-view="camera"] #cam-frame-wrap video { object-fit:cover!important; }
.preview-header,.preview-footer { display:none; }
#app[data-view="map"] .map-view { inset:50px 0 0; display:block; padding:0; background:#0a0a0a; z-index:0; }
.map-canvas { position:absolute; inset:0; }
.map-toolbar { position:absolute; z-index:15; left:24px; top:12px; right:auto; gap:8px; }
.map-search-wrap { flex:0 1 270px; width:270px; }
#map-search { background:#0e1011e8; backdrop-filter:blur(14px); border-color:#303438; height:38px; }
#map-filters-toggle { height:38px; padding:0 16px; color:#c1c7ca; background:#0e1011e8; border:1px solid #303438; border-radius:24px; font:.68rem var(--font); cursor:pointer; }
#map-filter-panel { position:absolute; top:48px; left:0; max-width:350px; padding:12px; background:#101213f5; border:1px solid #303438; border-radius:16px; box-shadow:0 12px 32px #0005; }
#map-filter-panel .map-filter { max-width:none; }
.map-legend { position:absolute; left:24px; bottom:90px; pointer-events:none; margin:0; font-size:.55rem; opacity:.8; }
#map-legend-other,#map-legend-night { display:none; }
#map-legend-city-lights { color:#648cc2; }
.map-credit { left:14px; bottom:8px; }
.map-zoom { right:24px; bottom:105px; }
#app[data-preview="true"] .map-zoom { left:auto; right:24px; }
.map-results { top:62px; left:24px; max-height:calc(100% - 165px); }
.map-tile-notice { top:62px; left:24px; right:24px; }
#app[data-view="map"] #top-bar { background:#0b0c0df0; border-bottom:1px solid #ffffff08; }
#app[data-view="map"] #bottom-bar { height:90px; background:linear-gradient(transparent,#0a0a0a99); pointer-events:none; }
#bottom-bar button,#bottom-bar .view-mode-switch { pointer-events:auto; }
.next-action { display:flex; flex-direction:column; gap:7px; align-items:center; min-width:0; }
#journey-label { color:#a3a9ac; font:.6rem var(--font); letter-spacing:.05em; text-align:center; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app[data-view="map"][data-preview="true"] .next-action { visibility:hidden; }
#app[data-view="map"] #golden-status { display:none; }
#open-cam-btn { white-space:nowrap; }
.explore-control { position:relative; }
#explore-toggle { height:30px; padding:0 12px; display:flex; gap:7px; align-items:center; border:1px solid #ffffff40; border-radius:22px; color:#e9e9e9; background:#1119; font:.66rem var(--font); cursor:pointer; backdrop-filter:blur(12px); }
.explore-chevron { width:8px; height:5px; flex:none; fill:currentColor; }
#explore-menu { position:absolute; right:0; top:40px; width:230px; max-height:calc(100dvh - 70px); overflow:auto; padding:6px; border:1px solid #313538; border-radius:14px; background:#0e1011f5; backdrop-filter:blur(18px); box-shadow:0 20px 60px #0008; }
#explore-menu button { display:block; width:100%; min-height:40px; padding:10px 13px; color:#c7cdd0; background:transparent; border:0; border-radius:8px; text-align:left; font:.73rem var(--font); cursor:pointer; }
#explore-menu button:hover,#explore-menu button[aria-pressed="true"] { background:#ffffff0b; color:#fff; }
#explore-menu button[data-explore-mode="golden"].has-golden-availability { color:#f1cc80; }
#explore-menu button[aria-pressed="true"]::after { content:' ·'; color:#d9c296; }
#explore-menu hr { margin:6px 9px; border:0; border-top:1px solid #2c3032; }
#top-bar { z-index:30; }
#app[data-preview="true"] #player-shell { inset:auto; top:115px; right:24px; width:min(620px,calc(100% - 48px)); z-index:20; background:#101213; border:1px solid #41474c; border-radius:16px; box-shadow:0 24px 100px #0009; overflow:hidden; }
#app[data-preview="true"] .preview-header { display:flex; align-items:center; gap:7px; padding:12px 14px; min-height:62px; }
.preview-place { flex:1; min-width:0; }
.preview-place h2 { color:#eee; font:400 .95rem/1.25 var(--serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-place p { color:#8f999f; font:.62rem/1.4 var(--font); margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-header button { flex-shrink:0; width:32px; height:32px; border:1px solid #343a3d; border-radius:50%; background:transparent; color:#c6cdd1; font-size:19px; cursor:pointer; }
.preview-header #preview-fact-btn { font:italic .8rem var(--serif); }
#app[data-preview="true"] #cam-frame-wrap { position:relative; inset:auto!important; width:100%; height:auto; aspect-ratio:16/9; max-height:calc(100dvh - 345px); min-height:165px; }
#app[data-preview="true"] #cam-frame-wrap iframe,#app[data-preview="true"] #cam-frame-wrap video { position:absolute; inset:0; }
#app[data-preview="true"] .preview-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; min-height:67px; }
.preview-footer>div { min-width:0; }
#preview-theme { display:block; color:#d0d4d5; font:.64rem var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:270px; }
#map-selected-solar { color:#98958d; font:.57rem/1.5 var(--font); margin-top:5px; }
#preview-next { flex-shrink:0; border:1px solid #81888c; border-radius:24px; padding:10px 18px; color:#eee; font:.8rem var(--serif); background:transparent; cursor:pointer; }
#app[data-view="map"][data-preview="true"] #fact-popup:not(.hidden) { display:block; }
#player-shell .fact-popup { z-index:25; }
#app[data-preview="true"] .fact-popup { top:55px; right:12px; max-width:300px; }
.fact-body { color:#b5b9bc; }
.fact-close { min-width:28px; min-height:28px; }
.golden-halo { display:none; pointer-events:none; fill:#e5c990; opacity:.15; transform-box:fill-box; transform-origin:center; }
.map-dot:not(.is-cluster) .map-point { stroke:#d1edf480; stroke-width:var(--map-point-stroke,1.2); }
.map-dot-other { fill:#97b5c0; }
.map-point-halo { fill:#85bbcf; opacity:.1; pointer-events:none; }
.map-dot.is-city-lights .map-point { fill:#648cc2; stroke:#a8c6ec80; }
.map-dot.is-city-lights .map-point-halo { fill:#648cc2; }
.map-dot.is-cluster .map-point-halo,.map-dot.is-golden .map-point-halo { display:none; }
  .map-selection-ring { fill:#0c161ddb; stroke:#f6fcff; stroke-width:2.2; }
  .map-selection-halo { fill:none; stroke:#cbe9f2; stroke-width:5; opacity:.25; filter:blur(2px); }
.map-dot.is-selected .map-point,.map-dot:focus-visible .map-point,.map-dot.is-targeted .map-point { stroke:#fff; stroke-width:2; }
.map-place-label { fill:#a9b8c0; font:11px var(--font); paint-order:stroke; stroke:#25292d; stroke-width:3px; stroke-linejoin:round; pointer-events:none; }
.map-dot.is-selected .map-place-label { fill:#edf5f8; }
.map-detail .leaflet-control-attribution { max-width:calc(100vw - 160px); }
.map-dot.is-golden:not(.is-cluster) .golden-halo { display:block; animation:golden-halo 2.8s ease-in-out infinite; }
.map-dot.is-golden:not(.is-cluster) .map-point { animation:none; fill:#f0d7a5; stroke:#ead3a655; filter:drop-shadow(0 0 var(--map-point-glow,5px) #edd39d88); }
.map-dot.is-golden.is-cluster .map-point { animation:golden-cluster 2.8s ease-in-out infinite; }
@keyframes golden-halo { 0%,100%{transform:scale(.85);opacity:.13}50%{transform:scale(1.8);opacity:.3} }
@keyframes golden-cluster { 0%,100%{filter:drop-shadow(0 0 1px #dfc18633)}50%{filter:drop-shadow(0 0 8px #dfc18688)} }
/* Quiz: same restrained frame, with an unclipped official video player. */
.challenge-overlay { background:#070909f5; backdrop-filter:blur(16px); }
.challenge-box { max-width:760px; max-height:94dvh; overflow-y:auto; background:#101213; border-color:#363c40; border-radius:18px; }
.challenge-header { padding:10px 20px; flex-shrink:0; align-items:center; }
.challenge-streak { font:.68rem var(--font); color:#a8b4ba; font-weight:400; }
.challenge-close { width:36px; height:36px; border-radius:50%; border:1px solid #353b3f; color:#d2d8db; }
.challenge-frame-wrap { flex-shrink:0; height:auto; aspect-ratio:16/9; max-height:42dvh; min-height:180px; }
.challenge-frame-wrap iframe { pointer-events:auto; }
.challenge-frame-wrap iframe,.challenge-frame-wrap video { width:100%; height:100%; display:block; }
/* Hide the same location clues while revealing the challenge's blurred backdrop.
   Clipping the viewport also excludes hidden controls from pointer input.
   Answering restores the complete, unchanged player without reloading it. */
#challenge-frame-wrap[data-blind="true"] .camera-viewport { background:transparent; clip-path:inset(max(20%,44px) 0 max(22%,44px) 0); }
#quiz-question { color:#eceeed; font:400 1.25rem var(--serif); text-align:center; padding:16px 18px 0; }
.challenge-hint { color:#abb3b8; font:.77rem/1.6 var(--font); border:0; padding:12px 24px; text-align:center; outline:none; }
.challenge-options { padding:0 20px 12px; }
.challenge-option { background:transparent; border-radius:22px; min-height:42px; }
.challenge-option:disabled { cursor:default; }
#quiz-feedback { padding:0 20px; color:#e0c99f; text-align:center; font:.72rem/1.5 var(--font); }
#quiz-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 20px 20px; }
#quiz-actions button,.challenge-replay { border:1px solid #626e74; border-radius:24px; padding:10px 22px; background:transparent; color:#d3dadc; font:.8rem var(--serif); cursor:pointer; }
.challenge-result { padding:14px 22px 22px; }
.challenge-result-title { font:400 1.1rem var(--serif); }
.challenge-leaderboard { max-width:420px; }
.challenge-leaderboard p { color:#889397; font:.74rem/1.6 var(--font); text-align:center; }
.quiz-score { display:flex; justify-content:space-between; padding:9px 6px; border-bottom:1px solid #ffffff0a; color:#c8cfd1; font:.76rem var(--font); }
.challenge-name-entry label { color:#aab2b6; font:.72rem var(--font); }
button:focus-visible { outline:1px solid #c1d9e4; outline-offset:3px; }
@media(max-width:680px) {
  .map-points .map-dot:is(.is-targeted,.is-selected,:focus-visible) .map-point { stroke-width:1.5; }
  #top-bar { padding:0 12px; gap:8px; }#top-location { flex:1; overflow:hidden; }#top-right { gap:8px; }#top-time { display:none; }
  #explore-toggle { min-height:36px; }#explore-menu { right:-55px; }
  .map-toolbar { left:12px; right:12px; top:10px; flex-wrap:nowrap; }.map-search-wrap { width:auto; max-width:none; flex:1; min-width:0; }#map-search,#map-filters-toggle { height:40px; }
  .map-results { top:60px; left:12px; width:calc(100% - 24px); max-height:calc(100% - 200px); }
  .map-legend { left:14px; bottom:145px; font-size:.5rem; }.map-zoom { right:12px; bottom:145px; }
  #app[data-preview="true"] .map-zoom { left:auto; right:12px; top:62px; bottom:auto; }
  #app[data-preview="true"] .map-legend { display:none; }
  .map-credit { bottom:5px; font-size:.5rem; }
  #bottom-bar .next-action { grid-column:1/-1; grid-row:1; justify-self:center; gap:5px; }
  #journey-label { max-width:80vw; font-size:.55rem; }#bottom-bar #open-cam-btn { padding:10px 25px; }
  #app[data-view="map"] #bottom-bar { height:130px; }
  #app[data-preview="true"] #player-shell { top:auto; bottom:135px; left:12px; right:12px; width:auto; border-radius:14px; }
  #app[data-preview="true"] .preview-header { padding:10px; gap:4px; }.preview-place h2 { font-size:.85rem; }.preview-place p { font-size:.57rem; }
  .preview-header button { width:36px; height:36px; }
  #app[data-preview="true"] .preview-footer { padding:10px; gap:8px; flex-wrap:wrap; }
  #preview-theme { max-width:190px; font-size:.61rem; }#map-selected-solar { font-size:.54rem; max-width:190px; }
  #preview-next { padding:10px 12px; font-size:.74rem; min-height:44px; }
  #app[data-preview="true"] #cam-frame-wrap { min-height:160px; max-height:32dvh; }
  .challenge-box { width:calc(100% - 20px); max-height:96dvh; }.challenge-frame-wrap { min-height:170px; }.challenge-hint { padding:10px 18px; font-size:.72rem; }
  #quiz-question { font-size:1.1rem; padding-top:12px; }.challenge-options { padding:0 12px 10px; gap:6px; }.challenge-option { font-size:.67rem; }
}
@media(max-height:600px) and (min-width:681px) {
  #app[data-preview="true"] #player-shell { top:100px; width:470px; }
  #app[data-preview="true"] #cam-frame-wrap { max-height:calc(100dvh - 280px); min-height:100px; }
}
@media(prefers-reduced-motion:reduce) { .golden-halo,.map-dot.is-golden.is-cluster .map-point { animation:none!important; } }
