/* The native page shares the WebGL menu. Only its sunrise/sunset row is extra. */
#hud{max-height:calc(100dvh - 158px)}
.sun-events{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:#657b6b;font-size:10px;font-variant-numeric:tabular-nums}
.sun-events output{color:#536c5c}
#solar-day-label{text-align:center}
#resource-stats{position:absolute;right:16px;top:58px;width:196px;padding:10px 12px;background:#19362ded;color:#f7faf4;border-radius:8px;pointer-events:none;font-size:11px;font-variant-numeric:tabular-nums}
#resource-stats p{margin:0 0 7px;color:#bbd0c2;font-size:10px}
#resource-stats dl{margin:0;display:grid;gap:5px}
#resource-stats dl div{display:flex;justify-content:space-between;gap:8px}
#resource-stats dd{margin:0;font-weight:650}#resource-stats dt{color:#d7e3da}
.resource-breakdown{margin:12px 0}.resource-breakdown>summary{font-weight:600}
.memory-categories{margin:8px 0;font-size:11px;font-variant-numeric:tabular-nums}
.memory-categories>div{position:relative;display:flex;justify-content:space-between;gap:4px;padding:6px 0 8px}
.memory-categories dd{margin:0;font-weight:600}.memory-categories i{position:absolute;bottom:2px;left:0;height:3px;background:#679980;border-radius:2px}
#resource-top-textures{max-height:180px}#measure-ram:disabled{opacity:.55;cursor:default}
@media(max-width:620px){#resource-stats{right:10px;top:54px;width:104px;padding:8px;font-size:10px}#resource-stats dl div{display:block}#resource-stats dd{margin-top:1px}#resource-stats p{font-size:9px}}
@media(max-width:380px){.sun-heading{gap:5px}.sun-title{gap:4px;font-size:12px}.sun-heading input{max-width:116px;padding:3px 2px}.sun-heading output{min-width:60px;font-size:11px}}
@media(max-height:530px){#hud{max-height:calc(100dvh - 124px)}.sun-events{margin-top:2px}}

#seaplane-toggle{position:absolute;right:18px;bottom:45px;z-index:5;width:42px;height:42px;padding:10px;border:1px solid #b6c9bd;border-radius:50%;background:#f7faf4eb;color:#254d40;cursor:pointer;box-shadow:0 2px 12px #102c2920}
#seaplane-toggle svg{width:100%;height:100%;fill:currentColor}#seaplane-toggle:disabled{opacity:.45;cursor:wait}
#seaplane-toggle:hover{background:#fff}#seaplane-toggle:focus-visible{outline:3px solid #c7a35d;outline-offset:3px}
#seaplane-toggle[aria-pressed="true"]{color:#f7faf4;background:#254d40}
#seaplane-hud{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:5;max-width:calc(100vw - 150px);width:max-content;padding:12px 16px;border:1px solid #b6c9bd;border-radius:12px;background:#f7faf4ef;color:#254538;box-shadow:0 3px 20px #102c2920;font-size:12px}
.flight-heading{display:flex;align-items:center;gap:14px}.flight-heading strong{font-size:16px}.flight-heading output{font-variant-numeric:tabular-nums;flex:1}
.flight-heading button{padding:5px 9px;border:1px solid #b6c9bd;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}
#seaplane-hud p{margin:10px 0 0;color:#617465;font-size:11px}#seaplane-hud kbd{font:inherit;font-weight:650;color:#254538}
.seaplane-mode #hud,.seaplane-mode #sun-controls,.seaplane-mode #resource-stats{display:none}
@media(max-width:700px){#seaplane-hud{max-width:calc(100vw - 100px);padding:10px}.flight-heading{flex-wrap:wrap;gap:8px}.flight-heading output{min-width:130px}#seaplane-hud p{line-height:1.8}}