/* ============================================================
   Cockpit du téléphone (écran d'accueil hors jeu) — voir play/cockpit.js
   La « boîte » a les proportions du dessin (1100 × 1972) et colle au bas de l'écran :
   tout ce qui est posé dessus l'est en % du dessin, donc reste à sa place sur tous les téléphones.
   ============================================================ */
#cockpit { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
#cockpit[hidden], #ckctl[hidden] { display: none !important; }
body.cockpit-on #app { position: relative; z-index: 1; }
body.cockpit-on .backdrop { display: none; }
#cockpit .ck-box, #ckctl .ck-box { position: absolute; left: 50%; bottom: 0; height: max(100%, calc(100vw * 1.7927)); aspect-ratio: 1100 / 1972; transform: translateX(-50%); }
#ckctl { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
#ckctl .ck-box > * { pointer-events: auto; }

/* ---- par la vitre ---- */
.ck-space { position: absolute; left: 0; right: 0; top: 0; height: 58%; overflow: hidden; z-index: 0; background: radial-gradient(ellipse at 70% 30%, #1b1640, #05060f 70%); }
.ck-stars { position: absolute; inset: -10%; opacity: 0.8; animation: ck-stars 30s linear infinite;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 120px, #cde 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 150px 60px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60px 170px, #ffd 50%, transparent 51%);
  background-size: 190px 190px; }
@keyframes ck-stars { to { transform: translate3d(-190px, 0, 0); } }
.ck-streaks { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, 0.55) 22px 24px, transparent 24px 61px);
  background-size: 100% 61px; }
.ck-saturn { position: absolute; left: -18%; top: 9%; width: 78%; z-index: 1; animation: ck-sat 14s ease-in-out infinite alternate; }
@keyframes ck-sat { to { transform: translate3d(8px, -10px, 0) rotate(-2deg); } }
/* astéroïdes : défilent de droite à gauche, comme sur la télé (les petits du fond plus lentement) */
.ck-rocks { position: absolute; inset: 0; z-index: 2; }
/* astéroïdes : positionnés par cockpit.js (perspective) */
.ck-rocks img { position: absolute; left: 0; top: 0; height: auto; opacity: 0; will-change: transform; transform-origin: 50% 50%; }
.ck-fly { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* reflets et rayures sur la vitre */
.ck-glass { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.06) 28%, transparent 34%, transparent 60%, rgba(255, 255, 255, 0.04) 66%, transparent 70%),
    linear-gradient(170deg, transparent 47%, rgba(255, 255, 255, 0.08) 47.3%, transparent 47.6%), linear-gradient(20deg, transparent 72%, rgba(255, 255, 255, 0.07) 72.2%, transparent 72.5%); }
.ck-frame { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* lumière intérieure à ma couleur qui pulse doucement */
.ck-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 6; pointer-events: none; mix-blend-mode: screen; opacity: 0.18;
  background: radial-gradient(ellipse at 50% 30%, var(--me), transparent 65%); animation: ck-glow 4s ease-in-out infinite alternate; }
@keyframes ck-glow { to { opacity: 0.32; } }
/* aiguilles des cadrans */
.ck-needle { position: absolute; z-index: 7; width: 0.5%; height: 2.4%; margin-left: -0.25%; background: #111; border-radius: 2px; transform-origin: 50% 100%; translate: 0 -100%;
  transform: rotate(var(--a)); animation: ck-needle var(--d) ease-in-out infinite alternate; }
