@charset "UTF-8";
/*
 * HUD À ÉCRANS — habillages (Game Boy, fenêtres bleues SNES, sous-écran, pierre et or).
 * Généré depuis le POC (docs/poc/hud_ecrans/menus_ecrans.html), chaque règle préfixée par .hud-ecrans :
 * les noms du moteur (.fen, .it, .liste…) ne doivent toucher ni le site ni le créateur.
 * Tout est mesuré en CASES : --t = largeur d'une case de la grille du HUD.
 */
.hud-ecrans{position:absolute;container-type:inline-size;pointer-events:none;z-index:60;user-select:none;-webkit-user-select:none}
.hud-ecrans .hud-surface{position:absolute;inset:0}
.hud-ecrans .fen,.hud-ecrans .fond{pointer-events:auto}
.hud-ecrans .couche.inerte .fen{pointer-events:none}
.hud-ecrans img{max-width:none}
.hud-ecrans .hud-surface{position:absolute;inset:0;--t:calc(100cqw / var(--cols));font-size:calc(var(--t) * var(--fz));line-height:1.15;overflow:hidden}
.hud-ecrans .couche{position:absolute;inset:0}
/* --tc : la case de la boîte, que --k ne réduit pas (géométrie des fenêtres d'un écran « collé aux bords ») */
.hud-ecrans .hud-surface{--tc:calc(100cqw / var(--cols))}
/* un écran « collé aux bords » couvre toute l'aire de jeu : --bx/--by/--gw/--gh posés par HudEcrans (absents = la boîte) */
.hud-ecrans .couche.bords{inset:auto;left:var(--bx,0px);top:var(--by,0px);width:var(--gw,100%);height:var(--gh,100%)}
/* une FENÊTRE seule « sur l'écran » (F2 l'a lâchée hors du cadre) : son enveloppe couvre l'aire de jeu */
.hud-ecrans .bords-fen{position:absolute;left:var(--bx,0px);top:var(--by,0px);width:var(--gw,100%);height:var(--gh,100%);pointer-events:none}
.hud-ecrans .hud-surface:has(.couche.bords),.hud-ecrans .hud-surface:has(.bords-fen),.hud-ecrans .hud-surface:has(.fond),.hud-ecrans .hud-surface:has(.poignee-ecran){overflow:visible}
.hud-ecrans .couche.inerte{pointer-events:none}
.hud-ecrans .fond{position:absolute;inset:0;background:var(--sk-fond)}
/* Un FOND PLEIN épouse SES fenêtres (hud/ajuster.js → placerFonds) : posé en px après chaque rendu. */
/* --k : réduction propre à UNE fenêtre, posée par hud/ajuster.js quand son contenu déborde (1 = taille dessinée) */
.hud-ecrans .fen{--t:calc(100cqw / var(--cols) * var(--k,1));font-size:calc(var(--t) * var(--fz))}
.hud-ecrans .fen{position:absolute;padding:calc(var(--t)*var(--pad));background:var(--sk-fen);color:var(--sk-txt);overflow:hidden;display:flex;flex-direction:column;gap:calc(var(--t)*.3)}
.hud-ecrans .fen.nu{background:transparent!important;border:0!important;box-shadow:none!important;padding:0}
.hud-ecrans .fen.ligne{flex-direction:row;align-items:center;justify-content:space-around}
.hud-ecrans .fen.ov{z-index:5}
.hud-ecrans .titre{font-weight:600}
.hud-ecrans .txt{overflow-wrap:break-word}
.hud-ecrans .vide{opacity:.8}
.hud-ecrans .liste{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:calc(var(--t)*.5)}
.hud-ecrans .it{display:grid;grid-template-columns:var(--cw,var(--t)) minmax(0,1fr) auto;align-content:center;min-height:calc(var(--t)*var(--pas));column-gap:calc(var(--t)*.2);cursor:pointer}
.hud-ecrans .it .lbl{white-space:nowrap;overflow:hidden}
.hud-ecrans .it .dr{white-space:nowrap}
.hud-ecrans .it .ln,.hud-ecrans .it .jauge{grid-column:2 / -1}
.hud-ecrans .it .ln{white-space:nowrap}
.hud-ecrans .it .cur{font-family:"Segoe UI Symbol","Noto Sans Symbols 2",system-ui,sans-serif;line-height:1}
.hud-ecrans .it.foc .cur::before{content:var(--sk-cur)}
.hud-ecrans .it.memo .cur::before{content:var(--sk-cur);opacity:.45}
.hud-ecrans .it.off{color:var(--sk-off)}
.hud-ecrans .defile{font-size:.7em;text-align:right;opacity:.8;height:1em}
.hud-ecrans .grille{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:calc(var(--t)*.22)}
.hud-ecrans .cel{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--sk-cel);cursor:pointer;overflow:hidden}
.hud-ecrans .cel img{width:68%;image-rendering:pixelated}
.hud-ecrans .cel.foc{outline:calc(var(--t)*.14) solid var(--sk-sel);outline-offset:calc(var(--t)*-.07);z-index:1}
.hud-ecrans .cel.off img{opacity:.35;filter:grayscale(1)}
.hud-ecrans .bdg{position:absolute;right:5%;bottom:3%;font-size:.62em;line-height:1}
.hud-ecrans .etq{position:absolute;inset:0;display:grid;place-items:center;font-size:.55em;opacity:.55;text-align:center}
.hud-ecrans .recharge{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.66)}
.hud-ecrans .rc-n{position:absolute;inset:0;display:grid;place-items:center;font-size:.8em;color:#fff;font-weight:700}
.hud-ecrans .jauge{display:flex;align-items:center;gap:.35em}
.hud-ecrans .jauge .je{font-size:.8em}
.hud-ecrans .jauge .jb{flex:1;height:calc(var(--t)*.42);background:var(--sk-jfond);position:relative;overflow:hidden}
.hud-ecrans .jauge .jb i{display:block;height:100%;background:var(--sk-jplein)}
.hud-ecrans .jauge .jt{white-space:nowrap}
.hud-ecrans .jauge.sous{flex-wrap:wrap}
.hud-ecrans .jauge.sous .jt{width:100%;text-align:right}
.hud-ecrans .coeurs{display:flex;flex-wrap:wrap;gap:calc(var(--t)*.06);max-width:calc(var(--t)*7.2)}
.hud-ecrans .co{font-family:"Segoe UI Symbol",system-ui,sans-serif;font-size:calc(var(--t)*.9);line-height:1;width:calc(var(--t)*.85);text-align:center}
.hud-ecrans .co.plein{color:#d83a20}
.hud-ecrans .co.vide{color:#c9b98a}
.hud-ecrans .co.demi{background:linear-gradient(90deg,#d83a20 50%,#c9b98a 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud-ecrans .orbe{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#140707;border:calc(var(--t)*.22) solid #5b4529;box-shadow:inset 0 0 calc(var(--t)*.8) #000}
.hud-ecrans .orbe i{position:absolute;left:0;right:0;bottom:0}
.hud-ecrans .orbe.vie i{background:radial-gradient(circle at 40% 30%,#ff6a50,#a0101a 60%,#4a0508)}
.hud-ecrans .orbe.mana i{background:radial-gradient(circle at 40% 30%,#7aa0ff,#1a2fb0 60%,#070c40)}
.hud-ecrans .orbe span{position:absolute;inset:0;display:grid;place-items:center;font-size:.8em;color:#f2e6c8;text-shadow:0 0 3px #000}
.hud-ecrans .slot-ico{display:flex;align-items:center;gap:calc(var(--t)*.2)}
.hud-ecrans .slot-ico .si{width:calc(var(--t)*1.8);height:calc(var(--t)*1.8);display:grid;place-items:center;border:calc(var(--t)*.1) solid currentColor;border-radius:calc(var(--t)*.2);position:relative}
.hud-ecrans .slot-ico .si img{width:80%;image-rendering:pixelated}
.hud-ecrans .slot-ico .sq{position:absolute;right:-.2em;bottom:-.3em;font-size:.6em}
.hud-ecrans .toast{left:0;top:70%;width:100%;height:30%;z-index:8}
.hud-ecrans .cf-texte{left:0;top:70%;width:100%;height:30%}
.hud-ecrans .cf-choix{left:66%;top:40%;width:34%;height:30%}
.hud-ecrans .infobulle{position:absolute;z-index:9;pointer-events:none;max-width:46%;padding:.55em .75em;background:rgba(10,10,18,.95);border:1px solid #6a6a7c;color:#d8d2c0;font-family:"Alegreya Sans",system-ui,sans-serif;font-size:calc(var(--t)*.95);line-height:1.3}
.hud-ecrans .infobulle .ib-t{font-weight:700;margin-bottom:.15em}
.hud-ecrans .infobulle .ib-p{margin-top:.35em;color:#8ad08a}
.hud-ecrans .r-commun{color:#ece6d4} .r-magique{color:#8a8aff} .r-rare{color:#f2dc58} .r-unique{color:#c9a060}

/* habillage Game Boy (Pokémon) */
.hud-ecrans.sk-gb{--fz:.8;--pad:.8;--sk-fond:#e0f0c8;--sk-fen:#e0f0c8;--sk-txt:#183018;--sk-off:#86a070;--sk-cur:"▶";--sk-jfond:#a8c070;--sk-jplein:#183018;--sk-cel:#c8dca8;--sk-sel:#183018}
.hud-ecrans.sk-gb .hud-surface{font-family:"Press Start 2P",ui-monospace,monospace}
.hud-ecrans.sk-gb .fen{border:calc(var(--t)*.32) double #183018;border-radius:calc(var(--t)*.2)}
.hud-ecrans.sk-gb .fen.c-leger{background:transparent;border:0;border-left:calc(var(--t)*.14) solid #183018;border-bottom:calc(var(--t)*.14) solid #183018;border-radius:0;padding:calc(var(--t)*.3)}
.hud-ecrans.sk-gb .fen.c-vide{padding:0}
.hud-ecrans.sk-gb .jauge .jb{border:calc(var(--t)*.08) solid #183018;border-radius:calc(var(--t)*.2)}
.hud-ecrans.sk-gb .jauge[data-niveau="moyen"] .jb i{background:#507840}
.hud-ecrans.sk-gb .jauge[data-niveau="bas"] .jb i{background:#183018;opacity:.6}

/* habillage Final Fantasy V (fenêtres bleues) */
.hud-ecrans.sk-ff{--fz:1.05;--pad:.8;--sk-fond:#0b1030;--sk-fen:linear-gradient(180deg,#4458dc 0%,#1c2894 52%,#0c1462 100%);--sk-txt:#f2f2f6;--sk-off:#8088b8;--sk-cur:"☛";--sk-jfond:#0a0f40;--sk-jplein:#e8e8f0;--sk-cel:#1a2480;--sk-sel:#fff}
.hud-ecrans.sk-ff .hud-surface{font-family:"Pixelify Sans",system-ui,sans-serif}
.hud-ecrans.sk-ff .fen{border:calc(var(--t)*.22) solid #dcdce8;border-radius:calc(var(--t)*.55);box-shadow:inset 0 0 0 calc(var(--t)*.1) #565676,0 0 0 calc(var(--t)*.08) #1e1e38;text-shadow:calc(var(--t)*.1) calc(var(--t)*.1) 0 #0a0a20}
.hud-ecrans.sk-ff .it{--cw:calc(var(--t)*1.6)}
.hud-ecrans.sk-ff .it .cur{color:#fff;font-size:1.1em}
.hud-ecrans.sk-ff .toast{top:0;height:16%}

/* habillage Link's Awakening (sous-écran) */
.hud-ecrans.sk-zelda{--fz:.72;--pad:.5;--sk-fond:#f6eec0;--sk-fen:#f6eec0;--sk-txt:#2a1c10;--sk-off:#b0a080;--sk-cur:"▶";--sk-jfond:#c9b98a;--sk-jplein:#d83a20;--sk-cel:#ece0a8;--sk-sel:#2850c8}
.hud-ecrans.sk-zelda .hud-surface{font-family:"Press Start 2P",ui-monospace,monospace}
.hud-ecrans.sk-zelda .fen{border:calc(var(--t)*.2) solid #2a1c10;border-radius:calc(var(--t)*.3)}
.hud-ecrans.sk-zelda .fen.c-barre{border-radius:0;border-width:calc(var(--t)*.14) 0 0 0}
.hud-ecrans.sk-zelda .cel{border-radius:calc(var(--t)*.2)}
.hud-ecrans.sk-zelda .cel.foc{animation:hud-clign .7s steps(2) infinite}
@keyframes hud-clign{50%{outline-color:transparent}}

/* habillage Diablo / WoW (fenêtres non modales, infobulles) */
.hud-ecrans.sk-diablo{--fz:.92;--pad:.55;--sk-fond:transparent;--sk-fen:linear-gradient(180deg,#1d1611,#0e0a08);--sk-txt:#c8bb9c;--sk-off:#5d5547;--sk-cur:"";--sk-jfond:#1a1410;--sk-jplein:#9a2a1a;--sk-cel:#15100c;--sk-sel:#e2bd60}
.hud-ecrans.sk-diablo .hud-surface{font-family:"Alegreya Sans",system-ui,sans-serif}
.hud-ecrans.sk-diablo .fen{border:calc(var(--t)*.14) solid #6b5434;box-shadow:inset 0 0 0 calc(var(--t)*.08) #2b2015,0 calc(var(--t)*.2) calc(var(--t)*.9) rgba(0,0,0,.65)}
.hud-ecrans.sk-diablo .titre{font-family:Cinzel,serif;color:#e2bd60;text-align:center;letter-spacing:.08em;font-size:1.05em}
.hud-ecrans.sk-diablo .cel{border:1px solid #3a2e20}
.hud-ecrans.sk-diablo .it{--cw:0px;padding-inline:.4em;border:1px solid #3a2e20;margin-bottom:calc(var(--t)*.15);text-align:center}
.hud-ecrans.sk-diablo .it.foc{color:#f2d27a;border-color:#e2bd60;background:#2a1f14}
.hud-ecrans.sk-diablo .toast{left:25%;width:50%;top:6%;height:auto;text-align:center}
.hud-ecrans.sk-diablo .cf-texte{left:28%;width:44%;top:30%;height:auto}
.hud-ecrans.sk-diablo .cf-choix{left:42%;width:16%;top:48%;height:auto}
@media (prefers-reduced-motion:reduce){.hud-ecrans.sk-zelda .cel.foc{animation:none}}
/* F2 en jeu : déplacer (glisser la fenêtre) et redimensionner (glisser la poignée ◢) — HudEcrans.debutGeste */
.hud-ecrans.edition .fen{pointer-events:auto!important;cursor:move;outline:2px dashed #2DB3FF;outline-offset:-2px}
.hud-ecrans.edition .fen.en-geste{outline:2px solid #2DB3FF;z-index:20}
.hud-ecrans .poignee-taille{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#2DB3FF 50%);z-index:3}
.hud-edition-barre{position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:600;pointer-events:auto;max-width:92%;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;padding:6px 10px;background:rgba(45,179,255,.94);color:#04202f;font:12px/1.35 monospace;border-radius:4px}
.hud-edition-barre button{font:inherit;font-weight:bold;cursor:pointer;padding:2px 8px;border:1px solid #04202f;background:#e8f6ff;color:#04202f;border-radius:3px}
.hud-edition-barre em{font-style:normal;font-weight:bold}
/* F2 : les fenêtres CHOISIES (déplacées ensemble) et le rectangle de sélection */
.hud-ecrans.edition .fen.choisie{outline:3px solid #FFB02D;outline-offset:-3px}
.hud-lasso{position:absolute;z-index:70;border:1px dashed #FFB02D;background:rgba(255,176,45,.14);pointer-events:none}
.hud-edition-barre strong{color:#5a3a00}
/* F2 : la poignée d'un ÉCRAN entier (« ≡ equipe ») — la glisser emmène toutes ses fenêtres et son fond */
.hud-ecrans .poignee-ecran{position:absolute;z-index:30;height:20px;padding:0 8px;font:bold 12px/20px monospace;color:#04202f;background:#2DB3FF;border-radius:4px 4px 0 0;cursor:move;white-space:nowrap;pointer-events:auto}
/* ✕ / − (réglages d'écran boutonFermer / boutonReduire) : au coin haut-droit de la fenêtre la plus haute à droite.
 * Mesurés en cases (--t) comme le reste, et dans la teinte de l'habillage (currentColor). */
.hud-ecrans .ctl-fen{position:absolute;top:calc(var(--t)*.12);right:calc(var(--t)*.12);display:flex;gap:calc(var(--t)*.15);z-index:4}
.hud-ecrans .ctl-fen .ctl{display:block;min-width:calc(var(--t)*.95);height:calc(var(--t)*.95);line-height:calc(var(--t)*.95);font-size:calc(var(--t)*.7);text-align:center;cursor:pointer;color:var(--sk-txt);border:1px solid currentColor;border-radius:2px;opacity:.75;background:var(--sk-fen)}
.hud-ecrans .ctl-fen .ctl:hover{opacity:1}
/* L'onglet d'un menu réduit : posé au coin haut-droit de la fenêtre qui portait le bouton (son enveloppe ne prend pas la souris). */
.hud-ecrans .reduit-ancre{position:absolute;pointer-events:none}
.hud-ecrans .fen.reduit{position:absolute;top:0;right:0;left:auto;bottom:auto;width:auto;height:auto;padding:calc(var(--t)*.25) calc(var(--t)*.5);white-space:nowrap;cursor:pointer;pointer-events:auto;display:block;overflow:visible}

/* habillage SALON DE JEU (jeux de table, cartes) *(2026-10-26, la bataille 3.68 — Denis : « un HUD de meilleure qualité »)*
 * Feutre vert, double liseré doré, titres gravés (Cinzel), texte lisible ET accentué (Alegreya Sans — la police Game Boy n'a pas
 * de capitale accentuée). Les boutons sont des PLAQUES : on voit d'un coup d'œil ce qui se clique et ce qui est grisé. */
.hud-ecrans.sk-salon{--fz:.86;--pad:.6;--sk-fond:rgba(4,18,12,.55);--sk-fen:linear-gradient(165deg,#165238 0%,#0e3a28 55%,#0a2c1e 100%);--sk-txt:#f1e9d2;--sk-off:#6f8574;--sk-cur:"◆";--sk-jfond:#06190f;--sk-jplein:#d9b45a;--sk-cel:#0b2f20;--sk-sel:#e9c86b}
.hud-ecrans.sk-salon .hud-surface{font-family:"Alegreya Sans",system-ui,sans-serif}
.hud-ecrans.sk-salon .fen{border:calc(var(--t)*.1) solid #d1ad55;border-radius:calc(var(--t)*.35);box-shadow:inset 0 0 0 calc(var(--t)*.12) #0a2c1e,inset 0 0 0 calc(var(--t)*.18) rgba(209,173,85,.55),0 calc(var(--t)*.15) calc(var(--t)*.7) rgba(0,0,0,.55);text-shadow:0 1px 0 rgba(0,0,0,.45)}
.hud-ecrans.sk-salon .titre{font-family:Cinzel,serif;color:#e9c86b;text-align:center;letter-spacing:.1em;font-size:1.02em;padding-bottom:calc(var(--t)*.18);border-bottom:1px solid rgba(209,173,85,.45)}
.hud-ecrans.sk-salon .txt{line-height:1.3}
.hud-ecrans.sk-salon .it{--cw:calc(var(--t)*.9);padding-inline:.45em;margin-bottom:calc(var(--t)*.14);border:1px solid rgba(209,173,85,.4);border-radius:calc(var(--t)*.22);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.12))}
.hud-ecrans.sk-salon .it .cur{color:#e9c86b;font-size:.75em}
.hud-ecrans.sk-salon .it.foc,.hud-ecrans.sk-salon .it:hover{color:#fff4d4;border-color:#e9c86b;background:linear-gradient(180deg,#2a6b4a,#174a33)}
.hud-ecrans.sk-salon .it.off,.hud-ecrans.sk-salon .it.off:hover{color:var(--sk-off);border-color:rgba(111,133,116,.35);background:rgba(0,0,0,.15);cursor:default}
.hud-ecrans.sk-salon .fen.ligne .liste{width:100%}
.hud-ecrans.sk-salon .fen.c-barre{border-radius:0;border-width:calc(var(--t)*.1) 0 0 0}
.hud-ecrans.sk-salon .ctl-fen .ctl{color:#e9c86b;border-radius:calc(var(--t)*.2)}