/* The yacht's HUD (js/yacht/hud.js) and what the game hangs inside it (the systems page, the radio, the mode picker).
   Same glass look as the panel. (From sail.css, 2026-10-29, when the sailing game went.) */
body.aboard .toast { top: 84px; }
#hud.hidden-ui .yhud > * { opacity: 0; pointer-events: none; }

.yhud { --good: #8fdcae; --warn: #f3a54f; --bad: #ff7a68; font-variant-numeric: tabular-nums; }
.yhud > * { position: fixed; pointer-events: auto; transition: opacity 0.4s; }
.yhud .glass, .yhud-card, .yhud-right, .yhud-help, .yhud-warn {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.yhud-top { left: 50%; top: 12px; transform: translateX(-50%); text-align: center; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
.yhud-hdg { font-size: 30px; font-weight: 200; letter-spacing: 0.04em; }
.yhud-hdg small { font-size: 13px; letter-spacing: 0.2em; margin-left: 8px; color: var(--muted); }
.yhud-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.yhud-left { left: 16px; top: 16px; display: flex; gap: 6px; }

.yhud-card { left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 16px; }

.yhud-read { display: grid; grid-template-columns: repeat(2, 86px); gap: 6px 10px; }
.yhud-read > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; }
.yhud-read b { font-size: 24px; font-weight: 300; }
.yhud-read small { font-size: 11px; color: var(--muted); }
.yhud-read i { grid-column: 1 / -1; font-style: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.yhud-lever { width: 210px; }
.yhud-scale { position: relative; height: 18px; border-radius: 9px; background: var(--track); margin: 4px 0 14px; }
.yhud-scale .best { position: absolute; top: 0; bottom: 0; width: 26px; margin-left: -13px; border-radius: 9px; background: rgba(143, 220, 174, 0.32); }
.yhud-scale .cur { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--brass-hi); box-shadow: 0 0 6px rgba(240, 215, 156, 0.65); }
.yhud-scale span { position: absolute; top: 20px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.yhud-scale span:first-of-type { left: 0; }
.yhud-scale span:last-of-type { right: 0; }
.yhud-levertext { font-size: 12.5px; min-height: 17px; }
.yhud-levertext.good { color: var(--good); }
.yhud-levertext.warn { color: var(--warn); }
.yhud-levertext.bad { color: var(--bad); }
.yhud-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.yhud-chips .chip { font-size: 10.5px; padding: 2px 7px; border-radius: 8px; border: 1px solid var(--panel-border); color: var(--muted); }
.yhud-chips .chip.is-on { color: var(--text); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.12); }

.yhud-right { right: 16px; bottom: 14px; padding: 10px 14px; font-size: 12px; min-width: 190px; }
.yhud-log { margin-top: 6px; color: var(--muted); }
.yhud-name { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 14px; margin-bottom: 6px; }
.yhud-temp { margin-top: 2px; cursor: pointer; }
.yhud-money { margin-top: 2px; cursor: pointer; } .yhud-money.warn { color: var(--warn); } .yhud-money.bad { color: var(--bad); }

.yacht-prompt { left: 50%; bottom: 150px; transform: translateX(-50%); padding: 7px 16px; border-radius: 10px; font-size: 14px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--panel-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.yacht-dot { left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); pointer-events: none; }
.yhud-warn { left: 50%; top: 116px; transform: translateX(-50%); padding: 8px 16px; color: var(--warn); font-size: 14px; pointer-events: none; white-space: nowrap; }

.yhud-help { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow-y: auto; padding: 18px 22px; font-size: 13px; line-height: 1.5; z-index: 4; }
.yhud-help h3 { margin: 0 0 8px; font-weight: 400; font-size: 18px; letter-spacing: 0.06em; }
.yhud-help table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.yhud-help td { padding: 3px 8px 3px 0; vertical-align: top; }
.yhud-help td:first-child { white-space: nowrap; color: var(--accent); }
.yhud-tip { color: var(--muted); }

@media (max-width: 900px) {
  body.aboard .clock { display: none; }
  .yhud-card { gap: 10px; padding: 8px 10px; bottom: 8px; }
  .yhud-read { grid-template-columns: repeat(2, 70px); }
  .yhud-read b { font-size: 19px; }
  .yhud-lever { width: 150px; }
  .yhud-right { top: 64px; bottom: auto; right: 12px; min-width: 0; }
}
@media (max-width: 620px) {
  .yhud-lever { display: none; }
  .yhud-left .btn { padding: 5px 8px; }
}