@font-face{font-family:Pixel;src:url('assets/pixel.ttf')}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#101a37;color:#fff0c1;overscroll-behavior:none}body{font:12px/1.5 Pixel,monospace}button{font:inherit;min-width:44px;min-height:44px;border:2px solid #688b7c;border-radius:5px;background:#1d343d;color:#fff0c1;cursor:pointer;padding:8px 12px;box-shadow:0 3px #080f24;touch-action:manipulation}button:active,.pressed{background:#e3b76b!important;color:#101a37;transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #e3b76b;outline-offset:2px}.primary{background:#e3b76b;color:#101a37;border-color:#fff0c1}#app{position:relative;display:flex;flex-direction:column;width:100%;max-width:1200px;margin:auto;height:var(--vh,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);isolation:isolate}header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#101a37;padding:6px 10px;flex-shrink:0}.brand{display:flex;align-items:center;gap:9px;line-height:1.25}.brand b{font-size:18px;color:#e3b76b}.brand span{font-size:10px}nav{display:flex;gap:5px}nav button{font-size:10px;padding:5px 8px}#hud{min-height:28px;display:flex;justify-content:space-between;gap:10px;padding:5px 10px;color:#a8d5ad;font-size:9px;flex-shrink:0}#stage{display:flex;position:relative;flex:1;min-height:100px;flex-direction:column;overflow:hidden;border-top:2px solid #41616a;border-bottom:2px solid #41616a;background:#101a37}#scene{flex:1;min-height:0;height:0;width:100%;display:block;image-rendering:pixelated;touch-action:none}#bearing{min-height:28px;flex-shrink:0;background:#152738;color:#f5d492;font-size:10px;padding:5px 9px}#notice{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:9px 12px;background:#101a37ed;border:1px solid #e3b76b;border-radius:4px;text-align:center;font-size:11px;opacity:0;pointer-events:none}#notice.show{opacity:1}#controls{display:flex;gap:6px;padding:8px;align-items:stretch;flex-shrink:0;touch-action:none;background:#152738}#controls button{font-size:10px;padding:5px 8px}#controls small{display:block;font-size:6px;margin-top:4px}#steer{width:100px;min-width:72px;min-height:64px;position:relative;display:grid;place-items:center;border:2px solid #688b7c;border-radius:40px;background:#101a37;touch-action:none;user-select:none}#steer small{position:absolute;bottom:4px;color:#a8d5ad;font-size:6px}#thumb{width:32px;height:32px;display:grid;place-items:center;background:#34525b;border:1px solid #688b7c;border-radius:50%;color:#a8d5ad;margin-top:-7px}#use{margin-left:auto;min-width:80px}#gear{min-width:54px}footer{display:flex;flex-wrap:wrap;gap:8px;font-size:8px;padding:4px 10px;color:#9badb4;flex-shrink:0}footer strong{color:#e3b76b;font-weight:normal}footer span{margin-left:auto}#overlay{position:absolute;z-index:5;inset:calc(58px + env(safe-area-inset-top)) 0 0;display:grid;place-items:center;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#080f24a9;overflow:hidden}#overlay.hidden{display:none}#panel{width:min(100%,620px);max-height:calc(var(--vh,100dvh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;padding:20px;background:#132739ed;border:2px solid #7a9b88;border-radius:7px;box-shadow:0 0 0 5px #101a37}h1{font-size:clamp(30px,6vw,48px);line-height:1.14;color:#e3b76b;margin:9px 0;text-shadow:3px 3px #587350}h2{font-size:23px;line-height:1.2;margin:0 0 12px;color:#e3b76b}h3{font-size:13px;color:#a8d5ad;margin:16px 0 7px}p{font-size:12px;margin:10px 0;color:#d2dfd1}.eyebrow{color:#a8d5ad;letter-spacing:2px;font-size:9px}.buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tip{border-left:3px solid #e3b76b;padding-left:10px}.credits{font-size:9px;color:#a8b9b9}.credits b{color:#e3b76b}.route-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.route-list button{text-align:left;font-size:11px}.route-list small{display:block;font-size:8px;color:#a8d5ad}.stats{display:flex;flex-wrap:wrap;gap:12px;color:#a8d5ad;font-size:11px}.photo-frame{width:100%;aspect-ratio:16/9;background:#101a37;display:block;border:2px solid #e3b76b;image-rendering:pixelated}.photo-data{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:11px;color:#a8d5ad;margin-top:8px}.photo-data strong{color:#fff0c1}.meter{height:10px;background:#101a37;border:1px solid #688b7c;margin:7px 0}.meter span{display:block;height:100%;background:#a8d5ad;width:0}#shutter{min-width:150px;background:#e3b76b;color:#101a37}.photo-message{min-height:34px;font-size:11px;color:#e3b76b}.album-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.album-grid button{text-align:left;font-size:10px;padding:7px}.album-grid canvas{width:100%;aspect-ratio:16/9;display:block;image-rendering:pixelated;opacity:.9;margin-bottom:5px}.album-grid small{display:block;color:#a8d5ad;font-size:8px}.expanded{position:fixed!important;inset:0;z-index:999;max-width:none!important;background:#101a37}.title-open #bearing{display:none}.title-open #controls{opacity:.45}@media(max-width:550px){header{padding:5px 7px}.brand b{font-size:15px}.brand span{font-size:8px}nav{gap:3px}nav button{font-size:9px;padding:5px}#hud{font-size:8px;padding:4px 7px;min-height:27px}#steer{width:78px;min-width:72px;min-height:62px}#controls{gap:5px;padding:7px 6px}#controls button{font-size:9px;padding:5px;min-width:44px}#use{min-width:65px}#gear{min-width:44px}#bearing{font-size:9px}footer{font-size:8px;gap:5px;padding:4px 7px}footer span{display:none}#panel{padding:17px}p{font-size:11px}.route-list button{font-size:10px}}@media(max-width:360px){.brand span{display:none}#steer{width:72px}#controls{gap:4px}.photo-data{font-size:9px}}@media(max-height:420px){header{padding:2px 8px}.brand b{font-size:14px}.brand span{font-size:9px}nav button{font-size:9px;padding:3px 8px}#hud{min-height:22px;padding:2px 8px;font-size:8px}#controls{padding:4px 8px;gap:6px}#controls button,#steer{min-height:48px}#steer{width:90px}#thumb{width:26px;height:26px}#controls small{font-size:6px;margin-top:2px}#bearing{min-height:20px;font-size:8px;padding:3px 8px}footer{display:none}#overlay{top:calc(48px + env(safe-area-inset-top))}#panel{padding:13px;max-height:calc(var(--vh,100dvh) - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}h1{font-size:29px;margin:5px 0}h2{font-size:20px}p{font-size:10px;margin:7px 0}.eyebrow{font-size:8px}.credits{font-size:8px}.buttons{margin-top:10px}.photo-frame{width:43%;float:left;margin-right:12px}.photo-data{display:block}.photo-data span{display:block;margin:6px 0}.photo-message{min-height:28px}.photo-clear{clear:both}.album-grid{grid-template-columns:repeat(3,1fr)}}

