/* Submarine Explorer 3D : page-specific styles (shared: sim3d.css, car-kit.css, boat3d.css) */
.sim-result[hidden] { display: none; }
.sx-hud { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: flex-end; pointer-events: none; }
.sx-gauge { background: rgba(4, 18, 34, .8); border: 1px solid rgba(103, 232, 249, .35); border-radius: 14px; padding: 6px 12px; text-align: center; min-width: 96px; }
.sx-gauge b { display: block; font: 900 30px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #a5f3fc; }
.sx-gauge small { font: 800 9px system-ui, sans-serif; letter-spacing: .08em; opacity: .75; }
.sx-gauge i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; margin-top: 4px; }
.sx-gauge u { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #facc15 70%, #ef4444); }
.sx-gauge.is-over { border-color: #ef4444; animation: sx-blink .5s steps(2) infinite; }
@keyframes sx-blink { 50% { background: rgba(127, 29, 29, .85); } }
.sx-bars { background: rgba(4, 18, 34, .8); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 6px 9px; display: flex; flex-direction: column; gap: 5px; width: 130px; }
.sx-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sx-bar b { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; display: block; }
.sx-bar i { display: block; height: 100%; border-radius: 5px; transition: width .3s; }
.sx-air i { background: #38bdf8; } .sx-hull i { background: #22c55e; }
.sx-air.is-low b { animation: sx-blink .6s steps(2) infinite; }
.sx-obj { position: absolute; left: 12px; top: 10px; max-width: min(340px, 46%); background: rgba(4, 18, 34, .8); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 7px 11px; pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
.sx-obj b { font: 900 13.5px system-ui, sans-serif; color: #fde047; }
.sx-obj span { font: 600 12px/1.35 system-ui, sans-serif; color: #e2e8f0; }
.sx-zone { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(4, 18, 34, .75); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 12px; font: 800 12.5px system-ui, sans-serif; pointer-events: none; white-space: nowrap; }
.sim-overlay .sx-radar { position: absolute; inset: auto; left: auto; bottom: auto; right: 10px; top: 10px; width: 120px; height: 120px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px rgba(34, 211, 238, .35); }
.sx-cargo { position: absolute; right: 12px; bottom: 60px; background: rgba(4, 18, 34, .8); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 5px 10px; font: 800 12.5px system-ui, sans-serif; pointer-events: none; max-width: 46%; text-align: right; }
.sx-cargo small { opacity: .75; font-weight: 700; }
.sx-hint { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); max-width: min(560px, calc(100% - 24px)); background: rgba(4, 18, 34, .82); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 5px 12px; font: 800 13px system-ui, sans-serif; text-align: center; pointer-events: none; }
.sx-hint[hidden], .sx-warn[hidden] { display: none; }
.sx-warn { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); background: rgba(185, 28, 28, .88); border-radius: 12px; padding: 5px 12px; font: 900 13px system-ui, sans-serif; pointer-events: none; animation: sx-pulse .8s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes sx-pulse { to { transform: translateX(-50%) scale(1.05); } }
.sx-scan { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: 240px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.sx-scan.is-on { opacity: 1; }
.sx-scan b { display: block; font: 800 12.5px system-ui, sans-serif; text-shadow: 0 1px 3px #000; margin-bottom: 4px; }
.sx-scan i { display: block; height: 8px; border-radius: 4px; background: rgba(4, 18, 34, .7); border: 1px solid rgba(103, 232, 249, .6); overflow: hidden; }
.sx-scan u { display: block; height: 100%; background: #22d3ee; }
.sx-dock h3 { display: flex; justify-content: space-between; } .sx-dock h3 span { color: #86efac; }
.sx-dock .hb-job > span { font-size: 22px; display: inline; opacity: 1; } .sx-dock .hb-job div { display: flex; flex-direction: column; }
.sx-dock .btn { width: 100%; margin-top: 8px; }
.sx-sold { margin: 0 0 4px; font-weight: 900; color: #fde047; } .sx-note { margin: 0 0 6px; font-size: 12.5px; opacity: .8; }
/* sea log on the menu */
.sx-log { margin-top: 14px; } .sx-log h3 { margin: 0 0 8px; } .sx-log h3 small { font-size: .7em; opacity: .75; font-weight: 700; margin-left: 6px; }
.sx-log__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sx-log__it { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.sx-log__it span { font-size: 22px; } .sx-log__it b { font-size: 13px; } .sx-log__it small { font-size: 11px; opacity: .75; }
.sx-log__it.is-got { border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .07); }
/* touch: stick left, actions right */
.sx-touch .sim-tbtns { left: auto; right: 10px; bottom: 100px; width: 128px; flex-wrap: wrap; justify-content: flex-end; }
.sx-touch .sim-tbtn { width: 58px; height: 52px; border-radius: 14px; font-size: 20px; }
.sx-touch .sim-tbtn[data-id="grab"] { background: rgba(202, 138, 4, .8); } .sx-touch .sim-tbtn[data-id="scan"] { background: rgba(8, 145, 178, .8); }
.sim-has-touch .sx-hud { bottom: 128px; } .sim-has-touch .sx-cargo { bottom: 290px; } .sim-has-touch .sx-hint { bottom: 180px; }
@container (max-width: 560px) {
  .sx-obj { top: 92px; left: 8px; max-width: 62%; padding: 5px 8px; } .sx-obj b { font-size: 12px; } .sx-obj span { font-size: 10.5px; }
  .sim-overlay .sx-radar { width: 92px; height: 92px; top: 8px; right: 8px; }
  .sx-zone { top: 8px; font-size: 11px; }
  .sx-hud { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sx-gauge { min-width: 70px; padding: 4px 8px; } .sx-gauge b { font-size: 22px; } .sx-bars { width: 110px; padding: 4px 7px; }
  .sx-cargo { font-size: 11px; } .sx-hint { font-size: 11px; }
}