@keyframes ck-needle { 30% { transform: rotate(calc(var(--a) + 25deg)); } 70% { transform: rotate(calc(var(--a) - 12deg)); } to { transform: rotate(calc(var(--a) + 40deg)); } }
/* écran central (moniteur vert) */
.ck-screen { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #7dff9a; text-shadow: 0 0 6px rgba(80, 255, 140, 0.8); overflow: hidden; border-radius: 4px; font-family: 'Orbitron', 'Inter', sans-serif;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px); }
.ck-screen::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(transparent, rgba(125, 255, 154, 0.12), transparent); animation: ck-scan 3.5s linear infinite; }
@keyframes ck-scan { to { top: 100%; } }
.cs-clock { position: absolute; top: 4%; right: 5%; font-size: clamp(7px, 2.2vw, 10px); opacity: 0.85; }
.cs-rank { font-size: clamp(22px, 9vw, 40px); font-weight: 900; line-height: 1; }
.cs-rank sup { font-size: 0.45em; } .cs-rank span { font-size: 0.4em; opacity: 0.7; margin-left: 2px; }
.cs-pts { font-size: clamp(9px, 3vw, 13px); font-weight: 700; margin-top: 3px; }
.cs-line { font: 600 clamp(8px, 2.6vw, 11px) 'Inter', sans-serif; margin-top: 2px; opacity: 0.85; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs-big { font-size: 26px; }
/* voyants (rouges tant que le boost recharge) */
.ck-led { position: absolute; z-index: 7; width: 1.4%; aspect-ratio: 1; border-radius: 50%; background: var(--me); box-shadow: 0 0 8px var(--me); animation: ck-led 1.6s steps(2) infinite; }
.ck-led.a { left: 23.6%; top: 57.6%; } .ck-led.b { left: 70.7%; top: 57.6%; animation-delay: -0.5s; } .ck-led.c { left: 76.4%; top: 57.6%; animation-delay: -1.1s; }
body.ck-reloading .ck-led { background: #ff3030; box-shadow: 0 0 8px #ff3030; animation-duration: 0.5s; }
@keyframes ck-led { 50% { opacity: 0.25; box-shadow: none; } }
/* radar et jauge de carburant (en bas) */
.ck-radar { position: absolute; z-index: 7; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #0b2a14 0 60%, #06180b 61%), repeating-radial-gradient(circle, transparent 0 18%, rgba(125, 255, 154, 0.25) 18% 19%);
  border: 3px solid #000; box-shadow: inset 0 0 0 2px #2e4a36, 4px 4px 0 #000; }
.ck-radar::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle, transparent 0 15px, rgba(125, 255, 154, 0.22) 15px 16px), linear-gradient(90deg, transparent 49.5%, rgba(125, 255, 154, 0.25) 49.5% 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(125, 255, 154, 0.25) 49.5% 50.5%, transparent 50.5%); }
.ck-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(125, 255, 154, 0.45), transparent 22%); animation: ck-sweep 3s linear infinite; border-radius: 50%; }
@keyframes ck-sweep { to { transform: rotate(360deg); } }
.ck-blips i { position: absolute; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: var(--c); border: 1.5px solid #000; box-shadow: 0 0 6px var(--c); animation: ck-blip 3s ease-in-out var(--d) infinite; }
@keyframes ck-blip { 50% { opacity: 0.4; } }
.ck-me { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -6% 0 0 -4%; border-left: 9px solid var(--c); border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 0 3px var(--c)); }
.ck-fuel { position: absolute; z-index: 7; left: 42%; top: 86.5%; width: 36%; height: 3.2%; border-radius: 6px; background: #0b0f18; border: 3px solid #000; box-shadow: inset 0 0 0 2px #2b3a5c, 4px 4px 0 #000; overflow: hidden; }
.ck-fuel i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f, 0.05) * 100%); background: repeating-linear-gradient(90deg, var(--me) 0 8px, rgba(0, 0, 0, 0.35) 8px 10px); transition: width 1.2s ease; }

