/* zone.css — v0.45 : styles du monde (HUD de zone, aide clavier, étiquettes de sortie). Chargée après style.css : ses règles gagnent à spécificité égale. */ /* --- 1. L'AIDE CLAVIER ---------------------------------------------------- Sur itch, le public est d'abord sur ordinateur, et RIEN ne disait quelle touche frappe. Les pastilles de touches ne s'affichent que là où il y a un clavier et une souris : (hover:hover) and (pointer:fine). Au téléphone, elles seraient du bruit sur des boutons qu'on vise au pouce. ⚠ Pseudo-éléments, pas des enfants : updateHud réécrit le textContent de ces boutons (recharge, compteur de potions) et effacerait un glissé dedans. ⚠ ::after sur les boutons ronds (leur ::before dessine l'anneau de recharge), ::before sur les pastilles .zduel (leur ::after agrandit la cible tactile). */ .zhelp{display:none;font-size:17px;font-weight:900;color:#ffd24a} @media (hover: hover) and (pointer: fine){ .zhelp{display:flex} .zactions [data-key]{position:relative} .zactions [data-key]::after, .zduel[data-key]::before, .zmini-hint[data-key]::after{ content:attr(data-key); font:800 9px/1 system-ui,-apple-system,sans-serif;letter-spacing:0; color:#1a1208;background:#e8d9b0;border-radius:4px; padding:2px 4px 1px;border-bottom:2px solid #8a7550; box-shadow:0 1px 3px #000a;pointer-events:none;white-space:nowrap; } .zactions [data-key]::after{ position:absolute;left:50%;bottom:-7px;transform:translateX(-50%); } .zduel[data-key]::before{ position:absolute;right:-6px;top:-9px; } .zmini-hint[data-key]::after{margin-left:4px;vertical-align:1px} } /* v0.45 (vague 2) : …et jamais sous un DOIGT, même quand l'appareil se déclare « souris » (PC portable tactile, tablette avec clavier, certains Android qui annoncent hover:hover). zoneui pose .ztouch sur #overlay-zone dès qu'un pointeur de type « touch » touche la zone, et la retire à la première touche du clavier ou au premier clic de souris : les pastilles suivent la main. */ #overlay-zone.ztouch .zhelp{display:none} #overlay-zone.ztouch .zactions [data-key]::after, #overlay-zone.ztouch .zduel[data-key]::before, #overlay-zone.ztouch .zmini-hint[data-key]::after{content:none;display:none} /* la liste des touches (tutoriel sur ordinateur + carte « Commandes ») : des pastilles qui se rangent seules sur 340 px, au lieu de dix lignes */ .zkeys{ display:flex;flex-wrap:wrap;justify-content:center;gap:5px; margin:8px 0 10px; } .zk{ font-size:11px;font-weight:700;color:#d8cba5;white-space:nowrap; background:#00000045;border:1px solid #ffffff14;border-radius:8px;padding:3px 7px; } .zk kbd{ font:800 10px/1.3 system-ui,-apple-system,sans-serif;color:#1a1208; background:#e8d9b0;border-radius:4px;padding:1px 5px;border-bottom:2px solid #8a7550; } /* --- 2. LES CARTES DE ZONE (tutoriel, Pause, aide) sur les écrans bas ------ Le tutoriel a gagné les touches et une ligne sur les sorties : à 600 px de haut (iframe d'itch typique), sa carte ne doit jamais sortir de l'écran. */ #z-tut .zdeath-card, #z-pause .zover-card{max-height:calc(100% - 12px);overflow-y:auto} #z-pause .zover-sub{margin-top:2px} /* mesuré à 960×600 : la carte du tutoriel (touches comprises) faisait 620 px, son bouton sortait de l'écran. Sous 760 px de haut on la resserre — titre sur une ligne, lignes plus serrées — plutôt que de faire défiler un bouton. */ @media (max-height: 760px){ #z-tut{padding:8px} #z-tut .zdeath-card{padding:12px 14px 12px} #z-tut .zdeath-title{font-size:18px;margin-bottom:2px} #z-tut .ztut-line{font-size:11.5px;line-height:1.35;padding:3px 0} #z-tut .zkeys{margin:4px 0 6px;gap:4px} #z-tut .zk{padding:2px 6px;font-size:10.5px} #z-tut .mt12{margin-top:8px} } /* --- 3. LE JOURNAL NE COUVRE PLUS LE HÉROS --------------------------------- Le journal vit à 226-304 px du haut ; la caméra centre le héros à mi-hauteur. Sous ~760 px de haut (itch sur ordinateur : 600 à 720 ; iPhone SE : 667) le nom et la tête du héros passaient SOUS les lignes du journal — mesuré à 960×600 : « ⚔️ Grosbill a abattu un rat » en travers du corps. Sur ces écrans, le journal descend en bas à gauche, au-dessus de la barre d'XP ET de son étiquette « Nv n — x / y XP » (10 + 12 px : d'où les 30), à gauche du piège 💩 (right 88 + 44) et de la colonne d'actions ; les pastilles contextuelles (Duel, Récolter…) commencent à 120 px du bas, il se glisse dessous (30 + 78 = 108). Le cadre du groupe reprend la place laissée en haut. */ @media (max-height: 760px){ .zfeed{top:auto;bottom:calc(30px + var(--sab));right:140px} .zparty{top:calc(226px + var(--sat))} } /* v0.45 (vague 2) : près du bord nord d'une carte, la caméra bornée fait monter le héros à l'écran ; quand il passe SOUS le journal, zoneui pose .zfeed-pale (majFeedVoile) : le journal s'efface le temps du passage. */ .zfeed{transition:opacity .25s} .zfeed.zfeed-pale{opacity:.22} /* --- 4. LE CONTRAT DE LA ZONE (ONB-05) -------------------------------------- « 📜 🐀 Rats charognards 3/8 · 🧺 Mimi », puis « ✅ Contrat rempli — … ». Sous le bandeau de zone (qui finit vers 74 px), dans la colonne de gauche, à gauche de la minicarte (--minimap-res) et au-dessus des cartes de butin (126 px). La barre de boss (88 px) prend la même place : zoneui cache alors cette ligne le temps du combat. Largeur au contenu, ellipse si le nom du PNJ est long ; aucun clic (le joystick démarre partout où il n'y a pas de bouton). */ .zquest{ position:absolute;top:calc(78px + var(--sat));left:10px;z-index:13; max-width:calc(100% - 10px - var(--minimap-res)); font:800 10.5px/1.35 system-ui,-apple-system,sans-serif;color:#e8d9b0; background:#0c0a06c4;border:1px solid #a4883c66;border-radius:9px;padding:2px 8px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-shadow:0 1px 2px #000;pointer-events:none; } .zquest.pret{color:#b8f5c0;border-color:#8fe89a99;box-shadow:0 0 10px #8fe89a44} /* --- 5. LA SOURDINE DE ZONE (AUD-11) ---------------------------------------- Le bouton 🔊/🔇 rejoint la barre du haut (même rond de 44 px que 💬 : cible tactile). À 360 px il prenait 52 px à la barre de vie, réduite à 69 px dont 43 utiles (cadre de 13 px de chaque côté) : « 1018 / 1018 » y tenait au pixel près. Sur les écrans étroits, les espaces se resserrent (8 → 5 px) : 12 px de gagnés pour le texte des PV, sans toucher aux cibles tactiles. */ @media (max-width: 380px){ .zhud-top{gap:5px} } /* Le héros de haut niveau peut afficher quatre ou cinq chiffres de PV. Avec le compteur d'or large d'une sortie, les espaces forçaient ce texte sur 2 lignes dans la jauge mobile. Format resserré, mais toujours exact. */ @media (max-width: 470px){ .zhp-txt{font-size:8px;letter-spacing:-.15px} .zhp-txt.zhp-long{font-size:6.8px;letter-spacing:-.25px} }