/* Pirate Ship Battles 3D : page-specific styles (shared: sim3d.css, car-kit.css, boat3d.css) */
.sim-result[hidden] { display: none; }
.ps-gold { font: 900 13px system-ui, sans-serif; color: #fde047; margin-top: 2px; }
/* ship card: hull HP, sails, speed, wind */
.ps-ship { position: absolute; left: 12px; bottom: 12px; width: 200px; background: rgba(8, 16, 28, .78); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 7px 10px; pointer-events: none; display: flex; flex-direction: column; gap: 5px; }
.ps-hp { position: relative; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ps-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ef4444, #f59e0b 40%, #22c55e); transition: width .25s; }
.ps-hp span { position: absolute; inset: 0; font: 800 10px/14px system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
.ps-hp.is-low { animation: ps-blink .6s steps(2) infinite; }
@keyframes ps-blink { 50% { opacity: .5; } }
.ps-row { display: flex; justify-content: space-between; align-items: baseline; font: 800 12px system-ui, sans-serif; }
.ps-spd { font: 900 18px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ps-wind { display: flex; align-items: center; gap: 7px; font: 800 10.5px system-ui, sans-serif; letter-spacing: .06em; color: #bae6fd; }
.ps-wind i { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; font-style: normal; font-size: 16px; border-radius: 50%; background: rgba(56, 189, 248, .25); color: #e0f2fe; transition: transform .3s; }
/* reload bars, left = port, right = starboard */
.ps-guns { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 14px; pointer-events: none; }
.ps-g { display: flex; align-items: center; gap: 6px; background: rgba(8, 16, 28, .74); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 10px; font: 900 12px system-ui, sans-serif; }
.ps-g i { width: 70px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ps-g u { display: block; height: 100%; background: #94a3b8; }
.ps-g.is-ready u { background: #f97316; } .ps-g.is-ready { border-color: rgba(249, 115, 22, .8); }
.ps-hint { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); max-width: min(560px, calc(100% - 24px)); background: rgba(8, 16, 28, .8); 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; }
.ps-hint[hidden] { display: none; }
.ps-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 90px 30px rgba(239, 68, 68, .7); }
/* enemy name + HP over each ship */
.ps-tag { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 11px system-ui, sans-serif; text-shadow: 0 1px 3px #000; white-space: nowrap; will-change: transform; }
.ps-tag i { width: 60px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.ps-tag b { display: block; height: 100%; background: #ef4444; }
.ps-tag.is-boss { font-size: 13px; color: #e9d5ff; } .ps-tag.is-boss i { width: 120px; height: 7px; } .ps-tag.is-boss b { background: #a855f7; }
/* shipwright */
.ps-port h3 { display: flex; justify-content: space-between; } .ps-port h3 span { color: #fde047; }
.ps-port .hb-job > span { font-size: 22px; display: inline; opacity: 1; }
.ps-port .hb-job div { display: flex; flex-direction: column; }
.ps-port .btn { width: 100%; margin-top: 8px; }
/* touch: steering buttons from the shared boat input + fire buttons */
.ps-touch .sim-tbtn[data-id="port"], .ps-touch .sim-tbtn[data-id="star"] { background: rgba(194, 65, 12, .8); }
.ps-touch .sim-tbtn[data-id="act"] { background: rgba(14, 116, 144, .8); }
/* two thumb clusters: steer + sails on the left, fire + dig on the right */
.ps-touch .sim-tbtns { left: 10px; right: 10px; bottom: 10px; height: 122px; display: block; }
.ps-touch .sim-tbtn { position: absolute; width: 56px; height: 56px; min-width: 0; padding: 0; border-radius: 16px; font-size: 20px; }
.ps-touch .sim-tbtn[data-id="left"] { left: 0; bottom: 0; } .ps-touch .sim-tbtn[data-id="right"] { left: 62px; bottom: 0; }
.ps-touch .sim-tbtn[data-id="gas"] { left: 0; bottom: 62px; } .ps-touch .sim-tbtn[data-id="brake"] { left: 62px; bottom: 62px; }
.ps-touch .sim-tbtn[data-id="port"] { right: 62px; bottom: 0; } .ps-touch .sim-tbtn[data-id="star"] { right: 0; bottom: 0; }
.ps-touch .sim-tbtn[data-id="act"] { right: 31px; bottom: 62px; }
.sim-has-touch .ps-ship { bottom: 140px; }
.sim-has-touch .ps-guns { bottom: 140px; left: auto; right: 12px; transform: none; flex-direction: column; gap: 4px; }
.sim-has-touch .ps-hint { bottom: 196px; }
@container (max-width: 560px) {
  .ps-ship { width: 150px; padding: 5px 7px; gap: 3px; } .ps-spd { font-size: 14px; } .ps-row { font-size: 10.5px; }
  .ps-g i { width: 44px; } .ps-g { padding: 3px 7px; font-size: 10.5px; }
  .ps-hint { font-size: 11px; }
  .ps-tag { font-size: 9.5px; } .ps-tag i { width: 44px; }
}