/* Phase 2 optional exploration. All required actions are ordinary touch-sized buttons. */
.glass-sub-active, .glass-sub-active body { overflow:hidden; }
body:has(#southernSeasScreen:not([hidden])) { min-width:0; }
.glass-sub-entry { position:absolute; left:3%; top:48%; z-index:3; display:flex; align-items:center; gap:9px; min-height:48px; max-width:44%; padding:8px 13px; border:1px solid #fff9; border-radius:40px; color:#133747; background:#fff9e9ed; box-shadow:0 4px 18px #12384940; font-size:clamp(12px,1vw,15px); font-weight:800; }
.glass-sub-entry svg { flex-shrink:0; width:34px; height:26px; }
.glass-sub-entry:hover { background:#fff8df; }
.glass-sub-entry:focus-visible { outline:3px solid #efb24d; outline-offset:3px; }
.glass-sub-scene-link { margin-top:14px; min-height:44px; }
.glass-sub-dialog { padding:0; width:calc(100vw - 24px); max-width:1480px; height:min(940px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); border:1px solid #89aeaf; border-radius:20px; overflow:hidden; background:#0a3349; color:#f1f4e8; box-shadow:0 24px 100px #03172599; }
.glass-sub-dialog::backdrop { background:#06273dd9; backdrop-filter:blur(5px); }
.gs-shell { display:flex; flex-direction:column; height:100%; min-width:0; }
.glass-sub-dialog button { min-height:44px; min-width:44px; padding:9px 12px; border:1px solid #88b4b580; border-radius:10px; background:#164b60; color:#f3f3df; font-weight:650; font-size:14px; line-height:1.3; }
.glass-sub-dialog button:hover { background:#236779; }
.glass-sub-dialog button:focus-visible { outline:3px solid #f1c767; outline-offset:2px; }
.glass-sub-dialog button:disabled { opacity:.55; cursor:default; }
.gs-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:#0c3447; border-bottom:1px solid #8eb8b52e; z-index:2; }
.gs-eyebrow { margin:0 0 4px; color:#e8bd75; text-transform:uppercase; font-weight:750; letter-spacing:.14em; font-size:10px; }
.gs-header h2 { margin:0; font-family:Georgia,serif; font-weight:500; font-size:clamp(22px,2.4vw,32px); color:#f5efdf; }
.gs-toolbar { display:flex; flex-wrap:wrap; gap:6px; }
.gs-toolbar button { font-size:12px; }
.gs-toolbar [data-gs-action="exit"] { background:#e8d6a6; color:#143c4b; border-color:#e8d6a6; }
.gs-toolbar button[aria-pressed="true"] { border-color:#b8d3b0; background:#245d63; }
.gs-route { display:flex; align-items:center; gap:10px; padding:6px 20px; background:#103e50; color:#e9e4ca; font-size:12px; font-weight:700; }
.gs-route-track { position:relative; flex:1; height:9px; border-radius:20px; background:#649397; box-shadow:inset 0 1px 3px #082e42; overflow:hidden; }
.gs-route-track [data-gs-progress] { display:block; height:100%; width:0; border-radius:20px; background:#f2cf79; }
.gs-route-track i { position:absolute; top:0; height:100%; width:2px; background:#e5f3df; opacity:.85; }
.gs-play { position:relative; flex:1; min-height:180px; overflow:hidden; }
.gs-scene,.gs-ocean { display:block; width:100%; height:100%; }
.gs-scene { position:absolute; inset:0; touch-action:none; }
.gs-location { position:absolute; top:20px; left:22px; display:grid; gap:4px; max-width:calc(100% - 44px); pointer-events:none; padding:10px 14px; border-left:2px solid #e3c176; color:#f3f3df; background:#092d425c; border-radius:0 9px 9px 0; }
.gs-location span { font-family:Georgia,serif; font-size:21px; }
.gs-location small { font-size:12px; color:#d7e8d7; }
.gs-footer { display:flex; align-items:center; gap:20px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); background:#0c3447; border-top:1px solid #8eb8b530; }
.gs-steering { display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,44px); gap:4px; flex-shrink:0; }
.gs-steering button { padding:0; font-size:23px; touch-action:none; user-select:none; }
.gs-steering [data-gs-direction="up"] { grid-column:2; }
.gs-steering [data-gs-direction="left"] { grid-row:2; grid-column:1; }
.gs-steering [data-gs-direction="down"] { grid-row:2; grid-column:2; }
.gs-steering [data-gs-direction="right"] { grid-row:2; grid-column:3; }
.gs-observations { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; flex:1; min-width:0; }
.gs-observations [data-gs-nearby] { display:flex; flex-wrap:wrap; gap:6px; }
.gs-observations [data-gs-observe] { background:#e9d59c; border-color:#eddda9; color:#183f49; }
.gs-observations [data-gs-action="cruise"] { background:#d4e6cf; border-color:#d4e6cf; color:#143e49; }
.gs-observations [data-gs-action="cruise"][aria-pressed="true"] { background:#e9d59c; border-color:#e9d59c; }
.gs-observations p { flex-basis:100%; margin:0; color:#b7d4d4; font-size:12px; line-height:1.45; }
.gs-nearby-hint { font-size:13px; color:#c5dfd8; }
.gs-intro { position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:22px; background:linear-gradient(90deg,#092e45db,#07364b38); }
.gs-intro[hidden],.gs-panel[hidden],.glass-sub-dialog [hidden] { display:none!important; }
.gs-intro>div { width:min(100%,460px); padding:30px; border:1px solid #d3e4cc40; border-radius:20px; background:#09354bbf; box-shadow:0 20px 70px #041f3c55; }
.gs-intro h3 { margin:12px 0; font-family:Georgia,serif; font-size:clamp(26px,3vw,40px); color:#fff6df; font-weight:400; }
.gs-intro p { line-height:1.6; }
.gs-intro-note { color:#badacb; font-size:14px; }
.gs-intro button { background:#e8c775; color:#143a47; min-width:130px; }
.gs-panel { position:absolute; inset:0 0 0 auto; z-index:5; width:420px; max-width:100%; padding:20px; overflow-y:auto; overscroll-behavior:contain; background:#faf6e9; color:#173b48; box-shadow:-15px 0 50px #041d324d; }
.gs-panel-top { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.gs-panel h3 { font-family:Georgia,serif; font-size:27px; line-height:1.12; font-weight:500; margin:0 0 8px; color:#133848; }
.gs-panel button { background:#e8ece1; color:#184653; border-color:#adbdaf; }
.gs-panel button:hover { background:#d8e5dc; }
.gs-panel p { line-height:1.6; font-size:15px; }
.gs-panel .gs-scientific { margin:0 0 12px; font-style:italic; font-size:12px; color:#667c78; overflow-wrap:anywhere; }
.gs-photo { position:relative; display:block; width:100%; height:220px; background:#e0e9df; border-radius:12px; overflow:hidden; margin:0; }
.gs-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.gs-photo p { padding:12px; }
.gs-gallery { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 4px; font-size:13px; }
.gs-credit { display:block; margin:7px 0; font-size:10px; color:#748278; }
.gs-explanation { font-size:16px!important; line-height:2!important; }
.gs-panel .gs-word { display:inline-block; padding:0 2px; border:0; border-radius:3px; min-width:44px; min-height:44px; color:#0c5d63; background:#e3e8bd; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; font:inherit; font-weight:750; }
.gs-definition { padding:12px; border-left:3px solid #a97f37; background:#eee6cf; font-size:14px; line-height:1.6; border-radius:0 8px 8px 0; }
.gs-definition button { display:block; margin-top:8px; }
.gs-narration { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.gs-narration button:first-child,.gs-panel .gs-continue { background:#1d5967; color:#f6f4e2; border-color:#1d5967; }
.gs-voice-note { display:block; margin-top:8px; color:#667c78; font-size:11px; }
.gs-audio-status { font-size:12px!important; color:#64756d; }
.gs-continue { width:100%; }
.gs-list { display:grid; gap:8px; margin-top:16px; }
.gs-list button { display:grid; text-align:left; gap:6px; padding:14px; }
.gs-list small { color:#5a736c; font-weight:400; font-size:12px; }
@media (max-width:760px) {
  .glass-sub-dialog { width:100vw; height:100dvh; max-height:100dvh; max-width:100vw; margin:0; border-radius:0; }
  .gs-header { padding:max(10px,env(safe-area-inset-top)) 12px 10px; gap:8px; }
  .gs-header h2 { font-size:22px; }
  .gs-toolbar { gap:4px; width:100%; }
  .gs-toolbar button { flex:1; padding:7px 8px; font-size:11px; }
  .gs-toolbar [data-gs-action="exit"] { flex:1.4; }
  .gs-route { padding:5px 12px; gap:6px; font-size:10px; }
  .gs-location { top:12px; left:12px; padding:7px 9px; }
  .gs-location span { font-size:17px; }
  .gs-location small { font-size:10px; }
  .gs-footer { gap:10px; padding:9px 12px max(9px,env(safe-area-inset-bottom)); }
  .gs-steering { grid-template-columns:repeat(3,44px); }
  .gs-observations { gap:5px; }
  .gs-observations button { font-size:12px; }
  .gs-nearby-hint { font-size:11px; }
  .gs-observations p { font-size:10px; }
  .gs-panel { width:100%; padding:18px; }
  .gs-photo { height:180px; }
  .gs-intro>div { padding:20px; }
  .glass-sub-entry { left:3%; padding:6px 9px; gap:5px; font-size:11px; max-width:44%; }
  .glass-sub-entry svg { width:25px; }
}
@media (max-height:520px) and (min-width:600px) {
  .gs-header { padding:8px 12px; }
  .gs-header h2 { font-size:20px; }
  .gs-eyebrow { font-size:9px; }
  .gs-footer { padding:6px 12px; }
  .gs-steering { grid-template-columns:repeat(4,44px); grid-template-rows:44px; }
  .gs-steering [data-gs-direction] { grid-row:1; grid-column:auto; }
  .gs-location { top:8px; padding:5px 9px; }
  .gs-intro>div { padding:15px 24px; }
  .gs-intro h3 { margin:6px 0; font-size:24px; }
  .gs-intro p { margin:8px 0; font-size:13px; }
}
/* Scroll the whole explorer on short screens; overlays have their own scrolling. */
#glassSubDialog {
  left: env(safe-area-inset-left); right: env(safe-area-inset-right); top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom);
  width: min(1480px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
  height: min(940px, calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  height: min(940px, calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto; overflow: auto; overscroll-behavior: contain;
}
.gs-shell { height: auto; min-height: 100%; }
.gs-play { flex: 1 0 auto; min-height: 300px; }
.gs-intro { align-items: start; overflow: auto; overscroll-behavior: contain; }
.gs-header, .gs-route, .gs-footer { flex-shrink: 0; }
.gs-panel h3, .gs-intro h3, .gs-list button { overflow-wrap: anywhere; }
@media (max-height: 520px) {
  .gs-play { min-height: 240px; }
  .gs-header { padding: 8px 12px; }
  .gs-header h2 { font-size: 20px; }
  .gs-steering { grid-template-columns: repeat(4, 44px); grid-template-rows: 44px; }
  .gs-steering [data-gs-direction] { grid-row: 1; grid-column: auto; }
  .gs-intro { padding: 12px; }
  .gs-intro > div { padding: 15px 20px; }
  .gs-intro h3 { margin: 6px 0; font-size: 24px; }
  .gs-intro p { margin: 8px 0; font-size: 13px; }
}
@media (max-width: 420px) { .gs-footer { flex-wrap: wrap; } .gs-observations { flex-basis: 100%; } }
@media (prefers-reduced-motion:reduce) { .glass-sub-dialog *, .glass-sub-entry { scroll-behavior:auto; transition:none; animation:none; } }
@media (max-width:560px) {
  .glass-sub-entry { width:44px; min-width:44px; max-width:44px; min-height:44px; padding:5px; justify-content:center; }
  .glass-sub-entry svg { width:30px; }
  .glass-sub-entry span { display:none; }
}