/* Third mobile variant, adapted from THE_DEEP_Cockpit_Mobile_v5.html. */
#scrTop,.hull3d,.pressure{display:none}
[data-mode=mob][data-cockpit=three] #scrTop,[data-mode=mob][data-cockpit=three] .hull3d,[data-mode=mob][data-cockpit=three] .pressure{display:block}
[data-mode=mob][data-cockpit=three] .topbar{display:none!important}
[data-mode=mob][data-cockpit=three] .expedition-robot{left:5cqw}
[data-mode=mob][data-cockpit=three] .expedition-robot-button{pointer-events:none}
[data-mode=mob][data-cockpit=three] .expedition-robot-button::after{content:"";position:absolute;inset:22%;pointer-events:auto}
[data-mode=mob][data-cockpit=three] #uiL{opacity:1!important}
[data-mode=mob][data-cockpit=three] #holo .bg,[data-mode=mob][data-cockpit=three] #holo .ui,[data-mode=mob][data-cockpit=three] #holo .scan{animation:k-holo-float 6.5s ease-in-out infinite}
[data-mode=mob][data-cockpit=three] .holo .bg{box-shadow:inset 0 0 0 1px #7fd3f380,inset 0 0 30px #3caae633,0 0 60px #3caae647}

/* ============================================================
   COCKPIT V5 — coque 3D « téléphone » : un écran HTML collé sur
   chaque écran peint du modèle (bandeau des commandes, écran
   gauche, plaque centrale, écran droit), aux mêmes formes.
   Chargé après cockpit-v2.css.
   ============================================================ */
[data-mode=mob][data-cockpit=three] .hull3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
[data-mode=mob][data-cockpit=three] .cp{transition:opacity 1.1s var(--e-out)}
[data-mode=mob][data-cockpit=three].hull-loading .cp{opacity:0;transition:none}
[data-mode=mob][data-cockpit=three] #shade,[data-mode=mob][data-cockpit=three] #lights,[data-mode=mob][data-cockpit=three] #movers,[data-mode=mob][data-cockpit=three] #hull{display:none}
[data-mode=mob][data-cockpit=three].hull-flat .cp{background:linear-gradient(180deg,transparent 44%,#06131fcc 50%,#030a12 100%)}

/* ---- chargement : discret, par-dessus l'océan */
[data-mode=mob][data-cockpit=three] .hull-loading-notice{background:transparent;justify-content:flex-end;padding-bottom:16cqh;gap:10px;pointer-events:none;transition:opacity .5s}
[data-mode=mob][data-cockpit=three] .hull-loading-notice>span{font-size:15px;letter-spacing:.32em;opacity:.9}
[data-mode=mob][data-cockpit=three] .hull-loading-notice>p{font-size:11px;color:#9dbfcf;letter-spacing:.12em;text-transform:uppercase}
[data-mode=mob][data-cockpit=three] .hull-loading-notice::before{content:"";width:26px;height:26px;border-radius:50%;border:2px solid #ffb34733;border-top-color:#ffd38a;animation:cp3-spin 1s linear infinite}
@keyframes cp3-spin{to{transform:rotate(360deg)}}
[data-mode=mob][data-cockpit=three] .hull-loading-notice .btn{pointer-events:auto}

/* ---- écrans : même fond vitré, découpés à la forme peinte (clip-path posé par cockpit3d) */
[data-mode=mob][data-cockpit=three] .scr{will-change:transform}
[data-mode=mob][data-cockpit=three] #scrMain,[data-mode=mob][data-cockpit=three] #scrL,[data-mode=mob][data-cockpit=three] #scrR{border-radius:0;overflow:hidden;box-shadow:none}
[data-mode=mob][data-cockpit=three] #scrMain .bg,[data-mode=mob][data-cockpit=three] #scrL .bg,[data-mode=mob][data-cockpit=three] #scrR .bg{display:block;background:
  radial-gradient(90% 60% at 50% 0%,rgba(70,165,215,.22),transparent 70%),
  linear-gradient(180deg,rgba(5,24,38,.86),rgba(3,16,26,.9) 60%,rgba(2,12,20,.94))!important}
[data-mode=mob][data-cockpit=three] #scrL .scan,[data-mode=mob][data-cockpit=three] #scrR .scan{display:block;opacity:.6}
[data-mode=mob][data-cockpit=three] #scrMain .scan{opacity:.6}
[data-mode=mob][data-cockpit=three] #scrMain .proj{display:none}
[data-mode=mob][data-cockpit=three] #scrL,[data-mode=mob][data-cockpit=three] #scrR{pointer-events:none}

/* ---- plaque centrale : les étapes, en colonne (la plaque est étroite et haute) */
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;gap:0;margin:9% 6% 5% 20%;--sd:25px;font-size:11px;flex:1;min-height:0}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route .trk{left:calc(var(--sd) / 2 - 1px);right:auto;top:calc(var(--sd) / 2 + 2%);bottom:calc(var(--sd) / 2 + 2%);width:2px;height:auto;margin:0}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route .trk i{transform-origin:50% 0;transform:scaleY(0);background:linear-gradient(180deg,var(--lamp),var(--lamp-hot))}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route .st{flex-direction:row;align-items:center;gap:7px;padding:0;min-width:0}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route .sd{width:var(--sd);height:var(--sd);font-size:11.5px;flex:none}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route .st svg{width:15px;height:15px}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.route .sl{font-size:7.5px;letter-spacing:.05em;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
[data-mode=mob][data-cockpit=three] .marine-route{grid-template-columns:1fr;gap:3px;padding:9% 8% 4% 20%;flex:1;align-content:space-evenly}
[data-mode=mob][data-cockpit=three] .marine-route button{min-height:24px;display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:6px}
[data-mode=mob][data-cockpit=three] .marine-route b{font-size:11px}
[data-mode=mob][data-cockpit=three] .marine-route span{font-size:7.5px;margin-top:0}
[data-mode=mob][data-cockpit=three].console-navigation #uiMain>.head{display:none}

/* ---- écran gauche : Deepi (avatar, nom, onde de la voix) */
[data-mode=mob][data-cockpit=three] #scrL .ui{padding:0;display:flex;align-items:center;justify-content:center}
[data-mode=mob][data-cockpit=three] #scrL .head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14% 16% 20% 6%;text-align:center;width:100%;height:100%;box-sizing:border-box}
[data-mode=mob][data-cockpit=three] #scrL .head .av{width:34px;height:34px;font-size:21px}
[data-mode=mob][data-cockpit=three] #scrL .head .av span{font-size:21px}
[data-mode=mob][data-cockpit=three] #scrL .head .av svg{inset:-4px;width:42px;height:42px}
[data-mode=mob][data-cockpit=three] #scrL .head .who{align-items:center;gap:2px;flex:none}
[data-mode=mob][data-cockpit=three] #scrL .head .who b{font-size:10px;letter-spacing:.16em}
[data-mode=mob][data-cockpit=three] #scrL .head .who small{font-size:8.5px;white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:110px;text-overflow:clip}
[data-mode=mob][data-cockpit=three] #scrL .head .micw{display:none}
[data-mode=mob][data-cockpit=three] #scrL .head .wave{position:relative;left:auto;bottom:auto;display:flex;gap:2px;align-items:flex-end;height:10px;opacity:0;transition:opacity .4s}
[data-mode=mob][data-cockpit=three] #scrMain.listen~#scrL .head .wave{opacity:1}
[data-mode=mob][data-cockpit=three] #scrMain.listen~#scrL .head .who small{opacity:0}
[data-mode=mob][data-cockpit=three] #scrL .head .wave i{width:2px;background:var(--lamp);transform-origin:50% 100%;border-radius:1px;height:100%}

/* ---- écran droit : profondeur */
[data-mode=mob][data-cockpit=three] #scrR .ui{padding:12% 6% 12% 24%!important;gap:5px!important;flex-direction:column!important;justify-content:center;background:none!important;box-shadow:none!important;border-radius:0!important}
[data-mode=mob][data-cockpit=three] #scrR .gauge{display:flex!important;flex-direction:column!important;gap:3px;flex:none;margin:0;padding:0}
[data-mode=mob][data-cockpit=three] #scrR .gauge .lab{font-size:8px!important;letter-spacing:.16em;color:#ffd38a;white-space:nowrap}
[data-mode=mob][data-cockpit=three] #scrR .gauge .val{font-size:22px!important;line-height:1!important;color:#fff3dc;white-space:nowrap;text-shadow:0 0 8px #ffb34788}
[data-mode=mob][data-cockpit=three] #scrR .gauge .val small{font-size:10px!important}
[data-mode=mob][data-cockpit=three] #scrR .gauge .bar{height:3px!important;margin:2px 0 0!important;min-width:0}
[data-mode=mob][data-cockpit=three] #scrR .eq{display:flex!important;height:12px;margin-top:2px;width:70%}

/* ---- bandeau du haut : les touches posées sur les boutons peints (positions mesurées) */
[data-mode=mob][data-cockpit=three] #scrTop{border-radius:999px;overflow:hidden}
[data-mode=mob][data-cockpit=three] #scrTop .bg{background:linear-gradient(180deg,rgba(6,24,38,.78),rgba(3,15,24,.86));box-shadow:inset 0 0 0 1px #7fd3f33a,inset 0 0 14px #0b2a4088;border-radius:999px}
[data-mode=mob][data-cockpit=three] #scrTop .scan{opacity:.45;border-radius:999px}
[data-mode=mob][data-cockpit=three] #scrTop .ui{display:block}
[data-mode=mob][data-cockpit=three] .console-bar{position:absolute;inset:0;display:block;padding:0;height:auto;pointer-events:auto;z-index:3;order:0}
[data-mode=mob][data-cockpit=three] #scrTop .cb,[data-mode=mob][data-cockpit=three] #scrTop .cb-mini{position:absolute;top:16%;height:68%;width:11.1%;left:calc((var(--cx) - 5.55) * 1%);margin:0;flex:none;font-size:9px;transform-origin:50% 50%;border-radius:50%}
[data-mode=mob][data-cockpit=three] #scrTop #homeMobile{--cx:7.9}
[data-mode=mob][data-cockpit=three] #scrTop #bDeepiMobile{--cx:56.8}
[data-mode=mob][data-cockpit=three] #scrTop #bMusicMobile{--cx:68.4}
[data-mode=mob][data-cockpit=three] #scrTop #bSfxMobile{--cx:81}
[data-mode=mob][data-cockpit=three] #scrTop #bPauseMobile{--cx:92.8;display:grid;place-items:center;align-self:auto;background:#061c30d9;box-shadow:inset 0 0 0 1px #4fc3e655}
[data-mode=mob][data-cockpit=three] #scrTop #bViewMobile{left:16.5%;width:25.2%;flex-direction:row;gap:5px;padding:0 7px;border-radius:999px}
[data-mode=mob][data-cockpit=three] #scrTop .cb{--cp:circle(50% at 50% 50%)}
[data-mode=mob][data-cockpit=three] #scrTop #bViewMobile{--cp:inset(0 round 999px)}
[data-mode=mob][data-cockpit=three] #scrTop .cb .cb-bg,[data-mode=mob][data-cockpit=three] #scrTop .cb::before,[data-mode=mob][data-cockpit=three] #scrTop .cb .cb-edge{inset:0}
[data-mode=mob][data-cockpit=three] #scrTop .cb .cb-l{display:none}
[data-mode=mob][data-cockpit=three] #scrTop #bViewMobile .cb-l{display:block;font-size:8.5px;letter-spacing:.02em}
[data-mode=mob][data-cockpit=three] #scrTop .cb .cb-ic{width:44%}
[data-mode=mob][data-cockpit=three] #scrTop #bViewMobile .cb-ic{width:15px;height:15px;flex:none}
[data-mode=mob][data-cockpit=three] #scrTop .cb .cb-led{right:16%;top:12%;width:3px;height:3px}
[data-mode=mob][data-cockpit=three] #scrTop .cb-deepi .cb-ring{width:88%;top:50%}
[data-mode=mob][data-cockpit=three] #scrTop .cb-mini svg{width:40%;height:40%}
[data-mode=mob][data-cockpit=three] #scrTop .cb-home .cb-ic{width:48%}
@media(max-width:360px){[data-mode=mob][data-cockpit=three] #scrTop #bViewMobile .cb-l{font-size:7.5px}}

/* ---- vitre et robot : dans la fenêtre, entre le bandeau et la console */
[data-mode=mob][data-cockpit=three] .title{top:18cqh}
[data-mode=mob][data-cockpit=three] .ruler{top:18cqh;height:14cqh}
[data-mode=mob][data-cockpit=three] .expedition-robot{--robot-mobile-size:min(54cqw,24cqh,260px);top:16cqh}
[data-mode=mob][data-cockpit=three] .exploration-hud{top:19cqh}
[data-mode=mob][data-cockpit=three] .journey-prompt:not(.is-exploring){top:19cqh}

/* ---- descente : halo de pression sur la vitre */
[data-mode=mob][data-cockpit=three] .pressure{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background:radial-gradient(120% 90% at 50% 60%,transparent 55%,rgba(255,179,71,.14) 80%,rgba(0,0,0,.55) 100%)}

/* The comparison control stays reachable even when WebGL is unavailable. */
[data-mode=mob][data-cockpit=three] .cockpit-version{z-index:110}
[data-mode=mob][data-cockpit=three] #scrTop .cb:focus-visible,[data-mode=mob][data-cockpit=three] #scrTop .cb-mini:focus-visible{outline:2px solid var(--lamp);outline-offset:-2px}
[data-mode=mob][data-cockpit=three] #scrTop .cb,[data-mode=mob][data-cockpit=three] #scrTop .cb-mini{bottom:auto;right:auto}
[data-mode=mob][data-cockpit=three].paused #holo *,[data-mode=mob][data-cockpit=three].paused .pressure{animation-play-state:paused}
[data-mode=mob][data-cockpit=three].hull-loading #scrTop{visibility:hidden}
[data-mode=mob][data-cockpit=three] .hull-loading-notice{pointer-events:none}
[data-mode=mob][data-cockpit=three] .hull-loading-notice button{pointer-events:auto}
[data-mode=mob][data-cockpit=three].registration-open .cockpit-enrollment-panel{top:17%;height:50%;max-height:none}
[data-mode=mob][data-cockpit=three].registration-open.exploring .cockpit-enrollment-panel{display:none}
@media(prefers-reduced-motion:reduce){[data-mode=mob][data-cockpit=three] #holo *,[data-mode=mob][data-cockpit=three] .cp,[data-mode=mob][data-cockpit=three] .pressure{animation:none!important;transition:none!important}}