/* Every view is a single game screen. viewport.js fits the complete stage. */
html,body{width:100%;height:100%;height:100dvh;min-height:0!important;overflow:clip!important;overscroll-behavior:none}
body{display:flex;flex-direction:column}
header{flex:0 0 auto;padding-block:10px!important}
footer{flex:0 0 auto;padding-block:8px!important}
main#app-container{flex:1 1 0;min-height:0;max-width:1280px;padding:12px 4%!important;display:block;position:relative;overflow:clip!important}
.viewport-stage{display:flex;flex-direction:column;align-items:center;width:100%;transform-origin:top center;gap:0;animation:none!important}
#modal-overlay{overflow:clip!important;padding:12px!important}
#modal-content{max-height:none!important;overflow:visible!important;transform-origin:center;flex-shrink:0}
#puzzle-canvas{overflow:visible!important;min-height:150px!important}
#puzzle-canvas>div>div[style*="grid-template"]{min-width:0!important}
#puzzle-canvas [style*="grid-template"]{gap:3px!important;padding:5px!important}
#puzzle-canvas [style*="grid-template"]>div{font-size:clamp(7px,1.4vw,10px)!important;min-width:0}
.island-intro{gap:25px;padding:0 0 15px;grid-template-columns:1fr 1fr}
.island-intro h2{font-size:clamp(28px,3.2vw,43px);margin:8px 0 10px}
.island-intro p{font-size:12px;line-height:1.5}
.hero-actions{margin-top:12px}
.postcard{max-width:360px;width:100%;justify-self:end;border-width:5px;border-radius:65px 65px 20px 20px}
.postcard img{max-height:200px;object-fit:cover}
.postmark{display:none}.map-caption{padding:7px 10px}
.expedition{margin:6px 0 12px}.expedition h3{font-size:22px;margin-top:4px}
.island-grid{gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.mini-scene{height:65px;flex-shrink:0}.island-symbol{font-size:43px}.scene-wave{font-size:30px;bottom:-10px}
.island-copy{padding:12px}.island-copy h4{font-size:18px;margin:6px 0}
.island-copy p{font-size:10px;line-height:1.5}.island-status{margin-top:10px}.progress-track{margin-top:8px}
.beacon-banner{margin-top:12px;padding:12px 18px;gap:15px}.beacon-banner h3{font-size:20px;margin-top:4px}.beacon-banner p{margin-top:4px}.beacon-icon{font-size:35px}
.signal-controls{margin-bottom:12px;gap:10px}
#modal-content>div>div:first-child{width:40px;height:40px;margin-bottom:10px}
#modal-content h3{font-size:23px;margin-bottom:12px}
@media(max-width:600px){
 header{padding:7px 4%!important}footer{padding:7px 12px!important}footer>div{flex-direction:row!important;gap:8px!important}footer>div>div:first-child{min-width:0;gap:0!important}footer>div>div:first-child>div:first-child{display:none}footer h4{display:none}footer p{font-size:11px!important;line-height:1.35!important}footer>div>div:last-child{flex-shrink:0}footer button{font-size:10px!important;padding:7px!important}footer button i{display:none}
 .island-intro{grid-template-columns:1fr;padding-bottom:8px;gap:0}.island-intro h2{font-size:26px;line-height:1.05;margin:6px 0}.island-intro h2 br{display:none}.island-intro p{font-size:11px;line-height:1.4;max-width:none}.postcard{display:none}.eyebrow{font-size:8px;letter-spacing:1.2px}.hero-actions{margin-top:8px;gap:18px}.coral-btn{padding:10px 15px;font-size:12px}.plain-btn{font-size:11px;padding:8px 0}
 .expedition{flex-direction:row;align-items:center;gap:8px;margin:8px 0}.expedition>div>.eyebrow{display:none}.expedition h3{font-size:16px;margin:0}.expedition label{font-size:9px;flex-shrink:0}.expedition select{padding:5px;margin-left:3px}
 .island-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.island-card{border-radius:12px}.mini-scene{height:42px}.island-symbol{font-size:30px}.island-number{top:7px;left:10px;font-size:9px}.scene-wave{font-size:23px}.island-copy{padding:9px 10px}.island-copy .eyebrow{font-size:6px;letter-spacing:.6px}.island-copy h4{font-size:16px;margin:4px 0}.island-copy p{display:none}.island-status{margin-top:5px;flex-direction:row;font-size:8px;align-items:center}.island-status b{font-size:9px}.progress-track{margin-top:5px;height:3px}
 .beacon-banner{padding:9px 10px;gap:9px;flex-wrap:nowrap;margin-top:8px}.beacon-banner .eyebrow{display:none}.beacon-banner h3{font-size:15px;margin:0}.beacon-banner p{font-size:9px;line-height:1.3;margin-top:3px}.beacon-icon{font-size:26px}.beacon-banner>button{white-space:normal;font-size:10px;max-width:70px;flex-shrink:0;text-align:right}
 #modal-content{padding:18px!important}#modal-content p{font-size:12px;line-height:1.5;margin-bottom:9px}
 #puzzle-canvas{min-height:120px!important;padding:12px!important}.signal-controls{font-size:10px;gap:8px}.signal-controls label{gap:5px}.signal-controls input{max-width:110px}.signal-controls .coral-btn{padding:8px 10px}
}
@media(max-height:500px) and (min-width:601px){
 header{padding-block:5px!important}header p{display:none}header .w-10{height:30px;width:30px}.brand-name{font-size:23px}footer{padding-block:4px!important}footer h4{display:none}footer .w-12{width:30px;height:30px}footer p{font-size:11px!important}
 .island-intro{grid-template-columns:1fr;position:relative;padding-bottom:4px}.island-intro h2{font-size:24px;margin:3px 0}.island-intro h2 br{display:none}.island-intro p,.postcard{display:none}.island-intro .eyebrow{font-size:8px}.hero-actions{position:absolute;right:0;bottom:6px;margin:0}.coral-btn{padding:8px 12px;font-size:11px}.expedition{margin:3px 0 6px}.expedition h3{font-size:16px}.expedition .eyebrow{display:none}.expedition select{padding:4px}.mini-scene{height:32px}.island-symbol{font-size:27px}.island-copy{padding:7px 9px}.island-copy h4{font-size:15px}.island-copy p,.island-copy>.eyebrow{display:none}.island-status{margin-top:3px;font-size:8px}.beacon-banner{padding:7px 12px;margin-top:7px}.beacon-banner h3{font-size:15px}.beacon-banner .eyebrow{display:none}.beacon-banner p{font-size:9px}.beacon-icon{font-size:25px}
}