:root{color-scheme:dark;font-family:monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#05101f;color:#cfe6f2;font-family:monospace}
body{padding:10px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#um{width:min(100%,960px);margin:0 auto}
.um-title{margin:0 0 8px;font-size:16px;color:#7fd9e8;letter-spacing:.08em;text-align:center}
#sea{width:100%;max-width:960px;height:auto;max-height:calc(100vh - 190px);object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto;touch-action:none}
.um-depth{min-height:15px;margin:5px 0 0;color:#7fd9e8;font-size:12px;text-align:right}
.um-hud{width:min(100%,960px);margin:8px auto;display:flex;justify-content:space-between;gap:8px}
.um-btn{border:2px solid #1e5f86;background:#0d3355;color:#cfe6f2;padding:8px 12px;font-size:12px;font-weight:bold;letter-spacing:.04em;text-decoration:none}
.um-btn-go{border-color:#ffd166;color:#ffd166}.um-btn:hover,.um-btn:focus-visible{background:#16466d;color:#fff5d1}
.um-panel{width:min(100%,960px);min-height:64px;margin:0 auto;padding:9px 11px;background:rgba(13,51,83,.72);border:2px solid #1e5f86}
.um-panel-head{margin:0 0 5px;color:#7fd9e8;font-size:12px;font-weight:bold;letter-spacing:.06em}.um-panel-body{margin:0;color:#cfe6f2;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
@media (max-width:520px){body{padding-top:6px}.um-title{font-size:14px;margin-bottom:5px}.um-btn{font-size:10px;padding:7px 8px}.um-panel-body{font-size:12px}}