/* Warship Sea Battle 3D : page-specific styles (shared: sim3d.css, car-kit.css, boat3d.css) */
.sim-result[hidden] { display: none; }
.ws-perk { margin: 8px 0 0; font-size: 14px; opacity: .9; }
.ws-tl { position: absolute; left: 12px; top: 10px; max-width: min(360px, 46%); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.ws-obj { background: rgba(10, 18, 30, .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; }
.ws-obj b { font: 900 13.5px system-ui, sans-serif; color: #fde047; }
.ws-obj span { font: 600 12px/1.35 system-ui, sans-serif; color: #e2e8f0; }
.ws-obj .ws-o2 { font-weight: 800; color: #fca5a5; }
.ws-ship { position: absolute; left: 12px; bottom: 12px; width: 230px; background: rgba(10, 18, 30, .82); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 7px 10px; pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.ws-hp { position: relative; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ws-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ef4444, #f59e0b 40%, #22c55e); transition: width .25s; }
.ws-hp span { position: absolute; inset: 0; font: 800 10px/14px system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
.ws-hp.is-low { animation: ws-blink .6s steps(2) infinite; }
@keyframes ws-blink { 50% { opacity: .5; } }
.ws-tel { display: flex; gap: 3px; align-items: center; }
.ws-tel span { flex: 1; text-align: center; font: 800 8.5px system-ui, sans-serif; letter-spacing: .03em; padding: 3px 0; border-radius: 4px; background: rgba(255, 255, 255, .08); color: #94a3b8; }
.ws-tel span.is-on { background: #f59e0b; color: #111827; }
.ws-tel b { font: 900 14px system-ui, sans-serif; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.ws-weap { position: absolute; right: 12px; bottom: 60px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; }
.ws-w { display: flex; align-items: center; gap: 6px; background: rgba(10, 18, 30, .8); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 3px 10px; font: 800 11.5px system-ui, sans-serif; color: #94a3b8; }
.ws-w.is-ready { color: #fff; border-color: rgba(249, 115, 22, .8); }
.ws-w i { width: 60px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; } .ws-w u { display: block; height: 100%; background: #f97316; }
.ws-cross { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 30px; color: rgba(253, 224, 71, .85); text-shadow: 0 0 4px #000; pointer-events: none; }
.ws-hint { background: rgba(120, 53, 15, .88); border: 1px solid rgba(253, 224, 71, .45); border-radius: 12px; padding: 5px 11px; font: 800 12.5px/1.35 system-ui, sans-serif; color: #fff; }
.ws-hint[hidden] { display: none; }
.ws-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 90px 30px rgba(239, 68, 68, .7); }
.ws-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; color: #fecaca; }
.ws-tag i { width: 60px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; } .ws-tag b { display: block; height: 100%; background: #ef4444; }
.ws-tag.is-boss { font-size: 13px; color: #e9d5ff; } .ws-tag.is-boss i { width: 120px; height: 7px; } .ws-tag.is-boss b { background: #a855f7; }
.ws-tag.is-friend { color: #bbf7d0; } .ws-tag.is-friend b { background: #22c55e; }
/* menu: missions + shipyard */
.ws-missions, .ws-upg { margin-top: 14px; }
.ws-missions h3, .ws-upg h3 { margin: 0 0 8px; } .ws-upg h3 small { font-size: .7em; opacity: .8; font-weight: 700; margin-left: 6px; }
.ws-missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .ws-missions h3 { grid-column: 1 / -1; }
.ws-missions button, .ws-upg button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: inherit; cursor: pointer; font: inherit; }
.ws-missions button.is-on { border-color: #fde047; background: rgba(202, 138, 4, .18); }
.ws-missions button.is-locked { opacity: .45; cursor: not-allowed; }
.ws-missions small, .ws-upg small { font-size: 11.5px; opacity: .8; }
.ws-upg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .ws-upg h3 { grid-column: 1 / -1; }
.ws-upg button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; }
.ws-upg button span { font-size: 22px; grid-row: span 2; } .ws-upg button em { font-style: normal; font-weight: 900; color: #86efac; grid-row: span 2; }
.ws-upg button:disabled { opacity: .5; cursor: default; }
.ws-missions button:focus-visible, .ws-upg button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
/* touch: stick left (rudder; push up / down for the telegraph), weapons right */
.ws-touch .sim-tbtns { left: auto; right: 10px; bottom: 100px; width: 136px; flex-wrap: wrap; justify-content: flex-end; }
.ws-touch .sim-tbtn { width: 62px; height: 52px; border-radius: 14px; font-size: 20px; }
.ws-touch .sim-tbtn[data-id="fire"] { width: 128px; background: rgba(194, 65, 12, .85); }
.sim-has-touch .ws-ship { bottom: 128px; } .sim-has-touch .ws-weap { bottom: 300px; } 
@container (max-width: 560px) {
  .ws-tl { top: 92px; left: 8px; max-width: 64%; gap: 4px; } .ws-obj { padding: 5px 8px; } .ws-obj b { font-size: 12px; } .ws-obj span { font-size: 10.5px; }
  .ws-ship { width: 170px; padding: 5px 7px; } .ws-tel span { font-size: 7px; } .ws-tel b { font-size: 12px; min-width: 36px; }
  .ws-weap { display: none; }
  .ws-hint { font-size: 11px; padding: 4px 8px; }
  .ws-touch .sim-tbtns { bottom: 12px; }
  .ws-play .w3-pop { top: 57%; font-size: 17px; }
  .ws-tag { font-size: 9.5px; } .ws-tag i { width: 44px; }
}