:root { --glass: rgba(8, 18, 30, .62); --line: rgba(255,255,255,.14); --accent: #5ee0ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07131f; color: #eef4f8; font-family: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#map { position: absolute; inset: 0; }
#minimap { position: absolute; right: 14px; bottom: 74px; width: 220px; height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.45); background: #0b1c2c; }
.maplibregl-ctrl-attrib { font-size: 10px; }
#minimap .maplibregl-ctrl-attrib { display: none; }

#hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; }
.hud-top { display: flex; gap: 10px; flex-wrap: wrap; }
.tile { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 120px; text-align: center; }
.tile.big { min-width: 150px; }
.lbl { font-size: 10px; letter-spacing: .18em; opacity: .65; }
.lbl.mini { margin-top: 4px; font-size: 11px; letter-spacing: .04em; opacity: .8; }
.val { font-size: 44px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.val.small { font-size: 26px; }
.unit { font-size: 14px; font-weight: 500; opacity: .6; margin-left: 4px; }
.bar { position: relative; height: 8px; margin-top: 6px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.bar .fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--accent); transition: width .1s, left .1s, background .2s; }
.bar .zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.5); }
#rudderNeedle { transition: transform .08s linear; transform-origin: 0 0; }

.hud-bottom { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.status, .keys { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 12px; }
.keys b { color: var(--accent); font-weight: 600; }
.keys .hint { opacity: .55; }
.sep { opacity: .35; margin: 0 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #f55; box-shadow: 0 0 8px #f55; }
.dot.on { background: #4f6; box-shadow: 0 0 8px #4f6; }

#touch { position: absolute; left: 14px; bottom: 110px; display: none; gap: 16px; pointer-events: auto; }
#touch .tcol { display: flex; flex-direction: column; gap: 8px; }
#touch .tcol:last-child { flex-direction: row; align-items: flex-end; }
#touch button { width: 58px; height: 58px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: #fff; font-size: 20px; backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#touch button small { font-size: 9px; opacity: .6; }
@media (pointer: coarse) { #touch { display: flex; } .keys { display: none; } .tile.big { min-width: 120px; } .val { font-size: 34px; } }
@media (max-width: 700px) { #minimap { width: 140px; height: 140px; bottom: 60px; } .tile { min-width: 90px; padding: 8px 10px; } }