/* M12 track V, "promises kept": the pearling dinghy's boat bar (rowing, the bellows, the shared
   air bar), the seam's dial in the Delve, and a pickpocket's button. On a phone the bar sits up
   under the party frames, clear of the stick, the spells and the ability arc. */
#pm-boat { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(166px + var(--safe-b)); width: min(400px, 92vw); padding: 6px 10px; border-radius: 12px; background: rgba(20, 40, 56, .86); border: 3px solid #8ac8e8; color: #eaf6ff; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 5px; align-items: center; }
#pm-boat .pm-where { font-weight: 600; font-size: 14px; }
#pm-boat .btns { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
#pm-boat .btn { touch-action: manipulation; padding: 5px 10px; }
#pm-boat .btn.big { font-size: 17px; padding: 8px 20px; }
#pm-boat .pm-hint { font-size: 12px; opacity: .85; text-align: center; }
#pm-boat .pm-hint:empty { display: none; }
.pm-air { position: relative; width: 100%; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 2px solid #bfe6f7; overflow: hidden; }
.pm-air span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4ac0e0, #bff0ff); transition: width .25s linear; }
.pm-air.low span { background: linear-gradient(90deg, #e05a3a, #ffb070); }
.pm-air b { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 12px; color: #0a2030; text-shadow: 0 0 3px rgba(255, 255, 255, .8); }
.dv-dial { display: block; margin: 8px auto; width: min(240px, 80vw); height: 34px; border-radius: 6px; border: 3px solid #c8962a; cursor: pointer; touch-action: manipulation; }
.pm-pocket { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
body.touch #pm-boat { left: calc(8px + var(--safe-l)); transform: none; top: calc(186px + var(--safe-t)); bottom: auto; width: calc(100vw - 76px - var(--safe-l) - var(--safe-r)); max-width: 400px; }
body.touch #pm-boat .pm-hint { display: none; }
body.touch #pm-boat { padding: 5px 8px; gap: 4px; }
body.touch #pm-boat .btns { flex-wrap: nowrap; }
body.touch #pm-boat .btn.big { font-size: 15px; padding: 6px 12px; }
body.touch #pm-boat .btn { font-size: 13px; padding: 5px 8px; }