@media(max-width:360px) and (min-height:421px){#panel:has(#photo-frame){padding:13px}#photo-frame{max-height:110px;object-fit:contain}#panel:has(#photo-frame) h2{font-size:20px;margin-bottom:7px}#panel:has(#photo-frame) .photo-data{font-size:9px;margin-top:5px}#panel:has(#photo-frame) .photo-message{min-height:28px}#panel:has(#photo-frame) .credits{font-size:8px;margin:6px 0}#panel:has(#photo-frame) .buttons{margin-top:8px}}#panel #shutter{min-width:120px}#panel:has(#photo-frame) .buttons button{font-size:10px;padding:8px 10px}@media(max-height:420px) and (min-width:500px){.title-open #panel h1{float:left;width:42%;margin:4px 12px 7px 0;font-size:29px}.title-open #panel p{font-size:9px;line-height:1.35;margin:5px 0}.title-open #panel .tip{font-size:9px}.title-open #panel .buttons{margin-top:8px;gap:6px}.title-open #panel .buttons button{font-size:9px;padding:5px 8px;min-width:88px}.title-open #panel .credits{font-size:7px;line-height:1.3}.title-open #panel .eyebrow{font-size:7px}}@media(max-height:420px){#panel:has(#photo-frame) .meter,#panel:has(#photo-frame) .photo-message{margin-left:calc(43% + 12px)}}
@media(max-height:340px){#panel:has(#photo-frame){padding:10px}#panel:has(#photo-frame) h2{font-size:18px;margin-bottom:6px}#photo-frame{width:38%;max-height:88px;object-fit:contain;margin-right:10px}#panel:has(#photo-frame) .photo-data{font-size:9px;line-height:1.2;margin-top:0}#panel:has(#photo-frame) .photo-data span{margin:3px 0}#panel:has(#photo-frame) .meter{height:8px;margin:4px 0 4px calc(38% + 10px)}#panel:has(#photo-frame) .photo-message{font-size:9px;line-height:1.3;min-height:14px;margin-left:calc(38% + 10px)}#panel:has(#photo-frame) .buttons{margin-top:6px}#panel:has(#photo-frame) .credits{display:none}}

/* A framed embedded expedition; expanded view is an explicit choice. */
html,body{height:auto;min-height:100%;overflow-x:hidden}
body{padding:12px;background:radial-gradient(ellipse at 15% 0,#223c45,#101a37 65%)}
#app{height:calc(var(--vh,100dvh) - 24px);max-height:1000px;border:2px solid #41616a;box-shadow:0 6px 0 #080f24;scroll-margin-top:12px}
#app.expanded{height:var(--vh,100dvh);max-height:none;border:0;margin:0;box-shadow:none}
.mastery-note{font-size:9px;color:#e3b76b;border-top:1px solid #41616a;padding-top:8px}
.survey-seals{border:1px solid #41616a;padding:5px 10px;background:#101a37}
.survey-seals p{font-size:10px;color:#e3b76b}
@media(max-height:420px){body{padding:6px}#app{height:calc(var(--vh,100dvh) - 12px)}#app.expanded{height:var(--vh,100dvh)}.mastery-note{font-size:7px;margin:5px 0}.title-open #panel .mastery-note{font-size:7px}}

#menu-scene{display:block;width:100%;height:110px;border:2px solid #41616a;background:#101a37;image-rendering:pixelated;margin:9px 0 12px;object-fit:cover}
@media(max-width:360px){body{padding:6px}#app{height:calc(var(--vh,100dvh) - 12px)}#app.expanded{height:var(--vh,100dvh)}#menu-scene{height:72px;margin:7px 0}.title-open #panel h1{font-size:27px}.title-open #panel .credits{font-size:8px}}
@media(orientation:landscape) and (max-height:420px){.title-open #panel{display:grid;grid-template-columns:43% minmax(0,1fr);gap:4px 12px}.title-open #panel>.eyebrow{grid-column:1/-1;margin:0}.title-open #panel h1{grid-column:1;grid-row:2;float:none;width:auto;font-size:27px;margin:0}.title-open #menu-scene{grid-column:1;grid-row:3;width:100%;height:60px;margin:0}.title-open #panel .menu-tagline{grid-column:2;grid-row:2;font-size:10px;align-self:center}.title-open #panel .buttons{grid-column:2;grid-row:3;align-self:center;margin:0;gap:6px}.title-open #panel .buttons button{flex:1;font-size:9px}.title-open #panel .mastery-note,.title-open #panel>.credits{grid-column:1/-1;font-size:7px;margin:3px 0;line-height:1.3}}
@media(orientation:portrait) and (max-width:420px){.title-open #panel .buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}.title-open #panel .buttons button{min-width:0;width:100%;padding:6px;font-size:9px}}