html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: radial-gradient(circle at center, #121a24 0%, #070a0f 70%, #04060a 100%); } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); z-index: 2; } /* 2026-08-01 — bannière footer.png : masquée par défaut (thème bleu / sécurité), réaffichée uniquement par [data-theme="ancien"] dans medieval.css (voir commentaire dans game.php pour le détail du périmètre ingame-only). 2026-08-01 — #headerBanner (cadre haut, même image retournée à 180°) suit exactement la même logique de masquage par défaut. 2026-08-01 — #leftBanner/#rightBanner (côtés du cadre, même image tournée à 90°/-90°) suivent la même logique. */ #footerBanner, #headerBanner, #leftBanner, #rightBanner { display: none; } /* 2026-08-08 — demande explicite : pastille de version ingame, par-dessus le cadre médiéval (le cadre décoratif #footerBanner/#headerBanner/#leftBanner/ #rightBanner monte à z-index 99999, cf. css/themes/medieval.css — donc 100000 ici pour rester visible au-dessus). pointer-events:none pour ne jamais gêner un clic dans ce coin. Thème-agnostique : même style dans les 2 thèmes (la surcharge brun foncé du 1er round, retirée depuis, partait d'une hypothèse fausse sur la couleur du coin du cadre — cf. erratum plus bas dans medieval.css). 2026-08-08 (2e round, demande explicite, "toujours pas lisible en médiéval") : contraste et taille encore augmentés — opacité 0.45 → 0.75, text-shadow renforcé (double couche pour un halo plus épais), pas seulement une ombre fine. 2026-08-08 (3e round, demande explicite) : repositionnée en bas à GAUCHE (au lieu de bas à droite) dans LES DEUX thèmes — le coin bas-droit est déjà occupé par les menus principaux (.debug-light-panel, les 9 boutons + HUD FPS/EDA) et s'y superposait. Taille de police +15% (10px → 11.5px). */ #gameVersionBadge { position: fixed; left: 6px; bottom: 4px; z-index: 100000; font-family: monospace; font-size: 11.5px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.7); pointer-events: none; user-select: none; } /* 2026-08-08 — demande explicite : date de la dernière release à côté de la version (#gameVersionDate, cf. game.php) — même traitement que .hero-version-date sur la prez (css/presentation.css) : légèrement plus discrète que le numéro de version lui-même (opacité réduite, italique), sans pastille propre. */ #gameVersionDate { opacity: 0.75; font-style: italic; } #app { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; z-index: 1; } .panel, #tileUI { position: fixed; z-index: 10; font-family: monospace; color: rgba(220, 240, 255, 0.9); } /* 2026-08-03 — demande explicite : ces HUD in-partie (#scorePanel, #tileUI, #arcadeScore — et .missionsBox, cf. missions.css) n'ont jamais eu de masquage par défaut : ils sont dans le DOM dès le chargement de game.php, sans display:none tant qu'aucun JS ne les cache. Résultat, un flash disgracieux entre la fin du preloader (dont le fondu de sortie, ~700ms, laisse transparaître la page en dessous, cf. preloader.js::dismissOverlay) et l'affichage du menu pre-game (.mode-screen, opaque, z-index:9999, créé SYNCHRONE juste après par showStartupScreen() — donc aucun gap après lui, le souci est bien pendant le fondu du preloader). Masqués par défaut via cette classe sur (game.php), retirée uniquement au vrai lancement de la partie (multiplayerRooms.js::startMultiplayerScene, juste après overlay.remove() du menu pre-game) — jamais avant, jamais en revenant sur un menu. */ body.game-not-started #scorePanel, body.game-not-started #tileUI, body.game-not-started #arcadeScore { display: none !important; } /* 2026-08-01 — passage en colonne (était une simple rangée) pour loger la ligne d'efficacité EN COURS sous le score, cf. .arcade-efficiency plus bas. .arcade-score-row porte maintenant ce que #arcadeScore portait seul avant (flex row/baseline/gap pour "1234" + "pts (+2)"). */ #arcadeScore { position: fixed; top: 14px; left: 14px; z-index: 12; font-family: 'BebasNeue', system-ui, sans-serif; color: #ffffff; pointer-events: none; user-select: none; display: flex; flex-direction: column; align-items: flex-start; } .arcade-score-row { display: flex; align-items: baseline; gap: 6px; font-size: 80px; line-height: 1; text-shadow: 0 0 24px rgba(90, 170, 255, 0.7), 0 0 6px rgba(90, 170, 255, 0.4); /* 2026-08-01 — #arcadeScore (parent) porte pointer-events:none pour ne pas gêner les clics sur le plateau 3D en dessous ; ré-activé ici pour que le hover du tooltip (attachHelpTooltip, cf. ui.js) fonctionne réellement. Bug retour utilisateur : les vérifs précédentes utilisaient dispatchEvent() en JS, qui contourne le hit-testing CSS et masquait ce problème — un vrai survol souris ne déclenchait jamais le tooltip tant que pointer-events restait à none (hérité du parent). */ pointer-events: auto; } /* 2026-08-01 — erratum du même jour : demande initiale mal comprise, c'est le TITRE ("Score"/"Efficacité") qui doit être PLUS PETIT que le chiffre, pas l'inverse (1ère version faisait #dbgScore à 0.65em du titre). #dbgScore reste maintenant à la taille pleine héritée de .arcade-score-row (80px) ; c'est .arcade-label (classe commune aux 2 libellés, cf. #dbgEfficiency plus bas) qui passe à 65% via em — s'adapte automatiquement à la variante compacte (@media max-height:1100px, 60px) sans dupliquer de règle là-bas. */ .arcade-label { font-size: 0.65em; } .arcade-suffix { font-size: 18px; font-family: monospace; font-weight: normal; color: rgba(180, 215, 255, 0.75); text-shadow: none; } /* Efficacité EN COURS (score / tuiles posées, même formule de minoration que la prez — cf. javascript/variables.js EFFICIENCY_MIN_TILES/_EXPONENT, appliquée côté client dans ui.js::updateScoreUI). Alignée à gauche comme le score (align-items:flex-start du parent). 2026-08-01 — demande explicite : mêmes effets CSS que .arcade-score-row (couleur blanche + double text-shadow identique, au lieu de la teinte bleu pâle utilisée jusqu'ici) mais 35% plus petit — 80px × 0.65 = 52px (mesure exacte, pas arrondie visuellement). Idem pour la variante compacte (@media max-height:1100px) : 60px × 0.65 = 39px, cf. plus bas dans ce fichier. pointer-events:auto pour la même raison que .arcade-score-row ci-dessus (hérite sinon du none de #arcadeScore, tooltip hover mort). */ .arcade-efficiency { margin-top: 2px; font-family: 'BebasNeue', system-ui, sans-serif; font-size: 52px; line-height: 1; color: #ffffff; text-shadow: 0 0 24px rgba(90, 170, 255, 0.7), 0 0 6px rgba(90, 170, 255, 0.4); pointer-events: auto; } /* 2026-08-01 — demande explicite : écarter les HUD du cadre décoratif ingame en thème médiéval (#footerBanner/#headerBanner/#leftBanner/ #rightBanner, cf. CONTEXT.md §39) — ici haut ET gauche, #arcadeScore touchant les 2 bords. Thème bleu non concerné (pas de cadre) : `top`/ `left` de base (14px) restent inchangés. ERRATUM (même jour) : +85px jugé trop → ramené à +65px. #scorePanel (ci-dessous) doit suivre ce même décalage sur son `top` pour conserver l'écart vertical avec ce bloc, sous peine de le recouvrir (cf. bug signalé "score et efficacité masqués par le manuscrit stats de partie"). */ /* 2026-08-01 — demande explicite : "trop de marge en haut sur score" → remonté légèrement (-20px). #scorePanel (plus bas dans ce fichier) suit le même delta sur son propre `top` pour conserver l'écart vertical entre les 2 blocs (sinon le score/efficacité redevient masqué par le manuscrit, même bug que précédemment). ERRATUM (même jour) : marge cadre 65px → 52px. left = 14+52 = 66px ; top = 14+52-20(ajustement esthétique ci-dessus, inchangé) = 46px. ERRATUM 2 (même jour, demande explicite) : décalé de 12px vers le bas → 46+12 = 58px. #scorePanel (plus bas) suit le même delta. */ [data-theme="ancien"] #arcadeScore { top: 58px; left: 66px; } /* 2026-07-17 — 2e chantier "HUD in-game" du thème Ancien (cf. CONTEXT.md §32) : #scorePanel + .missionsBox (css/missions.css). Fond/bordure/rayon/couleurs déportés dans [data-theme="bleu"]/[data-theme="ancien"] en bas de fichier — ce qui reste ici est le layout partagé (position, tailles, structure). */ /* top 104 → 134 (2026-08-01) : +30px pour la nouvelle ligne d'efficacité ajoutée sous le score (#arcadeScore, cf. plus haut) — sans ce décalage, le scorePanel chevaucherait cette ligne. Valeur mesurée en direct (Chrome), pas estimée. top 134 → 158 (2026-08-01, même jour) : la ligne d'efficacité est passée de 28px à 52px (mêmes effets CSS que le score, 35% plus petit — demande explicite) + libellé "Efficacité : " préfixé, ce qui a fait déborder le bas de la ligne sous le haut du scorePanel (mesuré en direct : chevauchement de 14px). Nouveau top = bas réel de #dbgEfficiency + 10px de marge, comme à l'origine. */ #scorePanel { position: fixed; top: 158px; left: 14px; z-index: 12; width: 360px; max-width: calc(100vw - 28px); /* 2026-08-01 — BUG CORRIGÉ (demande explicite : "le HUD score/stats est tronqué verticalement en faible résolution, l'ascenseur devrait apparaître plus vite"). max-height valait calc(100vh - 28px), une formule héritée d'une époque où top valait 14px (avant les 3 bumps successifs vers 104→134→158px documentés plus haut dans ce fichier) — jamais mise à jour en même temps que top. Résultat : le panneau pouvait légalement grandir jusqu'à top(158) + max-height(100vh-28) = 100vh + 130px, soit 130px sous le bas réel de l'écran, AVANT que overflow-y:auto ne se déclenche — d'où un HUD visuellement tronqué au lieu de scrollable. Formule corrigée pour réserver top(158px) + une marge basse de 20px (cohérent avec #tileUI, deck.css), afin que l'ascenseur apparaisse dès que le contenu dépasse l'espace réellement disponible, jamais après. 2026-08-01 — CORRECTIF 2 (demande explicite : "en basse résolution verticale, le HUD stats de partie chevauche les 9 boutons en bas à droite"). La marge basse de 20px ci-dessus n'a jamais tenu compte de .debug-light-panel (eda.css), qui vit lui aussi en position:fixed, ancré par le bas (bottom:4px en bleu) et qui peut grandir jusqu'à 2 rangées de boutons (82px de haut, cf. .debug-light-btn-row/flex-wrap) sur les largeurs étroites. Mesuré en direct (Chrome, 1280×435) : bottom:4px + hauteur 82px + 10px de respiration ≈ 96px, arrondi à 100px — sans cette marge, #scorePanel pouvait légalement descendre jusqu'à 18px sous le bord du bandeau de boutons. Reserve 20px → 100px (top(158)+100=258). Thème médiéval : cf. plus bas [data-theme="ancien"] #scorePanel, qui a SA PROPRE formule (top différent + bordure 100px + cadre décoratif) et doit suivre le même principe avec ses propres valeurs. */ max-height: calc(100vh - 258px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 14px 16px; font-family: monospace; scrollbar-width: thin; } .score-title { font-size: 12px; letter-spacing: 0.18em; } .multiplayer-info { display: flex; gap: 20px; margin-top: 10px; padding: 8px 0; } .multiplayer-info-block { min-width: 0; flex: 1; } .multiplayer-info-value { margin-top: 2px; font-family: 'BebasNeue', system-ui, sans-serif; font-size: 28px; font-weight: 900; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #dbgLastScore { display: inline-block; margin-left: 8px; font-weight: 900; color: #ffffff; } .stats-panel { margin-top: 12px; padding: 11px; border-radius: 13px; } .stats-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .stats-title::after { content: none; padding: 2px 7px; border: 1px solid rgba(180, 215, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(225, 242, 255, 0.68); font-size: 9px; letter-spacing: 0.08em; } .stats-summary-row { display: grid; /* 2026-07-29 — demande explicite : moulins/trains/bateaux/comètes sur UNE seule ligne (4 colonnes) au lieu de 2 lignes de 2. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 9px; } .stats-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 9px; border-radius: 10px; } .stats-summary-card span:not(.stats-emoji) { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .stats-summary-card strong { overflow-wrap: anywhere; /* 2026-07-29 — réduit de 42px à 28px : les 4 cartes tiennent désormais sur une seule ligne (grid 4 colonnes ci-dessus), moins de place par carte. */ font-size: 28px; font-weight: 1000; line-height: 1; font-family: 'BebasNeue', system-ui, sans-serif; } .stats-tiles, .stats-trains { background: linear-gradient(135deg, rgba(220, 220, 220, 0.16), rgba(110, 118, 130, 0.10)); } .stats-num-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .stats-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stats-card { position: relative; overflow: hidden; min-width: 0; padding: 8px; border-radius: 11px; } .stats-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; opacity: 0.95; } .stats-card-head { display: flex; align-items: center; gap: 3px; min-width: 0; margin-bottom: 7px; font-size: 11px; font-weight: 1000; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .stats-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 5px; background: rgba(0, 0, 0, 0.22); font-size: 25px; } .stats-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .stats-metrics div { min-width: 0; padding: 6px 6px 5px; border-radius: 8px; } .stats-metrics span { display: block; overflow: hidden; margin-bottom: 2px; font-size: 9px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .stats-metrics strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 800; line-height: 1.2; } .stats-metrics strong .stat-num { font-family: 'BebasNeue', system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.0; vertical-align: baseline; } .stats-metrics strong .stat-unit { font-family: monospace; font-size: 9px; font-weight: 800; text-transform: uppercase; vertical-align: baseline; } .stats-grass { background: linear-gradient(135deg, rgba(131, 184, 79, 0.22), rgba(138, 107, 62, 0.12)); } .stats-grass::before { background: linear-gradient(180deg, #83b84f, #8a6b3e); } .stats-field { background: linear-gradient(135deg, rgba(229, 198, 90, 0.25), rgba(136, 98, 32, 0.11)); } .stats-field::before { background: #e5c65a; } .stats-forest { background: linear-gradient(135deg, rgba(63, 147, 64, 0.23), rgba(31, 90, 43, 0.13)); } .stats-forest::before { background: linear-gradient(180deg, #3f9340, #1f5a2b); } .stats-house { background: linear-gradient(135deg, rgba(196, 154, 104, 0.22), rgba(111, 52, 40, 0.15)); } .stats-house::before { background: linear-gradient(180deg, #c49a68, #6f3428); } .stats-water { background: linear-gradient(135deg, rgba(95, 168, 211, 0.25), rgba(35, 88, 130, 0.13)); } .stats-water::before { background: #5fa8d3; } .stats-rail { background: linear-gradient(135deg, rgba(221, 221, 221, 0.20), rgba(70, 74, 80, 0.16)); } .stats-rail::before { background: repeating-linear-gradient(180deg, #eeeeee 0 4px, #777777 4px 8px); } .stats-grid-extended .stats-full-row { padding-bottom: 5px; border-bottom: 1px solid rgba(180, 215, 255, 0.14); } .stats-grid-extended .stats-section-title { margin-top: 5px; padding-top: 6px; border-top: 1px solid rgba(180, 215, 255, 0.12); color: rgba(255, 255, 255, 0.94); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } /* v0.5.3.1 : topbar bornée avant le deck "tuile courante / tuile suivante". Patch CSS uniquement : aucune logique JS/gameplay modifiée. */ #statsPanel.stats-panel { position: static; box-sizing: border-box; width: 100%; max-width: none; margin-top: 14px; padding: 10px 0 0; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; box-shadow: none; overflow: visible; } [data-theme="bleu"] #statsPanel.stats-panel { border-top: 1px solid rgba(120, 180, 255, 0.24); } [data-theme="ancien"] #statsPanel.stats-panel { border-top: 1px solid rgba(74, 54, 35, 0.22); } #statsPanel .stats-title { margin-bottom: 8px; justify-content: flex-start; text-align: left; } #statsPanel .stats-title::after { content: none; } #statsPanel .stats-summary-row { margin-bottom: 8px; /* 2026-07-29 — même passage à 4 colonnes que la règle générique ci-dessus. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #statsPanel .stats-summary-card { padding: 6px 7px; flex-direction: column; align-items: flex-start; justify-content: center; } #statsPanel .stats-summary-card strong { font-size: 28px; } #statsPanel .stats-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; } #statsPanel .stats-card { padding: 7px 8px; } #statsPanel .stats-card-head { margin-bottom: 5px; gap: 2px; font-size: 11px; } #statsPanel .stats-icon { width: 31px; height: 31px; font-size: 23px; } #statsPanel .stats-metrics { gap: 6px; } #statsPanel .stats-metrics div { padding: 5px 6px 4px; } #statsPanel .stats-metrics span { font-size: 9px; } #statsPanel .stats-metrics strong .stat-num { font-family: 'BebasNeue', system-ui, sans-serif; font-size: 25px; font-weight: 400; } /* Spécificité #id + classes : doit être répété ici (et pas seulement sur .stats-metrics strong .stat-num plus bas) sinon l'ID gagne toujours sur l'attribut [data-theme], quel que soit l'ordre des règles dans le fichier. */ [data-theme="bleu"] #statsPanel .stats-metrics strong .stat-num { color: #ffffff; text-shadow: 0 0 16px rgba(90, 170, 255, 0.42); } [data-theme="ancien"] #statsPanel .stats-metrics strong .stat-num { color: #332415; text-shadow: none; } #statsPanel .stats-metrics strong { font-size: 12px; line-height: 1.08; white-space: normal; } @media (max-width: 1050px) { #scorePanel { width: calc(100vw - 28px); } } /* 2026-07-31 — demande explicite : en basse résolution (petit écran mobile), #scorePanel élargi à calc(100vw - 28px) ci-dessus + son contenu (bloc joueur/partie + stats-card-grid 6 cartes) finit par occuper la quasi- totalité de la page et rend le jeu injouable (plus de place pour le plateau hexagonal). On le masque entièrement en dessous de ce seuil — même mécanisme que `body.grid-only-mode #scorePanel` (display:none !important) plus haut, mais déclenché automatiquement par la résolution plutôt que par un toggle utilisateur. #arcadeScore (petit score en haut à gauche) n'est pas concerné : lui reste toujours affiché, il n'occupe qu'un coin de l'écran. CORRECTIF (même jour) : 1ère version utilisait un seuil de 600px, distinct du seuil de 1050px déjà utilisé ci-dessus pour "élargir" ce même panneau. Entre 600 et 1050px, ni l'un ni l'autre ne cachait rien : en thème bleu, la règle width:calc(100vw-28px) restait seule active → panneau étiré pleine largeur au lieu de disparaître (signalé). En thème ancien, [data-theme= "ancien"] #scorePanel (plus bas dans ce fichier) impose sa PROPRE largeur fixe (310px, hors media query, spécificité ID+attribut) qui l'emporte de toute façon sur la règle générique 1050px — donc à 600–1050px le panneau ancien restait affiché normalement, semblant "jamais masqué" (signalé). Fix : aligner ce seuil sur 1050px, IDENTIQUE à celui déjà établi pour ce panneau, pour qu'il n'y ait plus de zone intermédiaire où l'un des 2 thèmes échappe au masquage. display:none !important l'emporte dans les 2 thèmes, y compris sur la règle ancien non-!important vue plus haut (l'importance prime toujours sur la spécificité). */ @media (max-width: 1050px) { #scorePanel { display: none !important; } } /* 2026-08-01 — demande explicite : même masquage total, mais déclenché par la résolution VERTICALE cette fois ("c'est nickel, ne change rien" pour le seuil horizontal ci-dessus — on ajoute simplement l'équivalent en hauteur). Seuil choisi : 700px, aligné sur le cutoff "basse hauteur" déjà en usage ailleurs dans ce fichier (cf. @media max-height:760px, css/startupMenu.css) — assez bas pour ne jamais se déclencher sur une résolution desktop usuelle (1080p compact reste couvert par le seuil 1100px ci-dessous, qui ne fait que RÉDUIRE la taille du HUD, pas le masquer), mais assez généreux pour libérer de la place utile dès qu'une fenêtre devient franchement basse. Même mécanisme que le masquage horizontal : display:none !important dans les 2 thèmes. */ @media (max-height: 700px) { #scorePanel { display: none !important; } } /* Compact layout pour les écrans ≤ 1100 px de hauteur (ex: 1920×1080). */ @media (max-height: 1100px) { .arcade-score-row { font-size: 60px; } .arcade-efficiency { font-size: 39px; /* 60px × 0.65, même ratio 35% plus petit qu'en résolution normale */ } /* top 88 → 112 → 125 (2026-08-01, 2e ajustement même jour), même raison qu'en résolution normale ci-dessus (ligne d'efficacité 21px→39px + libellé préfixé) : chevauchement mesuré en direct de 3px, +10px de marge. */ #scorePanel { top: 125px; padding: 10px 12px; /* 2026-08-01 — même correction que la règle non-thémée plus haut : top(125px) + marge basse 20px, au lieu de 160px (constante qui ne correspondait à rien de précis). Réserve toujours de la place pour le mini-HUD FPS en bas via cette marge de 20px. 2026-08-01 — CORRECTIF 2 (demande explicite : "en basse résolution verticale, le HUD stats de partie chevauche les 9 boutons en bas à droite"). CETTE règle (@media max-height:1100px) est celle qui gagne réellement en pratique — la quasi-totalité des cas "basse résolution verticale" signalés tombent sous ce seuil de 1100px. La marge basse de 20px ne tenait jamais compte de .debug-light-panel (eda.css, position:fixed ancré par le bas, jusqu'à 82px de haut sur 2 rangées de boutons). Reserve 20px → 100px (top(125)+100=225), même valeur mesurée en direct que la règle non-compacte plus haut. */ max-height: calc(100vh - 225px); } #statsPanel.stats-panel { margin-top: 8px; padding: 6px 0 0; } #statsPanel .stats-summary-row { gap: 5px; margin-bottom: 5px; } #statsPanel .stats-summary-card { padding: 5px 7px; } #statsPanel .stats-summary-card strong { /* 2026-07-29 — cohérent avec le passage à 4 colonnes (28px en base). */ font-size: 22px; } #statsPanel .stats-card-grid { gap: 5px; } #statsPanel .stats-card { padding: 5px 7px; } #statsPanel .stats-card-head { margin-bottom: 4px; font-size: 10px; } #statsPanel .stats-metrics div { padding: 4px 5px 3px; } #statsPanel .stats-metrics strong { font-family: 'BebasNeue', system-ui, sans-serif; font-size: 16px; font-weight: 400; } .abandon-button, .new-game-button { margin-top: 7px; padding: 6px 9px; } } body.grid-only-mode #scorePanel, body.grid-only-mode .help-overlay { display: none !important; } /* En mode immersif le panneau LUT est entièrement fonctionnel (utile pour régler les visuels) */ /* 2026-07-29 — demande explicite : le HUD missions doit rester visible/jouable en immersif simple (touche Espace, grid-only-mode). Il ne reste masqué que dans le super-immersif (SHIFT+Espace → huds-force-hidden, cf. eda.css). */ .stats-boats { background: linear-gradient(135deg, rgba(220, 220, 220, 0.16), rgba(110, 118, 130, 0.10)); } .stats-emoji { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 5px; background: rgba(0, 0, 0, 0.22); font-size: 21px; flex-shrink: 0; transform: translateY(-2px); } /* ─── [data-theme="bleu"] — apparence actuelle par défaut (#scorePanel) ───── */ [data-theme="bleu"] #scorePanel { color: rgba(240, 250, 255, 0.96); background: rgba(0, 0, 0, 0.68); border: 1px solid rgba(120, 180, 255, 0.38); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); scrollbar-color: rgba(120, 180, 255, 0.28) transparent; } [data-theme="bleu"] .score-title { color: rgba(180, 215, 255, 0.82); } [data-theme="bleu"] .multiplayer-info { border-bottom: 1px solid rgba(120, 180, 255, 0.18); } [data-theme="bleu"] .multiplayer-info-value { color: #ffffff; text-shadow: 0 0 12px rgba(90, 170, 255, 0.38); } [data-theme="bleu"] .stats-panel { border: 1px solid rgba(120, 180, 255, 0.26); background: radial-gradient(circle at 10% 0%, rgba(95, 168, 211, 0.13), transparent 42%), rgba(8, 14, 22, 0.66); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); } [data-theme="bleu"] .stats-title { color: rgba(212, 236, 255, 0.92); } [data-theme="bleu"] .stats-summary-card { border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.07); } [data-theme="bleu"] .stats-summary-card span:not(.stats-emoji) { color: rgba(225, 242, 255, 0.76); } [data-theme="bleu"] .stats-summary-card strong { color: #ffffff; text-shadow: 0 1px 10px rgba(255, 255, 255, 0.20); } [data-theme="bleu"] .stats-card { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); } [data-theme="bleu"] .stats-card-head { color: rgba(255, 255, 255, 0.95); } [data-theme="bleu"] .stats-metrics div { background: rgba(0, 0, 0, 0.20); } [data-theme="bleu"] .stats-metrics span { color: rgba(225, 242, 255, 0.66); } [data-theme="bleu"] .stats-metrics strong { color: #ffffff; } [data-theme="bleu"] .stats-metrics strong .stat-num { color: #ffffff; text-shadow: 0 0 16px rgba(90, 170, 255, 0.42); } [data-theme="bleu"] .stats-metrics strong .stat-unit { color: rgba(225, 242, 255, 0.80); } /* ─── [data-theme="ancien"] — parchemin 9-slice sur #scorePanel, même technique que .mode-panel (css/multiplayerUi.css) et la prez (css/themes/medieval.css §32). Padding retiré sur les 4 côtés (pas de logo à réserver ici, contrairement à .mode-panel) : texte/cartes internes au plus près du bord du parchemin. Les "cartes" internes (stats-summary-card/stats-card/stats-metrics div), en fond translucide blanc sur fond sombre, passent en translucide noir pour rester lisibles sur le parchemin clair — même principe que les chips prez. ─── */ [data-theme="ancien"] #scorePanel { border: 50px solid transparent; border-image-source: url("../images/manuscrit-1.png"); border-image-slice: 50 fill; border-image-repeat: repeat; border-radius: 0; background: none; box-shadow: none; padding: 0; color: #332415; font-family: Georgia, "Times New Roman", serif; scrollbar-color: rgba(74, 54, 35, 0.4) transparent; /* 2026-07-18 — CORRECTIF v2 : la v1 (agrandir width + décaler left/top en négatif) mettait le panneau hors écran à gauche (left: 14px - 25px = -11px) ET ne changeait rien à la cause réelle : #scorePanel est box-sizing: border-box (règle non thémée), donc `width`/`max-width`/`max-height` incluent la bordure. Passer la bordure de 1px (bleu) à 50px (ancien) sans rien d'autre grignote donc ~100px de zone de contenu utile en plus des 100px déjà repris par le retrait du padding. Fix : box-sizing:content-box UNIQUEMENT en ancien — `width`/`max-width`/ `max-height` ci-dessous ne portent plus que sur le contenu, la bordure de 50px s'ajoute PAR-DESSUS automatiquement, sans rien retrancher. Le coin haut-gauche (top:104px/left:14px, non modifié) reste le même quel que soit box-sizing — seule la boîte s'étend vers la droite/le bas, jamais hors écran à gauche. 2026-07-18 — CORRECTIF v3 (demande explicite : la marge négative doit avoir un effet visible, comme sur tous les autres parchemins). v1/v2 laissaient margin:0 sur .internal-parchment en raisonnant que le scroll réel (overflow-y:auto/overflow-x:hidden, ci-dessous dans la règle non thémée) couperait toute marge négative posée sur cet enfant. Au lieu de renoncer au bleed, on déplace le scroll : #scorePanel lui-même passe en overflow:visible + display:flex (colonne), et c'est SON ENFANT .internal-parchment qui devient le conteneur réellement scrollable (overflow-y:auto/overflow-x:hidden posés plus bas) — exactement le même schéma que .fps-counter/.fps-hud-body. La marge négative sur .internal-parchment peut alors bleeder dans la bordure sans être tronquée, puisque ce n'est plus elle qui porte le clip. */ box-sizing: content-box; /* 2026-08-01 — demande explicite : écarter les HUD du cadre décoratif (cf. CONTEXT.md §39) — left 14px → 79px (erratum même jour : 85px ramené à 65px). max-width recalculé en conséquence (128px = bordure 100px + 28px de marges d'origine ; +65px pour le nouveau left, marge droite inchangée). `top` AUSSI décalé (79+65=... en fait ce bloc n'avait PAS de `top` propre avant — il héritait de la règle non-thémée top:158px, partagée avec le thème bleu). Depuis qu'#arcadeScore (ci-dessus) est descendu de 65px en thème médiéval SEULEMENT, l'écart vertical entre les 2 blocs s'était réduit à 158-79=79px — largement insuffisant pour la hauteur du bloc score+efficacité (~144px), d'où le bug signalé "score/efficacité masqués par le manuscrit". Fix : `top` ancien-spécifique = top #arcadeScore (79) + écart d'origine (158-14=144) = 223px, propre à ce thème (le thème bleu garde top:158px hérité, inchangé). ERRATUM (même jour, demande explicite "trop de marge en haut sur score") : #arcadeScore remonté de 20px (79→59) → même delta répercuté ici pour conserver l'écart : 223→203px. ERRATUM 2 (même jour) : marge cadre 65px → 52px. Nouveau top #arcadeScore = 46px → top ici = 46+144 = 190px. left = 14+52 = 66px. max-width : 128+52 = 180px retranchés. ERRATUM 3 (même jour, demande explicite) : #arcadeScore décalé de 12px vers le bas (46→58) → même delta ici : 190+12 = 202px. */ top: 202px; left: 66px; width: 310px; max-width: calc(100vw - 180px); /* 2026-08-01 — BUG CORRIGÉ (même famille que la règle non-thémée plus haut, mais pire ici : box-sizing:content-box ajoute encore 100px (bordure 50px haut + 50px bas) au-dessus du max-height du contenu). Formule : top(202) + bordure(100) + marge basse(20) = 322px retranchés, pour que le HUD ne dépasse jamais le bas réel de l'écran et que le scroll interne (.internal-parchment ci-dessous) se déclenche dès que nécessaire. 2026-08-01 — CORRECTIF 2 (demande explicite : "en basse résolution verticale, le HUD stats de partie chevauche les 9 boutons en bas à droite ET passe sous le cadre"). Même cause que la règle non-thémée plus haut (marge basse de 20px jamais mise à jour depuis l'ajout du cadre décoratif ni de .debug-light-panel), en pire ici : le panneau des 9 boutons est lui-même repoussé par le cadre (bottom:56px en médiéval, eda.css) et peut grandir à 82px de haut (2 rangées). Mesuré en direct : bottom(56) + hauteur(82) + 10px de respiration ≈ 148px, arrondi à 152px. Reserve 20px → 152px : top(202) + bordure(100) + 152 = 454px. */ max-height: calc(100vh - 454px); overflow: visible; display: flex; flex-direction: column; } [data-theme="ancien"] #scorePanel[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); } [data-theme="ancien"] .score-title { color: #4a3623; /* 2026-08-03 — demande explicite : typo Enchanted-Land, 12px (plancher), hérite déjà de Georgia via #scorePanel — reste hors périmètre le voisin .multiplayer-info-value (chiffre/pseudo, jamais Enchanted-Land). */ font-family: 'EnchantedLand', Georgia, "Times New Roman", serif; /* demande explicite (même round) : plus de MAJUSCULES, seule la 1ère lettre capitalisée — cf. .title (css/themes/medieval.css) pour le détail de la technique lowercase + ::first-letter. */ text-transform: lowercase; /* 2026-08-08 — demande explicite : les typos Enchanted-Land à 14px passent à 15px (lisibilité). ERRATUM (même jour) : le resserrement de letter-spacing (-0.07em) tenté un temps a été annulé sur demande explicite ("moche et illisible") — retour au "aucun letter-spacing" (normal) du round du 2026-08-03. */ letter-spacing: normal; font-size: 15px; } [data-theme="ancien"] .score-title::first-letter { text-transform: uppercase; } [data-theme="ancien"] .multiplayer-info { border-bottom: 1px solid rgba(74, 54, 35, 0.24); } [data-theme="ancien"] .multiplayer-info-value { color: #332415; text-shadow: none; } [data-theme="ancien"] .stats-panel { border: 1px solid rgba(74, 54, 35, 0.22); background: rgba(0, 0, 0, 0.05); box-shadow: none; } [data-theme="ancien"] #statsPanel .stats-title { /* ::first-letter (règle plus bas) n'est jamais appliqué sur un conteneur flex (exclusion explicite de la spec CSS, même pour les items anonymes générés par le texte direct) — la règle de base (non thémée) pose display:flex uniquement pour positionner ::after (le filet décoratif), déjà désactivé ici (content:none, #statsPanel .stats-title::after plus haut dans ce fichier) : aucune régression visuelle à repasser en block, seul usage de .stats-title dans tout le projet (game.php). */ display: block; } [data-theme="ancien"] .stats-title { color: #332415; /* 2026-08-03 — demande explicite : typo Enchanted-Land sur .stats-title ("ANNALES DES HAUTS FAITS") — base à 11px (base.css, hors thème), remonté à 12px ICI uniquement (jamais en dessous du plancher) ; hérite déjà de Georgia via #scorePanel. Casse : plus de MAJUSCULES (override du text-transform:uppercase de la règle de base), seule la 1ère lettre capitalisée — cf. .title (css/themes/medieval.css) pour la technique. */ font-family: 'EnchantedLand', Georgia, "Times New Roman", serif; text-transform: lowercase; /* 2026-08-08 — demande explicite : 14px → 15px. ERRATUM (même jour) : letter-spacing resserré (-0.07em) annulé sur demande explicite ("moche et illisible") — retour à "normal". */ letter-spacing: normal; font-size: 15px; /* 2026-08-03 (round suivant) — jamais de gras sur Enchanted-Land : reset du font-weight:900 hérité de la règle de base non thémée (pensée pour l'ancienne typo condensée en capitales). */ font-weight: 400; } [data-theme="ancien"] .stats-title::first-letter { text-transform: uppercase; } [data-theme="ancien"] .stats-summary-card { border: 1px solid rgba(74, 54, 35, 0.20); background: rgba(0, 0, 0, 0.05); } [data-theme="ancien"] .stats-summary-card span:not(.stats-emoji) { color: #4a3623; /* 2026-08-03 — demande explicite : typo Enchanted-Land sur les titres des DIV du HUD statistiques (moulins/convois/nefs/comètes) — même convention que les autres titres HUD (.title/.score-title/.stats-title). 2026-08-08 — 14px → 15px (letter-spacing resserré tenté puis annulé sur demande explicite, "moche et illisible" — retour à "normal"). */ font-family: 'EnchantedLand', Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: lowercase; } [data-theme="ancien"] .stats-summary-card span:not(.stats-emoji)::first-letter { text-transform: uppercase; } [data-theme="ancien"] .stats-summary-card strong { color: #332415; text-shadow: none; } [data-theme="ancien"] .stats-card { border: 1px solid rgba(74, 54, 35, 0.18); background: rgba(0, 0, 0, 0.04); } /* 2026-07-31 — fond flou/translucide par biome (demande explicite), thème médiéval UNIQUEMENT. `.stats-card` a déjà `position:relative; overflow:hidden` (base.css plus haut) : le `overflow:hidden` clippe le débordement du blur sans rien y toucher. `::before` étant déjà pris par la barre d'accent colorée (5px de large), l'image passe par `::after` — `inset:-6px` (légèrement plus grand que la boîte) évite le liseré transparent/sombre que `filter:blur()` ferait apparaître sur les bords s'il était pile calé sur `inset:0`. z-index:0 sur `::after` + `position:relative; z-index:1` sur les 2 blocs de contenu réels : sans ça, un pseudo-élément positionné (même z-index:auto) peint au-dessus du flux normal non positionné (ordre de peinture CSS2.1 Annexe E), ce qui aurait caché le texte derrière l'image. */ [data-theme="ancien"] .stats-card::after { content: ""; position: absolute; inset: -6px; background-size: cover; background-position: center; /* 2026-07-31, ajustements successifs demandés : flou 4px→2px→1px→0.88px→0.81px (-8%) ; opacité 0.30→0.20→0.184→0.162 (-12%). */ filter: blur(0.81px); opacity: 0.162; z-index: 0; pointer-events: none; } [data-theme="ancien"] .stats-card-head, [data-theme="ancien"] .stats-metrics { position: relative; z-index: 1; } /* 2026-08-03 — demande explicite : typo Enchanted-Land sur les titres des DIV du HUD statistiques (prairie/champ de blé/forêt/bourg/eau/voie ferrée) — même convention que .stats-summary-card ci-dessus. Ciblé sur le span de texte uniquement (`:not(.stats-icon)`, l'emoji reste inchangé) : .stats-card-head est display:flex (règle de base plus haut), et ::first-letter ne s'applique jamais à un conteneur flex — appliqué ici directement sur le span de texte (inline, pas flex), qui accepte ::first-letter sans problème. */ [data-theme="ancien"] .stats-card-head span:not(.stats-icon) { font-family: 'EnchantedLand', Georgia, "Times New Roman", serif; /* 2026-08-08 — demande explicite : 14px → 15px (letter-spacing resserré tenté puis annulé sur demande explicite, "moche et illisible" — retour à "normal"). */ font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: lowercase; } [data-theme="ancien"] .stats-card-head span:not(.stats-icon)::first-letter { text-transform: uppercase; } [data-theme="ancien"] .stats-grass::after { background-image: url("../images/biome-prairie.jpg"); } [data-theme="ancien"] .stats-field::after { background-image: url("../images/biome-ble.jpg"); } [data-theme="ancien"] .stats-forest::after { background-image: url("../images/biome-foret.jpg"); } [data-theme="ancien"] .stats-house::after { background-image: url("../images/biome-village.jpg"); } [data-theme="ancien"] .stats-water::after { background-image: url("../images/biome-eau.jpg"); } [data-theme="ancien"] .stats-rail::after { background-image: url("../images/biome-train.jpg"); } /* 2026-07-18 — CORRECTIF v3 : .internal-parchment porte maintenant le scroll réel (overflow-y:auto/overflow-x:hidden, déplacé depuis #scorePanel lui-même, désormais overflow:visible) ET la marge négative de bleed. Comme pour .fps-counter > .fps-hud-body, le clip se fait sur CET élément, donc sa propre marge négative n'est jamais concernée par son propre overflow (une boîte ne coupe jamais sa propre bordure/marge, seulement le contenu de ses enfants qui déborderait) — le bleed s'affiche enfin normalement. */ [data-theme="ancien"] #scorePanel > .internal-parchment { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; /* 2026-07-18 — retour utilisateur : "trop de marge en haut" persistait avec marge -20px (pourtant mathématiquement/visuellement correcte — cf. mesure live inner.top = content_top - 20px, exact). La marge -20 est proportionnée aux GRANDS panneaux mais laisse ici un bandeau de bordure "pleine" trop visible avant le texte "JOUEUR/PARTIE" au goût de l'utilisateur. Même principe que .replay-panel (cf. eda.css CORRECTIF #4) : augmenter la marge négative (bleed plus profond), PAS réduire la bordure de 50px (qui reste le standard commun à tous les parchemins). -40 côté haut seulement (les autres côtés n'ont pas été signalés). */ margin: -40px -25px -20px -25px; } /* 2026-08-01 — le mode compact (@media max-height:1100px, plus haut dans ce fichier) fixe top:125px + un max-height réduit pour #scorePanel — mais en thème médiéval, la règle non-thémée [data-theme="ancien"] #scorePanel ci-dessus a une spécificité plus élevée (attribut+id > id) et gagnait donc TOUJOURS, quelle que soit la hauteur du viewport : le mode compact n'avait jamais d'effet réel en médiéval, laissant le HUD tronqué même après le "fix" apparent du thème bleu. Cette règle, à spécificité égale mais placée APRÈS la règle non-thémée (donc gagnante en cascade) et activée seulement sous 1100px, corrige enfin ce cas — même calcul que la règle bleue correspondante (top 125 + bordure 100 + marge basse 20 = 245px retranchés). */ @media (max-height: 1100px) { /* 2026-08-01 — même correction que la règle ancien non-compacte plus haut : #arcadeScore descendu de 65px (thème médiéval) → écart d'origine (125-14=111px) préservé : top = 79 (nouveau top #arcadeScore) + 111 = 190px. max-height : top(190) + bordure(100) + marge basse(20) = 310px. ERRATUM (même jour, "trop de marge en haut sur score") : #arcadeScore remonté de 20px (79→59) → même delta répercuté : 190→170px. ERRATUM 2 (même jour) : marge cadre 65px → 52px. Nouveau top #arcadeScore = 46px → top ici = 46+111 = 157px. max-height : 157+100+20 = 277px. ERRATUM 3 (même jour, demande explicite) : #arcadeScore décalé de 12px vers le bas (46→58) → top ici = 157+12 = 169px. max-height : 169+100+20 = 289px. 2026-08-01 — CORRECTIF 4 (demande explicite : "en basse résolution verticale, le HUD stats de partie chevauche les 9 boutons en bas à droite ET passe sous le cadre"). CETTE règle (@media max-height:1100px) est celle qui gagne réellement en pratique pour la quasi-totalité des cas "basse résolution verticale" signalés (seuil 1100px). Même cause que partout ailleurs : marge basse de 20px jamais mise à jour depuis l'ajout du cadre (52px) ni de .debug-light-panel (jusqu'à 82px sur 2 rangées). Reserve 20px → 152px (mesuré en direct, cf. règle non-compacte équivalente plus haut) : top(169) + bordure(100) + 152 = 421px. */ [data-theme="ancien"] #scorePanel { top: 169px; max-height: calc(100vh - 421px); } } [data-theme="ancien"] .stats-card-head { color: #332415; } [data-theme="ancien"] .stats-metrics div { background: rgba(0, 0, 0, 0.08); } [data-theme="ancien"] .stats-metrics span { color: #4a3623; } [data-theme="ancien"] .stats-metrics strong { color: #332415; } [data-theme="ancien"] .stats-metrics strong .stat-num { color: #332415; text-shadow: none; } [data-theme="ancien"] .stats-metrics strong .stat-unit { color: #4a3623; }