/* ---- commandes ---- */
.ck-tap { position: absolute; left: 0; right: 0; top: 7%; height: 50%; }
#ckctl.nofly .ck-btn { display: none; }
.ck-btn { position: absolute; border: 4px solid #000; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 4px 4px 0 #000, inset 0 -6px 0 rgba(0, 0, 0, 0.3);
  background: var(--me); color: #fff; display: grid; place-items: center; transition: transform 0.06s, box-shadow 0.06s; }
.ck-btn:active:not(.cooling) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000, inset 0 -3px 0 rgba(0, 0, 0, 0.3); }
.ck-boostb { }
.ck-boostb span { position: relative; z-index: 1; font: 900 clamp(14px, 5vw, 22px) 'Orbitron', 'Inter', sans-serif; letter-spacing: 0.08em; text-shadow: 2px 2px 0 #000; }
.ck-fire { background: #d92b3a; border-radius: 50%; }
.ck-fire svg { position: relative; z-index: 1; width: auto; height: 62%; height: auto; fill: none; stroke: #fff; stroke-width: 3.2; filter: drop-shadow(2px 2px 0 #000); }
.ck-btn.cooling { background: #1b2235; filter: saturate(0.6); }
.ck-btn.cooling span, .ck-btn.cooling svg { opacity: 0.45; }
/* recharge : une barre qui se remplit, sans texte */
.ck-btn .cd { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: var(--me); opacity: 0.55; }
.ck-fire .cd { background: #d92b3a; }
.ck-btn:not(.cooling) .cd { display: none; }
@keyframes ck-cd { from { width: 0; } to { width: 100%; } }
.ck-beam { position: absolute; left: 49%; top: 71%; width: 2%; height: 1px; pointer-events: none !important; }
.ck-laser { position: fixed; z-index: 30; height: 5px; transform-origin: 0 50%; margin-top: -2.5px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--me, #ff2e3b), #fff); box-shadow: 0 0 10px var(--me, #ff2e3b), 0 0 0 1.5px #000; animation: ck-laser 0.26s ease-out forwards; }
@keyframes ck-laser { from { opacity: 1; } to { opacity: 0; } }
.ck-burst { position: fixed; z-index: 30; width: 0; height: 0; pointer-events: none; }
.ck-burst i { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: #ffb43a; border: 2px solid #000; animation: ck-part 0.8s ease-out forwards; }
.ck-burst i:nth-child(2n) { background: #8d8274; }
@keyframes ck-part { to { transform: rotate(var(--a)) translateX(var(--v)) scale(0.4); opacity: 0; } }
.ck-burst b { position: absolute; transform: translate(-50%, -50%) rotate(-8deg); font: 900 22px 'Orbitron', 'Inter', sans-serif; color: #ffd400; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; white-space: nowrap; animation: ck-word 0.9s ease-out forwards; }
.ck-burst.big b { font-size: 34px; }
.ck-burst.big i { width: 14px; height: 14px; }
@keyframes ck-word { 0% { scale: 0.3; } 20% { scale: 1.2; } 30%, 70% { scale: 1; opacity: 1; } to { scale: 1; opacity: 0; } }

/* ---- événements ---- */
/* boost : les étoiles s'étirent en traits, le cockpit tremble */

@keyframes ck-streak { from { background-position: 0 0; transform: scaleX(1.4); } to { background-position: 0 61px; transform: scaleX(1.4); } }
body.ck-shake #cockpit .ck-box, body.ck-shake #ckctl .ck-box { animation: ck-shake 0.07s linear 6; }
@keyframes ck-shake { 25% { transform: translate(calc(-50% + 2px), 1px); } 50% { transform: translate(calc(-50% - 2px), -1px); } 75% { transform: translate(calc(-50% + 1px), -2px); } }
/* astéroïde qui frôle la vitre */
.ck-graze { position: absolute; left: 60%; top: 30%; width: 30%; animation: ck-graze 1.2s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes ck-graze { from { transform: scale(0.1) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(-160%, 90%) scale(4) rotate(-120deg); opacity: 1; } }
/* un autre joueur passe devant ma vitre */
.ck-pass { position: absolute; left: 0; top: 55%; width: 70%; animation: ck-pass 2.1s cubic-bezier(.3, .6, .4, 1) forwards; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)); }
@keyframes ck-pass { from { transform: translate(-90%, 40%) scale(1.6); } to { transform: translate(120%, -120%) scale(0.12); } }
/* ma cible apparaît au loin, je la vise */
.ck-target { position: absolute; left: 40%; top: 32%; width: 30%; animation: ck-target 0.9s ease-out forwards; }
@keyframes ck-target { from { transform: translate(60%, 20%) scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
/* on m'a abattu : alarme rouge */
body.ck-hit #cockpit::after { content: ''; position: absolute; inset: 0; z-index: 9; background: rgba(255, 0, 0, 0.35); animation: ck-alarm 0.25s steps(2) infinite; }
body.ck-hit #cockpit .ck-box { animation: ck-shake 0.07s linear infinite; }
@keyframes ck-alarm { 50% { opacity: 0; } }
body.lite #cockpit * { animation: none !important; }
.ck-burst svg { position: absolute; width: 90px; height: 90px; margin: -45px; overflow: visible; animation: ck-boom 0.7s ease-out forwards; }
.ck-burst.big svg { width: 150px; height: 150px; margin: -75px; }
.ck-burst svg polygon { stroke: #000; stroke-width: 3; stroke-linejoin: round; }
@keyframes ck-boom { 0% { transform: scale(0.2) rotate(0); } 35% { transform: scale(1.1) rotate(10deg); opacity: 1; } to { transform: scale(1.2) rotate(18deg); opacity: 0; } }

/* les zones repérées sur le dessin sont recouvertes exactement */
.ck-screen, .ck-radar { border: 3px solid #000; box-sizing: border-box; }
.ck-boomcv { position: fixed; z-index: 30; pointer-events: none; }
/* un autre joueur me double : il arrive de derrière (gros, en bas) et file au loin */
.ck-pass { position: absolute; left: 30%; top: 40%; width: 46%; animation: ck-pass2 2.1s cubic-bezier(.25, .7, .4, 1) forwards !important; filter: none !important; }
@keyframes ck-pass2 { from { transform: translate(-30%, 90%) scale(2.2); opacity: 0.2; } 12% { opacity: 1; } to { transform: translate(10%, -60%) scale(0.12); } }
.ck-target { left: 38% !important; top: 30% !important; width: 24% !important; }

/* ma cible : on voit bien l'arrière de son vaisseau arriver devant moi */
.ck-target { animation: ck-target 1.4s ease-out forwards !important; }

/* écran du cockpit : « salle d'attente », ma place, et en alternance « en attente de l'admin » / mon écart */
.cs-head { position: absolute; top: 5%; left: 6%; display: flex; align-items: center; gap: 4px; font-size: clamp(6px, 2vw, 9px); font-weight: 700; letter-spacing: 0.08em; opacity: 0.9; }
.cs-head i { width: 6px; height: 6px; border-radius: 50%; background: #7dff9a; box-shadow: 0 0 6px #7dff9a; animation: ck-led 1.2s steps(2) infinite; }
.cs-rank span { font-size: 0.32em !important; margin-left: 4px !important; }
.cs-alt { position: relative; width: 100%; height: 1.4em; margin-top: 2px; font: 600 clamp(8px, 2.6vw, 11px) 'Inter', sans-serif; }
.cs-alt span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; animation: cs-alt 8s infinite; }
.cs-alt span + span { animation-delay: -4s; }
@keyframes cs-alt { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
.ck-target { left: 60% !important; top: 26% !important; width: 26% !important; }
.cs-head { left: 0 !important; right: 0; justify-content: center; }
/* boost et tir ne vont pas ensemble : pendant l'un, l'autre bouton est grisé */
#ckctl.busy .ck-btn:not(.cooling) { filter: grayscale(0.9) brightness(0.6); }
/* écran : « salle d'attente » en haut, ma place au milieu, l'heure en bas */
.cs-clock { position: absolute !important; top: auto !important; right: auto !important; bottom: 6%; left: 0; width: 100%; text-align: center; font-size: clamp(9px, 3vw, 13px) !important; letter-spacing: 0.1em; }
.cs-rank { margin-top: 4%; }
/* écran du cockpit : la place bien au milieu, entre « salle d'attente » et l'heure */
.ck-screen { justify-content: center !important; }
.cs-rank { margin: 0 !important; }
.cs-head { top: 7% !important; }
.cs-clock { bottom: 7% !important; }

.cs-team { font: 900 13px 'Orbitron', 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #000; background: var(--tc); padding: 2px 10px; border-radius: 6px; margin-top: 4px; }

/* abattu : en grand au milieu, mon vaisseau en flammes, puis l'écran s'éteint */
.ck-down { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255, 60, 20, 0.35), rgba(0, 0, 0, 0.85) 70%); animation: ckd-in 0.25s ease both; pointer-events: none; }
@keyframes ckd-in { from { opacity: 0; } }
.ckd-in { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: ckd-shake 0.08s linear 12; }
@keyframes ckd-shake { 25% { transform: translate(-6px, 3px); } 75% { transform: translate(5px, -4px); } }
.ckd-ship { position: relative; width: 78vw; max-width: 380px; aspect-ratio: 3 / 1.1; animation: ckd-fall 2.6s ease-in both; }
.ckd-ship svg, .ckd-ship img { width: 100%; height: 100%; filter: brightness(0.75) saturate(0.7); }
@keyframes ckd-fall { 0% { transform: rotate(0); } 100% { transform: translateY(40px) rotate(14deg); } }
.ckd-fire { position: absolute; left: var(--x); top: 20%; width: 15%; aspect-ratio: 1 / 1.6; border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 70%, #fff 0 10%, #ffd23a 25%, #ff6a1f 50%, rgba(255, 40, 0, 0) 72%); animation: ckd-flame 0.28s ease-in-out var(--d) infinite alternate; }
@keyframes ckd-flame { from { transform: translateY(0) scale(1, 1); opacity: 0.9; } to { transform: translateY(-30%) scale(0.8, 1.35); opacity: 1; } }
.ckd-smoke { position: absolute; left: 40%; top: -10%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(90, 90, 90, 0.8), rgba(40, 40, 40, 0)); animation: ckd-smoke 1.2s ease-out infinite; }
.ckd-smoke.b { left: 15%; animation-delay: 0.6s; }
@keyframes ckd-smoke { from { transform: translateY(0) scale(0.5); opacity: 1; } to { transform: translateY(-120%) scale(1.8); opacity: 0; } }
.ckd-t { font: 900 clamp(34px, 10.5vw, 70px) 'Orbitron', 'Inter', sans-serif; color: #ff2e3b; text-shadow: 4px 4px 0 #000, 0 0 30px #ff2e3b; -webkit-text-stroke: 2px #000; animation: ckd-pop 0.5s cubic-bezier(.2, 1.6, .4, 1) both; text-align: center; }
@keyframes ckd-pop { from { transform: scale(0.2); } }
.ckd-by { font: 900 clamp(30px, 11vw, 60px) 'Orbitron', 'Inter', sans-serif; color: var(--c, #fff); text-shadow: 3px 3px 0 #000; -webkit-text-stroke: 1.5px #000; max-width: 92vw; overflow-wrap: anywhere; text-align: center; animation: ckd-pop 0.5s 0.25s cubic-bezier(.2, 1.6, .4, 1) both; }
.ckd-by em { font-style: normal; color: var(--c); }
/* extinction façon vieil écran : l'image s'écrase en une ligne puis un point */
.ckd-off { position: absolute; inset: 0; background: #000; opacity: 0; }
.ck-down.off .ckd-in { animation: ckd-crt 0.45s ease-in forwards; }
.ck-down.off .ckd-off { animation: ckd-black 1.3s ease forwards; }
@keyframes ckd-crt { 60% { transform: scale(1, 0.02); filter: brightness(3); } 100% { transform: scale(0, 0.02); filter: brightness(5); } }
@keyframes ckd-black { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* mode équipes : l'équipe s'affiche en haut à gauche, pas sur le petit écran du cockpit */
.ck-teamtag { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; z-index: 60; font: 900 13px 'Orbitron', 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #000; background: var(--tc); padding: 5px 12px; border-radius: 8px; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
body:not(.cockpit-on) .ck-teamtag { display: none; }

/* abattu : flammes et fumée devant le vaisseau, sur la coque */
.ckd-ship > svg, .ckd-ship > img { position: relative; z-index: 1; }
.ckd-ship .ckd-fire { z-index: 2; top: 2%; width: 17%; mix-blend-mode: screen; filter: drop-shadow(0 0 8px #ff6a1f); }
.ckd-ship .ckd-smoke { z-index: 3; }