/* Depths – världens egna stilar: skannerring, syremätare, djupstegen, "hold"-etiketten */
.w-depths .wh-prompt span::before { content: "[ hold ] "; }
.w-depths .wh-prompt.got span::before { content: ""; }

/* skannern: en ring som fylls medan man håller still */
.dp-scan { position: fixed; z-index: 5; left: -40px; top: -40px; width: 80px; height: 80px; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }
.dp-scan.show { opacity: 1; }
.dp-scan svg { display: block; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(255, 106, 19, .7)); }
.dp-scan circle { fill: none; stroke-width: 2; }
.dp-scan .bg { stroke: rgba(245, 242, 236, .18); stroke-dasharray: 2 4; }
.dp-scan .fg { stroke: var(--ember); stroke-dasharray: 188.5; stroke-dashoffset: 188.5; stroke-linecap: round; }
.dp-scan span { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); white-space: nowrap; font: 400 9px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ember); text-shadow: 0 0 6px #000; }

/* syremätaren i HUD-raden */
.dp-o2 { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 8px; }
.dp-o2 i { display: block; width: 5px; height: 6px; border-radius: 1px; background: rgba(245, 242, 236, .14); }
.dp-o2 i.on { background: #9fe3ff; box-shadow: 0 0 5px rgba(127, 216, 255, .8); }
.dp-o2.low i.on { background: var(--ember); box-shadow: 0 0 6px var(--ember); animation: dpBlink .8s steps(2) infinite; }
@keyframes dpBlink { 50% { opacity: .35; } }

/* djupstegen: logaritmisk skala 0–11 000 m, du (vit), dräktens gräns (orange), signalen (pulserar längst ner) */
.dp-ladder { position: fixed; z-index: 3; left: max(14px, env(safe-area-inset-left)); top: 22vh; height: 46vh; width: 34px; pointer-events: none; opacity: 0; transition: opacity 1.2s; font: 400 8px/1 var(--mono); letter-spacing: .08em; }
body.ready .dp-ladder.show { opacity: .9; } body.hud-off .dp-ladder { opacity: 0 !important; }
.dp-ladder .rail { position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: linear-gradient(#7fd8ff, rgba(var(--hud-rgb), .5) 30%, rgba(245, 242, 236, .15)); }
.dp-ladder b { position: absolute; left: 10px; transform: translateY(-50%); font-weight: 400; color: rgba(245, 242, 236, .38); }
.dp-ladder b::before { content: ""; position: absolute; left: -9px; top: 50%; width: 5px; height: 1px; background: rgba(245, 242, 236, .35); }
.dp-ladder .me { position: absolute; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 8px #fff; transition: top .3s linear; }
.dp-ladder .lim { position: absolute; left: -3px; width: 30px; height: 1px; background: var(--ember); box-shadow: 0 0 6px var(--ember); transition: top .8s ease; }
.dp-ladder .lim::after { content: "suit"; position: absolute; left: 34px; top: -4px; color: var(--ember); letter-spacing: .2em; text-transform: uppercase; }
.dp-ladder.crush .lim { animation: dpBlink .5s steps(2) infinite; }
.dp-ladder .sig { position: absolute; left: 1px; top: 100%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); opacity: 0; transition: opacity 2s; animation: dpSig 7s infinite; }
@keyframes dpSig { 0%, 12% { transform: scale(1.6); } 3%, 8% { transform: scale(.6); } 20%, 100% { transform: scale(1); } }
.wh-lh.dp-suit { flex-wrap: wrap; gap: 4px; } .wh-lh.dp-suit span { color: var(--ember); text-transform: none; letter-spacing: .06em; }
.wh-lh.dp-next { color: rgba(245, 242, 236, .4); }
@media (max-width: 640px) { .dp-ladder { top: 30vh; height: 34vh; } .dp-o2 i { width: 3px; } }
@media (prefers-reduced-motion: reduce) { .dp-ladder .sig, .dp-o2.low i { animation: none; } }

/* smal telefon: kompakt HUD – bara syre och tryck till höger, mindre text, djupstegen högre upp och kortare (håller sig borta från spakarna och knapparna) */
@media (pointer: coarse) and (max-width: 560px) {
  .w-depths .wh-row { gap: 4px; }
  .w-depths .wh-row > div:nth-child(n+3) { display: none; }
  .w-depths .wh-row .t { font-size: 8px; } .w-depths .wh-row b { font-size: 10.5px; }
  .w-depths .hd-mode { font-size: 8.5px; letter-spacing: .14em; }
  .w-depths .dp-ladder { top: 24vh; height: 24vh; }
  .w-depths .dp-ladder b { font-size: 7px; } .w-depths .dp-ladder .lim::after { display: none; }
}