/* Arcmarch : feuille de l'interface. La structure D3 de R12-B1 est allégée en D1 par R23. Un panneau au plus par écran ; compteurs et titres restent sur la scène. Le bleu électrique signale le joueur et l'action principale, l'or le gain, la braise le danger. L'italique condensé porte les grands titres, chiffres et verbes d'action ; les petits libellés reviennent à Barlow droit. Les boutons gardent leur biais et leur tranche, les actions secondaires perdent leurs reflets. Aucun backdrop-filter, aucun filter sur #canvas. Les libellés sont du texte vivant et les animations ne touchent que transform et opacity. Ordre : socle, scène, pictogrammes, pièces communes, HUD, accueil, barre du bas, menus, carte, bâtiment, résultats, pause, page de garde, chargement, publicité, toast, mouvement, cadres. */ /* ================================================================ socle */ html, body { height:100%; } body { margin:0; overflow:hidden; background:var(--encre); color:var(--ivoire); font-family:var(--f-texte); font-weight:600; font-size:var(--fs-lecture); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } button, input { font:inherit; color:inherit; margin:0; padding:0; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } input { cursor:text; } button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, input:focus-visible { outline:2px solid var(--or-clair); outline-offset:2px; } [hidden] { display:none !important; } .sr-only { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* tout nombre qui change : chiffres tabulaires (Barlow porte la fonction tnum) */ .num, .val, .value, .n, strong, [id$="-coins"], [id$="-gems"], [id$="-num"], [id$="-n"] { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } /* D3 : les deux voix italiques. `.chiffre` : Barlow Condensed italique noir (chiffres, titres) ; `.scene-lbl` : italique 700 (libellé posé sur la scène). Les tailles restent celles des jetons --fs-*. */ .chiffre { font-family:var(--f-titre); font-style:italic; font-weight:900; letter-spacing:0; } .scene-lbl { font-family:var(--f-titre); font-style:italic; font-weight:700; } @property --fill { syntax:''; inherits:true; initial-value:0%; } @property --loading-progress { syntax:''; inherits:true; initial-value:0%; } /* ================================================================ scène (cadre S24, canvas, voiles d'ambiance) */ #wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, var(--encre-3) 0%, var(--encre) 70%); } #frame { width:360px; height:780px; flex:none; box-sizing:border-box; position:relative; transform-origin:center center; } #stage { position:relative; width:100%; height:100%; overflow:hidden; background:var(--encre); touch-action:none; user-select:none; -webkit-user-select:none; --vignette-mood:0; } /* Le grade colorimétrique est rendu par la passe de sortie (src/gfx/display-grade.js) : le canvas n'a aucun filtre. */ #canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } #danger { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:1; transition:opacity .18s linear; background:radial-gradient(130% 55% at 50% 102%, rgba(224,103,58,.5), transparent 60%); } .vignette { position:absolute; inset:0; pointer-events:none; z-index:2; background:radial-gradient(120% 82% at 50% 46%, rgba(21,18,14,0) 46%, rgba(21,18,14,.26) 100%); } .vignette::after { content:''; position:absolute; inset:0; opacity:var(--vignette-mood, 0); transition:opacity .5s ease; background:radial-gradient(120% 84% at 50% 44%, rgba(0,0,0,0) 42%, rgba(8,10,14,.20) 74%, rgba(6,8,12,.34) 100%); } /* couche d'ambiance de bataille : le HUD visible, ou un résultat posé sur la bataille (R2-1 : même lumière) */ #stage:is(:has(#hud:not([hidden])), :has(.outcome:not([hidden]))) { --vignette-mood:.30; } /* P2 « Les quatre marches » (6 octobre 2026) : plus aucun voile CSS ne suit la clé de lumière de la bible. Les quatre règles `#stage[data-weather=…]` (force de vignette et bande haute teintée par « jalon » : aube, lande, pluie, nuit) sont retirées : sous C5 la vignette de bataille est éteinte (plus bas, `#stage[data-scene="battle"] .vignette`), et leurs teintes de nuit ou de pluie contredisaient l'identité de la marche portée par la 3D (src/gfx/cel.js, `MARCHES_C5`). `data-weather` reste posé par main.js : il ne sert plus qu'au triplet de sortie hors direction cel. */ #stage:has(.screen[data-screen="title"]:not([hidden])) { --vignette-mood:0; } #stage:has(.screen[data-screen="home"]:not([hidden])) { --vignette-mood:0; } /* R2-2 : plus de fondu au noir. L'IMAGE TENUE du fondu enchaîné : main.js y copie la dernière image de la scène quittée, puis l'efface par-dessus la scène d'arrivée déjà vivante. Juste au-dessus du canvas, sous le danger, la vignette, le HUD et les écrans. Opacité et transformation seulement, aucun filtre. */ #passage { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; opacity:0; visibility:hidden; transform-origin:50% 46%; } /* ================================================================ pictogrammes : masques pleins (pictos.css), couleur du texte */ /* Une icône se dimensionne par sa boîte ; le pictogramme occupe toute la boîte (dessin sur 24 points). La pièce d'or, la gemme et le heaume peint sont les seules images en couleur. */ .picon { display:inline-block; flex:none; width:24px; height:auto; aspect-ratio:1; vertical-align:middle; background-color:currentColor; -webkit-mask:var(--ic, none) center / contain no-repeat; mask:var(--ic, none) center / contain no-repeat; } .picon.pi-or, .picon.pi-cristaux, .picon.pi-heaume { background:var(--img) center / contain no-repeat; -webkit-mask:none; mask:none; } .pi-or { --img:var(--img-piece); } .pi-cristaux { --img:var(--img-gemme); } .pi-heaume { --img:var(--img-heaume); } /* ================================================================ pièces communes */ /* LE panneau d'un écran (D3) : encre de suie chaude à 90 %, bord haut monté de 4 degrés vers la droite et souligné d'un filet d'or d'un pixel. Le biais vit sur un calque (::before) : le contenu reste droit. Le calque descend sous le bord bas de sa boîte pour que la pente n'ouvre jamais de jour sous le panneau. */ .panneau-d3 { position:relative; isolation:isolate; } .panneau-d3::before { content:''; position:absolute; left:0; right:0; top:0; bottom:-48px; z-index:-1; pointer-events:none; background:var(--panneau); transform-origin:0 0; transform:skewY(var(--pente)); box-shadow:inset 0 1px 0 var(--filet-or), var(--ombre-panneau); } /* ancien panneau d'encre (fiches internes) : sans cadre, un filet d'un pixel */ .panneau { background:var(--panneau); border-radius:var(--r-panneau); box-shadow:var(--filet-interieur); } /* Bouton rond (pause, retour, fermer) : disque de suie de 44 points cerné de bleu, pictogramme ivoire. */ .round-btn { position:relative; flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-rond); background:rgba(22,17,12,.84); box-shadow:inset 0 0 0 1.5px var(--azur-haut), var(--ombre-bouton); color:var(--ivoire); transition:transform var(--t-appui) var(--courbe), background-color var(--t-appui); } .round-btn .picon { width:22px; } .round-btn:active { transform:scale(.94); background:var(--encre-3); } /* Boutons : UNE famille D « Arcade premium » (retour 1 de Bastien, 28 septembre ; finition du 29 d'après les profils de couleur relevés au pixel sur ui_D_accueil, ui_D_batiment, ui_D_victoire et ui_D_defaite). La face est un parallélogramme de 8 degrés porté par ::before (le libellé reste droit), coins de 3 points ; sous elle, une TRANCHE de 6 points bien séparée de la face par un filet sombre, puis un liseré clair, qui s'écrase à l'appui. Trois rôles, mêmes états : - secondaire (.menu-command seul) : plaque nuit #0A2E66 → #03173A, bord cyan d'un point, arête haute cyan, libellé italique ; - principal (.primary) : bleu électrique de D, arête haute #9BEFFF, reflet franc sur les 44 % du haut, cœur #0A64DA, pied #0558D3 qui remonte un peu, tranche cobalt saturée #0443BD, halo cyan ; deux faisceaux entrent par les bouts ; - or (.or) : les gains seulement (la vidéo qui multiplie le butin) : #FDE551 → #F9B629, tranche #C88615. Pressé : la face descend de 5 points (la tranche passe de 7 à 2), s'assombrit (luminosité 82 %), le reflet s'efface et une ombre intérieure la creuse : lisible au premier coup d'œil. Désactivé : forme et tranche restent, face bleu-gris, éclat éteint. Focus clavier : un anneau cyan suit la face. */ .menu-command { --face:linear-gradient(180deg, rgba(255,255,255,.10) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #0C3272 0%, #072457 50%, #03173A 100%); --arete:inset 0 2px 0 #6BDDFF, inset 1px 0 0 #36B8FF, inset -1px 0 0 #36B8FF, inset 0 -1px 0 #2C8BEA; --tranche:0 1px 0 #010C22, 0 5px 0 #06265C, 0 6px 0 #1F5FB8, 0 8px 10px rgba(0,8,24,.65), 0 0 9px rgba(20,160,255,.32); --tranche-appui:0 1px 0 #010C22, 0 2px 0 #1F5FB8, 0 3px 5px rgba(0,8,24,.5); --creux:inset 0 3px 7px rgba(0,6,24,.55); --descente:4px; position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; min-height:48px; padding:0 18px; margin-bottom:7px; border-radius:0; background:transparent; color:var(--blanc); box-shadow:none; isolation:isolate; font:italic 800 var(--fs-etape)/1.1 var(--f-titre); text-shadow:0 2px 1px rgba(0,12,40,.55); transition:transform var(--t-appui) var(--courbe); } .menu-command::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:4px; transform:skewX(var(--biais)); background:var(--face); box-shadow:var(--arete), var(--tranche); transition:box-shadow var(--t-appui) var(--courbe), filter var(--t-appui); } .menu-command strong { font-weight:inherit; } .menu-command .picon { width:22px; } .menu-command:active { transform:translateY(var(--descente)); } .menu-command:active::before { box-shadow:var(--creux), var(--arete), var(--tranche-appui); filter:brightness(.82) saturate(1.1); } .menu-command:active::after { opacity:.35; } .menu-command:focus-visible { outline:none; } .menu-command:focus-visible::before { box-shadow:var(--arete), var(--tranche), 0 0 0 2px var(--suie), 0 0 0 4px #7FE3FF; } .menu-command:disabled, .menu-command[aria-disabled="true"] { --face:linear-gradient(180deg, #2E4B69, #1A3656); --arete:inset 0 2px 0 rgba(200,220,240,.35), inset 0 0 0 1px rgba(126,170,210,.28); --tranche:0 1px 0 #06142A, 0 6px 0 #10284A, 0 8px 9px rgba(0,8,24,.5); color:#C8D4E3; text-shadow:none; cursor:not-allowed; transform:none; } .menu-command:disabled::before, .menu-command[aria-disabled="true"]::before { filter:none; box-shadow:var(--arete), var(--tranche); } .menu-command.primary { --face:linear-gradient(180deg, rgba(150,230,255,.10) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #2EA2FF 0%, #1C88F4 30%, #0C70E8 60%, #0667EA 100%); --arete:inset 0 2px 0 #8CE3FF, inset 1px 0 0 #5FD6FF, inset -1px 0 0 #5FD6FF, inset 0 -1px 0 rgba(120,200,255,.45); --tranche:0 1px 0 #03307F, 0 6px 0 #0443BD, 0 7px 0 #2A72E6, 0 9px 12px rgba(0,14,40,.75), 0 0 18px rgba(40,150,255,.6); --tranche-appui:0 1px 0 #03307F, 0 2px 0 #2A72E6, 0 3px 6px rgba(0,14,40,.7), 0 0 7px rgba(30,165,255,.35); --creux:inset 0 4px 8px rgba(0,22,80,.55); --descente:5px; min-height:58px; margin-inline:6px; width:calc(100% - 12px); margin-bottom:9px; text-shadow:0 2px 1px rgba(0,30,110,.5), 0 0 12px rgba(160,230,255,.3); } /* les faisceaux : trois traits clairs à chaque bout, de 2 points au plus, qui s'effacent vers le centre (20 % de la largeur) */ /* les faisceaux de D : trois traits de lumière qui MONTENT légèrement, entrant par le bas gauche et le haut droit, halo compris, et qui s'effacent vers le centre (dessin vectoriel à trait constant, jamais sous le libellé) */ .menu-command.primary { --faisceau-g:url("data:image/svg+xml,"); --faisceau-d:url("data:image/svg+xml,"); } /* les traits sont pleins ; le masque les efface vers le centre (plein aux bouts, nul au-delà du tiers) */ .menu-command.primary::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; transform:skewX(var(--biais)); transition:opacity var(--t-appui); background:var(--faisceau-g) left 2px bottom 12% / 34% 46%, var(--faisceau-d) right 2px top 14% / 34% 46%; background-repeat:no-repeat; -webkit-mask:linear-gradient(90deg, #000 0, rgba(0,0,0,.6) 16%, transparent 34% 66%, rgba(0,0,0,.6) 84%, #000 100%); mask:linear-gradient(90deg, #000 0, rgba(0,0,0,.6) 16%, transparent 34% 66%, rgba(0,0,0,.6) 84%, #000 100%); } .menu-command.primary strong, .menu-command.primary .cmd-main { font:italic 900 var(--fs-cta)/1 var(--f-titre); letter-spacing:.005em; } /* libellé calé à gauche (Améliorer) ou bouton étroit (Bataille à côté de Rejouer) : les faisceaux restent hors du texte ; seul le faisceau bas-gauche demeure, raccourci, et celui de droite disparaît (le prix ou le libellé l'occuperait) */ .building-buy.menu-command.primary::after, .map-sheet-cta.avec-rejeu.menu-command.primary::after { background: linear-gradient(90deg, rgba(225,250,255,.9), rgba(225,250,255,0)) left 4px top 72% / 5% 2px, linear-gradient(90deg, rgba(225,250,255,.6), rgba(225,250,255,0)) left 4px top 80% / 3.5% 1.5px; background-repeat:no-repeat; } .map-sheet-cta.avec-rejeu.menu-command.primary::after { background: linear-gradient(90deg, rgba(225,250,255,.9), rgba(225,250,255,0)) left 5px top 62% / 11% 2px, linear-gradient(90deg, rgba(225,250,255,.6), rgba(225,250,255,0)) left 5px top 72% / 7% 1.5px; background-repeat:no-repeat; } .menu-command.primary:disabled, .menu-command.primary[aria-disabled="true"] { --face:linear-gradient(180deg, #2E4B69, #1A3656); --arete:inset 0 2px 0 rgba(200,220,240,.35), inset 0 0 0 1px rgba(126,170,210,.28); --tranche:0 1px 0 #06142A, 0 6px 0 #10284A, 0 8px 9px rgba(0,8,24,.5); } .menu-command.primary:disabled::after, .menu-command.primary[aria-disabled="true"]::after { opacity:0; } .menu-command.or { --face:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #FDE551 0%, #FCD249 34%, #FAC03A 66%, #F9B629 100%); --arete:inset 0 2px 0 #FFF6B0, inset 1px 0 0 #FFE98A, inset -1px 0 0 #FFE98A, inset 0 -1px 0 rgba(255,236,160,.6); --tranche:0 1px 0 #8A5200, 0 6px 0 #C88615, 0 7px 0 #E8AE3A, 0 9px 12px rgba(20,10,0,.65), 0 0 14px rgba(255,190,30,.45); --tranche-appui:0 1px 0 #8A5200, 0 2px 0 #E8AE3A, 0 3px 5px rgba(20,10,0,.5); --creux:inset 0 4px 8px rgba(120,60,0,.45); --descente:5px; min-height:56px; color:var(--or-texte); text-shadow:none; margin-bottom:9px; } .menu-command .command-copy { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; } .menu-command .command-copy small { display:flex; align-items:center; gap:4px; font:600 var(--fs-libelle)/1 var(--f-texte); color:rgba(255,255,255,.9); } .menu-command .command-copy small .picon { width:18px; } /* Épées croisées pleines de D (le masque pi-degats-physiques est un trait fin) : dessin local, comme pi-archer. */ .pi-epees { --ic:url("data:image/svg+xml,"); } /* lien d'action (« Retour à la Cité ») : texte souligné, 44 points de haut */ .lien-action { min-height:44px; min-width:120px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; align-self:center; font:600 var(--fs-lecture)/1 var(--f-texte); color:var(--ivoire); text-decoration:underline; text-decoration-color:rgba(243,235,221,.55); text-underline-offset:5px; text-shadow:var(--ombre-texte-scene); font-variant-numeric:tabular-nums; } .lien-action:active { color:var(--gris); } /* Jauge : piste sombre ; les jauges du joueur sont azur royal avec un front d'or, celles de l'ennemi en braise, les récompenses en or. */ .sangle { position:relative; display:block; height:10px; box-sizing:border-box; border-radius:5px; background:rgba(14,10,7,.62); box-shadow:inset 0 0 0 1px rgba(243,235,221,.14); overflow:hidden; } .sangle > i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; transition:width .24s var(--courbe); background:linear-gradient(90deg, var(--azur) calc(100% - 4px), var(--or) calc(100% - 4px)); } .sangle.braise > i { background:var(--braise); } .sangle.or > i { background:linear-gradient(90deg, var(--or-appui), var(--or)); } .sangle > .value, .sangle > .num { position:absolute; inset:0; display:grid; place-items:center; font:italic 900 var(--fs-legende)/1 var(--f-titre); color:var(--blanc); } /* Pastille de notification : un geste est possible (un gain à prendre) ; or, chiffre d'encre en italique noir. */ .pastille { position:absolute; min-width:19px; height:19px; box-sizing:border-box; padding:0 5px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(180deg, #FFE27A, var(--or) 70%); color:var(--or-texte); box-shadow:0 0 0 1.5px rgba(3,12,28,.9), 0 0 6px rgba(255,196,59,.55); font:italic 900 13px/1 var(--f-titre); pointer-events:none; } /* Monnaie posée sur la scène (D3 : ni plaque ni « + ») : la pièce ou la gemme, le chiffre en italique noir, détaché par une ombre chaude. */ .bourse-pill { display:flex; align-items:center; gap:6px; height:40px; box-sizing:border-box; padding:0 2px; } .bourse-pill > .picon { width:30px; } .bourse-pill .val { font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-chiffre); } /* Surtitre : les en-têtes n'ont plus trois étages ; il reste pour les lecteurs d'écran seulement. */ .kicker { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .filet { height:1px; background:var(--filet); } /* Étincelles de forge (D3) : six à dix éclats or et braise, posés par hud.js dans un conteneur `.etincelles`, animés en transform et opacity seulement (une gerbe de 300 à 500 ms, jamais en boucle). Chaque éclat reçoit son angle par --a, sa portée par --r et son délai par --d. */ .etincelles { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:2; } .etincelles > i { position:absolute; left:-2px; top:-9px; width:4px; height:18px; border-radius:2px; opacity:0; background:linear-gradient(180deg, rgba(255,241,200,0), var(--or-clair) 45%, var(--or)); transform-origin:50% 50%; } .etincelles > i:nth-child(3n) { background:linear-gradient(180deg, rgba(255,210,170,0), #F7A06E 45%, var(--braise)); } .etincelles.go > i { animation:etincelle var(--duree, 480ms) cubic-bezier(.15,.7,.3,1) var(--d, 0ms) both; } /* une gerbe par défaut (huit éclats en éventail vers le haut) ; hud.js peut poser ses propres --a, --r, --d */ .etincelles > i:nth-child(1) { --a:-72deg; --r:48px; --d:0ms; } .etincelles > i:nth-child(2) { --a:-50deg; --r:62px; --d:40ms; } .etincelles > i:nth-child(3) { --a:-30deg; --r:54px; --d:15ms; } .etincelles > i:nth-child(4) { --a:-9deg; --r:68px; --d:60ms; } .etincelles > i:nth-child(5) { --a:12deg; --r:58px; --d:25ms; } .etincelles > i:nth-child(6) { --a:33deg; --r:64px; --d:70ms; } .etincelles > i:nth-child(7) { --a:52deg; --r:50px; --d:35ms; } .etincelles > i:nth-child(8) { --a:73deg; --r:56px; --d:85ms; } /* ================================================================ écrans (socle) */ .screen { position:absolute; inset:0; z-index:var(--z-ecran); box-sizing:border-box; display:flex; flex-direction:column; } .screen[data-volet="sort"] { pointer-events:none !important; } /* ================================================================ HUD de bataille (D3 : aucun panneau, tout est posé sur la scène) */ #hud { position:absolute; left:0; right:0; top:0; z-index:var(--z-hud); pointer-events:none; box-sizing:border-box; padding:calc(var(--safe-t) + 10px) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); display:grid; grid-template-columns:44px minmax(0,1fr) 44px; column-gap:8px; align-items:start; } /* un léger assombrissement en haut, là où il y a du texte (jamais une bande pleine) */ #hud::before { content:''; position:absolute; left:0; right:0; top:0; height:calc(var(--safe-t) + 104px); z-index:-1; pointer-events:none; background:var(--voile-haut); } #hud-pause { pointer-events:auto; grid-column:1; } #hud-pause[aria-pressed="true"] { background:var(--encre-3); } /* la ligne de progression : le territoire en italique ivoire et l'étape en or, puis la barre braise fine de la base */ .hud-prog { grid-column:2; justify-self:center; width:100%; max-width:236px; box-sizing:border-box; padding:2px 0 0; display:flex; flex-direction:column; gap:6px; } #hud-order { display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; } /* R15 : pendant une transition (chute et Sac, travelling, pose de victoire, descente de l'intro), la ligne du territoire et la barre de la base s'effacent ; main.js pose `#stage[data-transition]` (voir `poseUiTransition`) */ #hud-plaques, #hud-base { transition:opacity .25s ease; } /* R17 : `!important`, pour qu'aucune animation d'entrée (celle de la barre de la base ci-dessous, celles du HUD) ne le perce. HUD C5 : les losanges d'avancement RESTENT pendant la transition (ils se remplissent au franchissement, pendant la marche) ; ce ne sont pas un menu mais trois marques de 18 px de diagonale. La plaque des Arènes et la vie du fort s'effacent comme avant. */ #stage[data-transition] #hud-plaques, #stage[data-transition] #hud-base { opacity:0 !important; } /* R17 : la barre de la base sort de `hidden` à l'arrivée sur un niveau (la base d'avant était tombée) : sans elle, pas de transition (display), elle paraissait d'un coup pendant que la ligne du territoire revenait en fondu */ #hud-base:not([hidden]) { animation:hudRevient .25s ease backwards; } @keyframes hudRevient { from { opacity:0; } to { opacity:1; } } .hud-titre { display:flex; align-items:baseline; justify-content:center; gap:10px; min-width:0; } /* bornée à sa ligne, pour que hud.js mesure son débordement (scrollWidth ≤ clientWidth) et passe à la taille dessous, puis à deux lignes */ #hud-objective { display:block; flex:0 1 auto; min-width:0; max-width:100%; font:italic 900 var(--fs-titre)/1.05 var(--f-titre); color:var(--ivoire); text-align:center; white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .hud-etape { flex:none; font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--or); white-space:nowrap; font-variant-numeric:tabular-nums; text-shadow:var(--ombre-texte-scene); } #hud-objective.long { font-size:var(--fs-etape); } #hud-objective.tres-long, #hud-boss .name.long { white-space:normal; line-height:1.05; text-wrap:balance; } #hud-boss { display:flex; flex-direction:column; align-items:stretch; gap:6px; } #hud-boss .ttl { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; color:var(--braise); } #hud-boss .bico { width:22px; } #hud-boss .name { min-width:0; font:italic 900 var(--fs-titre)/1.05 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-align:center; text-shadow:var(--ombre-texte-scene); } #hud-boss .bar { position:relative; display:block; height:7px; border-radius:4px; background:rgba(14,10,7,.62); box-shadow:inset 0 0 0 1px rgba(243,235,221,.14); overflow:hidden; } #hud-boss .bar::after { content:''; position:absolute; left:0; top:0; bottom:0; width:var(--fill, 100%); border-radius:inherit; background:var(--braise); transition:width .24s var(--courbe); } #hud-boss.rally .name { color:var(--or); } /* R14 M6 : le bandeau du chef (cahier M6 : 220 × 42, panneau encre #15120E à 85 %, nom ivoire, « Phase N » braise, barre braise à deux encoches claires à 60 et 25 %) ; en rage, la barre rougeoie */ #hud-boss { background:rgba(21,18,14,.85); border-radius:10px; padding:5px 10px 7px; box-shadow:0 2px 6px rgba(0,0,0,.45); gap:5px; } #hud-boss .ttl { justify-content:space-between; } #hud-boss .name { font-size:var(--fs-etape); text-align:left; } #hud-boss .phase { flex:none; font:italic 900 var(--fs-etape)/1 var(--f-titre); color:var(--braise); text-shadow:var(--ombre-texte-scene); white-space:nowrap; } #hud-boss .bar .cran { position:absolute; top:0; bottom:0; width:2px; background:rgba(243,235,221,.85); z-index:1; } #hud-boss .bar .c60 { left:60%; } #hud-boss .bar .c25 { left:25%; } #hud-boss.rage .bar::after { background:linear-gradient(90deg, var(--braise), #FF8A4A); animation:chefRage .5s ease-in-out infinite alternate; } #hud-boss.rage .phase { color:#FF8A4A; } @keyframes chefRage { from { filter:brightness(1); } to { filter:brightness(1.45); } } #hud-base { display:flex; align-items:center; gap:8px; } #hud-base .sangle { flex:1; height:7px; border-radius:4px; } #hud-base .sangle > i { width:100%; transform-origin:left center; transition:transform .24s var(--courbe); } #hud-base .num { flex:none; min-width:2.2em; text-align:right; font:italic 900 var(--fs-etape)/1 var(--f-titre); color:var(--braise-clair); text-shadow:var(--ombre-texte-scene); } #hud-base.low .num { color:var(--braise); } /* le compte de la foule (J4), au-dessus de la colonne, et celui du chef : posés sur la scène par hud.placeWorld, sans plaque ; une ombre douce sous les chiffres les détache du terrain. La pastille de foule grandit avec la foule (échelle posée par hud.js dans sa transformation, ancrée par le bas) ; aux paliers, un anneau d'or s'élargit et une gerbe d'étincelles part. */ #crowd, #boss-tag { position:absolute; left:0; top:0; z-index:var(--z-hud); display:flex; align-items:center; gap:5px; pointer-events:none; height:40px; padding:0 8px; box-sizing:border-box; transform-origin:50% 100%; font:italic 900 var(--fs-hud-num)/1 var(--f-titre); color:var(--ivoire); font-variant-numeric:tabular-nums; text-shadow:var(--ombre-chiffre); opacity:0; visibility:hidden; will-change:transform; } .crowd-corps { position:relative; display:flex; align-items:center; gap:5px; } .crowd-corps::before { content:''; position:absolute; left:-18px; right:-18px; top:-8px; bottom:-8px; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(14,10,7,.5), rgba(14,10,7,.28) 60%, rgba(14,10,7,0)); } #crowd .picon { width:28px; color:var(--ivoire); } #crowd-n { display:inline-block; transform-origin:50% 70%; } .crowd-rec { align-self:flex-end; margin:0 0 5px 2px; font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--gris); white-space:nowrap; } #crowd.record .crowd-rec { color:var(--or); font-weight:900; } .crowd-rec.inscrit { animation:inscrit 420ms var(--courbe) both; } .crowd-anneau { position:absolute; left:50%; top:50%; width:74px; height:74px; border-radius:50%; pointer-events:none; opacity:0; box-shadow:0 0 0 3px var(--or), 0 0 16px 3px rgba(232,182,76,.55); transform:translate(-50%,-50%) scale(.55); } #crowd.eclat .crowd-anneau, #crowd.eclat-grand .crowd-anneau { animation:anneauOr 380ms cubic-bezier(.2,.7,.3,1) both; } #crowd.eclat-grand .crowd-anneau { width:96px; height:96px; } #crowd.eclat #crowd-n, #crowd.eclat-grand #crowd-n { animation:frappe 180ms var(--courbe) both; } #crowd .etincelles { --duree:460ms; } #boss-tag .picon { width:26px; color:var(--braise); } #boss-tag #boss-tag-n { color:var(--braise-clair); } #crowd.on, #boss-tag.on { opacity:1; visibility:visible; } /* R14 M3 : le compteur des victimes de la charge (cahier M3 : pastille d'encre, liseré azur, chiffre ivoire, au-dessus du casque ; 16 px au cahier, 24 ici pour se lire à la caméra du jeu) */ #champ-tag { position:absolute; left:0; top:0; z-index:var(--z-hud); pointer-events:none; opacity:0; visibility:hidden; will-change:transform; } /* R14-3 (jugement de Sol sur M3) : +30 % (24 → 31 px, chiffre 14 → 18 px) pour se lire à la caméra du jeu */ #champ-tag #champ-tag-n { display:flex; align-items:center; justify-content:center; min-width:31px; height:31px; padding:0 7px; box-sizing:border-box; border-radius:16px; background:rgba(21,18,14,.9); box-shadow:inset 0 0 0 2.5px #5B92D6, 0 2px 4px rgba(0,0,0,.5); font:italic 900 18px/1 var(--f-titre); color:var(--ivoire); font-variant-numeric:tabular-nums; } #champ-tag.on { opacity:1; visibility:visible; } #champ-tag.bat #champ-tag-n { animation:champTagBat 220ms var(--courbe) both; } /* R13-B (1) : « Niveau 5 pris », une seconde pendant le travelling, posé sur la scène sous la ligne du territoire (la barre de la base a disparu à la chute) ; aucune plaque, une ombre locale ; il ne prend jamais le toucher. L'étape prise se coche en azur (la marche M2) et le butin du territoire compte vers sa nouvelle valeur. Entrée 180 ms, tenue, sortie 260 ms (hud.js). */ .niveau-pris { position:absolute; left:50%; top:calc(var(--safe-t) + 58px); z-index:var(--z-hud); width:max-content; max-width:calc(100% - 2 * var(--gout)); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; transform:translateX(-50%); isolation:isolate; } .niveau-pris::before { content:''; position:absolute; left:-34px; right:-34px; top:-14px; bottom:-10px; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(14,10,7,.55), rgba(14,10,7,.3) 62%, rgba(14,10,7,0)); } .np-titre { display:block; max-width:100%; font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; transform:rotate(var(--pente)); text-shadow:var(--ombre-chiffre); } .np-pas { gap:12px; } .np-pas .pas.coche { animation:coche 360ms var(--courbe) 120ms both; } .np-pot { display:flex; align-items:center; gap:6px; } .np-pot > .picon { width:28px; } .np-pot b { font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--or); font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:var(--ombre-chiffre); } .np-pot em { font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--or-clair); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .np-lbl { margin-top:-3px; font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .niveau-pris.entre { animation:bandeauVient 180ms var(--courbe) both; } .niveau-pris.sort { animation:bandeauPart 260ms var(--courbe) both; } .niveau-pris.tinte .np-pot > .picon { animation:tinte 320ms var(--courbe) both; } /* le Champion : portrait peint du heaume dans un disque de suie cerné d'or, anneau de charge azur royal à front d'or ; prêt, l'anneau est plein, il s'éclaire en or, et l'étiquette devient l'action (« Lancer », azur incliné) */ #champ { position:absolute; right:calc(12px + var(--safe-r)); bottom:calc(max(16px, var(--safe-b) + 8px)); z-index:var(--z-champion); width:80px; display:flex; flex-direction:column; align-items:center; pointer-events:auto; isolation:isolate; } #champ::before { content:''; position:absolute; left:8px; top:0; width:64px; height:64px; border-radius:50%; z-index:-1; pointer-events:none; opacity:0; box-shadow:0 0 0 3px rgba(232,182,76,.4), 0 0 22px 6px rgba(232,182,76,.5); } #champ .ring { position:relative; width:64px; height:64px; display:block; border-radius:50%; background:var(--panneau-plein); box-shadow:inset 0 0 0 1.5px var(--filet-or), var(--ombre-bouton); transition:transform var(--t-appui) var(--courbe); } #champ .ring::before { content:''; position:absolute; inset:2px; border-radius:50%; background:conic-gradient(from -90deg, var(--azur) 0, var(--azur-haut) calc(var(--fill) - 3%), var(--or) calc(var(--fill) - 3%), var(--or) var(--fill), rgba(243,235,221,.14) 0); -webkit-mask:radial-gradient(circle closest-side, transparent 25px, #000 25.5px); mask:radial-gradient(circle closest-side, transparent 25px, #000 25.5px); transition:--fill .3s linear; } #champ .disc { position:absolute; left:50%; top:50%; width:48px; height:48px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 38%, var(--encre-3), var(--encre) 72%); } #champ .helm { position:absolute; inset:0; background:var(--img-heaume) center 58% / 112% no-repeat; } #champ .pct { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #champ .lbl { margin-top:4px; min-height:26px; padding:0 12px; display:flex; align-items:center; box-sizing:border-box; white-space:nowrap; border-radius:13px; background:var(--panneau-plein); box-shadow:inset 0 0 0 1px var(--filet-or); font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--ivoire); position:relative; z-index:1; } #champ.ready .ring { box-shadow:inset 0 0 0 2px var(--or), var(--ombre-bouton); } /* R14 M3 : à 100 %, l'anneau S'EMBRASE (braise et or) : une lueur qui monte en 0,6 s, puis un battement lent ; au lancer, un éclat de 0,45 s (un anneau d'or qui s'élargit et s'éteint), la jauge vidée */ #champ.ready .ring::before { background:conic-gradient(from -90deg, var(--braise) 0, var(--or) 50%, var(--braise) 100%); } #champ.ready::before { box-shadow:0 0 0 3px rgba(224,103,58,.55), 0 0 26px 8px rgba(232,182,76,.6), 0 0 44px 10px rgba(224,103,58,.35); animation:champMonte .6s var(--courbe) both, champBat 1.6s ease-in-out .6s infinite; } #champ::after { content:''; position:absolute; left:8px; top:0; width:64px; height:64px; border-radius:50%; pointer-events:none; opacity:0; box-shadow:0 0 0 4px var(--or), 0 0 22px 6px rgba(232,182,76,.7); } #champ.lance::after { animation:champEclat .45s cubic-bezier(.2,.7,.3,1) both; } /* R14-3 (jugement de Sol sur M3 : « dans la vignette de jeu, l'anneau paraît surtout doré ») : trois POINTES lumineuses courtes tournent lentement sur le pourtour de l'anneau embrasé (masque en couronne de 29 à 37 px), blanc chaud sur braise et or */ #champ.ready .ring::after { content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none; background:conic-gradient(from 10deg, transparent 0 4deg, rgba(255,240,200,.95) 7deg, rgba(255,150,80,.8) 9deg, transparent 12deg 120deg, rgba(255,240,200,.95) 127deg, rgba(255,150,80,.8) 129deg, transparent 132deg 240deg, rgba(255,240,200,.95) 247deg, rgba(255,150,80,.8) 249deg, transparent 252deg); -webkit-mask:radial-gradient(circle closest-side, transparent 30px, #000 31px, #000 36px, transparent 38px); mask:radial-gradient(circle closest-side, transparent 30px, #000 31px, #000 36px, transparent 38px); filter:drop-shadow(0 0 3px rgba(255,200,120,.9)); animation:champPointes 3.2s linear infinite; } @keyframes champPointes { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #champ.ready .ring::after { animation:none; } } #champ.ready .lbl { background:linear-gradient(180deg, var(--azur-haut), var(--azur)); color:var(--blanc); box-shadow:var(--arete-or), 0 3px 0 var(--azur-tranche); border-radius:8px; font:italic 900 var(--fs-chiffre)/1 var(--f-titre); min-height:30px; padding:0 16px; } /* Après un tap accepté mais encore en file, la jauge reste pleine sans annoncer un nouveau lancer. */ #champ.ready.pending .ring { box-shadow:inset 0 0 0 2px var(--azur-haut), var(--ombre-bouton); } #champ.ready.pending .ring::before { background:conic-gradient(from -90deg, var(--azur-haut), var(--azur)); } #champ.ready.pending::before { opacity:0; animation:none; box-shadow:none; } #champ.ready.pending .ring::after { content:'…'; inset:auto -3px auto auto; top:-3px; width:18px; height:18px; border-radius:50%; background:var(--encre-2); color:var(--ivoire); box-shadow:inset 0 0 0 1px var(--filet-or); font:900 15px/16px var(--f-titre); text-align:center; -webkit-mask:none; mask:none; filter:none; animation:none; } #champ:active .ring { transform:scale(.95); } /* C5 « Grand jour, accents d'encre » : la bataille garde son soleil, les menus gardent D3. */ #stage[data-scene="battle"] .vignette { display:none; } #hud::before { display:none; } .hud-prog { padding:0; gap:8px; } #hud-order { min-height:44px; justify-content:center; align-items:center; } #hud-title { position:absolute; left:50%; top:calc(var(--safe-t) + 60px); z-index:var(--z-hud); width:max-content; max-width:calc(100% - 40px); transform:translateX(-50%); pointer-events:none; } #hud-title:not([hidden]) { animation:nomNiveau 1s ease both; } #hud-title #hud-objective { font-size:18px; white-space:normal; text-wrap:balance; } @keyframes nomNiveau { 0% { opacity:0; } 15%,75% { opacity:1; } 100% { opacity:0; } } #hud-base { position:absolute; left:0; top:0; z-index:var(--z-hud); width:136px; gap:6px; pointer-events:none; visibility:hidden; transform-origin:50% 100%; } #hud-base.ancree { visibility:visible; } #hud-base .sangle { height:8px; background:var(--encre-2); box-shadow:0 0 0 1px rgba(232,182,76,.6); } #hud-base .num { min-width:1.5em; font-size:20px; color:var(--ivoire); } #crowd { height:27px; padding:0 7px; border-radius:14px; background:rgba(17,24,29,.88); font-size:21px; text-shadow:0 1px 1px rgba(0,0,0,.5); box-shadow:0 1px 3px rgba(0,0,0,.22); } #crowd .picon { width:18px; color:var(--azur-clair); } #crowd .crowd-corps { gap:5px; } #crowd .crowd-corps::before { display:none; } #crowd.record { box-shadow:0 0 0 1px var(--or), 0 1px 3px rgba(0,0,0,.22); } #crowd .crowd-anneau { width:48px; height:48px; } #crowd.eclat-grand .crowd-anneau { width:60px; height:60px; } #champ .pct { display:none; } #champ { min-height:64px; } @media (prefers-reduced-motion:reduce) { #hud-title:not([hidden]) { animation:none; } } /* ================================================================ accueil */ /* R12-B1 (D3, maquette AM-VIS-UI-211 D3 v02) : AUCUN panneau ; la Cité peinte occupe l'écran, un léger assombrissement en haut et en bas porte les textes. En haut le profil (heaume, NOM, marche de la Cité) et les deux monnaies posées sur la scène ; à droite, en colonne, le Coffre prêt, les Renforts et la SÉRIE douce ; en pied la marche des étapes, Bataille (inclinée, arête d'or, tranche), la barre du bas. Rien ne bouge au repos, sauf quelques étincelles d'or qui partent de Bataille une fois, après dix secondes. */ .screen.home { pointer-events:none; } .screen.home > * { pointer-events:auto; } .screen.home > .camp-view { pointer-events:none; } .screen.home::before { content:''; position:absolute; left:0; right:0; top:0; height:calc(var(--safe-t) + 132px); pointer-events:none; background:var(--voile-haut); } .screen.home::after { content:''; position:absolute; left:0; right:0; bottom:0; height:calc(var(--nav-h) + 250px); pointer-events:none; background:linear-gradient(to top, rgba(14,10,7,.9), rgba(14,10,7,.72) 42%, rgba(14,10,7,0)); } .home-head { position:absolute; left:var(--gout-l); right:var(--gout-r); top:calc(var(--safe-t) + 10px); z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; pointer-events:none; } .home-head > * { pointer-events:auto; } /* le profil : UN bouton (le heaume, le nom, la marche de la Cité), qui ouvre les Paramètres */ .home-profil { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:9px; min-height:56px; text-align:left; transition:transform var(--t-appui) var(--courbe); } .home-profil:active { transform:scale(.97); } .profile-seal { position:relative; flex:none; width:54px; height:54px; display:grid; place-items:center; border-radius:var(--r-rond); background:radial-gradient(circle at 50% 38%, var(--encre-3), var(--encre) 72%); box-shadow:inset 0 0 0 2px var(--azur-haut), var(--ombre-bouton); } .profile-seal > .picon { width:44px; margin-top:2px; } .home-profil-copy { flex:1 1 auto; min-width:0; max-width:170px; display:flex; flex-direction:column; gap:5px; } .home-nom { display:block; min-width:0; font:italic 900 var(--fs-nom)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .home-nom.long { font-size:var(--fs-chiffre); } .home-nom.tres-long { font-size:var(--fs-scene); } /* repli mesuré (hud.ajuste) : quand le nom ne tient pas, les deux monnaies passent en colonne */ .home-head.serre .home-res { flex-direction:column; align-items:flex-end; gap:0; padding-top:0; } .home-head.serre .home-res .bourse-pill { height:30px; } .home-epoque { display:flex; flex-direction:column; gap:4px; min-width:0; } .home-epoque .sangle { height:8px; border-radius:4px; } .home-epoque-copy { display:flex; align-items:baseline; justify-content:space-between; gap:6px; min-width:0; font:600 var(--fs-libelle)/1.15 var(--f-texte); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .home-epoque-copy > span { min-width:0; text-wrap:balance; } .home-epoque-copy b { flex:none; font-weight:900; color:var(--ivoire); white-space:nowrap; } .home-res { flex:none; display:flex; flex-direction:row; align-items:center; gap:6px; min-width:0; padding-top:6px; } .home-res .bourse-pill > .picon { width:26px; } .home-res .bourse-pill .val { font-size:var(--fs-chiffre); } .res { position:relative; min-width:0; } .res .val { text-align:left; } .camp-view { position:absolute; inset:0; } #camp-chips { position:absolute; inset:0; pointer-events:none; } /* Cinq pictogrammes de bâtiment sur les toits. Le bâtiment sélectionné se détache en azur ; le Comptoir qui attend porte sa petite bourse d'or. */ .bchip { position:absolute; left:0; top:0; width:56px; height:44px; display:flex; justify-content:center; align-items:flex-start; padding:0; will-change:transform; transition:opacity .2s; -webkit-tap-highlight-color:transparent; } .bchip .mark { display:grid; width:28px; height:28px; border-radius:50%; place-items:center; color:var(--blanc); background:rgba(8,29,55,.9); box-shadow:inset 0 0 0 1px rgba(131,197,255,.9), 0 2px 5px rgba(4,6,10,.48); transition:transform var(--t-appui) var(--courbe), box-shadow var(--t-appui); } .bchip .mark .picon { width:17px; } .bchip.locked .mark { color:var(--gris); background:rgba(13,19,29,.78); box-shadow:inset 0 0 0 1px rgba(243,235,221,.35); } .bchip .lock-sign { display:none; position:absolute; top:18px; left:30px; width:14px; height:14px; border-radius:50%; place-items:center; background:rgba(13,19,29,.94); color:var(--gris); box-shadow:inset 0 0 0 1px rgba(243,235,221,.35); } .bchip .lock-sign .picon { width:10px; } .bchip.locked .lock-sign { display:grid; } .bchip .bag { display:none; position:absolute; top:25px; left:29px; align-items:center; gap:1px; height:21px; padding:0 5px 0 1px; box-sizing:border-box; border-radius:11px; background:rgba(22,17,12,.9); box-shadow:inset 0 0 0 1px var(--filet-or), 0 2px 4px rgba(4,6,10,.4); font:italic 900 11px/1 var(--f-titre); color:var(--or); white-space:nowrap; } .bchip .bag .picon { width:17px; } .bchip.bag-on .bag { display:flex; } .bchip:active .mark, .bchip:focus-visible .mark { transform:scale(1.12); box-shadow:inset 0 0 0 1.5px var(--azur-clair), 0 0 9px rgba(37,143,255,.5); } .bchip:focus-visible { outline:2px solid var(--azur-clair); outline-offset:-6px; } .bchip:focus-visible::after { content:attr(data-name); position:absolute; left:50%; bottom:47px; transform:translateX(-50%); z-index:2; padding:4px 8px; border-radius:4px; background:var(--panneau-plein); color:var(--ivoire); box-shadow:inset 0 0 0 1px var(--azur-clair), 0 2px 5px rgba(4,6,10,.5); font:700 var(--fs-libelle)/1 var(--f-texte); white-space:nowrap; pointer-events:none; } /* accès secondaires : posés sur la Cité à droite, au-dessus de la marche (le Coffre prêt, les Renforts, la série) ; ni plaque ni cadre, un halo d'ombre sous chacun pour la lecture */ .home-rail { position:absolute; right:var(--gout-r); bottom:calc(var(--nav-h) + 168px); z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .rail-entry { position:relative; width:76px; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-sizing:border-box; padding:4px 2px; color:var(--ivoire); transition:transform var(--t-appui) var(--courbe); isolation:isolate; } .rail-entry::before, .serie::before { content:''; position:absolute; inset:-6px -10px; z-index:-1; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(22,17,12,.74), rgba(22,17,12,.36) 62%, rgba(22,17,12,0)); } .rail-entry > .picon { width:34px; } .rail-entry.boost > .picon { width:40px; } .rail-copy { display:flex; align-items:center; gap:4px; min-width:0; } .rail-copy > span:not(.picon) { font:italic 900 var(--fs-scene)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .rail-copy > small { display:flex; align-items:center; gap:3px; font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .rail-copy .rail-tv { width:26px; color:var(--blanc); background-color:var(--azur-clair); } .rail-copy > small .picon { width:16px; color:var(--azur-clair); } .rail-entry .pastille { right:4px; top:-2px; } .rail-entry#home-chest > .picon { color:var(--or); } .rail-entry:active { transform:scale(.96); } .rail-entry:disabled { cursor:default; } .rail-entry:disabled > .picon { opacity:.6; } .rail-entry:disabled .rail-tv { display:none; } .rail-entry:disabled .rail-copy > small { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--gris); } /* la série douce : la flamme (or, braise au cœur), « Série 3 », « or ×1,75 », quatre crans d'or ; éteinte, tout est gris chaud */ .serie { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-end; gap:5px; padding:4px 2px 2px; } .serie-tete { display:flex; align-items:center; gap:4px; } .serie-tete > .picon { width:32px; color:var(--or); } .serie-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1px; } .serie-copy b { font:italic 900 var(--fs-scene)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .serie-copy small { font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--or); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .serie-crans { display:flex; gap:4px; } .serie-crans > i { display:block; width:15px; height:8px; border-radius:2px; transform:skewX(var(--biais)); background:rgba(243,235,221,.28); box-shadow:0 1px 2px rgba(8,6,4,.6); } .serie-crans > i.on { background:var(--or); } .serie.vide .serie-tete > .picon, .serie.vide .serie-copy small { color:var(--gris); } /* fiche historique du bâtiment sur l'accueil (actions.selectBuild) */ .bcard { position:absolute; left:var(--gout-l); right:var(--gout-r); bottom:calc(var(--nav-h) + 160px); display:flex; align-items:center; gap:10px; padding:12px 14px; box-sizing:border-box; border-radius:var(--r-panneau); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or); } .bcard .ico { width:40px; height:40px; display:grid; place-items:center; color:var(--ivoire); } .bcard .ico .picon { width:30px; } .bcard .col { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .bcard .name { display:flex; align-items:baseline; gap:6px; font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--ivoire); } .bcard .name em { font:600 var(--fs-libelle)/1 var(--f-texte); font-style:normal; color:var(--gris); } .bcard .desc { font:500 var(--fs-libelle)/1.3 var(--f-texte); color:var(--gris); } .bcard .lvlbar { position:relative; height:6px; border-radius:3px; background:rgba(243,235,221,.14); overflow:hidden; } .bcard .lvlbar i { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--azur); } .bcard .acts { display:flex; flex-direction:column; gap:6px; } .bcard .buy { min-width:76px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:3px; box-sizing:border-box; padding:0 8px; border-radius:10px; background:var(--azur); color:var(--blanc); font:italic 900 var(--fs-chiffre)/1 var(--f-titre); } .bcard .buy .picon { width:22px; } .bcard .buy:disabled { background:var(--encre-3); color:var(--gris); } .bcard .buy.green { background:var(--encre-3); color:var(--ivoire); box-shadow:inset 0 0 0 1px var(--filet-fort); } .bcard .buy.alms .tv { display:none; } .bcard .x { position:absolute; right:-4px; top:-10px; width:44px; height:44px; display:grid; place-items:center; color:var(--gris); } .bcard .x .picon { width:16px; } .ban-row { position:absolute; left:var(--gout-l); right:var(--gout-r); bottom:calc(var(--nav-h) + 262px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .ban-row button { min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-sizing:border-box; border-radius:10px; background:var(--panneau-plein); box-shadow:var(--filet-interieur); } .ban-row .n { font:700 var(--fs-libelle)/1.1 var(--f-texte); color:var(--ivoire); } .ban-row .s { font:600 var(--fs-legende)/1.1 var(--f-texte); color:var(--gris); } .ban-row button.on { box-shadow:inset 0 0 0 2px var(--azur-clair); } /* marche des étapes (M2) : le territoire en cours et ses trois niveaux en losanges (fait : azur coché ; en cours : azur cerné d'or, son numéro en italique ; à venir : suie cernée d'ivoire), reliés par un trait d'or jusqu'au fort du territoire */ .home-marche { position:absolute; left:var(--gout-l); right:var(--gout-r); bottom:calc(var(--nav-h) + 98px); z-index:1; min-height:52px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px; } .marche-nom { min-width:0; font:italic 900 var(--fs-chiffre)/1.05 var(--f-titre); color:var(--ivoire); text-wrap:balance; text-shadow:var(--ombre-texte-scene); } .marche-pas { flex:none; position:relative; display:flex; align-items:center; gap:14px; } .marche-pas::before { content:''; position:absolute; left:17px; right:17px; top:50%; height:2px; margin-top:-1px; background:rgba(243,235,221,.3); } .marche-pas::after { content:''; position:absolute; left:17px; top:50%; height:2px; margin-top:-1px; width:calc((100% - 34px) * var(--f, 0)); background:var(--or); } .pas { position:relative; z-index:1; width:34px; height:34px; box-sizing:border-box; display:grid; place-items:center; isolation:isolate; font:italic 900 var(--fs-etape)/1 var(--f-titre); color:var(--ivoire); text-shadow:0 1px 2px rgba(8,6,4,.7); } /* le losange est découpé (clip-path) et non tourné : il ne déborde jamais de sa case (la mesure scrollWidth reste juste). ::before porte le cerne, ::after le fond, 2 points plus petit. */ .pas::before, .pas::after { content:''; position:absolute; z-index:-1; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .pas::before { inset:0; background:rgba(243,235,221,.6); } .pas::after { inset:2.5px; background:var(--encre); } .pas .picon { width:18px; } .pas.done::before { background:var(--or-clair); } .pas.done::after { background:var(--azur); } .pas.cur { width:48px; height:48px; font-size:var(--fs-chiffre); } .pas.cur::before { background:var(--or); } .pas.cur::after { inset:3px; background:linear-gradient(180deg, var(--azur-haut), var(--azur)); } .pas.chef:not(.done) { color:var(--braise-clair); } .pas.chef:not(.done)::before { background:var(--braise); } .pas.cur.chef::before { background:var(--or); } .pas.cur.chef { color:var(--ivoire); } .pas-fin { position:relative; z-index:1; width:30px; height:30px; display:grid; place-items:center; color:var(--ivoire); } .pas-fin .picon { width:28px; } /* rangée de bataille : Bataille seule, pleine largeur, 78 points, inclinée, arête d'or, tranche qui s'écrase à l'appui */ .battle-row { position:absolute; left:var(--gout-l); right:var(--gout-r); bottom:calc(var(--nav-h) + 12px); z-index:1; display:flex; } .battle-row .battle { flex:1; min-width:0; min-height:78px; gap:14px; justify-content:center; } .battle-row .battle > .picon { width:42px; } .battle-copy { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; } #home-battle-main { font:italic 900 var(--fs-cta-accueil)/.95 var(--f-titre); letter-spacing:.005em; white-space:nowrap; } #home-battle-sub { font:600 var(--fs-scene)/1 var(--f-texte); color:rgba(255,255,255,.92); white-space:nowrap; } /* rien ne bouge au repos : dix secondes après l'arrivée, UNE gerbe d'étincelles d'or part des bords de Bataille */ #home-battle .etincelles { left:auto; right:14px; top:50%; } #home-battle .etincelles > i { --duree:620ms; } .screen.home:not([hidden]) #home-battle .etincelles > i { animation:etincelle 620ms cubic-bezier(.15,.7,.3,1) calc(10s + var(--d, 0ms)) 1 both; } /* ================================================================ barre du bas (un seul élément, visible sur l'accueil et les menus pleins) */ /* D3 : plus de panneau ; quatre pictogrammes et leurs libellés sur un dégradé sombre du bas de l'écran ; la place en cours en azur */ #nav-rail { position:absolute; left:0; right:0; bottom:0; z-index:var(--z-barre); height:var(--nav-h); box-sizing:border-box; display:none; padding:0 calc(8px + var(--safe-r)) var(--safe-b) calc(8px + var(--safe-l)); background:linear-gradient(to top, rgba(14,10,7,.92), rgba(14,10,7,.7) 62%, rgba(14,10,7,0)); } #stage:has(> .screen[data-screen="home"]:not([hidden])) > #nav-rail, #stage:has(> .screen[data-screen="carte"]:not([hidden])) > #nav-rail, #stage:has(> .screen[data-screen="shop"]:not([hidden])) > #nav-rail, #stage:has(> .screen[data-screen="missions"]:not([hidden])) > #nav-rail, #stage:has(> .screen[data-screen="lore"]:not([hidden])) > #nav-rail, #stage:has(> .screen[data-screen="settings"]:not([hidden])) > #nav-rail { display:flex; } .nav button { position:relative; flex:1; min-width:0; height:var(--barre-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; box-sizing:border-box; color:var(--ivoire); } .nav button .picon { width:28px; } .nav .nav-lbl, .nav .lv { font:700 var(--fs-libelle)/1.1 var(--f-texte); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .nav button.on { color:var(--azur-clair); } .nav button.locked { color:var(--gris-2); } .nav button.locked .nav-lbl { display:none; } .nav .badge { right:calc(50% - 24px); top:4px; } .nav button:active .picon { transform:translateY(1px); } /* ================================================================ menus pleins (boutique, missions, chronique, paramètres ; la carte a sa section) */ /* D3 : un fond de suie chaude opaque dès la première image (OPAQUE_CAMP_SCREENS, src/main.js), éclairé d'une lueur de forge en haut ; l'en-tête posé dessus sans panneau (retour cerné d'or, titre en italique noir, bourses) ; UN panneau de suie à filet d'or (.menu-feuille) porte les signets et la liste ; les lignes sont séparées par des filets, jamais par des cartes. */ .screen.panel { background:radial-gradient(120% 48% at 50% 0%, #3A2A1A 0%, #231A12 45%, var(--encre) 80%); padding:calc(var(--safe-t) + 10px) 0 var(--nav-h); } .screen.panel > .head { flex:none; position:relative; z-index:2; min-height:56px; display:flex; align-items:center; gap:12px; box-sizing:border-box; padding:0 var(--gout-r) 12px var(--gout-l); } .head-titles { flex:1; min-width:0; display:flex; flex-direction:column; } .panel-title { font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); letter-spacing:0; color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .purse { flex:none; display:flex; flex-direction:row; align-items:center; gap:10px; } .purse > div, .purse.row, .purse-line { display:flex; align-items:center; gap:4px; height:32px; } .purse .picon { width:26px; } .purse .val { font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--ivoire); min-width:0; white-space:nowrap; text-shadow:var(--ombre-texte-scene); } /* le seul panneau : il descend derrière la barre du bas */ .menu-feuille { flex:1; min-height:0; display:flex; flex-direction:column; padding:30px var(--gout-r) 0 var(--gout-l); } .menu-feuille.panneau-d3::before { bottom:calc(-1 * var(--nav-h) - 48px); } /* la zone défile entre deux fondus (12 points en haut, 28 en bas), un masque, pas un filtre */ .scroll-area { flex:1; min-height:0; overflow:hidden auto; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 0 28px; display:flex; flex-direction:column; gap:0; scrollbar-width:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%); } .scroll-area::-webkit-scrollbar { display:none; } /* signets : des mots en italique posés sur le panneau, le sélectionné en ivoire souligné d'or (jamais une seconde plaque) */ [role="tablist"] { flex:none; display:flex; gap:18px; margin:0; padding:0 2px; border-bottom:1px solid var(--filet); } [role="tab"] { position:relative; flex:none; min-width:0; height:44px; box-sizing:border-box; padding:0 4px; display:flex; align-items:center; justify-content:center; font:700 var(--fs-lecture)/1 var(--f-texte); color:var(--gris); white-space:nowrap; } /* D : le signet choisi est souligné de cyan lumineux, le trait incliné comme les filets de la barre (pas de case pleine) */ [role="tab"][aria-selected="true"] { color:var(--blanc); font-weight:900; } [role="tab"][aria-selected="true"]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; transform:skewX(var(--biais)); background:#22B8FF; box-shadow:0 0 8px rgba(34,184,255,.7); pointer-events:none; } [role="tab"]:active { color:var(--ivoire); } /* intitulé de section : un libellé en italique, or, sans ornement */ .shop-h { flex:none; margin:10px 2px 2px; font:italic 700 var(--fs-scene)/1.2 var(--f-titre); color:var(--or); } .list { display:flex; flex-direction:column; gap:0; } /* boutique : une ligne par bonus (son pictogramme dans une tuile de suie, le nom en italique, le prix sur le bouton, M5) */ .shop-row, .mission { position:relative; } .shop-row { width:100%; box-sizing:border-box; min-height:96px; padding:14px 0; display:flex; align-items:center; gap:12px; text-align:left; color:var(--ivoire); } .shop-row + .shop-row, .mission + .mission, .list + .shop-h { border-top:1px solid var(--filet); } .shop-panel { display:flex; flex-direction:column; gap:0; } .mission .mission-emblem { width:56px; height:56px; box-sizing:border-box; padding:14px; border-radius:10px; background:rgba(45,36,27,.9); color:var(--ivoire); box-shadow:inset 0 0 0 1px var(--filet-or); -webkit-mask:none; mask:none; background-image:none; } .mission .mission-emblem::before { content:''; display:block; width:100%; height:100%; background:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat; } .mission .mission-emblem.pi-or::before { -webkit-mask:none; mask:none; background:var(--img-or) center / contain no-repeat; } .shop-row .col { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .shop-row .name { font:italic 900 var(--fs-titre)/1.05 var(--f-titre); color:var(--ivoire); } .shop-row .desc { font:500 var(--fs-libelle)/1.35 var(--f-texte); color:var(--gris); } .shop-row .right { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .shop-row .tag { font:italic 700 var(--fs-libelle)/1.1 var(--f-titre); color:var(--gris); text-align:right; } .shop-row .tag:empty { display:none; } .shop-row .tag.owned { color:var(--azur-clair); } .shop-row .price { min-width:80px; height:46px; display:flex; align-items:center; justify-content:center; gap:4px; box-sizing:border-box; padding:0 12px 0 8px; border-radius:10px; background:linear-gradient(180deg, var(--azur-haut), var(--azur)); color:var(--blanc); box-shadow:var(--arete-or), 0 4px 0 var(--azur-tranche); font:italic 900 var(--fs-chiffre)/1 var(--f-titre); white-space:nowrap; } .shop-row .price .picon { width:24px; } .shop-row:active .price { background:var(--azur-appui); transform:translateY(3px); box-shadow:var(--arete-or), 0 1px 0 var(--azur-tranche); } .shop-row.locked { opacity:.62; } .shop-row.locked .price { display:none; } .shop-row.locked { flex-wrap:wrap; row-gap:2px; } .shop-row.locked .right { order:3; flex:1 0 100%; align-items:flex-start; padding-left:68px; } .shop-row.locked .tag { display:block; font:italic 700 var(--fs-libelle)/1.2 var(--f-titre); color:var(--gris); text-align:left; white-space:nowrap; } /* missions : la ligne, sa jauge (azur à front d'or) et le gain à réclamer (or) ; faite, une coche */ .mission { min-height:84px; padding:12px 0; display:flex; align-items:center; gap:12px; color:var(--ivoire); } .mission .col { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .mission .name { font:italic 900 var(--fs-chiffre)/1.1 var(--f-titre); color:var(--ivoire); } .mission-featured .name { font-size:var(--fs-titre); } .mission .desc { font:500 var(--fs-libelle)/1.35 var(--f-texte); color:var(--gris); } .mission .bar { position:relative; display:block; height:8px; border-radius:4px; background:rgba(14,10,7,.62); box-shadow:inset 0 0 0 1px rgba(243,235,221,.14); overflow:hidden; } .mission .bar i { position:absolute; left:0; top:0; bottom:0; width:0; max-width:100%; border-radius:inherit; background:linear-gradient(90deg, var(--azur) calc(100% - 4px), var(--or) calc(100% - 4px)); } .mission .objective { display:flex; align-items:center; gap:6px; } .mission .objective .picon { width:18px; color:var(--gris); } .mission .objective .desc { flex:1; min-width:0; } .mission .prog { font:italic 900 var(--fs-scene)/1 var(--f-titre); color:var(--ivoire); } .mission .claim { flex:none; min-width:84px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:4px; box-sizing:border-box; padding:0 12px 0 8px; border-radius:10px; background:linear-gradient(180deg, var(--or-clair), var(--or) 60%); color:var(--or-texte); box-shadow:0 4px 0 var(--or-tranche); font:italic 900 var(--fs-chiffre)/1 var(--f-titre); white-space:nowrap; } .mission .claim .picon { width:24px; } .mission .claim .pi-reclamer { color:var(--or-texte); } .mission .claim:disabled { background:transparent; box-shadow:inset 0 0 0 1px var(--filet-fort); color:var(--ivoire); cursor:default; } .mission .claim.done { box-shadow:none; color:var(--gris); font:italic 700 var(--fs-scene)/1 var(--f-titre); } .mission .claim:not(:disabled):active { background:var(--or-appui); transform:translateY(3px); box-shadow:0 1px 0 var(--or-tranche); } .am-status-text + .am-status-check { width:18px; margin-left:2px; color:var(--or); } /* chronique : l'en-tête (rang, acte, progression), puis le récit, les hauts faits et le registre, séparés par des filets */ .chron { position:relative; padding:14px 2px; color:var(--ivoire); } .chron h3 { margin:0 0 8px; font:italic 900 var(--fs-titre)/1.1 var(--f-titre); color:var(--ivoire); } .chron ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .chron li { position:relative; padding-left:16px; font:500 var(--fs-libelle)/1.45 var(--f-texte); color:var(--ivoire); } .chron li::before { content:''; position:absolute; left:2px; top:.5em; width:7px; height:7px; transform:rotate(45deg); background:var(--or); } .chron li.more { color:var(--gris); font-style:italic; } .chron .meta { font:500 var(--fs-libelle)/1.4 var(--f-texte); color:var(--gris); white-space:pre-line; } .chron.head { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; row-gap:4px; align-items:center; padding:10px 2px 14px; border-bottom:1px solid var(--filet); } .chron.head .chron-banner { display:none; } .chron.head h3 { margin:0; font-size:var(--fs-titre-grand); color:var(--ivoire); } .chron.head .meta { grid-column:1; } .chron.head .chron-prog { grid-row:1 / span 2; grid-column:2; display:flex; flex-direction:column; align-items:center; gap:3px; padding-left:14px; border-left:1px solid var(--filet); } .chron-prog .lbl { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--gris); } .chron-prog strong { font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--or); } .chron-page { display:flex; flex-direction:column; gap:18px; padding:16px 2px 8px; } .chron-page .chron { padding:0; } .chron-page > .chron { padding-top:16px; border-top:1px solid var(--filet); } .chron-seneschal .meta { white-space:normal; } .lore-text { display:flex; flex-direction:column; gap:18px; } .lore-entry { position:relative; color:var(--ivoire); } .lore-entry + .lore-entry { padding-top:16px; border-top:1px solid var(--filet); } .lore-entry h3 { margin:0 0 8px; font:italic 900 var(--fs-titre)/1.1 var(--f-titre); color:var(--ivoire); } .lore-entry p { margin:0 0 10px; font:500 var(--fs-lecture)/1.5 var(--f-texte); color:rgba(243,235,221,.92); } .lore-entry p:last-child { margin-bottom:0; } .lore-entry b { color:var(--ivoire); font-weight:700; } .lore-entry .lore-entry-visual, .lore-entry .lore-entry-seal { display:none; } /* paramètres : des groupes séparés par un intitulé d'or, une ligne par réglage, l'interrupteur azur à front d'or */ [data-screen="settings"] .scroll-area { gap:6px; } [data-screen="lore"] .scroll-area { padding-bottom:56px; } .option-line { position:relative; width:100%; min-height:56px; display:flex; align-items:center; gap:12px; padding:4px 0; box-sizing:border-box; text-align:left; color:var(--ivoire); font:700 var(--fs-lecture)/1.2 var(--f-texte); } .option-line + .option-line { border-top:1px solid var(--filet); } .option-line > span:not(.picon) { flex:1; min-width:0; } .option-line .picon { width:22px; color:var(--gris); } .option-line i { position:relative; flex:none; width:48px; height:28px; box-sizing:border-box; border-radius:14px; background:rgba(45,36,27,.95); box-shadow:inset 0 0 0 1px var(--filet-fort); transition:background var(--t-apparition); } .option-line i::after { content:''; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:var(--ivoire); box-shadow:0 1px 3px rgba(8,6,4,.5); transition:transform var(--t-apparition) var(--courbe); } .option-line i { background:#0B1D31; box-shadow:inset 0 0 0 1.5px #3A5A78; } .option-line.on i { background:#0879F8; box-shadow:inset 0 0 0 1.5px #22B8FF, 0 0 8px rgba(34,184,255,.45); } .option-line.on i::after { transform:translateX(20px); background:var(--blanc); } .option-line small { flex:none; width:74px; text-align:right; font:600 var(--fs-libelle)/1.1 var(--f-texte); color:var(--gris); } .option-line:active { background:rgba(243,235,221,.05); } #set-guide i { display:none; } #set-guide small { width:auto; } /* « Revoir » : le secondaire D en format compact (40 points), incliné, sans or */ #set-guide small.action { position:relative; isolation:isolate; min-height:40px; margin-bottom:4px; padding:0 16px; display:flex; align-items:center; box-sizing:border-box; font:italic 800 var(--fs-scene)/1 var(--f-titre); color:var(--blanc); transition:transform var(--t-appui) var(--courbe); } #set-guide small.action::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(180deg, #0B2C5C, #04173A); box-shadow:inset 0 2px 0 #57D7FF, inset 0 0 0 1px #33BFFF, 0 4px 0 #00305F; } #set-guide:active small.action { transform:translateY(3px); } #set-guide:active small.action::before { box-shadow:inset 0 2px 0 #57D7FF, inset 0 0 0 1px #33BFFF, 0 1px 0 #00305F; } /* ================================================================ carte de campagne (D3, maquette AM-VIS-UI-215 D3 v02) */ /* La peinture occupe l'écran ; l'en-tête est posé dessus (retour, région en italique noir, territoires repris) ; le chemin dans l'ordre : repris (losange de suie cerné d'or, coché d'or), en cours (le heaume du joueur dans un losange azur cerné d'or, son nom), le coffre de la prochaine récompense (seul reflet d'or), le chef nommé (losange cerné de braise, la tête d'orc, son nom et son niveau), à venir (pierres de suie) ; le trait d'or plein jusqu'au joueur, puis un pointillé ivoire. UN panneau de suie en pied : le territoire, ses trois niveaux, Bataille. */ .screen.panel.carte-screen { padding:0 0 var(--nav-h); background:var(--encre); } .screen.panel.carte-screen > .head { position:absolute; left:0; right:0; top:0; z-index:3; min-height:0; padding:calc(var(--safe-t) + 10px) var(--gout-r) 26px var(--gout-l); border-radius:0; background:var(--voile-haut); box-shadow:none; } .carte-screen .panel-title { font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); text-shadow:var(--ombre-texte-scene); } /* repli mesuré (hud.ajuste) : « Clan Langue-de-Cendre » passe à 24 points, puis à 20 sur deux lignes */ .carte-screen .panel-title.long { font-size:var(--fs-titre); } .carte-screen .panel-title.tres-long { font-size:var(--fs-etape); white-space:normal; line-height:1.05; text-wrap:balance; } .carte-compte { flex:none; display:flex; align-items:baseline; gap:5px; } .carte-compte .val { font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .carte-comptes { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .carte-etoiles { flex:none; display:flex; align-items:center; gap:5px; } .carte-etoiles .etoile-mini { width:18px; height:18px; } .carte-etoiles .val { font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--or-clair); white-space:nowrap; text-shadow:0 2px 3px var(--suie), 0 2px 10px rgba(12,8,4,.7); } .carte-etoiles > small { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:0 2px 3px var(--suie); } .carte-compte > small { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .map { position:relative; } /* 28 septembre 2026 (retour 5, « agrandis la carte, espace les points ») : la carte intérieure fait 1,3 fois la largeur de l'écran, recadrée au centre (les bords ne portent que brume et forêt sombre) ; seul le défilement vertical existe. Le haut de la boîte laisse passer le château sous l'en-tête posé sur la carte. Les étiquettes se mesurent sur la fenêtre (50cqw). */ .map--screen { flex:1; min-height:0; margin:0; overflow:hidden auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-width:none; background:var(--encre); container-type:inline-size; padding-top:calc(var(--safe-t) + 62px); } .map--screen::-webkit-scrollbar { display:none; } .map-inner { --carte-k:1.3; position:relative; width:calc(var(--carte-k) * 100%); margin-left:calc((1 - var(--carte-k)) * 50%); aspect-ratio:930 / 1692; background:var(--carte-fond, none) top center / 100% 100% no-repeat; } .map-inner::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(22,17,12,.22), rgba(22,17,12,0) 26%, rgba(22,17,12,0) 74%, rgba(22,17,12,.22)); } .map-route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } /* le chemin, en px du fond (échelle uniforme, ×0,50 à 360, ×0,60 à 430) : socle sombre, pointillé blanc du futur (points ronds), halo large du parcouru (il remplace l'ancien drop-shadow), trait bleu électrique et son reflet clair, comme D */ #carte-route-back { stroke:#031225; stroke-opacity:.6; stroke-width:16; } #carte-route-open { stroke:#F7FBFF; stroke-opacity:.92; stroke-width:8; stroke-dasharray:.1 17; } #carte-route-lueur { stroke:#21ADFF; stroke-opacity:.32; stroke-width:22; } #carte-route-done { stroke:url(#carte-route-azur); stroke-width:10; } #carte-route-reflet { stroke:#C9F2FF; stroke-opacity:.8; stroke-width:3; } .map.ash #carte-route-lueur { stroke:#E0673A; } .map.ash #carte-route-done { stroke:url(#carte-route-braise); } .map.ash #carte-route-reflet { stroke:#F08A62; } /* les embranchements des sites bonus ouverts : un pointillé cyan ; gagné, il s'efface à moitié */ .map-site-route { stroke:#63DDEB; stroke-opacity:.9; stroke-width:6; stroke-dasharray:.1 11; } .map-site-route.fait { stroke-opacity:.45; } .map-site-route.cache { display:none; } .map-brume { position:absolute; left:0; right:0; top:0; height:var(--brume, 0%); pointer-events:none; background:linear-gradient(180deg, rgba(22,17,12,.2), rgba(22,17,12,.14) calc(100% - 48px), rgba(22,17,12,0)); } .map-nodes, .map-sites { position:absolute; inset:0; pointer-events:none; } .map-node, .map-site { pointer-events:auto; } .map-node { position:absolute; width:48px; height:48px; transform:translate(-50%,-50%); display:grid; place-items:center; -webkit-tap-highlight-color:transparent; } .map-node-disc { position:relative; display:grid; place-items:center; box-sizing:border-box; border-radius:50%; } .map-node-disc::after { content:''; display:block; } /* à venir : une pierre de suie cernée d'ivoire */ .map-node.locked .map-node-disc { width:22px; height:22px; background:var(--encre); box-shadow:inset 0 0 0 2px var(--ivoire), var(--ombre-bouton); } /* repris : un losange de suie cerné d'or, coché d'or */ .map-node.done .map-node-disc { width:30px; height:30px; border-radius:5px; transform:rotate(45deg); background:var(--encre); box-shadow:inset 0 0 0 2px var(--or), var(--ombre-bouton); } .map-node.done .map-node-disc::after { width:16px; height:16px; transform:rotate(-45deg); background:var(--or); -webkit-mask:var(--ic-valider) center / contain no-repeat; mask:var(--ic-valider) center / contain no-repeat; } /* en cours : le heaume peint du joueur dans un losange azur cerné d'or */ .map-node.cur { z-index:2; } .map-node.cur .map-node-disc { width:52px; height:52px; border-radius:8px; transform:rotate(45deg); background:linear-gradient(135deg, var(--azur-haut), var(--azur) 60%, var(--azur-tranche)); box-shadow:inset 0 0 0 2.5px var(--or), 0 0 16px rgba(232,182,76,.45), var(--ombre-bouton); } .map-node.cur .map-node-disc::after { width:46px; height:46px; margin-top:0; transform:rotate(-45deg); background:var(--img-heaume) center / contain no-repeat; } /* le prochain chef nommé : un losange de suie cerné de braise, la tête d'orc ; en cours, elle se pose en coin du heaume */ .map-node.boss.locked .map-node-disc { width:40px; height:40px; border-radius:6px; transform:rotate(45deg); background:var(--encre); box-shadow:inset 0 0 0 2px var(--braise), var(--ombre-bouton); } .map-node.boss.locked .map-node-disc::after { width:26px; height:26px; transform:rotate(-45deg); background:var(--braise); -webkit-mask:var(--ic-orc) center / contain no-repeat; mask:var(--ic-orc) center / contain no-repeat; } .map-node.boss.cur::after { content:''; position:absolute; right:-14px; top:-14px; width:26px; height:26px; pointer-events:none; background:var(--braise); -webkit-mask:var(--ic-orc) center / contain no-repeat; mask:var(--ic-orc) center / contain no-repeat; } /* la récompense qui attend : son pictogramme en or (le coffre, la pièce du Comptoir…), le seul reflet d'or de la carte */ .map-node.recompense.locked .map-node-disc { width:36px; height:36px; background:none; box-shadow:0 0 10px 2px rgba(232,182,76,.5); } .map-node.recompense.locked .map-node-disc::after { display:none; } .map-node-disc > .picon { width:32px; color:var(--or); } /* un seul nom à la fois : le nœud en cours, le nœud touché, le chef nommé ; une étiquette de suie, à droite du nœud (à gauche près du bord) */ .map-node-label { --ecart:26px; --ecart-v:22px; display:none; position:absolute; left:calc(50% + var(--ecart)); top:50%; transform:translateY(-50%); min-height:30px; padding:4px 12px; align-items:center; box-sizing:border-box; width:max-content; max-width:calc(50cqw - 38px); border-radius:8px; background:rgba(22,17,12,.86); box-shadow:var(--ombre-bouton); font:italic 900 var(--fs-scene)/1.1 var(--f-titre); color:var(--ivoire); text-wrap:balance; pointer-events:none; } .map-node-label small { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--gris); white-space:nowrap; } .carte-screen .carte-compte .val, .carte-screen .panel-title, .map-node-label { text-shadow:0 2px 3px var(--suie), 0 2px 10px rgba(12,8,4,.7); } /* le côté est choisi à l'écran (hud.js placeEtiquettes) : à droite, à gauche, dessous ou dessus, là où l'étiquette tient sans couvrir un autre nœud ni un sceau */ .map-node-label[data-cote="gauche"] { left:auto; right:calc(50% + var(--ecart)); } .map-node-label.hors-zone { visibility:hidden; } .map-node-label[data-cote="dessous"] { left:50%; top:calc(50% + var(--ecart-v)); transform:translateX(-50%); } .map-node-label[data-cote="dessus"] { left:50%; top:auto; bottom:calc(50% + var(--ecart-v)); transform:translateX(-50%); } /* dessous ou dessus, décalée : l'étiquette part du centre du nœud vers la gauche (-g) ou vers la droite (-d) */ .map-node-label:is([data-cote="dessous-g"], [data-cote="dessous-d"]) { top:calc(50% + var(--ecart-v)); transform:none; } .map-node-label:is([data-cote="dessus-g"], [data-cote="dessus-d"]) { top:auto; bottom:calc(50% + var(--ecart-v)); transform:none; } .map-node-label:is([data-cote="dessous-g"], [data-cote="dessus-g"]) { left:auto; right:calc(50% - 24px); } .map-node-label:is([data-cote="dessous-d"], [data-cote="dessus-d"]) { left:calc(50% - 24px); } /* le heaume : un losange de 52 px tourné, pointe à 36,8 px du centre ; l'étiquette part de 37 px */ .map-node.cur .map-node-label { --ecart:37px; --ecart-v:39px; display:flex; max-width:calc(50cqw - 50px); padding:4px 10px; font-size:var(--fs-scene); min-height:34px; } .map-node.sel .map-node-label { display:flex; z-index:3; } .map-node.chef-nomme .map-node-label { --ecart:30px; --ecart-v:28px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .map-node.sel.locked .map-node-disc { box-shadow:inset 0 0 0 2px var(--ivoire), 0 0 0 3px rgba(243,235,221,.3); } /* R13-B (3) : les étoiles d'un territoire repris, sous son losange */ .map-node-etoiles { position:absolute; left:50%; top:calc(50% + 18px); transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 1px 2px rgba(12,8,4,.9)); } .map-node-etoiles > i { width:11px; height:11px; } .map-node:focus-visible { outline:2px solid var(--or-clair); outline-offset:0; border-radius:50%; } .map.ash .map-inner { background-color:#2A1E1C; } /* le panneau de pied : le territoire et ses trois niveaux, puis Bataille ; le panneau descend derrière la barre du bas */ .carte-bas { flex:none; z-index:2; margin-top:-26px; padding:16px var(--gout-r) 6px var(--gout-l); display:flex; flex-direction:column; gap:8px; } .carte-bas.panneau-d3::before { bottom:calc(-1 * var(--nav-h) - 48px); } .map-sheet { position:relative; display:flex; flex-direction:column; gap:8px; } .map-sheet-top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .map-sheet-name { min-width:0; font:italic 900 var(--fs-titre)/1.05 var(--f-titre); color:var(--ivoire); text-wrap:balance; } .carte-cta-row { flex:none; display:flex; margin:2px 0 0; } .carte-cta-row .map-sheet-cta { flex:1; min-height:70px; gap:12px; } /* R13-B (3) : la fiche d'un territoire repris : ses étoiles, ce qui manque, « Rejouer » à côté de Bataille (qui garde la marche) */ .map-maitrise { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; margin-top:-2px; } .map-maitrise .etoiles-mini > i { width:18px; height:18px; } .map-maitrise-copy { flex:1; min-width:0; font:italic 700 var(--fs-scene)/1.1 var(--f-titre); color:var(--ivoire); white-space:nowrap; } .map-maitrise-copy.long { font-size:var(--fs-libelle); } .map-maitrise-copy.tres-long { white-space:normal; text-wrap:balance; } .carte-cta-row { gap:10px; } .carte-rejouer { flex:none; width:auto; min-width:104px; min-height:60px; margin:0 0 6px 4px; padding:0 14px; gap:4px; flex-direction:column; justify-content:center; } .carte-rejouer .picon { width:24px; } .carte-rejouer strong { font:italic 900 var(--fs-titre)/1 var(--f-titre); } .carte-cta-row .map-sheet-cta.avec-rejeu .battle-copy strong { font-size:var(--fs-titre-grand); } .carte-cta-row .map-sheet-cta > .picon { width:38px; } .carte-cta-row .battle-copy strong { font:italic 900 40px/.9 var(--f-titre); } .carte-cta-row .battle-copy small { font:italic 700 15px/1 var(--f-titre); color:rgba(255,255,255,.92); } /* ================================================================ bâtiment (moitié haute : la Cité zoomée ; en pied : le seul panneau de suie) */ /* D3 (maquette AM-VIS-UI-216 D3) : l'or posé sur la scène (la dépense du dernier achat en braise dessous) ; le panneau porte le nom et le niveau, la statistique et son effet qui monte (« +24 % » vers « +36 % », le chiffre héros en or, la seule lueur), les crans du stade peint, la marche de la Cité, puis « Améliorer » et son prix (M5). */ .screen.building { padding:calc(var(--safe-t) + 10px) 0 0; gap:0; } .building-top { flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:0 var(--gout-r) 0 var(--gout-l); position:relative; z-index:1; } .building-resources { display:flex; flex-direction:column; align-items:flex-end; gap:0; } .building-resources .val { text-align:right; } .building-depense { margin-top:-4px; font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--braise-clair); text-shadow:var(--ombre-texte-scene); } /* Fenêtre de l'intérieur : R4 y pose son illustration par --interieur (url) ; sinon la Cité zoomée (batiment:) se voit au travers */ .building-interieur { flex:1 1 0; min-height:110px; position:relative; } .building-interieur::before { content:''; position:absolute; inset:0; background:var(--interieur, none) center / cover no-repeat; } .building-sheet { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px; box-sizing:border-box; padding:12px var(--gout-r) calc(var(--safe-b) + 12px) var(--gout-l); } .building-heading { flex:none; display:flex; align-items:baseline; gap:14px; } .building-heading .panel-title { font:italic 900 40px/.95 var(--f-titre); color:var(--ivoire); white-space:nowrap; } .building-level { flex:none; font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--or); white-space:nowrap; } .building-scroll { flex:1 1 auto; min-height:0; overflow:hidden auto; display:flex; flex-direction:column; gap:10px; scrollbar-width:none; } .building-scroll::-webkit-scrollbar { display:none; } .building-hero { flex:none; display:flex; flex-direction:column; gap:6px; color:var(--ivoire); } .building-copy { display:flex; flex-direction:column; gap:2px; } .building-copy .stat { font:700 var(--fs-scene)/1.15 var(--f-texte); color:var(--ivoire); } .building-effet { position:relative; display:flex; align-items:center; gap:10px; min-height:60px; } .effet-avant { flex:none; font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--gris); white-space:nowrap; } .effet-fleche { flex:none; position:relative; width:52px; height:4px; border-radius:2px; background:var(--or); } .effet-fleche::after { content:''; position:absolute; right:-4px; top:-7px; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:12px solid var(--or); } .effet-apres { flex:1 1 auto; min-width:0; font:italic 900 72px/1 var(--f-titre); color:var(--or); white-space:nowrap; text-shadow:var(--lueur-gain); } .effet-apres.frappe { animation:frappe 200ms var(--courbe) both; transform-origin:30% 60%; } .building-effet.max .effet-avant, .building-effet.max .effet-fleche { display:none; } .building-effet .etincelles { left:70%; } .building-copy .desc { font:600 var(--fs-scene)/1.3 var(--f-texte); color:var(--ivoire); } .building-copy .stat-line { display:block; margin-top:3px; font:600 var(--fs-libelle)/1.3 var(--f-texte); color:var(--azur-clair); } .building-epoque { flex:none; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:7px; border-top:1px solid var(--filet); font:600 var(--fs-libelle)/1.2 var(--f-texte); color:var(--ivoire); } .building-epoque b { font-weight:900; color:var(--ivoire); white-space:nowrap; } .building-ban { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .building-ban .ban-caption { display:none; } .building-ban button { flex:1; min-width:0; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-sizing:border-box; padding:4px 3px; border-radius:10px; background:rgba(45,36,27,.7); box-shadow:inset 0 0 0 1px var(--filet); font:italic 700 var(--fs-scene)/1 var(--f-titre); color:var(--ivoire); } .building-ban button .picon { width:20px; color:var(--gris); } .building-ban button > span:not(.picon) { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .building-ban button.on { box-shadow:inset 0 0 0 2px var(--or); } .building-ban button.on .picon { color:var(--or); } .building-ban button.locked, .ban-row button.locked { opacity:.62; } .building-ban button.locked .picon { color:var(--gris); } .building-ban button .unlock-at { display:block; font:700 var(--fs-legende)/1 var(--f-texte); color:var(--or-clair); } .building-champion-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .building-champion-mode button { min-width:0; min-height:54px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; padding:5px 7px; background:rgba(45,36,27,.7); box-shadow:inset 0 0 0 1px var(--filet); color:var(--ivoire); } .building-champion-mode button .picon { flex:none; width:20px; } .building-champion-mode button span:last-child { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .building-champion-mode button b { font:italic 800 var(--fs-scene)/1 var(--f-titre); } .building-champion-mode button small { font:600 var(--fs-legende)/1.1 var(--f-texte); color:var(--gris); text-align:left; } .building-champion-mode button.on { box-shadow:inset 0 0 0 2px var(--or); } .building-champion-mode button:disabled { opacity:.6; } .building-actions { flex:none; display:flex; gap:8px; align-items:flex-end; } .building-actions > button { flex:1; min-width:0; } .building-actions .building-buy { flex:1.7; min-height:58px; justify-content:space-between; padding:0 16px 0 22px; } .building-buy .cmd-main { font:italic 900 var(--fs-cta)/1 var(--f-titre); } .building-buy .price { display:flex; align-items:center; gap:4px; white-space:nowrap; font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--blanc); } .building-buy .price .picon { width:30px; } .building-secondary { min-height:52px; font-size:var(--fs-scene); padding:0 10px; gap:6px; margin-bottom:5px; } .building-secondary .picon { width:20px; } /* ================================================================ résultats (victoire, défaite) : posés sur la scène vivante */ /* D3 : le titre, les chiffres et les actions se posent sur la scène vivante (R2-1), détachés par des ombres chaudes ; la victoire a UN panneau de suie en pied (la marche, la vidéo, Continuer, la Cité), la défaite AUCUN (un dégradé de suie). */ .screen.outcome { justify-content:safe flex-end; align-items:center; overflow:hidden auto; touch-action:pan-y; overscroll-behavior:contain; scrollbar-width:none; padding:0 var(--gout-r) calc(max(14px, var(--safe-b) + 10px)) var(--gout-l); } .screen.outcome::-webkit-scrollbar { display:none; } .outcome-veil { position:absolute; left:0; right:0; bottom:0; height:80%; background:var(--voile-bas); pointer-events:none; } .outcome-victory .outcome-veil { height:62%; background:linear-gradient(to top, rgba(14,10,7,.7), rgba(14,10,7,.34) 55%, rgba(14,10,7,0)); } .result-panel { position:relative; flex:none; width:100%; max-width:380px; box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch; } .result-body { display:flex; flex-direction:column; align-items:stretch; gap:10px; } .result-heading { margin:0; text-align:center; font:italic 900 var(--fs-resultat)/.92 var(--f-titre); letter-spacing:0; color:var(--ivoire); text-shadow:var(--ombre-chiffre); } .result-copy { margin:0; text-align:center; font:600 var(--fs-scene)/1.25 var(--f-texte); color:var(--ivoire); text-wrap:balance; text-shadow:var(--ombre-texte-scene); } /* ---------- victoire */ .won-haut { position:absolute; left:var(--gout-l); right:var(--gout-r); top:calc(var(--safe-t) + 12px); z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; pointer-events:none; } .won-haut .serie { align-items:flex-start; } .won-total { gap:6px; } .won-total > .picon { width:34px; } .won-total .val { font-size:var(--fs-titre-grand); color:var(--or); } .won-total.tinte > .picon { animation:tinte 320ms var(--courbe) both; } .won-scene { display:flex; flex-direction:column; align-items:center; gap:6px; padding-bottom:20px; } .won-scene .result-heading { transform:rotate(-4deg); margin-bottom:2px; } .won-scene .result-copy { margin-top:-4px; } /* le bonus d'adresse : la réglette ×1 à ×1,5, six graduations, le curseur d'or qui va et vient ; tout le bloc est la cible */ /* R13-B (2) : la fente sous le lieu porte à la même place les lignes du butin, puis le curseur d'adresse (les deux dans la même cellule de grille : la hauteur ne bouge pas quand l'un cède la place à l'autre) */ .won-fente { display:grid; width:100%; } .won-fente > * { grid-area:1 / 1; transition:opacity 200ms var(--courbe), visibility 0s linear 0s; } .won-fente > .off { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 160ms var(--courbe), visibility 0s linear 160ms; } .won-sources { align-self:center; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:6px 18px; padding:4px 0; min-width:0; } .source { display:flex; align-items:baseline; gap:6px; opacity:0; transform:translateY(8px); white-space:nowrap; } .source.on { opacity:1; transform:none; transition:opacity 180ms var(--courbe), transform 260ms var(--courbe); } .source-lbl { font:italic 700 var(--fs-scene)/1 var(--f-titre); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .source-n { font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--or); font-variant-numeric:tabular-nums; text-shadow:var(--ombre-texte-scene); } .source.on .source-n { animation:frappe 220ms var(--courbe) both; } .won-record { margin:-2px 0 0; display:flex; align-items:baseline; gap:6px; transform:rotate(var(--pente)); white-space:nowrap; font:italic 700 var(--fs-lecture)/1 var(--f-titre); color:var(--gris); text-shadow:var(--ombre-texte-scene); } .won-record b { font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--ivoire); } .won-record.battu { color:var(--or); } .won-record.battu b { color:var(--or-clair); } .gain.vide { visibility:hidden; } /* R13-B (4) : le coffre du territoire, posé sur la scène dans la fente (aucune plaque) : l'image du coffre, son nom, son contenu FIXE (pièce, gemme, pictogramme de l'ouverture), UN appui l'ouvre ; ouvert, un anneau d'or et une gerbe partent, l'or vole vers la bourse. Toute la tuile est la cible (96 points de haut). */ .won-coffre { align-self:center; justify-self:center; display:flex; align-items:center; gap:8px; min-height:96px; max-width:100%; padding:2px 6px; box-sizing:border-box; background:none; border:0; color:var(--ivoire); cursor:pointer; -webkit-tap-highlight-color:transparent; } .won-coffre:disabled { cursor:default; } .won-coffre:focus-visible { outline:2px solid var(--or-clair); outline-offset:2px; border-radius:var(--r-bouton); } .coffre-boite { position:relative; flex:none; width:96px; height:96px; display:grid; place-items:center; isolation:isolate; } /* le coffre peint par GPT-6 Sol (lot 2026-09-26_coffre_r13b, trois états au même cadre, 96 points) ; les trois images sont demandées dès que le coffre paraît (calque ::before), aucun état ne clignote à son premier affichage */ .coffre-img { display:block; width:96px; height:96px; background:url(epure/AM-UIK-120_Coffre_Territoire_Ferme_D3@3x.webp) center / contain no-repeat; filter:drop-shadow(0 4px 3px rgba(12,8,4,.65)); transform-origin:50% 85%; } .coffre-img[data-etat="entrouvert"] { background-image:url(epure/AM-UIK-120_Coffre_Territoire_Entrouvert_D3@3x.webp); filter:drop-shadow(0 0 10px rgba(246,211,126,.55)) drop-shadow(0 4px 3px rgba(12,8,4,.65)); } .coffre-img[data-etat="ouvert"] { background-image:url(epure/AM-UIK-120_Coffre_Territoire_Ouvert_D3@3x.webp); filter:drop-shadow(0 0 14px rgba(246,211,126,.7)) drop-shadow(0 4px 3px rgba(12,8,4,.6)); } .coffre-boite::before { content:''; position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; background:url(epure/AM-UIK-120_Coffre_Territoire_Entrouvert_D3@3x.webp), url(epure/AM-UIK-120_Coffre_Territoire_Ouvert_D3@3x.webp); } .coffre-anneau { position:absolute; left:50%; top:50%; width:100px; height:100px; border-radius:50%; pointer-events:none; opacity:0; box-shadow:0 0 0 4px var(--or-clair), 0 0 20px 6px rgba(232,182,76,.7); transform:translate(-50%,-50%) scale(.55); } .won-coffre.ouvert .coffre-anneau { animation:anneauOr 520ms cubic-bezier(.2,.7,.3,1) both; } /* R13-B2 (jugement de Sol) : la troisième tape se distingue de l'entrouvert : le coffre GRANDIT un instant (×1,34, puis se repose), un éclat d'or rayonne derrière lui et la gerbe part plus large et plus longue */ .won-coffre.ouvert .coffre-img { animation:coffreOuvre 560ms var(--courbe) both; } .coffre-boite::after { content:''; position:absolute; left:50%; top:46%; width:230px; height:230px; margin:-115px 0 0 -115px; border-radius:50%; pointer-events:none; opacity:0; z-index:-1; background:radial-gradient(closest-side, rgba(255,238,184,1), rgba(250,218,138,.85) 44%, rgba(240,190,90,.4) 70%, rgba(232,182,76,0)); } .won-coffre.ouvert .coffre-boite::after { animation:eclatOr 720ms cubic-bezier(.2,.7,.3,1) both; } .won-coffre.ouvert .etincelles { --duree:820ms; transform:scale(1.55); } .won-coffre .etincelles { --duree:620ms; } .won-coffre .etincelles > i { width:5px; height:22px; top:-11px; } .coffre-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; } .coffre-nom { font:italic 900 var(--fs-titre)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .coffre-contenu { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; } .coffre-part { display:flex; align-items:center; gap:4px; white-space:nowrap; } .coffre-part .picon { width:22px; color:var(--or); } .coffre-part b { font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:var(--or); text-shadow:var(--ombre-texte-scene); } .coffre-part:last-child b { font-size:var(--fs-scene); color:var(--ivoire); } .coffre-part:first-child:last-child b, .coffre-part:nth-child(2):last-child b { font-size:var(--fs-chiffre); color:var(--or); } .coffre-aide { display:flex; align-items:center; gap:8px; font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; text-shadow:var(--ombre-texte-scene); } .won-coffre.ouvert .coffre-aide { color:var(--or); } .won-bourses { display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .won-gemmes > .picon { width:28px; } .won-gemmes .val { font-size:var(--fs-titre); color:var(--ivoire); } .won-gemmes.tinte > .picon { animation:tinte 320ms var(--courbe) both; } /* R13-B (3) : les étoiles de maîtrise de la victoire, posées sur la scène au-dessus du titre ; chaque étoile tombe (échelle 1,6 vers 1) à son instant ; gagnée : or plein ; manquée : en creux (ivoire cernant la suie) ; neuve : une gerbe d'étincelles */ .won-etoiles { display:flex; justify-content:center; align-items:flex-start; gap:8px; margin-bottom:2px; } .etoile { position:relative; min-width:92px; display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0; } .etoile.on { opacity:1; animation:etoileTombe 300ms var(--courbe) both; } .etoile-forme { position:relative; width:40px; height:40px; display:block; } .etoile-forme::before, .etoile-forme::after { content:''; position:absolute; -webkit-mask:var(--ic-etoile) center / contain no-repeat; mask:var(--ic-etoile) center / contain no-repeat; } .etoile-forme::before { inset:0; background:var(--ivoire); filter:drop-shadow(0 2px 3px rgba(12,8,4,.7)); } .etoile-forme::after { inset:4px; background:var(--suie); } .etoile.gagnee .etoile-forme::before { background:var(--or-clair); filter:drop-shadow(0 0 8px rgba(232,182,76,.6)) drop-shadow(0 2px 2px rgba(12,8,4,.6)); } .etoile.gagnee .etoile-forme::after { inset:3px; background:linear-gradient(160deg, #FFF1C8, var(--or-clair) 30%, var(--or) 62%, var(--or-tranche)); } /* R13-B2 (jugement de Sol) : le trait lumineux du rail du portail passait sous les libellés ; une ombre chaude, ovale et douce (pas une plaque : elle s'éteint sur ses bords) l'interrompt derrière chaque libellé, et l'ombre du texte se renforce */ .etoile small { max-width:100%; box-sizing:border-box; padding:3px 12px 4px; border-radius:999px; font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--gris); white-space:nowrap; background:radial-gradient(closest-side, rgba(24,14,6,.88), rgba(24,14,6,.78) 70%, rgba(24,14,6,0)); text-shadow:0 1px 0 rgba(12,8,4,.9), 0 0 6px rgba(40,20,6,.95), var(--ombre-texte-scene); } .etoile.gagnee small { color:var(--ivoire); } .etoile.neuve::after { content:''; position:absolute; left:50%; top:18px; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; pointer-events:none; box-shadow:0 0 0 3px var(--or), 0 0 16px 3px rgba(232,182,76,.55); animation:anneauOr 420ms cubic-bezier(.2,.7,.3,1) 120ms both; } /* les petites étoiles de la carte : sous un nœud repris, dans le compte de l'en-tête, sur la fiche d'un territoire repris */ .etoiles-mini { display:flex; gap:2px; } .etoiles-mini > i, .etoile-mini { display:block; flex:none; width:12px; height:12px; background:rgba(243,235,221,.55); -webkit-mask:var(--ic-etoile) center / contain no-repeat; mask:var(--ic-etoile) center / contain no-repeat; } .etoiles-mini > i.on, .etoile-mini.on { background:var(--or-clair); } /* le gain : la pièce et le chiffre en très grand, en or, la seule lueur de l'écran ; il compte, puis éclate en étincelles de forge */ .gain { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:80px; margin-top:4px; } .gain-piece { width:66px; } .gain-n { font:italic 900 var(--fs-gain)/1 var(--f-titre); color:var(--or); text-shadow:var(--lueur-gain); } .gain.tinte .gain-piece { animation:tinte 320ms var(--courbe) both; } .gain .etincelles { --duree:560ms; } .gain .etincelles > i { width:5px; height:22px; top:-11px; } .won-pris { margin:-2px 0 0; display:flex; align-items:center; gap:6px; font:italic 700 var(--fs-scene)/1 var(--f-titre); color:var(--or); text-shadow:var(--ombre-texte-scene); } .won-pris .picon { width:20px; } /* les pièces qui volent vers le total (hud.volPieces, animées par WAAPI) */ .pieces-vol { position:absolute; left:0; top:0; width:0; height:0; z-index:3; pointer-events:none; } .pieces-vol > i { position:absolute; left:-13px; top:-13px; width:26px; height:26px; opacity:0; background:var(--img-piece); } /* le seul panneau : pleine largeur, bord haut monté à filet d'or ; la marche et sa récompense, la vidéo, Continuer, la Cité */ .won-panneau { margin:0 calc(-1 * var(--gout-r)) calc(-1 * max(14px, var(--safe-b) + 10px)) calc(-1 * var(--gout-l)); padding:18px var(--gout-r) calc(max(14px, var(--safe-b) + 10px)) var(--gout-l); display:flex; flex-direction:column; align-items:stretch; gap:8px; } .won-marche { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 2px; } .won-marche .marche-pas { gap:16px; } .won-rec { display:flex; align-items:center; gap:8px; min-width:0; color:var(--ivoire); } .won-rec > .picon { width:34px; color:var(--gris); } .won-rec.acquise > .picon:not(.pi-or) { color:var(--or); } .won-rec-copy { display:flex; flex-direction:column; gap:3px; min-width:0; } .won-rec-copy b { font:italic 900 var(--fs-scene)/1.1 var(--f-titre); color:var(--ivoire); } .won-rec-copy small { font:600 var(--fs-libelle)/1.15 var(--f-texte); color:var(--gris); } .won-rec.acquise .won-rec-copy small { color:var(--or); } /* R13-B (2) : la récompense attend grise pendant les deux premiers temps, puis se révèle (l'icône passe à l'or d'un battement) */ .won-rec { transition:opacity 220ms var(--courbe); } .won-rec.attend { opacity:.45; } .won-rec.revele > .picon { animation:revele 420ms var(--courbe) both; } .won-video { min-height:58px; justify-content:center; gap:12px; padding:0 16px; transition:opacity var(--t-apparition) var(--courbe), transform var(--t-appui) var(--courbe); } .won-video.attend { opacity:.55; } /* D : le lecteur dans un bloc d'encre, « ×2 » et le montant en chiffres héros sur l'or */ .won-video > .picon { width:36px; height:28px; aspect-ratio:auto; border-radius:3px; background-color:var(--or-texte); -webkit-mask-size:30px; mask-size:30px; } .won-video-lbl { flex:none; font:italic 900 30px/1 var(--f-titre); color:var(--or-texte); white-space:nowrap; } .won-video-n { display:flex; align-items:center; gap:6px; } .won-video-n .picon { width:32px; } .won-video-n b { font:italic 900 32px/1 var(--f-titre); color:var(--or-texte); } /* R13-B2 : avant l'arrêt du curseur, la place du montant dit « après le bonus d’adresse » (le chiffre paraît à l'arrêt) */ .won-video-apres { flex:none; max-width:46%; font:italic 700 var(--fs-libelle)/1.05 var(--f-titre); color:var(--or-texte); text-align:left; white-space:nowrap; } /* D : Continuer sur toute la largeur ; la Cité est le petit bouton maison en haut à gauche (.won-haut), 52 × 44, incliné */ .won-actions { display:flex; align-items:stretch; } #won-continue { flex:1; min-width:0; min-height:58px; } #won-continue strong { font-size:46px; } .won-haut .won-cite { flex:none; width:52px; min-height:44px; padding:0; margin:0; pointer-events:auto; } .won-cite .picon { width:26px; } .won-cite strong { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .victory-relic { display:flex; align-items:center; gap:10px; padding:4px 4px; } .victory-relic .picon { width:30px; color:var(--or); } .relic-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .relic-copy small { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:var(--gris); } .relic-copy strong { font:italic 900 var(--fs-titre)/1.05 var(--f-titre); color:var(--or); } .relic-copy em { font:600 var(--fs-libelle)/1.2 var(--f-texte); font-style:normal; color:var(--gris); } /* ---------- défaite : base ennemie restante, score, record et actions */ .defeat-panel .result-body { gap:9px; } .defeat-panel .result-heading { color:var(--braise-clair); } .defeat-panel .result-copy { color:var(--gris); font-family:var(--f-texte); font-style:normal; font-weight:600; margin-top:-2px; } .over-base { display:flex; flex-direction:column; align-items:stretch; gap:6px; width:78%; align-self:center; } .over-base-lbl { margin:0; text-align:center; font:600 var(--fs-scene)/1.15 var(--f-texte); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .over-base-n { text-align:center; font-variant-numeric:tabular-nums; } .over-base-lbl b { font-weight:900; color:var(--braise-clair); } .over-base .sangle { height:9px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(224,103,58,.6); } .over-base .sangle > i { transition:none; } .duel { display:grid; grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr); align-items:end; gap:16px; padding:2px 0; } .duel-cote { min-width:0; display:flex; flex-direction:column; align-items:center; gap:0; } .duel-cote small { font:600 var(--fs-libelle)/1 var(--f-texte); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .duel-cote strong { font:italic 900 clamp(36px, 13vw, 56px)/1 var(--f-titre); font-variant-numeric:tabular-nums; color:var(--ivoire); text-shadow:var(--ombre-chiffre); } .duel-cote.record small, .duel-cote.record strong { color:var(--gris); } .duel-cote.record.battu small, .duel-cote.record.battu strong { color:var(--or); } .duel-trait { width:3px; height:58px; margin-bottom:4px; border-radius:2px; background:var(--or); transform:rotate(22deg); box-shadow:0 0 8px rgba(232,182,76,.5); } /* « Continuer » reste une option secondaire ; « Rejouer » porte le seul aplat bleu. */ .menu-command.releve { align-self:center; width:84%; min-height:44px; } .menu-command.releve .picon { width:26px; } .menu-command.releve .command-copy { flex-direction:row; gap:8px; } #over-retry { min-height:58px; margin-top:2px; } #over-retry strong { font-size:40px; } /* ================================================================ pause : modale sur la scène figée */ /* D3 : un voile léger ; UNE carte de suie bordée d'un filet d'or ; « Pause » en italique noir ; Continuer azur incliné, puis Recommencer et la Cité en secondaires ; Son et Vibrations sur une seule ligne. */ .screen.dim { justify-content:safe center; align-items:center; overflow:hidden auto; touch-action:pan-y; overscroll-behavior:contain; scrollbar-width:none; background:var(--voile-modal); z-index:var(--z-modale); padding:calc(var(--safe-t) + 60px) calc(28px + var(--safe-r)) calc(var(--safe-b) + 16px) calc(28px + var(--safe-l)); } .screen.dim::-webkit-scrollbar { display:none; } .pause-card { flex:none; width:100%; max-width:300px; box-sizing:border-box; padding:22px 18px 14px; display:flex; flex-direction:column; align-items:stretch; gap:10px; border-radius:var(--r-panneau); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or), 0 10px 30px rgba(8,6,4,.5); } .pause-card h2 { margin:0 0 6px; text-align:center; font:italic 900 48px/1 var(--f-titre); color:var(--ivoire); } .pause-card .menu-command.primary { min-height:60px; } .pause-options { display:flex; gap:6px; margin-top:2px; padding-top:6px; border-top:1px solid var(--filet); } .pause-options .option-line { flex:1; min-width:0; min-height:48px; gap:8px; padding:0 4px; justify-content:center; font:600 var(--fs-libelle)/1 var(--f-texte); } .pause-options .option-line + .option-line { border-top:0; } .pause-options .option-line + .option-line::before { content:''; position:absolute; left:-3px; top:4px; bottom:4px; width:1px; transform:skewX(var(--biais)); background:rgba(130,190,231,.5); pointer-events:none; } .pause-options .option-line > span { flex:none; } .pause-options .option-line i { width:42px; height:24px; } .pause-options .option-line i::after { width:18px; height:18px; } .pause-options .option-line.on i::after { transform:translateX(18px); } .pause-card .sub { text-align:center; font:600 var(--fs-libelle)/1.25 var(--f-texte); color:var(--gris); } /* T1 « Lire la bataille » : la lecture du terrain, consultation facultative en pied de carte. Un encart au filet, le nom de la rencontre en titre, puis une ligne par rôle : le mot du rôle (Menace, Essaie, Ou bien, Ennemi) précède toujours la phrase. */ /* ================================================================ page de garde (posée sur la Cité) */ /* D3 : le nom du jeu en italique noir, posé sur la Cité ; en pied UNE carte de suie (le profil, ou à la première partie le champ du nom) et l'action azur inclinée (« Jouer », puis « Continuer »). */ .title-screen { justify-content:space-between; align-items:center; padding:calc(var(--safe-t) + 48px) var(--gout-r) calc(max(18px, var(--safe-b) + 12px)) var(--gout-l); background:linear-gradient(180deg, rgba(14,10,7,.66) 0%, rgba(14,10,7,.18) 30%, rgba(14,10,7,0) 46%, rgba(14,10,7,.3) 60%, rgba(14,10,7,.9) 100%); } .title-brand { display:flex; flex-direction:column; align-items:center; gap:6px; } .title-wordmark { margin:0; font:italic 900 76px/.95 var(--f-titre); color:var(--ivoire); letter-spacing:.005em; text-shadow:var(--ombre-chiffre); } .title-act { font:600 var(--fs-lecture)/1.2 var(--f-texte); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .title-entry { width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; } .title-profile, .title-nom-bloc { position:relative; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; border-radius:var(--r-panneau); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or), var(--ombre-panneau); color:var(--ivoire); } .title-portrait { flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%, var(--encre-3), var(--encre) 72%); box-shadow:inset 0 0 0 2px var(--or); } .title-portrait .picon { width:44px; margin-top:2px; } .title-profile-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .title-profile-copy strong { font:italic 900 var(--fs-titre)/1.05 var(--f-titre); color:var(--ivoire); overflow-wrap:anywhere; } .title-profile-copy small { font:600 var(--fs-libelle)/1.3 var(--f-texte); color:var(--gris); } .title-profile-copy small b { color:var(--ivoire); font-weight:700; } .title-level { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding-left:12px; border-left:1px solid var(--filet); } .title-level small { font:600 var(--fs-libelle)/1 var(--f-texte); color:var(--gris); } .title-level b { font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--or); } /* le nom du joueur, demandé à la première partie : un champ simple, souligné d'or, l'indication « Capitaine » en gris chaud */ .title-nom-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .title-nom-lbl { font:700 var(--fs-libelle)/1 var(--f-texte); color:var(--or); } .nom-champ { width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:4px 2px; border-radius:0; background:transparent; box-shadow:inset 0 -2px 0 var(--filet-or); font:italic 900 var(--fs-nom)/1.1 var(--f-titre); color:var(--ivoire); } .nom-champ::placeholder { color:var(--gris); opacity:1; font-weight:700; } .nom-champ:focus { outline:none; box-shadow:inset 0 -2px 0 var(--or-clair); } .title-standard { display:flex; flex-direction:column; gap:10px; } .title-standard .title-continue { min-height:58px; } .title-standard .title-continue .picon { width:22px; } /* Paramètres : le nom du joueur, modifiable (même champ que la page de garde, aligné à droite de sa ligne) */ .option-line.set-nom { cursor:text; } .option-line.set-nom > span:not(.picon) { flex:none; } .option-line.set-nom .nom-champ { flex:1 1 auto; min-width:0; text-align:right; font-size:var(--fs-titre); } /* ================================================================ chargement et erreur contrôlée Retour de Bastien du 25 septembre : le chargement est un fond de suie chaude qui porte le nom du jeu À LA MÊME PLACE et à la même taille que sur la page de garde ; il s'efface en 0,4 s (data-sortie, posé par hud.js) : seul le fond change, la Cité peinte apparaît derrière le nom immobile. D3 : le nom en italique noir, la jauge azur royal à front d'or ; en erreur, le sceau braise, le texte sur UN panneau de suie à filet d'or, Réessayer azur incliné. */ #loading { position:absolute; inset:0; z-index:var(--z-chargement); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:calc(var(--safe-t) + 48px) calc(24px + var(--safe-r)) calc(var(--safe-b) + 32px) calc(24px + var(--safe-l)); box-sizing:border-box; text-align:center; isolation:isolate; background:radial-gradient(120% 70% at 50% 38%, #2A1F15 0%, var(--encre) 72%); opacity:1; transition:opacity .4s ease; } #loading[data-sortie] { opacity:0; pointer-events:none; } .loading-kicker { font:italic 900 76px/.95 var(--f-titre); color:var(--ivoire); letter-spacing:.005em; text-shadow:var(--ombre-chiffre); } #loading[data-state="loading"] #loading-text { margin-top:auto; } #loading-text { margin-top:14px; font:italic 700 var(--fs-scene)/1.35 var(--f-titre); color:var(--ivoire); } .loading-progress { width:min(260px, 100%); height:6px; margin-top:4px; } .loading-progress > i { transition:width .35s var(--courbe); background:linear-gradient(90deg, var(--or-appui), var(--or)); } #loading-detail { font:600 var(--fs-libelle)/1.2 var(--f-texte); color:var(--gris); } .loading-title { font:italic 900 var(--fs-titre-grand)/1.1 var(--f-titre); color:var(--ivoire); } .loading-title:empty { display:none; } .loading-error-mark { font:italic 700 var(--fs-scene)/1 var(--f-titre); color:var(--braise-clair); } .loading-error-seal { width:68px; height:68px; display:grid; place-items:center; border-radius:50%; background:var(--panneau-plein); box-shadow:inset 0 0 0 2px var(--braise), 0 0 18px rgba(224,103,58,.35); color:var(--braise); } .loading-error-seal .picon { width:32px; } .loading-error-rule { width:48px; height:2px; border-radius:1px; background:var(--or); } .loading-error-actions { width:100%; max-width:300px; display:flex; flex-direction:column; gap:10px; margin-top:8px; } .loading-error-detail { max-width:300px; font:600 var(--fs-libelle)/1.35 var(--f-texte); color:var(--gris); } .loading-error-detail summary { min-height:44px; min-width:120px; display:flex; align-items:center; justify-content:center; cursor:pointer; font:600 var(--fs-libelle)/1.2 var(--f-texte); color:var(--ivoire); text-decoration:underline; text-decoration-color:var(--filet-fort); text-underline-offset:4px; } #loading[data-state="error"] .loading-progress, #loading[data-state="error"] #loading-detail { display:none; } #loading[data-state="error"] { justify-content:center; padding-top:calc(var(--safe-t) + 24px); } #loading[data-state="error"] .loading-kicker { font-size:var(--fs-titre-grand); } #loading[data-state="error"]::before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(12,9,6,.55); } #loading[data-state="error"] #loading-text { margin-top:0; max-width:300px; padding:14px 16px; box-sizing:border-box; font:600 var(--fs-lecture)/1.4 var(--f-texte); border-radius:var(--r-panneau); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or); } #loading-error-copy { display:block; max-height:30vh; overflow:auto; overflow-wrap:anywhere; text-align:left; } #loading[data-state="error"] #loading-text em { font-style:normal; color:var(--ivoire); font-weight:700; } /* ================================================================ publicité simulée */ /* D3 : la Cité au crépuscule voilée de suie ; le titre posé en haut (sans plaque) ; UN panneau de suie à filet d'or porte la vidéo (un anneau d'or qui se remplit sur sa durée, le compte des secondes au centre, la coche à la fin) et la récompense ; Continuer azur incliné quand la vidéo est finie. */ .screen.ad { z-index:var(--z-modale); align-items:center; justify-content:space-between; gap:14px; padding:calc(var(--safe-t) + 12px) var(--gout-r) calc(var(--safe-b) + 18px) var(--gout-l); background:linear-gradient(180deg, rgba(14,10,7,.6), rgba(14,10,7,.66)), var(--img-fond) center 40% / cover no-repeat, var(--encre); } .ad-head { width:100%; min-height:56px; display:flex; align-items:center; gap:10px; box-sizing:border-box; padding:6px 64px 6px 4px; } .ad-head > .picon { width:30px; color:var(--or); } .ad-title { flex:1; min-width:0; font:italic 900 var(--fs-titre-grand)/1.05 var(--f-titre); color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .ad-close { position:absolute; right:calc(20px + var(--safe-r)); top:calc(var(--safe-t) + 18px); z-index:2; } .ad-close:disabled { opacity:.4; cursor:default; } .ad .box { position:relative; width:100%; flex:0 1 300px; max-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; box-sizing:border-box; padding:24px; border-radius:var(--r-panneau); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or), 0 10px 30px rgba(8,6,4,.45); text-align:center; } .ad-video { position:relative; width:100px; height:100px; display:grid; place-items:center; border-radius:50%; background:var(--encre); } .ad-video::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from -90deg, var(--or-appui), var(--or) var(--fill), rgba(243,235,221,.14) 0); -webkit-mask:radial-gradient(circle closest-side, transparent 42.5px, #000 43px); mask:radial-gradient(circle closest-side, transparent 42.5px, #000 43px); transition:--fill .3s linear; } .ad-video strong { position:relative; font:italic 900 var(--fs-titre-grand)/1 var(--f-titre); color:var(--ivoire); white-space:nowrap; } .ad-video.fin::after { content:''; position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px; background:var(--or); -webkit-mask:var(--ic-valider) center / contain no-repeat; mask:var(--ic-valider) center / contain no-repeat; } #ad-box-label { font:italic 700 var(--fs-scene)/1.2 var(--f-titre); color:var(--gris); } .ad-mute { position:absolute; left:14px; bottom:14px; } .ad[data-son="off"] .ad-mute .picon { opacity:.45; } .ad-continue { flex:none; width:min(100% - 12px, 320px); } .ad footer { width:100%; display:flex; align-items:center; justify-content:center; } .ad-reminder { margin:0; font:600 var(--fs-libelle)/1.35 var(--f-texte); color:var(--ivoire); text-align:center; text-shadow:0 2px 3px var(--suie), 0 2px 10px rgba(12,8,4,.7); } #ad-reward { flex:none; min-height:44px; padding:0 4px; display:flex; align-items:center; box-sizing:border-box; font:italic 900 var(--fs-cta)/1 var(--f-titre); color:var(--or); white-space:nowrap; text-shadow:var(--lueur-or); } /* ================================================================ toast : une pilule de suie à filet d'or qui paraît */ #toast { position:absolute; left:50%; top:calc(var(--safe-t) + 108px); z-index:var(--z-toast); width:max-content; max-width:min(320px, calc(100% - 32px)); min-height:44px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; pointer-events:none; border-radius:var(--r-pastille); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or), 0 6px 18px rgba(8,6,4,.45); font:600 var(--fs-libelle)/1.25 var(--f-texte); color:var(--ivoire); text-align:center; text-wrap:balance; transform:translateX(-50%) translateY(-6px); opacity:0; visibility:hidden; transition:transform .16s ease-in, opacity .16s, visibility 0s .16s; } #toast.on { opacity:1; visibility:visible; transform:translateX(-50%); transition:transform var(--t-apparition) var(--courbe), opacity .12s, visibility 0s; } #toast .picon { width:22px; color:var(--or); } #toast.guide { top:auto; bottom:calc(var(--safe-b) + 132px); } /* ================================================================ mouvement */ @keyframes voletMonte { from { transform:translateY(28px); } to { transform:none; } } @keyframes apparait { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @keyframes depuisGauche { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } } @keyframes depuisDroite { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } } @keyframes depuisBas { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } } @keyframes depuisHaut { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:none; } } @keyframes versHaut { to { opacity:0; transform:translateY(-24px); } } @keyframes versBas { to { opacity:0; transform:translateY(28px); } } @keyframes estompe { to { opacity:0; } } @keyframes voileMonte { from { opacity:0; transform:translateY(20%); } to { opacity:1; transform:none; } } @keyframes titreGlisse { from { opacity:0; transform:translateX(-48px) rotate(-4deg); } to { opacity:1; transform:rotate(-4deg); } } @keyframes titreVient { 0% { opacity:0; transform:scale(1.18); } 70% { opacity:1; } 100% { opacity:1; transform:none; } } @keyframes deplie { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } } @keyframes voileVient { from { opacity:0; } to { opacity:1; } } @keyframes champLueur { 0%, 100% { opacity:.35; } 50% { opacity:1; } } @keyframes champMonte { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } } @keyframes champBat { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(1.06); } } @keyframes champEclat { from { opacity:1; transform:scale(.9); } to { opacity:0; transform:scale(1.7); } } @keyframes champTagBat { 0% { transform:scale(1); } 40% { transform:scale(1.3); } 100% { transform:scale(1); } } @keyframes invite { 0%, 100% { opacity:0; } 50% { opacity:1; } } @keyframes lienVient { from { opacity:0; visibility:hidden; } to { opacity:1; visibility:visible; } } @keyframes tinte { 0% { transform:scale(1); } 45% { transform:scale(1.14); } 100% { transform:scale(1); } } /* D3 : l'étincelle de forge (une gerbe), l'anneau d'or d'un palier, le chiffre qui frappe comme un marteau */ @keyframes etincelle { 0% { opacity:0; transform:rotate(var(--a, 0deg)) translateY(0) scaleY(.35); } 18% { opacity:1; } 100% { opacity:0; transform:rotate(var(--a, 0deg)) translateY(calc(-1 * var(--r, 60px))) scaleY(1); } } @keyframes anneauOr { 0% { opacity:.95; transform:translate(-50%,-50%) scale(.55); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.9); } } @keyframes frappe { 0% { transform:scale(1.3); } 60% { transform:scale(.97); } 100% { transform:scale(1); } } @keyframes coffreOuvre { 0% { transform:scale(1.06); } 32% { transform:scale(1.34) rotate(-3deg); } 62% { transform:scale(.96); } 100% { transform:scale(1); } } @keyframes eclatOr { 0% { opacity:0; transform:scale(.45); } 30% { opacity:1; transform:scale(1.05); } 100% { opacity:0; transform:scale(1.5); } } /* R13-B : le bandeau d'un niveau pris descend d'un cran et se pose ; il repart en montant ; l'étape se coche d'un battement */ @keyframes bandeauVient { from { opacity:0; transform:translateX(-50%) translateY(-14px) scale(1.08); } to { opacity:1; transform:translateX(-50%); } } @keyframes bandeauPart { from { opacity:1; transform:translateX(-50%); } to { opacity:0; transform:translateX(-50%) translateY(-10px); } } @keyframes claque { 0% { opacity:0; transform:rotate(-4deg) scale(1.35); } 60% { opacity:1; transform:rotate(-4deg) scale(.96); } 100% { opacity:1; transform:rotate(-4deg) scale(1); } } @keyframes revele { 0% { transform:scale(.7); color:var(--gris); } 55% { transform:scale(1.25); color:var(--or-clair); } 100% { transform:scale(1); } } @keyframes etoileTombe { 0% { opacity:0; transform:translateY(-16px) scale(1.6); } 70% { opacity:1; transform:translateY(0) scale(.94); } 100% { opacity:1; transform:none; } } @keyframes coche { 0% { transform:scale(1); } 40% { transform:scale(1.3); } 100% { transform:scale(1); } } @keyframes inscrit { 0% { opacity:0; transform:translateY(6px) scale(.8); } 25% { opacity:1; transform:translateY(0) scale(1.12); } 45% { transform:scale(1); } 100% { opacity:1; transform:none; } } /* entrées : menus en volet depuis la barre du bas ; HUD en volets ; résultats montés sur la scène ; pause dépliée */ .screen.panel:not([hidden]) { animation:voletMonte var(--t-volet) var(--courbe) both; } .screen.building:not([hidden]) .building-sheet { animation:depuisBas var(--t-volet) var(--courbe) both; } .screen.building:not([hidden]) .building-top { animation:depuisHaut var(--t-apparition) var(--courbe) both; } #hud:not([hidden]) #hud-pause { animation:depuisGauche var(--t-apparition) var(--courbe) both; } #hud:not([hidden]) .hud-prog { animation:depuisHaut var(--t-apparition) var(--courbe) 60ms both; } #champ:not([hidden]) { animation:depuisBas var(--t-apparition) var(--courbe) 180ms both; } .screen.home:not([hidden]) .home-head { animation:depuisHaut 240ms var(--courbe) both; } .screen.home:not([hidden]) .battle-row, .screen.home:not([hidden]) .home-marche, .screen.home:not([hidden]) .home-rail { animation:depuisBas 240ms var(--courbe) both; } .outcome:not([hidden]) .outcome-veil { animation:voileMonte var(--t-volet) var(--courbe) both; } .outcome:not([hidden]) .result-panel { animation:depuisBas 260ms var(--courbe) 80ms both; } .outcome-defeat:not([hidden]) .result-heading { animation:titreVient 280ms var(--courbe) 120ms both; } .outcome:not([hidden]) .result-body > .menu-command { animation:apparait var(--t-apparition) var(--courbe) 360ms both; } /* R12-B1 : « Victoire » glisse (200 ms) et garde son inclinaison ; les actions du panneau paraissent ensuite */ /* R13-B (2) : « Victoire » CLAQUE (échelle 1,35 vers 1 en 240 ms, un rebond) et garde son inclinaison */ .outcome-victory:not([hidden]) .won-scene .result-heading { animation:claque 240ms var(--courbe) 60ms both; } .outcome-victory:not([hidden]) .won-panneau > .menu-command, .outcome-victory:not([hidden]) .won-actions { animation:apparait var(--t-apparition) var(--courbe) 320ms both; } /* la vidéo en retrait tant que le curseur court (.attend) : son apparition ne retient pas son état final (opacité 1) */ .outcome-victory:not([hidden]) .won-panneau > .won-video { animation-fill-mode:backwards; } .outcome-victory:not([hidden]) .won-haut { animation:depuisHaut var(--t-apparition) var(--courbe) both; } .screen.dim:not([hidden]) { animation:voileVient 150ms linear both; } .screen.dim:not([hidden]) .pause-card { animation:deplie 180ms var(--courbe) both; } .screen.ad:not([hidden]) { animation:voileVient var(--t-apparition) linear both; } .title-screen:not([hidden]) .title-entry { animation:depuisBas var(--t-volet) var(--courbe) 120ms both; } /* sorties (data-volet="sort", posé par hud.js le temps de --t-sortie) */ .screen.home[data-volet="sort"] .home-head { animation:versHaut var(--t-sortie) var(--courbe) both; } .screen.home[data-volet="sort"] .battle-row, .screen.home[data-volet="sort"] .home-marche, .screen.home[data-volet="sort"] .home-rail { animation:versBas var(--t-sortie) var(--courbe) both; } #stage:has(> .screen.home[data-volet="sort"]):not(:has(> .screen:is([data-screen="carte"], [data-screen="shop"], [data-screen="missions"], [data-screen="lore"], [data-screen="settings"]):not([hidden]))) > #nav-rail { animation:versBas var(--t-sortie) var(--courbe) both; } .outcome[data-volet="sort"] .result-panel { animation:versBas var(--t-sortie) var(--courbe) both; } .outcome[data-volet="sort"] .outcome-veil, .screen.dim[data-volet="sort"], .title-screen[data-volet="sort"], .screen.ad[data-volet="sort"] { animation:estompe var(--t-sortie) linear both; } .screen.panel[data-volet="sort"] { animation:none; } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; } } /* ================================================================ cadres : ordinateur (cadre centré), puis téléphone réel */ @media (hover:hover) and (pointer:fine) { .menu-command:hover:not(:disabled) { filter:brightness(1.06); } [role="tab"]:hover:not([aria-selected="true"]) { color:var(--ivoire); } } /* Sous 450 points, le jeu occupe toute la surface dynamique du navigateur (fitFrame, src/main.js). */ @media (max-width:449px) { #wrap { display:block; background:var(--encre); } #frame { width:100vw; height:100dvh; min-height:100vh; } } /* Fiche à 360 px : Collecter ne doit pas comprimer le libellé et le prix d'Améliorer. L'achat prend une ligne entière ; les actions secondaires gardent leur cible de 52 px. */ @media (max-width:374px) { .building-actions { flex-wrap:wrap; } .building-actions .building-buy { flex:1 0 calc(100% - 12px); order:-1; } } @media (max-width:339px) { #hud { column-gap:6px; } /* haut de l'accueil : les bourses et le nom cèdent quelques points */ .home-res { gap:4px; } .home-res .bourse-pill > .picon { width:22px; } .home-res .bourse-pill .val { font-size:var(--fs-scene); } .home-nom { font-size:var(--fs-chiffre); } .profile-seal { width:48px; height:48px; } } /* écrans courts (moins de 700 points de haut) : les chiffres héros, la fiche du bâtiment et les résultats se resserrent */ @media (max-height:700px) { .result-body { gap:6px; } .result-heading { font-size:58px; } .gain { min-height:62px; } .gain-n { font-size:60px; } .gain-piece { width:52px; } .duel-cote strong { font-size:50px; } .won-panneau { gap:7px; } .effet-apres { font-size:58px; } .building-interieur { flex-basis:110px; } } /* R12-B1 : grands téléphones (430 points et plus) : le jeu garde ses proportions, les chiffres héros gagnent un peu */ @media (min-width:420px) and (max-width:449px) { .result-heading { font-size:84px; } .gain-n { font-size:84px; } } /* R24 : version D « Arcade premium ». Plaques nuit, filets cyan et boutons à énergie. */ /* Plaques D (finition du 29 septembre) : parallélogramme nuit incliné de 8°, bord bleu électrique d'un point, arête haute claire, halo bleu ; le contenu reste droit. .plaque-titre : la grande plaque du titre des résultats, en pente de 4° (Victoire, Si près). */ .plaque-module, .plaque-titre { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; } .plaque-module::before, .plaque-titre::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(var(--biais)); background:linear-gradient(160deg, rgba(12,46,98,.96), rgba(4,17,42,.96) 58%, rgba(3,12,31,.96)); box-shadow:inset 0 1px 0 rgba(150,225,255,.6), inset 0 0 0 1px #2E8FFF, 0 0 12px rgba(20,120,255,.35), 0 6px 14px rgba(0,5,17,.55); } .plaque-module { padding:8px 14px; } .plaque-titre { align-self:center; width:calc(100% - 24px); padding:12px 18px 12px; gap:2px; transform:rotate(-3deg); margin:6px 0 4px; } .plaque-titre::before { background:linear-gradient(165deg, rgba(14,56,120,.97), rgba(4,20,52,.97) 55%, rgba(3,12,31,.97)); box-shadow:inset 0 2px 0 #6FD8FF, inset 0 -2px 0 rgba(40,160,255,.9), inset 0 0 0 1px #2E8FFF, 0 0 20px rgba(20,140,255,.45), 0 8px 18px rgba(0,5,17,.6); } .plaque-titre .result-heading { color:var(--blanc); text-shadow:0 3px 0 rgba(0,40,120,.8), 0 0 18px rgba(120,200,255,.35); } .plaque-titre .result-copy { font:italic 700 17px/1.15 var(--f-titre); color:#C9DBEE; text-shadow:0 1px 2px rgba(0,8,24,.7); } .plaque-titre .arena-result-kicker { font:italic 800 14px/1 var(--f-titre); letter-spacing:.02em; color:#8FDFFF; } .panneau-d3::before { background:linear-gradient(150deg, rgba(8,33,65,.98), rgba(3,13,31,.98) 65%); box-shadow:inset 0 2px 0 rgba(79,198,255,.9), 0 -3px 16px rgba(0,120,255,.3), 0 -8px 28px rgba(0,5,17,.5); } .round-btn { color:var(--blanc); background:radial-gradient(circle at 50% 34%, #12355D, #051329 78%); box-shadow:inset 0 0 0 2px #20BFFF, inset 0 0 0 4px rgba(6,51,117,.5), 0 0 15px rgba(0,154,255,.7), 0 3px 8px rgba(0,7,23,.65); } .round-btn:active { background:#08457E; } .sangle { background:rgba(1,11,25,.9); box-shadow:inset 0 0 0 1px rgba(70,180,249,.52), 0 0 8px rgba(0,105,222,.18); } .sangle > i { background:linear-gradient(90deg, #0C5BE4, #19C5FF 90%, #D4F5FF); box-shadow:0 0 9px rgba(21,179,255,.72); } /* Accueil : Cité entière, état de la Cité en haut, coffre récompense et action. */ .screen.home::before { height:calc(var(--safe-t) + 104px); background:linear-gradient(to bottom, rgba(2,10,27,.78), rgba(2,10,27,0)); } .screen.home::after { height:calc(var(--nav-h) + 173px); background:linear-gradient(to top, rgba(2,8,22,.9), rgba(2,8,22,.64) 52%, transparent); } .home-head { top:calc(var(--safe-t) + 11px); gap:5px; } .home-profil { gap:5px; min-height:46px; } .profile-seal { width:44px; height:44px; background:radial-gradient(circle at 50% 36%, #17375B, #061226 72%); box-shadow:inset 0 0 0 2px #38CAFF, 0 0 14px rgba(5,138,255,.66), 0 2px 6px rgba(0,4,15,.6); } .profile-seal > .picon { width:36px; } .home-profil-copy { max-width:none; gap:0; } .home-nom { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .home-epoque { display:flex; padding:4px 7px 5px; gap:3px; border:1px solid #368BD8; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(160deg, rgba(11,39,76,.96), rgba(2,11,28,.95)); box-shadow:inset 0 1px 0 #A9EDFF, 0 0 10px rgba(0,133,248,.36); } .home-epoque > * { transform:skewX(calc(-1 * var(--biais))); } .home-epoque .sangle { height:7px; order:2; } .home-epoque-copy { order:1; align-items:center; font:italic 700 12px/1 var(--f-titre); } .home-epoque-copy > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .home-epoque-copy b { color:var(--blanc); font:italic 900 14px/1 var(--f-titre); } .home-res { gap:3px; padding-top:0; } .home-res .bourse-pill { height:43px; padding:0 5px; gap:2px; transform:skewX(var(--biais)); background:linear-gradient(160deg, rgba(11,39,76,.96), rgba(2,11,28,.95)); box-shadow:inset 0 1px 0 #A9EDFF, inset 0 0 0 1px #368BD8, 0 0 10px rgba(0,133,248,.36); } .home-res .bourse-pill > * { transform:skewX(calc(-1 * var(--biais))); } .home-res .bourse-pill > .picon { width:23px; } .home-res .bourse-pill .val { font-size:20px; } /* D : le « + » des bourses, petite case bleu électrique au bout de la plaque ; il ouvre la Boutique. Case de 20 points, cible de 24 × 43 prolongée à 44 de large par ::after (le voisin de droite n'est pas une cible). */ .bourse-plus { position:relative; flex:none; width:24px; height:43px; margin:0 -3px 0 1px; padding:0; display:grid; place-items:center; background:none; border:0; color:var(--blanc); } .bourse-plus::before { content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:3px; background:linear-gradient(180deg, rgba(255,255,255,.22) 0 44%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #34AEFF, #0A64DA 70%, #0558D3); box-shadow:inset 0 1px 0 #9BEFFF, inset 0 0 0 1px #3DBBFF, 0 2px 0 #0443BD, 0 0 6px rgba(30,165,255,.55); } .bourse-plus::after { content:''; position:absolute; top:-1px; bottom:-1px; left:-10px; right:-10px; } .bourse-plus > span { position:relative; font:900 19px/1 var(--f-texte); text-shadow:0 1px 1px rgba(0,30,110,.6); margin-top:-2px; } .bourse-plus:active::before { transform:translateY(1px); filter:brightness(.85); box-shadow:inset 0 1px 0 #9BEFFF, inset 0 0 0 1px #3DBBFF, 0 1px 0 #0443BD; } .bourse-plus:focus-visible { outline:none; } .bourse-plus:focus-visible::before { outline:2px solid #7FE3FF; outline-offset:2px; } .home-head.serre .home-res { gap:3px; } .home-head.serre .home-res .bourse-pill { height:32px; } /* Retour 6 de Bastien : le coffre était trop grand (91 × 87, cadre plein). D : pas de cadre, l'illustration sur une lueur or et une petite plaque inclinée « Ouvrir » devant. Boîte de bouton réelle de 64 × 70 (surface −43 %), art de 46 points, posée dans la colonne droite, au-dessus de Bataille avec un vrai jour entre les deux. */ .home-rail { right:calc(var(--gout-r) + 2px); bottom:calc(var(--nav-h) + 128px); z-index:2; } .rail-entry#home-chest { width:64px; min-height:70px; padding:0 0 2px; gap:0; justify-content:flex-end; border:0; background:none; box-shadow:none; } .rail-entry#home-chest::before { inset:-16px -18px 2px; border-radius:50%; background:radial-gradient(50% 50% at 50% 46%, rgba(255,222,110,.95) 0 42%, rgba(255,184,40,.55) 64%, rgba(255,160,20,0) 100%); } .home-chest-art { display:block; width:50px; height:46px; margin-bottom:-7px; background:url(epure/AM-UIK-120_Coffre_Territoire_Ferme_D3@3x.webp) center / contain no-repeat; } .rail-entry#home-chest .rail-copy { position:relative; isolation:isolate; min-width:58px; height:22px; justify-content:center; padding:0 7px; box-sizing:border-box; } .rail-entry#home-chest .rail-copy::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(180deg, #3A2708, #1E1404); box-shadow:inset 0 0 0 1.5px #FFD05D, 0 2px 4px rgba(0,5,14,.6); } .rail-entry#home-chest .rail-copy > span { font:italic 900 14px/1 var(--f-titre); color:#FFE394; text-align:center; text-shadow:0 1px 1px rgba(0,0,0,.6); } .rail-entry#home-chest .pastille { right:0; top:0; } .rail-entry#home-chest:disabled::before { opacity:.35; } .rail-entry#home-chest:disabled .home-chest-art { opacity:.8; } .rail-entry#home-chest:disabled .rail-copy::before { background:linear-gradient(180deg, #0B2C5C, #04173A); box-shadow:inset 0 0 0 1px #33BFFF, 0 2px 4px rgba(0,5,14,.6); } .rail-entry#home-chest:disabled .rail-copy > span { color:#DAE4EF; font-size:13px; } .rail-entry#home-chest:disabled .pastille { display:none; } .battle-row { bottom:calc(var(--nav-h) + 17px); } .battle-row .battle { min-height:60px; } .battle-row .battle > .picon { width:44px; filter:drop-shadow(0 0 5px rgba(255,255,255,.48)); } #home-battle-main { font-size:40px; line-height:.9; } #home-battle-sub { font:600 15px/1 var(--f-texte); } .battle-row .battle .battle-copy { gap:1px; } .bchip .mark { background:linear-gradient(145deg, #10406C, #061A31); box-shadow:inset 0 0 0 1.5px #5BD0FF, 0 0 8px rgba(0,133,255,.36), 0 2px 5px rgba(0,4,14,.58); } .bchip.on .mark { box-shadow:inset 0 0 0 2px #B4EDFF, 0 0 13px rgba(0,145,255,.82), 0 2px 5px rgba(0,4,14,.58); } .bchip.keep .mark { width:32px; height:32px; } .bcard { background:linear-gradient(145deg, rgba(8,35,68,.97), rgba(2,12,29,.98)); box-shadow:inset 0 2px 0 #84DEFF, inset 0 0 0 1px #247CC9, 0 0 15px rgba(0,118,243,.37); } /* Le rail de D est commun aux menus, avec la case active éclairée. */ #nav-rail { left:var(--gout-l); right:var(--gout-r); bottom:calc(var(--safe-b) + 5px); height:63px; padding:0; border:1px solid transparent; border-radius:0; background:none; box-shadow:none; } /* Sol tour 1 : le cadre de D est un PARALLÉLOGRAMME (bords gauche et droit inclinés de 8°). Il vit sur ::after, incliné autour de la mi-hauteur comme les filets ; la bordure transparente du rail garde la géométrie intérieure (61 points). */ #nav-rail::after { content:''; position:absolute; inset:-1px; z-index:-1; pointer-events:none; border:1px solid #378ACB; border-radius:3px; transform:skewX(var(--biais)); background:linear-gradient(180deg, rgba(11,37,69,.98), rgba(3,13,30,.98) 62%, rgba(1,8,21,.98)); box-shadow:inset 0 1px 0 #9EE5FF, 0 0 12px rgba(0,132,250,.36), 0 4px 9px rgba(0,4,15,.65); } /* Retour 7 de Bastien : la case allumée remplit EXACTEMENT sa case entre les filets. Les filets et la surbrillance partagent une seule géométrie : hauteur intérieure du rail (61 points), inclinaison de 8 degrés autour de la mi-hauteur, donc un décalage --nav-d = 30,5 × tan 8° = 4,29 points en haut (vers la droite) et en bas (vers la gauche). - chaque filet est un trait d'un point sur TOUTE la hauteur, centré sur la frontière des cases, incliné autour de son centre ; - la surbrillance est UN calque du rail (::before), placé sur la case active (--i, posé par :has) et découpé en parallélogramme par clip-path sur les mêmes sommets ; le cadre étant lui-même incliné (::after), la première et la dernière case suivent ses bords. Les boutons restent des rectangles sans découpe : zone tactile, pastille et focus intacts. */ #nav-rail { --nav-in:61px; --nav-d:calc(var(--nav-in) * .5 * .14054); isolation:isolate; } #nav-rail::before { content:''; position:absolute; top:0; bottom:0; z-index:0; pointer-events:none; display:none; left:calc(25% * var(--i, 0) - var(--nav-d)); width:calc(25% + 2 * var(--nav-d)); border-radius:2px; clip-path:polygon(calc(2 * var(--nav-d)) 0, 100% 0, calc(100% - 2 * var(--nav-d)) 100%, 0 100%); background:linear-gradient(0deg, #22B8FF 0 2px, rgba(34,184,255,0) 2px), radial-gradient(60% 45% at 50% 100%, rgba(38,170,255,.30), rgba(38,170,255,0)), linear-gradient(180deg, rgba(6,26,60,.35), rgba(6,40,110,.30)); box-shadow:inset 0 0 9px rgba(0,138,255,.16); } #nav-rail:has(> button.on)::before { display:block; } #nav-rail:has(> button.on:nth-child(1))::before { --i:0; } #nav-rail:has(> button.on:nth-child(2))::before { --i:1; } #nav-rail:has(> button.on:nth-child(3))::before { --i:2; } #nav-rail:has(> button.on:nth-child(4))::before { --i:3; } .nav button { height:var(--nav-in); gap:2px; z-index:1; } .nav button + button::before { content:''; position:absolute; left:-.5px; top:0; bottom:0; width:1px; transform:skewX(var(--biais)); pointer-events:none; background:linear-gradient(180deg, rgba(130,190,231,.18), rgba(130,190,231,.62) 22%, rgba(130,190,231,.62) 78%, rgba(130,190,231,.18)); } /* la case allumée reste nuit (D) : seuls le filet bas, l'icône et le libellé s'allument ; les filets gardent leur ton */ .nav button.on { color:#37C8FF; background:none; box-shadow:none; } .nav button.on .picon { filter:drop-shadow(0 0 5px rgba(0,180,255,.7)); } .nav button .picon { width:24px; } .nav .nav-lbl { font:700 13px/1 var(--f-texte); } .nav button.locked .nav-lbl { display:block; } .nav button.locked .picon { opacity:.5; } .nav .lv { position:absolute; bottom:2px; font-size:9px; } /* HUD D : foule et Champion électriques. HUD C5 (29 septembre, illustration « Champs, porte et palissade ») : la pause et l'avancement quittent le panneau bleu de mission. Colonnes symétriques (44 | 1fr | 44) : les losanges tombent au centre de l'écran, à la hauteur du centre de la pause, sans voile en haut. */ #hud { grid-template-columns:44px minmax(0,1fr) 44px; padding-top:calc(var(--safe-t) + 10px); } .hud-prog { max-width:236px; padding:0; gap:6px; } #hud-order { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:44px; } /* la pause : un disque d'encre presque noire, un anneau d'or fin, deux barres blanches épaisses ; aucun halo bleu. Retouche Sol 6.1 mesurée : anneau or CLAIR (saturation 0,49, cible 0,47 ; `--or` mesurait 0,70) et barres ivoire chaud (cible #FCF6DD) ; 1,5 px gardé, 1 px s'effacerait sur les sapins sombres */ #hud-pause { color:#FFF4D6; background:radial-gradient(circle at 50% 32%, #2C2A26, #121212 70%); box-shadow:inset 0 0 0 1.5px var(--or-clair), inset 0 0 0 3px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.5); } #hud-pause .picon { width:25px; } #hud-pause:active, #hud-pause[aria-pressed="true"] { background:radial-gradient(circle at 50% 32%, #3B3832, #1C1B19 70%); } #hud-pause:focus-visible { outline:2px solid var(--or-clair); outline-offset:2px; } /* les trois losanges : pris en azur plein ; en cours en encre cerclée d'or clair, un léger éclat d'or autour et un cœur d'or, un peu plus grand ; à venir en encre cerclée d'or, sans éclat. Correction du 29 septembre (mesures de SOL.md) : le liseré est un or TRÈS PÂLE (#EFE29C, luminance 226) entre deux filets sombres, comme à la cible ; l'or sourd `--or-appui` (luminance 168) se confondait avec le chemin (177) et le losange à venir s'y lisait en carré noir. Coins vifs. La rangée monte de 4 px : la cible la place au-dessus du centre de la pause. Carré de 13 px tourné (18 px de diagonale), 23 px entre centres : la proportion de l'illustration face au disque de pause de 44 px (jugement de Sol : 21 à la cible, 27 avant retouche ; 23 garde un jour entre les pointes). Le cœur d'or du losange en cours fait 5 px (Sol en voulait 8 : le losange deviendrait or, alors que la cible le veut sombre à liseré doré). */ #hud-pips { position:relative; top:-4px; display:flex; align-items:center; justify-content:center; gap:10px; height:44px; } #hud-pips[hidden] { display:none; } #hud-pips .pip { position:relative; display:block; width:13px; height:13px; box-sizing:border-box; border-radius:1px; transform:rotate(45deg); border:1.5px solid #EFE29C; background:linear-gradient(135deg, #3A3B40, #2B2C30 75%); box-shadow:0 0 0 1px rgba(58,38,6,.9), 0 1px 3px rgba(0,0,0,.6); } #hud-pips .pip.done { border-color:#FFF0A0; background:#0F6BD0; } /* en cours : allégé après la contre-lecture (cœur de 3 px de marge, éclat de 6 px) ; il reste le seul losange qui luit */ #hud-pips .pip.cur { transform:rotate(45deg) scale(1.2); border-color:var(--or-clair); box-shadow:0 0 0 1px rgba(58,38,6,.9), 0 0 6px 1px rgba(246,211,126,.7), 0 1px 3px rgba(0,0,0,.6); } #hud-pips .pip.cur::after { content:''; position:absolute; inset:3px; border-radius:0; background:var(--or-clair); } /* Garde du Col : la forteresse du seigneur (troisième losange du quatrième clan) porte un liseré braise */ #hud-pips .pip.seigneur { border-color:var(--braise-clair); } #hud-pips .pip.seigneur.cur { box-shadow:0 0 0 1px rgba(58,38,6,.9), 0 0 6px 1px rgba(240,138,98,.8), 0 1px 3px rgba(0,0,0,.6); } #hud-pips .pip.seigneur.cur::after { background:var(--braise-clair); } /* le franchissement : le losange pris bondit (0,52 s), un éclat blanc l'emplit et une onde d'or s'en détache ; hud.js retire `.prend` à la fin (animationend), pour qu'un HUD re-démasqué ne rejoue pas le franchissement */ #hud-pips .pip.prend { animation:losangePris 520ms var(--courbe) both; } #hud-pips .pip.prend::before { content:''; position:absolute; inset:-2px; border-radius:2px; box-shadow:0 0 0 2px var(--or-clair), 0 0 10px rgba(246,211,126,.8); animation:losangeOnde 520ms ease-out both; } #hud-pips .pip.prend::after { content:''; position:absolute; inset:0; border-radius:1px; background:#FFFFFF; animation:losangeEclat 360ms ease-out both; } @keyframes losangePris { 0% { transform:rotate(45deg) scale(.7); } 40% { transform:rotate(45deg) scale(1.5); } 100% { transform:rotate(45deg) scale(1); } } @keyframes losangeOnde { 0% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(2.3); } } @keyframes losangeEclat { 0% { opacity:.95; } 100% { opacity:0; } } @media (prefers-reduced-motion:reduce) { #hud-pips .pip.prend, #hud-pips .pip.prend::before, #hud-pips .pip.prend::after { animation:none; } #hud-pips .pip.prend::before, #hud-pips .pip.prend::after { display:none; } } /* hors territoire (Arènes, bonus) : une plaque d'encre compacte cerclée d'or, le chrono (horloge d'or) ou le rang */ .hud-plaques { display:flex; align-items:center; justify-content:center; gap:8px; max-width:100%; min-height:44px; } .hud-plaques[hidden] { display:none; } #hud-pips:not([hidden]) + .hud-plaques { min-height:0; } .hud-plaque { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; height:32px; padding:0 14px 0 11px; box-sizing:border-box; border-radius:16px; background:linear-gradient(180deg, #292724, #111214 80%); box-shadow:inset 0 0 0 2px var(--or), 0 2px 5px rgba(0,0,0,.5); color:var(--ivoire); } /* plaque de TITRE (siège : rang de l'Arène ou site bonus) : plus basse et plus menue que celle du chrono, pour ne pas peser plus que les trois losanges des autres modes (jugement de Sol 6.1 : 16 px, une seule ligne) */ .hud-plaque.sans-ic { height:28px; padding:0 12px; border-radius:14px; } .hud-plaque.sans-ic b { font-size:16px; } .hud-plaque .picon { flex:none; width:18px; color:var(--or-clair); } .hud-plaque .picon[hidden] { display:none; } .hud-plaque b { min-width:0; overflow:hidden; white-space:nowrap; font:italic 900 20px/1 var(--f-titre); font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(0,0,0,.6); } .hud-plaque.bas { box-shadow:inset 0 0 0 2px var(--braise-clair), 0 0 10px rgba(240,138,98,.55), 0 2px 5px rgba(0,0,0,.5); } .hud-plaque.bas b { color:#FFB08E; } .arena-portal-life { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; box-sizing:border-box; border-radius:14px; white-space:nowrap; background:linear-gradient(180deg, #292724, #111214 80%); box-shadow:inset 0 0 0 1.5px rgba(232,182,76,.85), 0 2px 5px rgba(0,0,0,.5); color:var(--ivoire); font:italic 800 16px/1 var(--f-titre); } .arena-portal-life[hidden] { display:none; } .arena-portal-life b { color:#79D7FF; font-variant-numeric:tabular-nums; } .arena-portal-life.low { box-shadow:inset 0 0 0 1.5px var(--braise-clair), 0 2px 5px rgba(0,0,0,.5); } .arena-portal-life.low b { color:#FFD08B; } .arena-alert { align-self:center; max-width:100%; padding:4px 8px; border:1px solid rgba(222,147,72,.9); border-radius:2px; background:rgba(42,23,16,.94); color:#FFE1A4; text-align:center; font:800 11px/1.15 var(--f-texte); } .arena-alert.ready { border-color:#68C7EC; background:rgba(3,35,58,.94); color:#A9E9FF; } /* le HUD qui revient d'un écran de résultat (Continuer, la ligne tient) est complet dès sa première image : pas d'entrée */ #hud.retour #hud-pause, #hud.retour .hud-prog, #hud-base.retour:not([hidden]) { animation:none; } #hud-boss { padding:6px 8px; border:1px solid rgba(255,106,68,.8); border-radius:2px; background:rgba(5,16,36,.95); } #crowd { min-width:51px; height:30px; border-radius:2px; padding:0 10px; background:linear-gradient(155deg, #0D4479, #06152E 72%); box-shadow:inset 0 1px 0 #B7EEFF, inset 0 0 0 1px #2EA7ED, 0 0 10px rgba(0,138,255,.56), 0 3px 6px rgba(0,6,23,.53); } #crowd .picon { color:var(--blanc); } #champ .ring { box-shadow:inset 0 0 0 2px #33BFFF, 0 0 11px rgba(0,148,255,.65), 0 3px 8px rgba(0,8,26,.6); } #champ .ring::before { background:conic-gradient(from -90deg, #1DBFFF var(--fill), #102E57 0); } #champ.ready .ring { box-shadow:inset 0 0 0 3px #C8F6FF, 0 0 15px rgba(0,172,255,.9), 0 0 27px rgba(0,117,255,.65); } #champ.ready .ring::before { background:conic-gradient(from -90deg, #83EEFF, #087CFF 82%, #B9F5FF); } /* Carte : encadrement D, route conquise bleue et sélection lumineuse. */ .screen.panel.carte-screen > .head { min-height:64px; padding-bottom:12px; background:linear-gradient(180deg, rgba(3,16,37,.97), rgba(3,16,37,.86) 74%, rgba(3,16,37,0)); border-bottom:1px solid rgba(44,158,241,.7); box-shadow:0 3px 14px rgba(0,139,255,.24); } .carte-screen .panel-title { font-size:26px; } .carte-screen .panel-title.long { font-size:21px; } .carte-compte .val { font-size:25px; color:#F8FCFF; } .carte-compte > small { display:none; } .carte-etoiles .val { font-size:20px; } /* sous la peinture, de quoi remonter le nœud 1 (97,5 % de la hauteur) au-dessus de la fiche basse quand il porte le heaume ; le bas de la peinture se fond dans l'encre, la marge ne se lit pas comme un trou */ .map-inner { margin-bottom:90px; isolation:isolate; } .map-inner::after { content:''; position:absolute; z-index:-1; left:0; right:0; bottom:-1px; height:72px; pointer-events:none; background:linear-gradient(180deg, rgba(6,16,30,0), rgba(6,16,30,.72) 62%, var(--encre)); } .map-node.done .map-node-disc { background:#0A315E; box-shadow:inset 0 0 0 2px #21ADFF, 0 0 9px rgba(0,146,255,.65); } .map-node.done .map-node-disc::after { background:#C9F2FF; } .map-node.cur .map-node-disc { background:linear-gradient(140deg, #32C9FF, #056FEC 60%, #043888); box-shadow:inset 0 0 0 2px #C9F2FF, 0 0 16px 5px rgba(0,143,255,.75), 0 3px 9px rgba(0,7,24,.7); } /* La fiche bonus porte la sélection ; le heaume garde le repère de progression sans halo concurrent. */ .bonus-selection .map-node.cur .map-node-disc { background:#0A315E; box-shadow:inset 0 0 0 1px #4586AC; } .bonus-selection .map-node.cur .map-node-label { display:none; } .map-node-label { border:1px solid #2A9EE9; border-radius:2px; background:rgba(4,18,40,.96); box-shadow:0 0 9px rgba(0,126,255,.5); } .carte-bas { gap:7px; padding-top:14px; } .carte-bas.panneau-d3::before { border-top:1px solid #5BC8FF; } .map-sheet-name { font-size:21px; } .map-phases .pas.cur::before, .map-phases .pas.done::before { background:#6DD5FF; } .map-phases .pas.done::after { background:#0773E9; } .carte-cta-row .map-sheet-cta { min-height:60px; } /* Le rail flottant doit laisser voir toute la tranche Bataille, y compris à 430 × 932. */ .screen.panel.carte-screen { padding-bottom:calc(var(--nav-h) + 14px); } /* ---------------------------------------------------------------- niveaux bonus de la carte (28 septembre 2026, retour 4) Un sceau par élément peint (clocher, ruines, chapelle, Arbre-Forteresse, tours) : une tranche d'or inclinée comme les boutons D (le biais, pas le losange des nœuds), son pictogramme de récompense, une plaque bleue « Bonus » au-dessus tant qu'il reste à gagner. Verrouillé : petit sceau de suie au cadenas ; neuf : un halo d'or qui respire ; gagné : suie cernée d'or et coche. Cible tactile 48 × 48. Aucune règle `filter` : halos en dégradés, animations en opacité et transformation. */ .map-site { position:absolute; width:48px; height:48px; transform:translate(-50%,-50%); display:grid; place-items:center; -webkit-tap-highlight-color:transparent; } .map-site.sel { z-index:3; } .map-site-sceau { position:relative; z-index:1; width:40px; height:40px; box-sizing:border-box; display:grid; place-items:center; border-radius:3px; transform:skewX(var(--biais)); background:linear-gradient(170deg, #FFF0A0 0%, #FFD34A 22%, #F2A91C 62%, #C97800 100%); box-shadow:inset 0 2px 0 #FFF8CF, inset 0 0 0 1.5px #FFE58A, 0 0 0 1.5px #5A3300, 0 4px 0 #6E3F00, 0 6px 9px rgba(0,6,20,.6); transition:transform var(--t-appui, 90ms) var(--courbe); } .map-site-sceau > .picon { width:25px; transform:skewX(calc(-1 * var(--biais))); color:#3B2100; } .map-site:active .map-site-sceau { transform:skewX(var(--biais)) translateY(2px); } .map-site-plaque { position:absolute; z-index:2; left:50%; bottom:calc(50% + 22px); transform:translateX(-50%); isolation:isolate; padding:2px 9px 3px; pointer-events:none; font:italic 800 12px/1 var(--f-titre); letter-spacing:.02em; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,10,30,.8); } .map-site-plaque::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(177deg, #2ED9FF 0%, #087BEE 45%, #0049C0 100%); box-shadow:inset 0 1px 0 #BDF4FF, 0 2px 0 #00306E, 0 2px 6px rgba(0,6,20,.5); } /* neuf : un halo d'or qui respire (1,6 s), posé derrière le sceau */ .map-site::before { content:''; position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(closest-side, rgba(255,214,90,.75), rgba(255,178,40,.35) 55%, rgba(255,178,40,0)); } .map-site.neuf::before { opacity:.6; animation:sceauRespire 1.6s ease-in-out infinite alternate; } .map-site.ouvert::before { opacity:.45; transform:scale(.86); } @keyframes sceauRespire { from { opacity:.35; transform:scale(.84); } to { opacity:.95; transform:scale(1.1); } } /* verrouillé : petit, sombre, le cadenas à la place du pictogramme, pas de plaque */ .map-site.verrouille .map-site-sceau { width:30px; height:30px; background:#0B1D31; box-shadow:inset 0 0 0 1.5px var(--filet-fort), 0 3px 0 #020912, 0 4px 7px rgba(0,6,20,.6); opacity:.88; } .map-site.verrouille .map-site-sceau > .picon { width:16px; background:#A9C4DD; -webkit-mask:var(--ic-verrou) center / contain no-repeat; mask:var(--ic-verrou) center / contain no-repeat; } .map-site.verrouille .map-site-plaque, .map-site.fait .map-site-plaque { display:none; } /* gagné : suie cernée d'or, le pictogramme éteint, la coche d'or dans l'angle */ .map-site.fait .map-site-sceau { width:36px; height:36px; background:linear-gradient(170deg, #12345C, #06162E); box-shadow:inset 0 0 0 2px var(--or), 0 3px 0 #03101F, 0 4px 8px rgba(0,6,20,.6); } .map-site.fait .map-site-sceau > .picon { width:21px; color:var(--or-clair); opacity:.7; } .map-site.fait::after { content:''; position:absolute; z-index:2; right:1px; top:1px; width:18px; height:18px; border-radius:50%; pointer-events:none; background:var(--ic-valider) center / 12px no-repeat, var(--or); box-shadow:0 0 0 1.5px #3B2100, 0 2px 4px rgba(0,6,20,.6); } .map-site.tampon .map-site-sceau { animation:sceauTampon 220ms var(--courbe) both; } @keyframes sceauTampon { from { transform:skewX(var(--biais)) scale(1.35); } to { transform:skewX(var(--biais)) scale(1); } } .map-site.sel .map-site-sceau { box-shadow:inset 0 2px 0 #FFF8CF, inset 0 0 0 1.5px #FFE58A, 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(99,221,235,.55), 0 4px 0 #6E3F00, 0 6px 9px rgba(0,6,20,.6); } .map-site.sel.fait .map-site-sceau { box-shadow:inset 0 0 0 2px var(--or), 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(99,221,235,.55), 0 3px 0 #03101F; } .map-site.sel.verrouille .map-site-sceau { box-shadow:inset 0 0 0 1.5px var(--filet-fort), 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(99,221,235,.45); opacity:1; } .map-site:focus-visible { outline:2px solid #63DDEB; outline-offset:0; } @media (prefers-reduced-motion: reduce) { .map-site.neuf::before { animation:none; opacity:.7; } .map-site.tampon .map-site-sceau { animation:none; } } /* la fiche basse d'un sceau : le mode en pastille inclinée à droite du nom, la règle en une ligne, le gain en gros chiffres */ .map-bonus-mode { position:relative; flex:none; isolation:isolate; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px; font:italic 800 var(--fs-libelle)/1 var(--f-titre); color:#fff; white-space:nowrap; } /* le calque incliné reste dans la boîte (inset latéral = demi-décalage du biais) : la pastille ne déborde pas */ .map-bonus-mode::before { content:''; position:absolute; inset:0 3px; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(160deg, #0D4479, #06152E 72%); box-shadow:inset 0 1px 0 #7FE0FF, inset 0 0 0 1px #2EA7ED; } .map-bonus-mode .picon { width:18px; color:#6FD8FF; } .map-bonus-regle { margin:-2px 0 0; font:italic 700 var(--fs-scene)/1.15 var(--f-titre); color:#CFE9FF; text-wrap:balance; } .map-bonus-prix, .arena-result-gain { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; min-width:0; } .gain-lbl { font:italic 800 var(--fs-libelle)/1 var(--f-titre); color:#8FDFFF; white-space:nowrap; } .gain-item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .gain-item .picon { width:26px; color:var(--or-clair); } .gain-item .picon.pi-chevalier-protecteur, .gain-item .picon.pi-renfort-x2 { color:#9EE3FF; } .gain-item b { font:italic 900 var(--fs-chiffre)/1 var(--f-titre); color:#fff; text-shadow:0 2px 3px var(--suie); } .gain-item small { font:italic 700 var(--fs-libelle)/1 var(--f-titre); color:#CFE9FF; } /* au résultat, le gain est le moment fort : le chiffre héros de D, centré, dans une gerbe d'or ; les autres gains dessous */ .arena-result-gain { position:relative; isolation:isolate; flex-direction:column; justify-content:center; gap:6px; margin:2px 0 0; } .arena-result-gain::before { content:''; position:absolute; left:50%; top:38px; width:300px; height:150px; margin:-75px 0 0 -150px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgba(255,200,60,.42), rgba(255,170,30,.16) 55%, rgba(255,170,30,0)); } .gain-heros { display:flex; align-items:center; justify-content:center; gap:10px; min-height:78px; } .gain-heros .gain-piece { width:64px; } .gain-heros .gain-n { font:italic 900 72px/1 var(--f-titre); letter-spacing:-.01em; color:#FFD34A; background:linear-gradient(180deg, #FFEB8A 0%, #FFD232 40%, #FFAE18 78%, #F08E08 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 0 #7A4200) drop-shadow(0 0 14px rgba(255,190,40,.55)); } .gain-autres { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; } .gain-autres .gain-item .picon { width:28px; } .gain-autres .gain-item b { font-size:26px; } #arena-result-carte, #arena-result-retry { gap:10px; } #arena-result-carte .picon, #arena-result-retry .picon { width:26px; } /* Menus et fiche d'amélioration : un panneau de contrôle bleu par écran. */ .screen.panel:not(.carte-screen) { background:radial-gradient(115% 50% at 50% 0%, #17385B, #09182D 54%, #041020); } .screen.panel:not(.carte-screen) > .head { border-bottom:1px solid rgba(53,155,226,.54); } .menu-feuille.panneau-d3::before, .building-sheet.panneau-d3::before { border-top:1px solid #47BDFC; } .building-heading .panel-title { color:var(--blanc); } .building-level { color:#39BEFF; } /* le prix d'Améliorer dans une réserve inclinée bleu nuit (D) ; le chiffre reste droit */ .building-buy .price { position:relative; isolation:isolate; padding:5px 10px 5px 8px; } .building-buy .price::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(180deg, #073B9E, #062A72); box-shadow:inset 0 1px 0 rgba(120,210,255,.45), inset 0 -1px 0 rgba(0,20,60,.6); } .menu-command.primary:disabled .price::before { background:linear-gradient(180deg, #1C3552, #12263F); } /* Résultats plus légers : pas de nouvelle plaque sur la bataille. */ .outcome .result-heading { font-size:68px; } .outcome-defeat .result-body { gap:7px; } .outcome-defeat .duel { margin-block:0; } .outcome-defeat .duel strong { font-size:58px; } .outcome-victory .won-scene { gap:3px; padding-bottom:10px; } .outcome-victory .won-record { font-size:17px; } .outcome-victory .won-etoiles { gap:4px; } .outcome-victory .etoile { min-width:83px; } .outcome-victory .etoile-forme { width:34px; height:34px; } .outcome-victory .etoile small { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .outcome-victory .won-haut .serie { display:flex; align-items:center; padding:5px 9px; border:1px solid rgba(73,173,238,.76); border-radius:3px; background:rgba(3,17,39,.88); box-shadow:0 0 8px rgba(0,119,235,.28); } .outcome-victory .won-haut .serie-tete > .picon { width:21px; } .outcome-victory .won-haut .serie-copy { flex-direction:row; align-items:baseline; gap:6px; } .outcome-victory .won-haut .serie-copy b, .outcome-victory .won-haut .serie-copy small { font-size:15px; } .outcome-victory .won-haut .serie-crans, .outcome-victory .won-bourses { display:none; } .outcome-victory .won-record { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .outcome-victory .won-rec-copy small { display:none; } .outcome-defeat .duel { gap:12px; } .outcome-defeat .duel strong { font-size:48px; } .outcome-defeat .duel-trait { height:42px; } /* Arènes : trois objectifs, dont le Siège conserve ses trois variantes historiques. */ .home-arenes { position:absolute; z-index:2; left:var(--gout-l); bottom:calc(var(--nav-h) + 165px); min-width:128px; min-height:55px; display:grid; grid-template-columns:27px 1fr; align-content:center; column-gap:6px; padding:5px 11px; border:1px solid var(--or); border-radius:3px; background:rgba(5,17,35,.9); text-align:left; box-shadow:inset 0 1px 0 rgba(255,227,150,.35), 0 4px 12px rgba(0,5,14,.55); } .home-arenes .picon { grid-row:span 2; width:25px; color:var(--or-clair); align-self:center; } .home-arenes span:not(.picon) { font:italic 900 18px/1 var(--f-titre); } .home-arenes small { font:600 11px/1.2 var(--f-texte); color:var(--or-clair); } .home-arenes:active, .arena-contract:active { transform:scale(.97); } .screen.panel.arena-screen { padding:calc(var(--safe-t) + 22px) var(--gout-r) calc(var(--safe-b) + 18px) var(--gout-l); overflow:auto; } .arena-head { display:flex; align-items:center; gap:12px; } .arena-head .round-btn { flex:none; } .arena-head small, .arena-result-kicker { font:800 11px/1 var(--f-texte); letter-spacing:.12em; color:var(--or-clair); } .arena-head h2 { margin:3px 0 0; font:italic 900 34px/1 var(--f-titre); } .arena-intro { margin:13px 0 12px; max-width:34ch; font:600 13px/1.25 var(--f-texte); color:var(--ivoire); } .arena-contracts { display:grid; gap:7px; } .arena-group-title { display:flex; align-items:baseline; justify-content:space-between; margin:7px 0 0; padding:0 2px 5px; border-bottom:1px solid rgba(215,170,85,.56); font:italic 900 18px/1 var(--f-titre); color:var(--or-clair); } .arena-group-title:first-child { margin-top:0; } .arena-group-title small { font:700 12px/1 var(--f-texte); color:var(--ivoire); } .arena-contract { width:100%; min-height:110px; box-sizing:border-box; display:grid; grid-template-columns:38px minmax(0,1fr) 42px; align-items:center; gap:9px; padding:12px 11px; border:1px solid rgba(215,170,85,.85); border-left:4px solid var(--or); border-radius:3px; background:linear-gradient(110deg, #173A60, #0A1F3C 65%, #08172D); text-align:left; box-shadow:0 5px 12px rgba(0,5,14,.45); } .arena-contract > .picon { width:34px; color:var(--or-clair); } /* Arc et flèche locaux : pictos.css est généré et ne porte pas pi-archer. */ .pi-archer { --ic:url("data:image/svg+xml,"); } .arena-contract > span:not(.picon) { min-width:0; display:grid; gap:5px; } .arena-contract strong { font:italic 900 20px/1 var(--f-titre); } .arena-contract small { font:600 12px/1.16 var(--f-texte); color:var(--ivoire); } .arena-contract em { font:italic 700 12px/1 var(--f-titre); color:var(--or-clair); } .arena-contract > b { font:italic 900 13px/1 var(--f-titre); color:var(--or-clair); } .arena-siege-variant { min-height:51px; grid-template-columns:24px minmax(0,1fr); padding:7px 9px; gap:7px; } .arena-siege-variant > .picon { width:22px; } .arena-siege-variant > span:not(.picon) { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; } .arena-siege-variant strong { font-size:18px; } .arena-siege-variant small, .arena-siege-variant em { font-size:12px; line-height:1.15; overflow-wrap:anywhere; } .arena-objective { border-left-color:#46B4D9; } .arena-chrono-ban { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 3px; font:700 13px/1.2 var(--f-texte); color:var(--ivoire); } .arena-chrono-ban select { min-width:0; max-width:58%; padding:8px 10px; border:1px solid var(--or); border-radius:2px; background:#081C36; color:var(--or-clair); font:700 14px/1 var(--f-texte); } /* Résultat d'arène et de niveau bonus (finition du 29 septembre, maquette ui_D_victoire) : plus de panneau opaque. Sur la scène voilée, de haut en bas : la plaque inclinée du titre, le gain en chiffre héros centré (pièce ronde et « +377 » dans une gerbe d'or), le détail du butin en petit, deux plaques Score et Record, la ligne de l'épreuve, puis les actions. */ .arena-outcome .outcome-veil { height:100%; background:linear-gradient(to top, rgba(2,8,22,.94), rgba(2,8,22,.86) 55%, rgba(2,8,22,.5)); } .arena-outcome .result-panel { gap:10px; padding:0 var(--gout-r) max(14px, calc(var(--safe-b) + 10px)) var(--gout-l); border:0; background:none; } .arena-outcome .plaque-titre .result-heading { font-size:64px; } .arena-result-kicker, .arena-outcome .result-copy, .arena-result-reward { text-align:center; } .arena-result-reward { margin:-4px 0 0; font:italic 800 15px/1.2 var(--f-titre); color:#CFE9FF; } .arena-result-metric { margin:0; text-align:center; font:600 13px/1.3 var(--f-texte); color:#9FC3E6; } .arena-result-score { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 6px; } .arena-outcome.defaite .arena-result-score { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 6px; } .arena-result-score .plaque-module { min-height:56px; flex-direction:row; justify-content:center; align-items:baseline; gap:10px; } .arena-outcome.defaite .arena-result-score .plaque-module { min-width:0; flex-direction:column; justify-content:center; align-items:center; gap:4px; } .arena-result-score small { font:italic 800 15px/1 var(--f-titre); color:var(--blanc); } .arena-outcome.defaite .arena-result-score small { font:italic 800 15px/1 var(--f-titre); color:var(--blanc); white-space:nowrap; } .arena-result-score strong { font:italic 900 30px/1 var(--f-titre); color:var(--blanc); } .arena-outcome.defaite .arena-result-score strong { font:italic 900 30px/1 var(--f-titre); color:var(--blanc); white-space:nowrap; } .arena-result-score .battu small { color:var(--or-clair); } .arena-result-score .battu strong { color:#FFD34A; } .arena-result-score .battu::before { box-shadow:inset 0 1px 0 rgba(255,236,160,.7), inset 0 0 0 1px #E8B64C, 0 0 12px rgba(255,190,40,.35), 0 6px 14px rgba(0,5,17,.55); } .arena-result-actions { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin-top:6px; } /* le secondaire est plus bas et plus étroit que le principal (D : « Se relever ici » au-dessus de « Rejouer ») */ .arena-result-actions > .menu-command:not(.primary) { align-self:center; width:78%; min-height:48px; } .arena-result-actions > .menu-command.primary { min-height:58px; } .arena-result-actions > .menu-command.primary strong { font-size:46px; } /* « Rejouer ce rang » devient principal à la défaite d'arène : à 46 points il passait sur deux lignes (92 points de haut) */ #arena-result-retry.primary strong { font-size:34px; white-space:nowrap; } .arena-result-actions > .menu-command.primary .picon { width:30px; } .arena-result-actions > .lien-action { margin-top:0; } .arena-outcome.defaite .plaque-titre .result-heading { color:var(--blanc); } .arena-outcome.defaite .plaque-titre::before { box-shadow:inset 0 2px 0 rgba(255,160,120,.75), inset 0 0 0 1px #E0673A, 0 0 16px rgba(224,103,58,.35), 0 8px 18px rgba(0,5,17,.6); } /* Retour 1 (suite) : les boutons des listes et des accès secondaires rejoignent la famille D. Prix de la Boutique : le principal en petit ; « Réclamer » des Missions : l'or en petit ; Arènes : plaques nuit inclinées bordées de cyan, l'or réservé aux primes. */ .shop-row .price, .mission .claim { position:relative; isolation:isolate; border-radius:0; background:none; box-shadow:none; margin-bottom:4px; transition:transform var(--t-appui) var(--courbe); } .shop-row .price::before, .mission .claim::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.22) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #34AEFF 0%, #1E8AF7 28%, #0A64DA 66%, #0558D3 100%); box-shadow:inset 0 2px 0 #9BEFFF, inset 1px 0 0 #5FD6FF, inset -1px 0 0 #5FD6FF, 0 1px 0 #03307F, 0 4px 0 #0443BD, 0 6px 8px rgba(0,14,40,.7); } .shop-row:active .price, .mission .claim:not(:disabled):active { transform:translateY(3px); background:none; box-shadow:none; } .shop-row:active .price::before { box-shadow:inset 0 3px 6px rgba(0,22,80,.5), inset 0 0 0 1px #5FD6FF, 0 1px 0 #0443BD; filter:brightness(.84); } .mission .claim::before { background:linear-gradient(180deg, rgba(255,255,255,.3) 0, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #FDE551, #FAC03A 66%, #F9B629); box-shadow:inset 0 2px 0 #FFF6B0, 0 1px 0 #8A5200, 0 4px 0 #C88615, 0 6px 8px rgba(20,10,0,.55); } .mission .claim:not(:disabled):active::before { box-shadow:inset 0 3px 6px rgba(120,60,0,.45), 0 1px 0 #C88615; filter:brightness(.86); } .mission .claim:disabled { background:none; box-shadow:none; } .mission .claim:disabled::before { background:linear-gradient(180deg, #0B2C5C, #04173A); box-shadow:inset 0 0 0 1px #33BFFF, 0 3px 0 #00305F; } .mission .claim.done::before { display:none; } .home-arenes { isolation:isolate; min-width:120px; min-height:50px; padding:5px 13px; border:0; border-radius:0; background:none; box-shadow:none; transition:transform var(--t-appui) var(--courbe); } .home-arenes::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); pointer-events:none; background:linear-gradient(160deg, rgba(11,39,76,.96), rgba(2,11,28,.95)); box-shadow:inset 0 2px 0 #57D7FF, inset 0 0 0 1px #33BFFF, 0 4px 0 #00305F, 0 0 10px rgba(0,133,248,.36); } .home-arenes .picon { color:#6FD8FF; } .home-arenes small { color:#9EDFFF; } .arena-contract { border:1px solid rgba(51,191,255,.7); border-left:4px solid #22B8FF; background:linear-gradient(110deg, #0C2D56, #071B38 65%, #05142A); box-shadow:inset 0 1px 0 rgba(120,220,255,.45), 0 4px 0 #00305F, 0 5px 12px rgba(0,5,14,.45); } .arena-contract > .picon { color:#6FD8FF; } .arena-contract strong { color:var(--blanc); } .arena-contract > b { position:relative; isolation:isolate; display:grid; place-items:center; min-height:30px; color:var(--blanc); } .arena-contract > b::before { content:''; position:absolute; inset:0 3px; z-index:-1; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(180deg, rgba(255,255,255,.22) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #34AEFF, #1E8AF7 30%, #0A64DA 70%, #0558D3); box-shadow:inset 0 2px 0 #9BEFFF, inset 0 0 0 1px #5FD6FF, 0 1px 0 #03307F, 0 3px 0 #0443BD; } .arena-group-title { color:#8FDFFF; border-bottom-color:rgba(51,191,255,.45); } .arena-head small, .arena-result-kicker { color:#8FDFFF; } .arena-objective { border-left-color:#22B8FF; } .arena-chrono-ban select { border-color:#33BFFF; color:var(--blanc); } /* page de garde : « Continuer » seul, comme dans D (le triangle concurrençait le mot) */ .title-standard .title-continue .picon { display:none; } .title-standard .title-continue strong { font-size:36px; } /* Victoire : le calque incliné du panneau descendait de 48 points sous l'écran (bottom:-48px), ce qui rendait l'écran défilable d'autant et pouvait sortir le bouton Cité (en haut) du cadre. Le pied est comblé par une ombre pleine décalée vers le bas : une ombre ne crée pas de zone défilable. */ .won-panneau.panneau-d3::before { bottom:0; box-shadow:inset 0 2px 0 rgba(79,198,255,.9), 0 -3px 16px rgba(0,120,255,.3), 0 -8px 28px rgba(0,5,17,.5), 0 44px 0 rgba(3,13,31,.98); } /* intitulés de section : cyan de D, l'or reste aux gains */ .set-head, .shop-h { color:#72D9FF; } /* Accueil : le toast du guide ne se pose jamais sur Bataille ; il monte au-dessus de la colonne du coffre */ #stage:has(> .screen[data-screen="home"]:not([hidden])) > #toast.guide { bottom:calc(var(--nav-h) + 206px); } /* Victoire de campagne (finition du 29 septembre, ui_D_victoire) : le titre sur la plaque inclinée qui claque, trois étoiles or serrées dessous, le gain en chiffre héros centré (pièce ronde, dégradé d'or), comme au résultat bonus. */ .won-plaque { width:calc(100% - 20px); transform:rotate(-4deg); padding:10px 18px 12px; margin:0 0 2px; } .won-scene .won-plaque .result-heading { transform:none; margin:0; font-size:70px; } .won-scene .won-plaque .result-copy { margin:0; } .outcome-victory:not([hidden]) .won-scene .won-plaque .result-heading { animation:none; } .outcome-victory:not([hidden]) .won-plaque { animation:claque 240ms var(--courbe) 60ms both; } .outcome-victory .won-etoiles { gap:2px; margin:0; } .outcome-victory .etoile { min-width:50px; } .outcome-victory .etoile-forme { width:46px; height:46px; } .outcome-victory .gain { gap:10px; } .outcome-victory .gain-piece { width:64px; } .outcome-victory .gain-n { font-size:72px; letter-spacing:-.01em; color:#FFD34A; text-shadow:none; background:linear-gradient(180deg, #FFEB8A 0%, #FFD232 40%, #FFAE18 78%, #F08E08 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 0 #7A4200) drop-shadow(0 0 14px rgba(255,190,40,.55)); } .outcome-victory .gain::before { content:''; position:absolute; left:50%; top:50%; width:300px; height:150px; margin:-75px 0 0 -150px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgba(255,200,60,.4), rgba(255,170,30,.14) 55%, rgba(255,170,30,0)); } .outcome-victory .gain { isolation:isolate; } /* Défaite : les mesures restent sur la bataille, sans fond, bordure ni pseudoplaque. */ .outcome-defeat .over-base { width:78%; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; row-gap:6px; padding:0; } .outcome-defeat .over-base-lbl { grid-column:1; font:italic 800 17px/1.1 var(--f-titre); } .outcome-defeat .over-base .sangle { grid-column:1; grid-row:3; height:12px; } .outcome-defeat .over-base-n { grid-column:1; grid-row:2; font:italic 900 42px/1 var(--f-titre); color:#FF8A3D; text-shadow:0 2px 0 #6A1E05, 0 0 12px rgba(255,120,40,.45); white-space:nowrap; } .outcome-defeat .outcome-veil { height:100%; background:linear-gradient(to top, rgba(2,8,22,.94), rgba(2,8,22,.82) 48%, rgba(2,8,22,.2) 78%, rgba(2,8,22,0)); } .outcome-defeat .result-heading { position:relative; isolation:isolate; } .outcome-defeat .result-heading::before { content:''; position:absolute; left:-2%; right:-2%; top:54%; height:3px; margin-top:-1.5px; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(46,143,255,0), #2E8FFF 12%, #C8F0FF 26%, rgba(46,143,255,0) 36% 64%, #C8F0FF 74%, #2E8FFF 88%, rgba(46,143,255,0)); box-shadow:0 0 10px rgba(46,143,255,.8); } .outcome-defeat .duel { width:100%; box-sizing:border-box; align-items:flex-end; gap:28px; padding:8px 20px 10px; } .outcome-defeat .duel-trait { background:#2E8FFF; box-shadow:0 0 8px rgba(46,143,255,.7); } .outcome-defeat .duel-cote small { font:italic 800 17px/1.1 var(--f-titre); } .outcome-defeat .duel-cote.record small, .outcome-defeat .duel-cote.record strong { color:#BFD3E8; } /* Fiches de la Caserne (Ban), de la Chapelle (Charge / Ralliement) et de l'Armurerie (tenue) dans la famille D (sceptique du 29 septembre : tuiles brunes à coins de 10 points, filet or). Choix : plaque nuit inclinée à bord bleu et petite tranche ; choisi : face bleu électrique à arête claire ; verrouillé : face bleu-gris. Le libellé reste droit. */ .building-ban button, .building-champion-mode button { position:relative; isolation:isolate; border-radius:0; background:none; box-shadow:none; color:var(--blanc); transition:transform var(--t-appui) var(--courbe); } .building-ban button::before, .building-champion-mode button::before { content:''; position:absolute; inset:0 4px 4px; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(var(--biais)); background:linear-gradient(180deg, rgba(255,255,255,.08) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #0C3272, #03173A); box-shadow:inset 0 1px 0 #6BDDFF, inset 0 0 0 1px #2E8FFF, 0 4px 0 #06265C, 0 5px 8px rgba(0,8,24,.55); } .building-ban button.on, .building-champion-mode button.on { box-shadow:none; } .building-ban button.on::before, .building-champion-mode button.on::before { background:linear-gradient(180deg, rgba(255,255,255,.22) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #34AEFF, #1E8AF7 30%, #0A64DA 70%, #0558D3); box-shadow:inset 0 2px 0 #9BEFFF, inset 0 0 0 1px #5FD6FF, 0 4px 0 #0443BD, 0 0 10px rgba(30,165,255,.5); } .building-ban button.on .picon, .building-champion-mode button.on .picon { color:var(--blanc); } .building-champion-mode button.on small { color:#DDF3FF; } .building-ban button:active:not(.locked), .building-champion-mode button:active:not(:disabled) { transform:translateY(3px); } .building-ban button.locked::before, .building-champion-mode button:disabled::before { background:linear-gradient(180deg, #2E4B69, #1A3656); box-shadow:inset 0 0 0 1px rgba(126,170,210,.3), 0 4px 0 #10284A; } .building-ban button { padding-bottom:7px; } .building-champion-mode button { padding:5px 12px 9px; } /* Arènes : le sélecteur « Ban de l'assaut » passe à 44 points, plaque nuit à bord bleu (famille D) ; « Jouer » tient sa case */ .arena-chrono-ban select { min-height:44px; padding:0 30px 0 12px; border:1px solid #2E8FFF; border-radius:3px; background-color:#0A2A5C; color:var(--blanc); box-shadow:inset 0 1px 0 rgba(150,225,255,.5), 0 3px 0 #06265C; font:italic 800 16px/1 var(--f-titre); } .arena-contract { grid-template-columns:38px minmax(0,1fr) 72px; } /* le calque incliné reste dans la boîte du mot (retrait latéral = demi-décalage du biais) : « Jouer » mesure juste */ .arena-contract > b { min-height:44px; font-size:17px; padding:0 9px; } .arena-contract.arena-siege-variant { grid-template-columns:22px minmax(0,1fr) 62px; min-height:86px; } /* Paramètres : « Rejouer » du guide tient dans sa plaque */ #set-guide small.action { flex:none; width:auto; min-width:max-content; white-space:nowrap; padding:0 20px 3px; min-height:40px; } #set-guide small.action::before { background:linear-gradient(180deg, rgba(255,255,255,.22) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #34AEFF, #1E8AF7 30%, #0A64DA 70%, #0558D3); box-shadow:inset 0 2px 0 #9BEFFF, inset 0 0 0 1px #5FD6FF, 0 1px 0 #03307F, 0 4px 0 #0443BD, 0 0 8px rgba(30,165,255,.45); inset:0 3px 3px; border-radius:3px; } #set-guide:active small.action::before { box-shadow:inset 0 3px 6px rgba(0,22,80,.5), inset 0 0 0 1px #5FD6FF, 0 1px 0 #0443BD; filter:brightness(.85); } /* Fiche de bâtiment : le solde sur la plaque inclinée des bourses de l'accueil (D : « 1 720 » en haut à droite) */ .building-resources .bourse-pill { position:relative; isolation:isolate; height:42px; padding:0 12px 0 8px; gap:6px; } .building-resources .bourse-pill::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:3px; transform:skewX(var(--biais)); pointer-events:none; background:linear-gradient(160deg, rgba(11,39,76,.96), rgba(2,11,28,.95)); box-shadow:inset 0 1px 0 #A9EDFF, inset 0 0 0 1px #368BD8, 0 0 10px rgba(0,133,248,.36); } .building-resources .bourse-pill > .picon { width:26px; } .building-resources .bourse-pill .val { font-size:24px; } /* coffre de l'accueil : « Ouvrir » en blanc crème sur la plaque sombre à bord or, comme D */ .rail-entry#home-chest .rail-copy > span { color:#FFF6DE; } /* D : les épées de Bataille sont presque aussi hautes que le mot ; la vidéo ×2 porte ses chiffres en héros */ .menu-command.primary > .picon.pi-epees { width:36px; } .won-video > .picon { width:42px; height:31px; } .won-video-lbl { font-size:34px; } .won-video-n .picon { width:36px; } .won-video-n b { font-size:36px; } /* victoire : la scène s'assombrit sous le bloc (D), la marche du territoire sur sa plaque, le bonus d'adresse en plaque nuit */ .outcome-victory .outcome-veil { height:78%; background:linear-gradient(to top, rgba(2,8,22,.94), rgba(2,8,22,.8) 42%, rgba(2,8,22,.35) 72%, rgba(2,8,22,0)); } .won-marche.plaque-module { flex-direction:row; justify-content:space-between; gap:12px; padding:8px 18px 8px 20px; } /* marche des étapes de D : disques sur une ligne bleue lumineuse ; fait : bleu électrique coché ; en cours : disque nuit cerné d'or ; à venir : disque nuit cerné de gris-bleu */ .pas::before, .pas::after { clip-path:circle(50% at 50% 50%); } .pas::before { background:rgba(150,185,220,.55); } .pas::after { inset:2px; background:#061A3F; } .pas.done::before { background:#9BEFFF; } .pas.done::after { background:linear-gradient(180deg, #34AEFF, #0A64DA); } .pas.cur { width:44px; height:44px; } .pas.cur::before { background:linear-gradient(180deg, #FFF0B0, #E8B64C); } .pas.cur::after { inset:3px; background:#061A3F; } .marche-pas::before { height:3px; margin-top:-1.5px; background:rgba(120,170,220,.35); } .marche-pas::after { height:3px; margin-top:-1.5px; background:#19A9FF; box-shadow:0 0 6px rgba(25,169,255,.8); } /* marche de la Cité (D : « Vers le village », la jauge et « 7 / 10 » dessous) : le nom prend toute la largeur de la plaque, la jauge et le compte partagent la seconde ligne ; « Cité → Forteresse » tient à 360 points avec les « + » des bourses */ .home-epoque { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:6px; row-gap:3px; } .home-epoque-copy { display:contents; } .home-epoque #home-epoque-lbl { grid-column:1 / span 2; grid-row:1; transform:skewX(calc(-1 * var(--biais))); } .home-epoque #home-epoque-n { grid-column:2; grid-row:2; transform:skewX(calc(-1 * var(--biais))); font-size:13px; } .home-epoque .sangle { grid-column:1; grid-row:2; } /* ================================================================ retouches du jugement Sol, tour 1 (29 septembre 2026) Valeurs relevées au DOM et au pixel sur les captures et sur les maquettes D (sol_tour1/JUGEMENT.md). */ /* Carte : l'en-tête est une bande de 54 points (72 avant) ; les deux compteurs sur une ligne, séparés par des filets inclinés */ .screen.panel.carte-screen > .head { min-height:0; padding-top:calc(var(--safe-t) + 5px); padding-bottom:5px; gap:10px; background:linear-gradient(180deg, rgba(3,16,37,.97), rgba(4,20,46,.93)); border-bottom:1px solid rgba(44,180,255,.85); } .carte-comptes { flex-direction:row; align-items:center; gap:0; } .carte-compte, .carte-etoiles { position:relative; padding-left:17px; } .carte-compte::before, .carte-etoiles::before { content:''; position:absolute; left:8px; top:50%; width:1px; height:26px; margin-top:-13px; transform:skewX(var(--biais)); background:rgba(120,200,255,.6); pointer-events:none; } .carte-compte .val { font-size:22px; } .carte-etoiles { gap:3px; } .carte-etoiles .etoile-mini { width:16px; height:16px; } .carte-etoiles .val { font-size:17px; } .carte-etoiles > small { font-size:14px; } /* Carte et fiche bonus : le pied n'est plus un panneau pleine largeur en pente de 4° (23 points de montée) mais une PLAQUE INSET de D : bord haut plat, côtés inclinés de 8°, retrait de 14 points de chaque côté, bord bleu lumineux. Elle porte le nom, la marche (ou la règle et le gain du bonus) et s'arrête au-dessus de Bataille (principal 58 + tranche + 9 de jour). */ .carte-bas { --pied-cta:calc(6px + 9px + 60px + 2px + 9px); padding-top:12px; } .carte-bas.panneau-d3::before { left:14px; right:14px; top:0; bottom:var(--pied-cta); transform-origin:50% 50%; transform:skewX(var(--biais)); border-top:0; border-radius:3px; background:linear-gradient(160deg, rgba(10,40,86,.97), rgba(3,15,38,.97) 62%, rgba(2,11,29,.97)); box-shadow:inset 0 2px 0 rgba(120,215,255,.85), inset 0 0 0 1px #2E9BFF, 0 0 14px rgba(20,130,255,.42), 0 6px 14px rgba(0,5,17,.6); } .carte-bas .map-sheet, .carte-bas .map-maitrise { padding-inline:16px 14px; } .carte-bas .map-sheet { padding-bottom:12px; } .carte-bas .map-maitrise { margin-top:-10px; padding-bottom:10px; } /* Carte : les étiquettes des nœuds sont des plaques inclinées (calque ::before en skewX), le texte reste droit */ .map-node-label { isolation:isolate; border:0; background:none; box-shadow:none; } .map-node-label::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:2px; transform:skewX(var(--biais)); background:rgba(4,18,40,.96); box-shadow:inset 0 0 0 1px #2A9EE9, 0 0 9px rgba(0,126,255,.5); } /* Forge, Caserne et autres fiches : le bord haut du panneau DESCEND vers la droite (D), et son côté droit s'incline sur les 90 premiers points ; un filet bleu suit ce biseau (dégradé « magic corner », sans filtre) */ .building-sheet.panneau-d3::before { transform:skewY(2deg); clip-path:polygon(-30px -30px, calc(100% - 32px) -30px, 100% 90px, 100% calc(100% + 30px), -30px calc(100% + 30px)); border-top:0; background:linear-gradient(to bottom left, transparent calc(50% - 1.5px), rgba(71,189,252,.95) calc(50% - .5px), rgba(71,189,252,.95) calc(50% + .5px), transparent calc(50% + 1.5px)) right top / 24px 90px no-repeat, linear-gradient(150deg, rgba(8,33,65,.98), rgba(3,13,31,.98) 65%); box-shadow:inset 0 2px 0 rgba(79,198,255,.9), 0 -3px 16px rgba(0,120,255,.3), 0 -8px 28px rgba(0,5,17,.5); } /* « Niveau 2 » sur une plaque bleue inclinée (face du principal), le texte droit */ .building-heading { align-items:center; } .building-level { position:relative; isolation:isolate; padding:4px 12px 5px; color:var(--blanc); font-size:22px; text-shadow:0 1px 1px rgba(0,30,110,.6); } .building-level::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(180deg, #2EA2FF 0%, #1C88F4 30%, #0C70E8 60%, #0667EA 100%); box-shadow:inset 0 1px 0 #8CE3FF, inset 0 0 0 1px #3DBBFF, 0 0 10px rgba(30,165,255,.45); } /* Paramètres : chaque groupe sur une plaque nuit à bord bleu, en parallélogramme de 8 points (deux calques découpés : le bord, puis la face un point en retrait) ; plus de simple filet entre les groupes */ [data-screen="settings"] .scroll-area { gap:12px; } /* le petit « Rejouer » du guide porte les faisceaux des principaux (sa tranche de 5 points reste) */ #set-guide small.action::after { content:''; position:absolute; inset:0 3px 3px; z-index:-1; pointer-events:none; transform:skewX(var(--biais)); background:linear-gradient(90deg, rgba(225,250,255,.9), rgba(225,250,255,0)) left 3px top 70% / 16% 2px, linear-gradient(90deg, rgba(225,250,255,.6), rgba(225,250,255,0)) left 3px top 80% / 10% 1.5px, linear-gradient(270deg, rgba(225,250,255,.9), rgba(225,250,255,0)) right 3px top 24% / 16% 2px, linear-gradient(270deg, rgba(225,250,255,.6), rgba(225,250,255,0)) right 3px top 14% / 10% 1.5px; background-repeat:no-repeat; } /* HUD : le compte de la foule sur une plaque inclinée de 36 points (plus de pilule arrondie) ; la plaque est un calque, le chiffre reste droit (la transformation de #crowd appartient à hud.placeWorld) */ #crowd { left:auto; right:calc(var(--gout-r) + 3px); top:calc(var(--safe-t) + 14px); transform-origin:100% 0%; min-width:64px; height:36px; padding:0 14px 0 12px; gap:6px; border-radius:0; background:none; box-shadow:none; font-size:27px; } #crowd::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:2px; transform:skewX(var(--biais)); background:linear-gradient(155deg, #0D4479, #06152E 72%); box-shadow:inset 0 1px 0 #B7EEFF, inset 0 0 0 1px #3AAFFD, 0 2px 3px rgba(0,6,23,.53); } #crowd.record { box-shadow:none; } #crowd.record::before { box-shadow:inset 0 1px 0 #FFF0B8, inset 0 0 0 1px var(--or), 0 0 10px rgba(255,190,40,.5), 0 3px 6px rgba(0,6,23,.53); } #crowd .picon { width:22px; } /* Résultats : la plaque du titre plus large et plus plate, son liseré à 2 points */ .plaque-titre { width:calc(100% - 4px); padding:6px 18px 8px; } .plaque-titre::before { box-shadow:inset 0 2px 0 #6FD8FF, inset 0 -2px 0 rgba(40,160,255,.9), inset 0 0 0 2px #3AA2FF, 0 0 20px rgba(20,140,255,.45), 0 8px 18px rgba(0,5,17,.6); } .won-plaque { width:calc(100% - 4px); padding:6px 18px 8px; } /* Victoire : les pastilles de la marche à 26 points (34 avant), plus espacées, comme D */ .won-marche .marche-pas { gap:24px; } .won-marche .pas { width:26px; height:26px; font-size:16px; } .won-marche .pas .picon { width:14px; } .won-marche .pas.cur { width:34px; height:34px; } .won-marche .marche-pas::before, .won-marche .marche-pas::after { left:13px; } .won-marche .marche-pas::before { right:13px; } .won-marche .marche-pas::after { width:calc((100% - 26px) * var(--f, 0)); } /* Score et record gardent deux colonnes égales, sans dépendre de la longueur des chiffres. */ .outcome-defeat .duel { display:grid; grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr); align-items:center; gap:12px; padding:8px 20px; } .outcome-defeat .duel-cote { flex-direction:column; align-items:center; gap:2px; } .outcome-defeat .duel-cote strong { font-size:clamp(36px, 13vw, 52px); } .outcome-defeat .duel-trait { height:34px; margin-bottom:0; } @media (max-width:374px) { .home-epoque-copy { font-size:11px; } .home-res .bourse-pill .val { font-size:18px; } .carte-screen .panel-title { font-size:24px; } } /* ================================================================ retouches du jugement Sol, tour 2 (29 septembre 2026) Valeurs relevées au DOM et au pixel sur les captures et sur les maquettes D (sol_tour2/JUGEMENT.md). */ /* T3 : les principaux des barres d'action prennent la largeur de D (332 points à 360 au lieu de 320) : plus de retrait de 6 points dans la gouttière. Le « Carte » (ou « Rang suivant ») du résultat bonus sort aussi du retrait du panneau. */ :is(#home-battle, #carte-sheet-cta, #carte-bonus-cta, #building-buy, #won-continue, #over-retry).menu-command.primary { margin-inline:0; width:100%; } .arena-result-actions > .menu-command.primary { width:auto; margin-left:calc(-1 * var(--gout-l)); margin-right:calc(-1 * var(--gout-r)); } /* T4 : le haut de face ne change pas, le bas descend au bleu de D (55 % #095AD8, 75 % #044CCE) */ .menu-command.primary { --face:linear-gradient(180deg, rgba(150,230,255,.10) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #2EA2FF 0%, #1C88F4 30%, #0A66E0 50%, #0659D6 75%, #0558D4 100%); } /* Accueil : la plaque de marche de la Cité passe d'environ 111 à 130 points ; la place vient des bourses (170 → 151), dont les « + » gardent une cible de 44 × 43 */ .home-res .bourse-pill { padding:0 3px; } .home-res .bourse-pill > .picon { width:20px; } .bourse-plus { width:22px; } .bourse-plus::after { left:-11px; right:-11px; } /* Carte et fiche bonus : l'en-tête est OBLIQUE, son bord bas monte de 10 points vers la droite (D), avec un liseré #34BCFF de 2 points sur la même pente. Le fond et le liseré sont des calques : le contenu (retour, titre, compteurs) n'est pas découpé. */ .screen.panel.carte-screen > .head { isolation:isolate; padding-bottom:9px; background:none; border-bottom:0; box-shadow:none; } .screen.panel.carte-screen > .head::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%); background:linear-gradient(180deg, rgba(3,16,37,.97), rgba(4,20,46,.93)); } .screen.panel.carte-screen > .head::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:16px; z-index:-1; pointer-events:none; background:url("data:image/svg+xml,") 0 0 / 100% 100% no-repeat; } /* Carte : « ce qui attend » redevient visible sous la marche (D : le coffre et son niveau, puis le chef et son niveau, séparés par un filet incliné). Le nom reste lu par les lecteurs d'écran ; la ligne se cache pour un bonus ou un territoire rejoué. */ .map-next { display:flex; align-items:center; margin-top:-2px; padding-top:6px; border-top:1px solid rgba(90,170,235,.35); } .map-next-item { position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; min-height:26px; } #carte-next-reward { order:-1; } .map-next-item.boss::before { content:''; position:absolute; left:0; top:50%; width:1px; height:24px; margin-top:-12px; transform:skewX(var(--biais)); background:rgba(120,200,255,.6); pointer-events:none; } .map-next-item .picon { width:26px; color:var(--or); } .map-next-item.boss .picon { color:#FF6A3A; } .map-next-copy b { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .map-next-copy small { font:italic 800 16px/1 var(--f-titre); color:var(--blanc); white-space:nowrap; text-shadow:0 2px 2px rgba(0,8,24,.7); } .carte-bas .map-sheet:has(> .map-next:not([hidden])) { padding-bottom:8px; } /* l'étiquette du chef tient sur une ligne : son niveau se lit dans la ligne « ce qui attend » (et dans l'aria-label du nœud) */ .map-node.chef-nomme .map-node-label { flex-direction:row; align-items:center; } .map-node.chef-nomme .map-node-label small { display:none; } /* Barre du bas : une lueur bleue franche au pied de la case active (D : #0053CF au pied, le cœur reste nuit). À .70 comme le proposait le jugement, le pied mesurait encore #023271 : la lueur part pleine et tient à .75 jusqu'aux 40 % de son rayon. */ #nav-rail::before { background:linear-gradient(0deg, #22B8FF 0 2px, rgba(34,184,255,0) 2px), radial-gradient(70% 50% at 50% 100%, rgba(0,90,215,1), rgba(0,90,215,.75) 40%, rgba(0,90,215,0)), linear-gradient(180deg, rgba(6,26,60,.35), rgba(6,40,110,.30)); } /* Résultat : libellé au-dessus du nombre pour garder « Record ! » entier à 360 px. */ .arena-result-score .plaque-module { min-height:44px; padding-block:4px; } .arena-outcome.defaite .arena-result-score .plaque-module { min-height:64px; padding-block:6px; } /* Forge, Caserne : le chiffre héros au jaune vif de D (#F8D74A, reflets #FDF669) plutôt qu'à l'ocre, lueur serrée. La lueur est un drop-shadow : un text-shadow passerait à travers le remplissage transparent du dégradé. */ .effet-apres { color:#FFD34A; text-shadow:none; background:linear-gradient(180deg, #FDF669 0%, #FFE250 36%, #FACB38 74%, #F2B324 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 0 #7A4200) drop-shadow(0 0 4px #FFF2A0) drop-shadow(0 0 14px rgba(255,174,24,.7)); } /* Paramètres : les plaques prennent les 8 degrés vrais de D (la découpe fixe de 8 points ne faisait que 3 à 4,6 degrés) ; le calque est incliné, le contenu reste droit, et un retrait latéral garde la plaque inclinée dans la gouttière */ /* Caserne (et mode du Champion) : la carte choisie est une plaque NUIT à bord cyan ; le bleu électrique reste au seul Améliorer */ .building-ban button.on::before, .building-champion-mode button.on::before { background:linear-gradient(180deg, rgba(150,230,255,.08) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #18375B, #071A39); box-shadow:inset 0 1px 0 #9BEFFF, inset 0 0 0 1px #42C7FF, 0 4px 0 #06265C, 0 0 8px rgba(66,199,255,.6); } .building-ban button.on .picon, .building-champion-mode button.on .picon { color:#42C7FF; } /* Le record tient dans une seconde ligne de la plaque, au-dessus du bandeau Chef et des objectifs d'Arène. */ #crowd:has(.crowd-rec:not([hidden])) { top:calc(var(--safe-t) + 8px); height:44px; font-size:25px; } #crowd:has(.crowd-rec:not([hidden])) .crowd-corps { display:grid; grid-template-columns:22px auto; gap:0 6px; } #crowd .crowd-rec { position:static; grid-column:1 / -1; margin:0; padding:0; text-align:right; font:italic 700 12px/1 var(--f-titre); color:#BFD3E8; text-shadow:0 1px 1px rgba(0,8,24,.6); white-space:nowrap; } #crowd .crowd-rec::before { display:none; } #crowd.record .crowd-rec { color:var(--or); font-weight:900; } /* Plaques de module (victoire, défaite, résultats) : liseré d'un point et demi, plus cyan et plus vif (D : #66CEFF) */ .plaque-module::before { box-shadow:inset 0 1px 0 rgba(150,225,255,.6), inset 0 0 0 1.5px #4CC8FF, 0 0 14px rgba(20,120,255,.45), 0 6px 14px rgba(0,5,17,.55); } /* La base et son pourcentage partagent l'axe du titre ; aucun cadre ne porte les statistiques. */ .outcome-defeat .over-base, .arena-outcome.defaite .over-base { margin-block:2px 6px; } .outcome-defeat .over-base-lbl, .arena-outcome.defaite .over-base-lbl { font-size:16px; } .outcome-defeat .over-base .sangle, .arena-outcome.defaite .over-base .sangle { height:10px; } .outcome-defeat .over-base-n, .arena-outcome.defaite .over-base-n { font-size:28px; } /* Défaites d'Arène et d'expédition : chiffres nus, sans plaques de statistiques. */ .arena-outcome.defaite .plaque-titre { transform:none; width:100%; padding:0; margin:0; gap:0; } .arena-outcome.defaite .plaque-titre::before { display:none; } .arena-outcome.defaite .plaque-titre .result-heading { color:var(--braise-clair); } .arena-outcome.defaite .arena-result-score { grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr); gap:12px; padding:2px 0; } .arena-outcome.defaite .arena-result-score .duel-cote strong { font-size:48px; } .arena-outcome.defaite .arena-result-score .duel-trait { height:42px; } @media (max-width:374px) { .building-actions .building-buy { flex-basis:100%; } } /* ================================================================ tranche 1 ter (6 octobre 2026) : cycle de vie Reprise d'une bataille interrompue (titre), garnison (victoire, Attaquer), coût de l'abandon (pause), stock plein (boutique), « Recommencer la campagne » (Paramètres). Placé en fin de feuille : ces règles adaptent des règles de base posées plus haut. */ /* titre : « Reprendre la bataille » et son niveau sur deux lignes, « Aller à la Cité » en second */ .title-continue-copy { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; } .title-continue-copy small { font:600 var(--fs-scene)/1 var(--f-texte); color:rgba(255,255,255,.92); } .title-standard .title-continue.reprise { min-height:70px; } .title-standard .title-continue.reprise strong { font-size:28px; white-space:nowrap; } .title-standard .title-cite { align-self:stretch; min-height:48px; color:var(--ivoire); text-shadow:var(--ombre-texte-scene); } .title-reprise-note { margin:0; padding:10px 14px; border-radius:var(--r-panneau); background:var(--panneau-plein); box-shadow:inset 0 1px 0 var(--filet-or); font:600 var(--fs-libelle)/1.35 var(--f-texte); color:var(--ivoire); text-align:center; text-wrap:balance; } /* victoire : la Cité dit combien de soldats y attendront ; sans garnison (rejeu), le petit bouton d'avant */ .won-cite-copy { display:contents; } .won-cite small { display:none; } .won-haut .won-cite.garnison { width:auto; max-width:60%; padding:5px 14px 5px 10px; gap:8px; justify-content:flex-start; } .won-cite.garnison .won-cite-copy { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; } .won-cite.garnison strong { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; font:italic 900 22px/1 var(--f-titre); } .won-cite.garnison small { display:block; font:600 var(--fs-libelle)/1.05 var(--f-texte); color:rgba(255,255,255,.94); white-space:nowrap; } /* accueil : la garnison qui attend au portail, sur « Attaquer » (le nombre) ; le menu la dit en toutes lettres */ .cap26-attack-menu .attack-content > button .attack-lecture > .attack-garnison { background:#0E5A3C; box-shadow:inset 0 0 0 1px #8FE5A0; } /* pause : ce que coûte l'abandon, sous les deux commandes qui le déclenchent */ /* boutique : stock plein (trois exemplaires), la ligne ne s'achète plus */ .shop-row.plein { cursor:default; } .shop-row.plein .price { background:none; box-shadow:none; color:#B9CCE0; padding:0 12px; } .shop-row.plein .price .picon, .shop-row.plein .price svg { display:none; } /* la face du prix est son ::before (habillage C5) : éteinte comme une offre « À venir », sans enfoncement à l'appui */ .shop-row.plein .price::before, .shop-row.plein:active .price::before { background:linear-gradient(180deg, #284663, #173457); box-shadow:inset 0 0 0 1px rgba(126,170,210,.28), 0 4px 0 #0B2440; filter:none; } .shop-row.plein:active .price { transform:none; background:none; box-shadow:none; } /* Paramètres : « Recommencer la campagne », en braise (action sans retour, confirmée en deux appuis) */ .profile-storage > button.recommence-campagne { border-color:var(--braise); background:#3A1A10; color:var(--ivoire); } .profile-storage > button.recommence-campagne.arme { background:var(--braise-sombre); border-color:var(--braise-clair); font-weight:800; } .profile-storage > button.recommence-campagne:disabled { opacity:.5; cursor:default; } .profile-storage > p.recommence-note { margin:10px 0 0; color:var(--braise-clair); font-weight:600; } .profile-storage > p.recommence-note[hidden], .profile-storage > button[hidden] { display:none; } /* Le palier se lit avant le départ, dans le flux du dialogue, jamais par-dessus les arches. */ #cap26-attack-menu .attack-tenue { display:flex; align-items:center; gap:9px; margin:0; padding:3px 8px 5px; color:var(--or-clair); text-align:left; } #cap26-attack-menu .attack-tenue[hidden] { display:none; } .attack-tenue > .picon { flex:none; width:22px; } .attack-tenue > span:last-child { min-width:0; display:flex; flex-direction:column; gap:2px; } .attack-tenue strong { font:800 16px/1.15 var(--f-titre); } .attack-tenue small { font:600 14px/1.2 var(--f-texte); color:var(--ivoire); overflow-wrap:anywhere; } /* L'espace libre est placé avant la feuille ; quand elle dépasse, il devient nul et tout reste défilable. Le contenu coupe ses grands fonds décoratifs afin qu'ils n'allongent pas artificiellement le défilement. */ #cap26-attack-menu { justify-content:flex-start; overflow:hidden auto; padding-top:calc(var(--safe-t) + 12px); touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } #cap26-attack-menu .attack-content { flex:none; display:flex; flex-direction:column; gap:7px; margin-top:auto; margin-inline:-5px; padding:6px 5px 5px; overflow:clip; } #cap26-attack-menu .attack-content > * { flex-shrink:0; } @media (max-height:700px) { #cap26-attack-menu .attack-content { gap:5px; } } /* Raccord Boutique seulement : deux devises, mêmes provisions et surface existante. */ [data-screen="shop"] .shop-ravitaillement { display:grid; grid-template-columns:48px minmax(0,1fr); gap:8px 12px; padding:12px 0; } [data-screen="shop"] .shop-ravitaillement .col { gap:4px; } [data-screen="shop"] .shop-ravitaillement .tag { text-align:left; } [data-screen="shop"] .shop-paiements { grid-column:2; display:flex; gap:8px; } [data-screen="shop"] .shop-payer { min-height:44px; min-width:88px; display:flex; justify-content:center; align-items:center; gap:6px; padding:6px 10px; color:var(--ivoire); background:var(--azur); border:1px solid var(--azur-clair); border-radius:4px; font:700 var(--fs-libelle)/1.2 var(--f-texte); } [data-screen="shop"] .shop-payer .picon { width:20px; height:20px; } [data-screen="shop"] .shop-payer:disabled { opacity:.5; cursor:default; } [data-screen="shop"] .shop-payer:not(:disabled):active { background:var(--azur-appui); transform:translateY(1px); } [data-screen="shop"] .shop-payer:focus-visible, [data-screen="shop"] .shop-ravitaillement:focus-visible { outline:2px solid var(--azur-clair); outline-offset:3px; } [data-screen="shop"] .shop-ravitaillement.plein .shop-payer .picon { display:none; } [data-screen="shop"] .shop-recu { color:var(--azur-clair); font:600 var(--fs-libelle)/1.3 var(--f-texte); } @media (min-width:400px) { [data-screen="shop"] .shop-ravitaillement { grid-template-columns:56px minmax(0,1fr) auto; } [data-screen="shop"] .shop-paiements { grid-column:3; grid-row:1; flex-direction:column; align-self:center; } }