#orientation-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#1c1c1c;color:#fff;z-index:9999;justify-content:center;align-items:center;text-align:center;font-family:sans-serif}.orientation-message p{font-size:1.2em;padding:20px}@media (orientation: portrait){body>*:not(#orientation-overlay){display:none!important}#orientation-overlay{display:flex}}.object-visualizer{position:absolute;background:#444;color:#fff;font-family:monospace;font-size:13px;overflow-y:auto;border-radius:6px;white-space:pre;z-index:1010;padding:10px}.object-visualizer-title{font-family:sans-serif;margin-top:0;margin-bottom:10px;color:#fff}.object-visualizer-root{padding:0}.object-visualizer-entry{padding:2px 0}.object-visualizer-children{margin-left:20px;padding-left:5px}.object-visualizer-key{color:#fff;font-weight:700}.object-visualizer-type{color:#999;margin-left:5px;font-style:italic}.object-visualizer-value{margin-left:5px}.object-visualizer-string,.object-visualizer-number{color:#fff}.object-visualizer-boolean{color:#0b7500}.object-visualizer-null,.object-visualizer-undefined{color:gray;font-style:italic}.object-visualizer::-webkit-scrollbar{width:12px;height:12px}.object-visualizer::-webkit-scrollbar-track{background:#f1f1f1;border-radius:6px}.object-visualizer::-webkit-scrollbar-thumb{background:#888;border-radius:6px}.object-visualizer::-webkit-scrollbar-thumb:hover{background:#555}#objectInfo{display:none;bottom:1vw;right:.5vw;width:20vw;height:8vw}#weatherInfo{display:none;bottom:1vw;right:22vw;width:13vw;height:8vw}#logos{position:absolute;z-index:1010;top:1vw;left:1vw;width:5vw;height:15vw;opacity:1;pointer-events:none;display:flex;flex-direction:column}#logo01_img{width:100%;align-self:center}#logo02_img{width:40%;padding-top:2vh;align-self:center}html,body{margin:0;padding:0;height:100%;overflow:hidden}#portCanvas{background-color:#aee;image-rendering:pixelated;top:0;left:0}#menuCanvas{position:absolute;image-rendering:pixelated;left:1rem;background-color:#333c;padding:10px 20px;border-radius:20px;bottom:20px}#logCanvas{position:absolute;image-rendering:pixelated;right:1rem;background-color:#2980b9;background-color:#333c;padding:10px 20px;border-radius:20px;bottom:20px}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;color:#fff;font-family:Arial,sans-serif;transition:opacity .5s ease}.loader-spinner{border:5px solid rgba(255,255,255,.2);border-top:5px solid #4285F4;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite;margin-bottom:20px}.progress-container{width:80%;max-width:400px;margin-top:15px;display:flex;align-items:center;gap:10px}#loader-progress{flex-grow:1;height:10px;border-radius:5px;background-color:#ffffff1a}#loader-progress::-webkit-progress-bar{background-color:#ffffff1a;border-radius:5px}#loader-progress::-webkit-progress-value{background-color:#4285f4;border-radius:5px;transition:width .3s ease}.percentage{font-size:14px;min-width:40px;text-align:right;color:#4285f4;font-weight:700}.loader-message{font-size:18px;margin-bottom:10px;text-align:center}.loader-details{margin-top:15px;font-size:14px;color:#aaa;max-width:80%;text-align:center;min-height:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.port-map-container{position:absolute;top:20px;right:20px;z-index:1001;width:22vw;max-width:400px;min-width:180px}.port-map-wrapper{aspect-ratio:1366 / 768;width:200px;max-width:100vw;position:relative;border:2px solid #334455;border-radius:6px;overflow:hidden;transition:width .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s;cursor:pointer;background:#fff;box-shadow:0 4px 8px #0000004d}.port-map-over{aspect-ratio:1366 / 768;width:200px;max-width:100vw;position:absolute;border:2px solid #334455;border-radius:6px;overflow:hidden;transition:width .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s;cursor:pointer;background:#0000;box-shadow:0 4px 8px #0000004d;z-index:1}.port-map-wrapper.expanded{width:80vw;max-width:1200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);z-index:1001;background-color:#fffffff2;box-shadow:0 10px 25px #00000080}.port-map-image,.port-map-svg{width:100%;height:100%;position:absolute;top:0;left:0;display:block;object-fit:cover;pointer-events:none}.port-map-wrapper.expanded .port-map-svg{pointer-events:auto}.port-map-svg polygon{pointer-events:auto;cursor:pointer;transition:fill .3s}.port-map-svg polygon:hover{fill:#ffa50080}.close-button{position:absolute;top:10px;right:10px;width:30px;height:30px;background:#ff0000b3;color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;font-weight:700;z-index:1003;text-align:center;line-height:30px;pointer-events:auto;opacity:0;transform:scale(.5);transition:transform .3s,opacity .3s}.port-map-wrapper.expanded .close-button{display:flex;opacity:1;transform:scale(1)}.map-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;z-index:1000;display:none;opacity:0;transition:opacity .4s}.map-overlay.active{display:block;opacity:1}#water-level-display{color:#fff;text-align:center;margin-top:5px;font-size:14px}.water-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px;background-color:#333c;padding:10px 20px;border-radius:20px;z-index:1000}.water-button{padding:8px 12px;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.water-button:hover{background-color:#2980b9}
