/* Jet Propulsion. All rules scoped under .jp-* */
.jp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jp-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }

/* open water */
.jp-seabox { width: 100%; }
.jp-sea { width: 100%; max-width: 380px; display: block; margin: 0 auto; border-radius: 16px; cursor: pointer; touch-action: manipulation; }
.jp-rays path { stroke: rgba(255,255,255,.05); stroke-width: 22; }
.jp-sb { fill: #E0674F; stroke: #F29A7E; stroke-width: 1; }
.jp-fin { fill: #C9503C; }
.jp-eye { fill: #F4E9D8; }
.jp-arm { fill: none; stroke: #E0674F; stroke-width: 3; stroke-linecap: round; }
.jp-fun { fill: #B8412F; }
.jp-mantle { transform-box: fill-box; transform-origin: 100% 50%; }
.jp-puff { fill: rgba(190,230,255,.55); }
.jp-fish path { fill: #5E7488; }
.jp-fish .jp-jaw { fill: none; stroke: #0A0E1A; stroke-width: 1.5; }

/* the map */
.jp-mapbox { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; }
.jp-map { width: 100%; display: block; touch-action: none; }
.jp-pad { fill: #0F1A2C; stroke: var(--line-strong); stroke-width: 1; }
.jp-map.live .jp-pad { cursor: pointer; }
.jp-esc { opacity: 0; transition: opacity .4s; }
.jp-map.esc .jp-esc { opacity: 1; }
.jp-line { fill: none; stroke: var(--mint); stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; opacity: .8; }
.jp-line.on { stroke-dasharray: none; opacity: 1; }
.jp-lt { fill: var(--mint); font: 700 12px var(--sans); text-anchor: middle; }
.jp-wall { opacity: 0; transition: opacity .5s; pointer-events: none; }
.jp-wall.on { opacity: 1; }
.jp-wall rect { fill: rgba(242,95,92,.16); }
.jp-wall path { stroke: var(--red); stroke-width: 2; }
.jp-wall text { fill: var(--dim); font: 700 12px var(--sans); }
.jp-hit { fill: transparent; }
.jp-drop { fill: #8FD8FF; stroke: #E6F7FF; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(120,210,255,.8)); }
.jp-ax { fill: var(--dim); font: 700 12px var(--sans); }
.jp-pin circle { fill: #E0674F; stroke: #0A0E1A; stroke-width: 2; }
.jp-pin.cheap circle { fill: var(--mint); }
.jp-pin text { fill: var(--text); font: 800 13px var(--sans); }
.jp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 4px; }
.jp-bars .gt { position: relative; overflow: visible; }
.jp-mark { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--mint); border-radius: 1px; }
.jp-en .gt i { background: var(--gold); }
.jp-en.bad .gt i { background: var(--red); }
.jp-corner { position: absolute; top: 12px; right: 10px; width: 64px; height: 64px; pointer-events: none; }
.jp-corner img { width: 100%; height: 100%; object-fit: contain; }

/* five jetters */
.jp-five { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; width: 100%; max-width: 380px; }
.jp-five figure { margin: 0; grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jp-five figure:nth-child(4) { grid-column: 2 / span 2; }
.jp-five img { width: 100%; max-width: 104px; aspect-ratio: 1; object-fit: contain; }
.jp-five figcaption { font-size: 13px; font-weight: 700; color: var(--text); text-align: center; }

@media (max-height: 700px) {
  .jp-five img { max-width: 80px; }
}