/* ===================================================================================== AIDES MOBILES — chantiers B4 / B5 / B7 / B8 (js/mobile-aids.js) ------------------------------------------------------------------------------------- Feuille CHARGÉE APRÈS style.css (voir index.html) : elle peut donc surcharger sans éditer style.css (moins de conflit avec les autres chantiers en cours). Tout est scopé body.vtouch (mobile tactile) — aucun impact sur le rendu PC. Charte HUD : fonds ardoise translucides, bordures cyan, or pour l'état actif, rouge pour la menace/fuite. Aucune couleur thématique en dur hors de cette intention. ===================================================================================== */ /* ------------------------------------------------------------------------------------- B5 — Bouton « Améliorations » (↑) TOUJOURS accessible en mobile. style.css le masque (body.vtouch #btn-mob-stats{display:none}) car les améliorations n'apparaissaient qu'en barre piano quand un point tombait. On le RÉTABLIT : il ouvre l'overlay #stats-panel (règles mob-stats-open déjà présentes dans style.css) pour CONSULTER ses paliers à tout moment, même sans point à dépenser. Il se range en 6e position de la rangée système (Quitter·Y·Options·Idée·Flotte·↑). Quand un point est disponible (has-stat-pts), la barre piano prend le relais en haut : on masque alors le bouton pour éviter le doublon (et toute la reflow portrait piano). ------------------------------------------------------------------------------------- */ /* RETIRÉ (2026-07-13) : « Améliorations » est désormais une entrée du menu ☰ (#hud-menu) — le bouton ↑ autonome faisait DOUBLON à l'écran (au-dessus du classement). On le masque partout sur tactile ; la barre piano (has-stat-pts) reste l'accès rapide quand un point tombe. */ body.vtouch #btn-mob-stats { display: none; } /* ------------------------------------------------------------------------------------- B4 — ALERTE « joueur en approche » : bandes rouges aux BORDS de l'écran. 4 bandes (haut/bas/gauche/droite) en dégradé depuis le bord, purement visuelles (pointer-events:none) et SOUS les boutons du HUD (z-index 8) : elles ne masquent ni n'interceptent jamais une commande. L'intensité (--a : 0→1) est pilotée par le JS selon la proximité de la menace ; une pulsation attire l'œil vers le bon côté. ------------------------------------------------------------------------------------- */ #approach-alert { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; } body.vtouch #approach-alert { display: block; } .aa-band { position: absolute; opacity: 0; /* --a piloté en JS (0→1) ; la pulsation module encore l'opacité pour le clignotement */ opacity: var(--a, 0); transition: opacity 0.18s linear; background: linear-gradient(var(--dir, to left), rgba(230, 64, 64, 0) 0%, rgba(233, 74, 74, 0.55) 100%); } .aa-band.aa-live { animation: aa-pulse 1s ease-in-out infinite; } .aa-top { top: 0; left: 0; right: 0; height: 16%; --dir: to top; } .aa-bottom { bottom: 0; left: 0; right: 0; height: 16%; --dir: to bottom; } .aa-left { top: 0; bottom: 0; left: 0; width: 12%; --dir: to left; } .aa-right { top: 0; bottom: 0; right: 0; width: 12%; --dir: to right; } @keyframes aa-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } } @media (prefers-reduced-motion: reduce) { .aa-band.aa-live { animation: none; } } /* petit fanion « ! » posé sur la bande active, au milieu du bord concerné */ .aa-flag { position: absolute; display: none; z-index: 9; pointer-events: none; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; line-height: 1; background: rgba(214, 54, 54, 0.92); border: 2px solid rgba(255, 210, 200, 0.9); box-shadow: 0 0 12px rgba(233, 74, 74, 0.7); } body.vtouch #approach-alert.aa-on .aa-flag { display: flex; } /* ------------------------------------------------------------------------------------- B7 — AUTO-PILOTE (fuite) + AUTO-COMBAT : dock de 2 boutons sur le bord DROIT, centré verticalement. Zone libre de tout autre contrôle (rangée système en haut-gauche, armes à gauche, joysticks/action en bas). Chaque bouton : rond, icône monochrome, état ACTIF surligné (or). Sous les boutons, des pastilles de STATUT s'affichent quand une aide est active (« visuel à l'écran quand actif »). ------------------------------------------------------------------------------------- */ #mob-aids-dock { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: 12; display: none; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } body.vtouch #mob-aids-dock { display: flex; } .mob-aid-btn { pointer-events: auto; position: relative; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(20, 40, 55, 0.72); border: 1px solid rgba(180, 210, 230, 0.5); color: #eaf4fb; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: none; } .mob-aid-btn svg { width: 26px; height: 26px; display: block; } .mob-aid-btn.aid-on { border-color: #f0d97a; color: #10202c; background: linear-gradient(135deg, #f0d97a, #e0b84a); box-shadow: 0 0 12px rgba(240, 217, 122, 0.6); } /* AUTO-COMBAT actif : liséré rouge quand le navire est effectivement en fuite (PV bas) */ .mob-aid-btn.aid-fleeing { animation: aid-flee 0.7s ease-in-out infinite; border-color: #ff9e7a; } @keyframes aid-flee { 0%, 100% { box-shadow: 0 0 10px rgba(233, 110, 74, 0.6); } 50% { box-shadow: 0 0 20px 4px rgba(233, 110, 74, 0.95); } } @media (prefers-reduced-motion: reduce) { .mob-aid-btn.aid-fleeing { animation: none; } } /* pastilles de statut (sous les boutons, alignées à droite) */ .mob-aid-status { pointer-events: none; display: none; max-width: 148px; padding: 3px 9px; border-radius: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; text-align: right; color: #10202c; background: rgba(240, 217, 122, 0.92); border: 1px solid rgba(255, 240, 176, 0.9); } .mob-aid-status.status-flee { color: #fff; background: rgba(214, 54, 54, 0.92); border-color: rgba(255, 210, 200, 0.9); } .mob-aid-status.status-on { display: block; } /* ------------------------------------------------------------------------------------- B8 — DÉCOUVRABILITÉ DES RÉGLAGES MOBILE : coach-mark UNE FOIS, à la 1re partie mobile. Pointe l'engrenage Options (haut-gauche) où vivent gyroscope / sensibilité / vibrations / aides. Sobre, Ghibli, se ferme au tap (« J'ai compris ») ou après quelques secondes. ------------------------------------------------------------------------------------- */ #mob-settings-coach { position: fixed; z-index: 61; display: none; top: 58px; left: 8px; max-width: min(280px, 82vw); padding: 12px 14px 12px 14px; border-radius: 12px; background: rgba(18, 32, 44, 0.96); border: 1px solid rgba(240, 217, 122, 0.7); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5); color: #eaf4fb; } #mob-settings-coach.coach-show { display: block; animation: coach-in 0.28s ease-out; } @keyframes coach-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* petite flèche qui remonte vers l'engrenage Options de la rangée système */ #mob-settings-coach::before { content: ''; position: absolute; top: -9px; left: 104px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid rgba(240, 217, 122, 0.7); } .msc-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 5px; } .msc-title svg { width: 18px; height: 18px; flex: none; } .msc-text { font-size: 12.5px; line-height: 1.45; color: #cfe0ec; } .msc-ok { margin-top: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 800; cursor: pointer; color: #10202c; background: linear-gradient(135deg, #f0d97a, #e0b84a); border: 1px solid rgba(255, 240, 176, 0.9); } @media (prefers-reduced-motion: reduce) { #mob-settings-coach.coach-show { animation: none; } } /* ------------------------------------------------------------------------------------- PORTRAIT — REFONTE de la grappe de commandes (demande 2026-07-13, capture portrait). MÊME esprit que la refonte PAYSAGE ci-dessous, mais adapté à l'écran vertical et SANS toucher au paysage (l'utilisateur veut ce look UNIQUEMENT en portrait) : 1) Alerte « ! » joueur en approche RETIRÉE. 2) Bouton « Tirer » RETIRÉ (le tir se fait à la déflexion du stick droit). 3) COLONNE d'action DROITE unique, empilée de haut en bas : Auto-combat · Auto-fuite · Turbo · E (capacité spéciale), au-dessus du joystick de visée. Le « E » est redessiné pour matcher la colonne (même pastille, même taille). 4) MINI-CARTE remontée EN HAUT-GAUCHE, sous le menu ☰ ; masquée quand le menu est déployé. 5) Colonne gauche (kills/armes) redescendue SOUS la mini-carte. (Les joysticks « un peu plus bas » : PAD_DEFAULTS y 0.80→0.84 dans js/touch.js.) Tout est scopé body.vtouch.vportrait → aucun impact paysage ni PC. ------------------------------------------------------------------------------------- */ @media (orientation: portrait) { /* 1 — plus d'alerte de proximité « ! » en portrait */ body.vtouch.vportrait #approach-alert { display: none !important; } /* 2 — TAP-TAP en portrait : le bouton sort du flux de #tc-btns (qui reste ancré en bas-droite pour le seul Turbo) et se pose en pastille flottante. Sa GÉOMÉTRIE vit désormais dans style.css, avec le reste du mode attaque (`body.vtouch.vportrait.tc-turret #tc-fire`) : depuis le 2026-08-21 le bouton n'est affiché QUE dans ce mode, et il y est calé dans la colonne de droite, à hauteur de pouce. Il ne reste ici que ce qui ne dépend pas du mode : la sortie du flux. (Historique : de 2026-07-27 au 2026-08-21 il vivait au BAS-CENTRE, dans le couloir entre les deux socles — atteignable des deux pouces, mais étroit, et sans lien visible avec les aides auto dont il est le complément. C'est ce placement que la demande du 2026-08-21 a écarté.) */ body.vtouch.vportrait #tc-fire { position: fixed; left: auto; top: auto; right: 10px; bottom: 16vh; } body.vtouch.vportrait #tc-fire .tc-tap-lbl b { font-size: 17px; letter-spacing: 1px; } body.vtouch.vportrait #tc-fire .tc-tap-lbl i { display: none; } /* 3 — COLONNE DROITE unique (Auto-combat · Auto-fuite · Turbo · E), pastilles 58px, bord droit, empilée JUSTE AU-DESSUS du joystick de visée. Celui-ci est centré à 84% de la hauteur (rayon 66px) → son bord haut est à (16vh + 66px) du bas ; on cale la colonne au-dessus, pas de 70px (58 + 12 de gap), en ancrant chaque étage par le bas (suit toutes les tailles). */ body.vtouch.vportrait #mob-aids-dock { top: auto; right: 10px; bottom: calc(16vh + 230px); transform: none; flex-direction: column; align-items: flex-end; gap: 12px; } body.vtouch.vportrait #mob-aids-dock .mob-aid-btn { width: 58px; height: 58px; border-radius: 16px; } /* TROIS aides depuis le 2026-08-20 (attaque · barre · fuite) : la colonne monte de 128 à 198 px. Elle est ancrée par le BAS, donc elle pousse vers le haut — et sur un écran court (640) elle atteignait le classement (qui descend à y 140). On resserre les pastilles là, et seulement là : 3 × 50 + 2 × 8 = 166 px, ce qui laisse le filet nécessaire. */ @media (max-height: 700px) { body.vtouch.vportrait #mob-aids-dock { gap: 8px; } body.vtouch.vportrait #mob-aids-dock .mob-aid-btn { width: 50px; height: 50px; border-radius: 14px; } body.vtouch.vportrait #mob-aids-dock .mob-aid-btn svg { width: 26px; height: 26px; } } body.vtouch.vportrait #mob-aids-dock .mob-aid-btn svg { width: 30px; height: 30px; } /* pastilles de statut masquées : l'état ACTIF est déjà signalé par le bouton doré. */ body.vtouch.vportrait #mob-aids-dock .mob-aid-status { display: none; } /* Turbo : sorti de la rangée #tc-btns, posé dans la colonne SOUS le dock (même gabarit). */ body.vtouch.vportrait #tc-turbo { position: fixed; right: 10px; bottom: calc(16vh + 160px); width: 58px; height: 58px; border-radius: 16px; font-size: 13px; } /* MODE ATTAQUE (2026-08-23, demande Simon) : la colonne se RÉORGANISE pour que TAP vive JUSTE SOUS son interrupteur — de haut en bas : ATTAQUE (dock, 16vh+248) → TAP (16vh+154, 82px, cf. style.css) → Turbo (16vh+86) → ⚡ (16vh+16). La place vient du stick de visée retiré. */ body.vtouch.vportrait.tc-turret #mob-aids-dock { bottom: calc(16vh + 248px); } body.vtouch.vportrait.tc-turret #tc-turbo { bottom: calc(16vh + 86px); } body.vtouch.vportrait.tc-turret #tc-ability { bottom: calc(16vh + 16px); } /* ÉCRAN ÉTROIT (≤ 370 px) : les jauges CENTRÉES (cale, XP) frôlaient la colonne TAP — relevé 2026-08-23 à 360×640 : cargo↔TAP 13 px, xp↔Turbo 14 px. On borne leur largeur pour que leur bord droit s'arrête avant la colonne (centre 50 % ⇒ demi-largeur ≤ 105 px), uniquement en mode attaque portrait — ailleurs rien ne se touche. */ @media (max-width: 370px) { /* la cale partage sa RANGÉE avec TAP (82 px de large, bord gauche à 268 sur 360) : demi-largeur ≤ 84 px ⇒ 168. L'XP, elle, ne côtoie que le Turbo (58 px, bord à 292) : 208 suffit. */ body.vtouch.vportrait.tc-turret #cargo-wrap { width: 168px; max-width: 168px; } body.vtouch.vportrait.tc-turret #xpbar-wrap { width: 208px; max-width: 208px; } } /* E (capacité spéciale) REDESSINÉ : même pastille 58px, BAS de colonne, sous Turbo. Le fond conic (anneau de recharge) reste peint en JS ; liseré or quand paré (.tc-ready). */ body.vtouch.vportrait #tc-ability { position: fixed; right: 10px; bottom: calc(16vh + 90px); width: 58px; height: 58px; border-radius: 16px; font-size: 24px; } /* 4 — MINI-CARTE en HAUT-GAUCHE, sous le menu ☰ (#btn-hud-menu à top:6, ~44px de haut). */ body.vtouch.vportrait #minimap { top: 56px; left: 6px; right: auto; bottom: auto; width: 104px; height: 104px; } /* masquée tant que l'accordéon ☰ est déployé (le menu recouvre le coin haut-gauche). */ body.vtouch.vportrait.hud-menu-open #minimap { display: none; } /* 5 — colonne gauche (kills/armes) redescendue SOUS la mini-carte (le coffre suit via layoutChest). */ body.vtouch.vportrait #kills-hud { top: 168px; left: 8px; } body.vtouch.vportrait #arm-slots { top: 200px; } } /* ------------------------------------------------------------------------------------- HUD COMPACT — mobile PAYSAGE à FAIBLE HAUTEUR (téléphone tenu à l'horizontale : ~320–460 px de haut selon l'appareil). Le HUD par défaut (classement à l'échelle 0.84, mini-carte 112 px, compteurs très gras) mange trop de HAUTEUR sur un écran court → il « bouffe l'écran ». On réduit les infos SECONDAIRES pour rendre de la mer visible, sans toucher aux commandes ni au portrait. Seuil 460 px : capte les téléphones en paysage, épargne les tablettes (hauteur > 600). Chargé après style.css/glass-ui → gagne la cascade (même spécificité, source postérieure). ------------------------------------------------------------------------------------- */ @media (orientation: landscape) and (max-height: 460px) { /* CLASSEMENT : plus compact et BORNÉ en hauteur (les rangs du bas se replient) — il ne doit plus courir sur tout le flanc droit d'un écran court. transform-origin (top right) hérité de style.css. */ body.vtouch #leaderboard { transform: scale(0.72); } body.vtouch #leaderboard #lb-list { max-height: 38vh; overflow: hidden; } /* (la mini-carte n'est plus rétrécie ici — demande « la minimap semble petite » ; taille gérée dans la section paysage ci-dessous, plus grande.) */ /* COMPTEURS (XP / kills) : un cran plus discrets — restent lisibles, prennent moins de place haute. */ body.vtouch #coins { font-size: 17px; padding: 4px 11px; } body.vtouch #kills-hud { font-size: 14px !important; } /* Encart PROCHAIN COFFRE : compacté (rendu de la hauteur dans la colonne de gauche). */ body.vtouch #chest-next { width: 52px; height: 52px; } } /* ------------------------------------------------------------------------------------- PAYSAGE (toutes hauteurs) — REFONTE de la grappe de commandes (demande 2026-07-13) : 1) MINI-CARTE déplacée en HAUT À GAUCHE, sous le bouton accordéon ☰ (#btn-hud-menu occupe y6..50) → top:56 laisse un filet propre. Elle libère le coin bas-droit pour les commandes d'action. 116 px. L'ARMEMENT (#arm-slots) descend sous elle pour ne pas la chevaucher. 2) BOUTON « TIRER » RETIRÉ : le tir se fait à la déflexion du stick droit (cf. touch.js / main.js touchFire) → le bouton dédié est superflu et encombrait le pouce. 3) AUTO-COMBAT + AUTO-FUITE prennent la PLACE de Tirer/Turbo : dock en COLONNE au coin bas-droit (auto-combat en haut, auto-fuite en bas), boutons agrandis (pouce). Les pastilles de statut sont masquées ici — l'état ACTIF est déjà signalé par le bouton doré (redondance retirée au bord serré). 4) TURBO (+ emoji) : colonne JUSTE À GAUCHE du dock, collée à lui. La capacité ⚡ se pose encore à gauche de cette colonne. ------------------------------------------------------------------------------------- */ @media (orientation: landscape) { /* 1 — MINI-CARTE en haut-gauche, sous le ☰ (#btn-hud-menu occupe y6..50) → top:56 laisse un filet propre. Surcharge la règle body.vtouch bas-droite de style.css. */ body.vtouch #minimap { left: 6px; right: auto; top: 56px; bottom: auto; width: 116px; height: 116px; } /* l'ARMEMENT (colonne d'armes, left:10) glisse sous la mini-carte (56 + 116 + 8 ≈ 180 px) */ body.vtouch #arm-slots { top: 180px; } /* 2 — TAP-TAP (2026-07-27) : le bouton est de RETOUR en paysage. Même raison qu'en portrait — tenir le stick droit ne donne plus que la cadence de fond, il faut une cible à marteler. Il reprend sa place HISTORIQUE : haut de la colonne #tc-btns (column-reverse), juste au-dessus du Turbo, à gauche du dock auto-combat/auto-fuite. Aucune règle à ajouter — il suffit de ne plus le masquer. */ /* 3 — dock auto-combat / auto-fuite : colonne bas-droite, à la place de Tirer/Turbo, boutons au pouce */ body.vtouch #mob-aids-dock { top: auto; right: 14px; bottom: 14px; transform: none; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; } body.vtouch #mob-aids-dock .mob-aid-btn { width: 62px; height: 62px; border-radius: 16px; } body.vtouch #mob-aids-dock .mob-aid-btn svg { width: 32px; height: 32px; } body.vtouch #mob-aids-dock .mob-aid-status { display: none; } /* 4 — Turbo/emoji : colonne juste à gauche du dock (62 px de bouton + 14 marge + 10 gap ≈ 86 px) */ body.vtouch #tc-btns { right: 86px; } /* la capacité ⚡ se replace à gauche de la colonne Turbo (82 px) pour ne pas la chevaucher */ body.vtouch #tc-ability { right: calc(178px + env(safe-area-inset-right, 0px)); } /* 5 — JOYSTICKS un peu PLUS BAS (demande) : en paysage les sticks sont FLOTTANTS (ils se forment au doigt) ; le seul repère fixe est le cercle-guide de démarrage. On le descend (30% → 16% du bas) pour inviter à poser les pouces plus bas, plus près du bord naturel de préhension. */ body.vtouch .tc-guide { bottom: 16%; } }