/* Ailfe Master — SKIN GUI (pack « Cartoon GUI »). Reskinne les pages existantes pour coller aux maquettes
   (ex. 07_Character_Skill_Detail) : popups CRÈME (parchemin, bordure foncée, double liseré), titres avec
   ligne + losange, vraies icônes monnaie (pièce/gemme), nav en tuiles. Chargé APRÈS style.css. */

:root {
  --cr-bg: #f6edd4;       /* crème (fond popup) */
  --cr-hi: #fff7e6;       /* liseré clair interne */
  --cr-ln: #e7cfa0;       /* liseré tan interne */
  --cr-ink: #7a3b16;      /* bordure/texte brun foncé */
  --cr-sub: #9a7038;      /* texte secondaire brun */
  --cr-div: #d8b87f;      /* ligne de séparation sous les titres */
}

/* ---------- HUD GAUCHE (joueur) — façon référence : cadre avatar doré + pseudo + chevron niveau + barre XP ---------- */
.me { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 7px; align-items: center; }
/* avatar = carré arrondi cadre or (le pack n'a que des cadres octogonaux → CSS fidèle à la réf) */
.me .ava { width: 34px; height: 34px; border-radius: 0; background: #ffe6b0; border: 2px solid #a5672f; /* bordure MARRON (plus de noir/orange) */
  box-shadow: 0 2px 0 #6f4419; overflow: hidden; display: block; padding: 0; flex: 0 0 auto; } /* lip 3D marron foncé en bas */
/* le canvas paper-doll (256²) est zoomé/cadré sur la tête + buste du sprite idle du joueur */
.me .ava > canvas { display: block; width: 215%; height: 215%; margin: -55% 0 0 -57%; image-rendering: pixelated; }
.me-txt { gap: 2px; align-items: flex-start; }
.me-name { color: #fff; font-weight: 800; font-size: 14px; text-shadow: 0 2px 0 #0008, 0 0 5px #0007; }
.me-bar { display: flex; align-items: center; height: 22px; }
/* bandeau PUISSANCE du joueur (sous la barre XP) — plaque NOIRE avec losanges décoratifs sur les côtés */
.me-power { margin-top: 4px; }
.mp-banner { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 22px; box-sizing: border-box;
  padding: 0 12px; min-width: 64px; justify-content: center;
  background: linear-gradient(180deg, #3a3346, #272232); border: 2px solid #14101c; border-radius: 8px;
  box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -2px 0 #00000040, 0 2px 3px #0006;
  color: #ffe7a3; font-weight: 900; font-size: 12px; text-shadow: 0 1px 1px #000; }
/* petits losanges gris sur les bords (façon réf) */
.mp-banner::before, .mp-banner::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg); background: #6a6478; box-shadow: inset 0 0 0 1px #110d18; }
.mp-banner::before { left: 4px; } .mp-banner::after { right: 4px; }
.mp-banner .mp-ic { width: 15px; height: 15px; flex: 0 0 auto; background: center/contain no-repeat; filter: drop-shadow(0 1px 1px #0006); }
/* niveau = VRAI losange GUI (Slider_Level teinté bleu) + nombre */
.me-lvl { width: 24px; height: 24px; flex: 0 0 auto; margin-right: -4px;
  background: url('/master/assets/gui/Slider_Level_02_Icon.png') center / contain no-repeat; display: grid; place-items: center; z-index: 2; }
.me-lvl b { color: #fff; font-weight: 900; font-size: 11px; text-shadow: 0 1px 1px #0007; }
/* barre XP = rectangle plat sombre translucide (PAS d'ovale) + remplissage bleu + "X/Y" */
.xpbar { height: 16px; width: 92px; position: relative; overflow: hidden; /* design bouton : bord sombre, coins carrés (SANS le lip bleu qui dépassait) */
  background: rgba(20, 18, 28, 0.82); border: 2px solid #2c2438; border-radius: 0; margin-left: -6px; }
.xpbar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(180deg, #7fe0ff, #2aa8e6); transition: width .3s; }
.xptxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* CENTRÉ sur toute la barre (plus de décalage droite) */
  font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #0009; z-index: 1; }
/* ---------- HUD DROIT (or/gemme) — rect plat SOMBRE translucide (réf) + icônes RÉELLES ResourceBar ---------- */
.cur { display: flex; flex-direction: row; gap: 5px; }
.cur { margin-right: 14px; align-self: flex-start; margin-top: 1px; } /* aligné en hauteur avec le pseudo du joueur */
.cur-chip, .cur-chip.gold, .cur-chip.gem { background: rgba(20, 16, 26, 0.82); border: 0; border-radius: 8px;
  box-shadow: none; color: #fff; font-size: 12.5px; font-weight: 800; overflow: visible !important;
  padding: 5px 9px 5px 27px; min-width: 76px; width: auto; position: relative; justify-content: flex-end; } /* compact mais l'or complet visible */
.cur-chip::before { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 1px 1px #0008); }
.cur-chip.gold::before { background-image: url('/master/assets/gui/ResourceBar_Icon_Gold.png'); }
.cur-chip.gem::before  { background-image: url('/master/assets/gui/ResourceBar_Icon_Gem.png'); }

/* icônes d'équipement (gear) dans les slots : un peu plus grandes que les vignettes d'objet */
.slot .ic.gear { width: 68%; height: 68%; }

/* pièce d'or en ligne (remplace l'emoji 🪙 → cohérent + pas de « tofu » Windows) */
.coin { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.24em;
  background: url('/master/assets/gui/Economy_Coin_02_Gold.png') center/contain no-repeat;
  filter: drop-shadow(0 1px 1px #0004); }

/* icônes d'unités (vraies icônes du pack) dans les cartes + derrière le héros */
.gicon { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; }
.uc-ic .gicon { width: 42px; height: 42px; filter: drop-shadow(0 2px 1px #0005); }
/* unités sous le héros : petites */
.ally { font-size: 16px; }
.ally .al-ic .gicon { width: 19px; height: 19px; filter: drop-shadow(0 2px 1px #0006); }
.ally .al-c { font-size: 8px; padding: 0 2px; bottom: -2px; right: -5px; }
/* mini-icône GUI dans le losange de TYPE (au lieu de l'emoji) */
.slot .type-badge .tb-ic { display: block; width: 13px; height: 13px;
  background-size: contain; background-repeat: no-repeat; background-position: center; }

/* ---------- HUD FLOTTANT + MAP PLEIN ÉCRAN (façon « Preview_Forest ») ----------
   La map (herbe HAUT + route de terre AU MILIEU + herbe BAS) remplit TOUT le bloc combat,
   derrière le top bar et le « Vague », jusqu'à la forge. Le top bar flotte par-dessus. */
#topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent;
  padding-top: max(2px, calc(env(safe-area-inset-top) - 32px)); } /* contenu HUD remonté de 32px au total */
/* Bandeau MARRON commun : en haut de chaque page (combat/mine/compagnon), la topbar (or/gemmes) flotte par-dessus. */
#pgtop { flex: 0 0 auto; height: calc(max(2px, env(safe-area-inset-top) - 32px) + 74px); position: relative; z-index: 1; /* = padding-top du HUD + sa hauteur → bandeau collé au contenu */
  background: linear-gradient(180deg, #c79a5e 0%, #b07f49 55%, #9a6b3a 100%);
  border-bottom: 5px solid #6e4a26; box-shadow: inset 0 -10px 0 #00000018; }
/* fond de #app = brun du bandeau → les safe-areas (statut iOS en haut, barre home en bas) restent BRUNES, pas navy.
   (le letterbox sur ordi = fond du body, inchangé) */
#app { background: #c79a5e; }
#battle { padding: 8px 0 6px; position: relative; overflow: hidden; background: #f4e6c8; } /* fond BEIGE uni (plus de map forêt) */
/* (ancien prototype --forest-map supprimé — la scène de combat = maps JSON via scene.js) */
/* progression de chapitre : EN HAUT AU CENTRE de la scène de combat */
#battle .stage-head { position: absolute; left: 0; right: 0; top: 2%; z-index: 3; text-align: center; }
/* Scène de combat = couche JSON (#sceneLayer, scene.js) qui remplit #battle ; repli beige si aucune map JSON. */
#battle .field { margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; min-height: 0; } /* la scène = la couche JSON (#sceneLayer via scene.js) ; plus d'ancien décor CSS prototype */
/* combattants sur la route (centre vertical), face à face — position pilotée par combat.js
   (plus petits ; l'ennemi est inversé droite→gauche) */
#battle .hero, #battle .foe { position: absolute; bottom: calc(44% - 10px); width: 84px; height: 84px; z-index: 2;
  image-rendering: auto; animation: none; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
  /* descendus (-10px) ; PAS de filter drop-shadow (il sort du compositing GPU → jank mobile) ; translateZ+will-change = couche GPU dédiée → déplacement fluide 60fps */
#battle .hero { transform: scale(1.25); transform-origin: 50% 60%; }
#battle .foe { transform: scale(-1.25, 1.25); transform-origin: 50% 60%; }
#battle .allies { bottom: 44%; z-index: 2; } /* base des compagnons = ligne de combat (comp N°2 dessus) */
#battle .vs { display: none; }
/* COMPAGNONS combattants (mêlée) : sprite walk en marche + attack au contact */
.pet-fighter { position: absolute; bottom: calc(44% - 12px); transform: translateX(var(--px, 0px)) translateY(var(--py, 0px)) translateX(-50%); z-index: 2; pointer-events: none; will-change: transform; } /* base = ligne de combat (comme héros/monstre) */
/* mort d'un compagnon (pas de Dead3 dans le pack) : bascule + fondu, figé sur la dernière frame */
.pet-fighter.pet-dead { animation: petdie .6s ease-in forwards; }
@keyframes petdie { to { transform: translateX(var(--px, 0px)) translateY(var(--py, 0px)) translateX(-50%) rotate(82deg) translateY(14px); opacity: 0; } }
/* CONTOUR #F50 = visualisation de la collision = SILHOUETTE des pixels colorés (pets + paperdoll héros/monstre) */
#battle .coll-outline { filter:
  drop-shadow(2px 0 0 #F50) drop-shadow(-2px 0 0 #F50) drop-shadow(0 2px 0 #F50) drop-shadow(0 -2px 0 #F50)
  drop-shadow(0 3px 2px #0006) !important; }
/* nombres de dégâts flottants : blanc = infligés, rouge = reçus ; montent en se fondant */
.dmg-float { position: absolute; bottom: calc(38% + 80px); transform: translateX(-50%); z-index: 6; pointer-events: none; /* JUSTE AU-DESSUS des barres de vie (héros ET monstres, même hauteur) */
  font-weight: 900; font-size: 17px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #0009;
  animation: dmgfloat .85s ease-out forwards; }
.dmg-float.recv { color: #ff5a4a; text-shadow: 0 2px 0 #3a0000, 0 0 4px #000; }
.dmg-float.poison { color: #62e562; text-shadow: 0 2px 0 #133a13, 0 0 5px #0a2a0a; } /* dégâts de poison (VFX poison à venir) */
.dmg-float.crit { color: #ffd24a; font-size: 22px; text-shadow: 0 2px 0 #6a3a0e, 0 0 6px #ff8a00; } /* coup critique */
.dmg-float.block { color: #cfd6e2; font-size: 14px; text-shadow: 0 2px 0 #2a3040, 0 0 4px #000; } /* attaque bloquée */
.dmg-float.pet { color: #5db6ff; text-shadow: 0 2px 0 #0a2a4a, 0 0 5px #0a1a3a; } /* dégâts des compagnons = bleu */
@keyframes dmgfloat {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-36px) scale(1); } }
/* barres de vie au-dessus des combattants (left posé par combat.js, centré sur le perso) */
.hpbar { position: absolute; bottom: calc(44% + 64px); width: 42px; height: 8px; z-index: 4;
  margin-left: 42px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.55); border: 2px solid #1a1626;
  border-radius: 5px; overflow: hidden; box-shadow: 0 1px 2px #0006; }
.hpbar > i { display: block; height: 100%; width: 100%; transition: width .15s; }
.hpbar.hero-hp > i { background: linear-gradient(180deg, #7ee06a, #3fae3a); }
.hpbar.foe-hp > i { background: linear-gradient(180deg, #ff8a6a, #d63a2c); }
/* ----- Progression de CHAPITRE (losanges orange=fait / bleu=à venir + ligne CONTINUE + crâne boss) ----- */
.sp-label { font-family: "Afacad Flux", "LT Avocado", sans-serif; font-weight: 700; font-size: 17px; color: #ffd24a;
  -webkit-text-stroke: 1.6px #6a3a0e; paint-order: stroke fill; text-shadow: 0 2px 0 #6a3a0e, 0 3px 3px #0006; letter-spacing: .3px; margin-bottom: 3px; }
.sp-track { display: flex; align-items: center; justify-content: center; padding-left: 24px; } /* centré sous le texte (compense le crâne qui dépasse à droite) */
/* losange = carré pivoté 45°, contour foncé. Marges négatives → il chevauche la ligne (pas de trou). */
.sp-node { width: 11px; height: 11px; flex: 0 0 auto; transform: rotate(45deg); border: 2.5px solid #2b2233;
  box-shadow: 0 1px 2px #0006; position: relative; z-index: 1; margin: 0 -3px; }
.sp-node.todo { background: #6f93a6; }
.sp-node.done { background: #f0871e; }
.sp-node.cur  { width: 17px; height: 17px; background: #ff9a2e; box-shadow: 0 0 8px #ffb14d, 0 1px 2px #0006; z-index: 2; }
/* segments = ligne continue derrière les losanges */
.sp-seg { width: 20px; height: 6px; flex: 0 0 auto; background: #6f93a6; border-top: 2px solid #2b2233; border-bottom: 2px solid #2b2233; position: relative; z-index: 0; }
.sp-seg.done { background: #f0871e; }
/* crâne du boss COLLÉ au bout de la ligne (gris=à venir, ROUGE yeux orange=boss en cours) */
.sp-boss { width: 28px; height: 24px; margin-left: -5px; flex: 0 0 auto; position: relative; z-index: 1;
  background: url('/master/assets/gui/UI_Play_Skull_01.png') center / contain no-repeat; filter: drop-shadow(0 1px 2px #0007); }
.sp-boss.todo { filter: grayscale(.7) brightness(.9) drop-shadow(0 1px 2px #0007); opacity: .9; }
.sp-boss.cur { background-image: url('/master/assets/gui/UI_Play_Skull_04.png'); filter: drop-shadow(0 0 6px #ff5a3c) drop-shadow(0 1px 2px #0007); }

/* zones de PORTÉE d'attaque (au sol, sous chaque combattant) — largeur posée par combat.js */
.range { display: none !important; } /* cercles de portée d'attaque RETIRÉS */
.range-OLD { position: absolute; bottom: calc(38% + 2px); height: 28px; border-radius: 50%; z-index: 1;
  margin-left: 42px; transform: translateX(-50%); pointer-events: none; }
.range.hero-r { background: radial-gradient(ellipse, rgba(77,182,255,.5), rgba(77,182,255,.2) 68%, transparent 72%);
  border: 3px dashed rgba(120,200,255,1); box-shadow: 0 0 8px rgba(77,182,255,.85), inset 0 0 8px rgba(77,182,255,.45); }
.range.foe-r { background: radial-gradient(ellipse, rgba(255,107,107,.5), rgba(255,107,107,.2) 68%, transparent 72%);
  border: 3px dashed rgba(255,140,140,1); box-shadow: 0 0 8px rgba(255,107,107,.85), inset 0 0 8px rgba(255,107,107,.45); }
/* pages d'onglet : PLEIN CADRE (la map remplit tout, pas de marge où le fond de #app apparaîtrait) */
.tab-page { margin: 0 !important;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom)) !important; } /* la topbar est gérée par #pgtop */

/* ---------- PAGES (onglets) = fond CRÈME plein cadre (ne pas voir le combat derrière) ---------- */
.tab-page { background: var(--cr-bg) !important; border: 0 !important; border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--cr-hi), inset 0 0 0 5px var(--cr-ln) !important; }
.tab-page .pg-title, .tab-page .bank-title { color: var(--cr-ink); text-shadow: none; font-size: 19px !important; margin: 2px 0 4px !important; } /* Mine = Coffre (même taille) */
.tab-page .ov-sub { color: var(--cr-sub); text-shadow: none; }
.tab-page .mine-next { color: #b09058; text-shadow: none; }
.tab-page .dep-slider .dep-pick { color: var(--cr-ink); text-shadow: none; }
.tab-page .dep-slider .dep-pick small { color: var(--cr-sub); }

/* Icônes de titre (Mine / Coffre) + bouton info = vraies icônes du pack */
.pg-title .ttl-ic, .bank-title .ttl-ic { display: inline-block; width: 26px; height: 26px; vertical-align: -6px;
  margin-right: 5px; background: center/contain no-repeat; }
.forge-info { background: none !important; border: 0 !important; box-shadow: none !important; width: 28px; height: 28px; padding: 0; }
.forge-info .fi-ic { display: block; width: 28px; height: 28px; background: center/contain no-repeat; filter: drop-shadow(0 1px 1px #0006); }

/* BOUTONS = VRAI bouton du pack teinté (9-slice), même forme/police partout, AUCUN radius */
.mine-claim, .mine-up, .bank-btn, .create-go, .pet-summon, .pet-eq, .pet-sell,
.forge-btn, .auto-btn, .build-switch, .create-rand, .fi-close, .dp-keep, .dp-swap, .ac-start, .off-go, .set-orange {
  background: transparent !important; border: 12px solid transparent !important; border-radius: 0 !important;
  border-image-slice: 26 fill !important; border-image-width: 12px !important; border-image-repeat: stretch !important;
  box-shadow: none !important; color: #fff !important; font-weight: 900; font-family: inherit;
  display: flex; align-items: center; justify-content: center; /* texte centré verticalement ET horizontalement */
  text-shadow: 0 2px 1px #00000055; padding: 3px 10px !important; min-height: 50px; line-height: 1.05; }
.mine-claim::before, .mine-up::before, .bank-btn::before, .create-go::before, .pet-summon::before,
.forge-btn::before, .auto-btn::before, .ac-start::before { display: none !important; }
.mine-claim, .ac-start { border-image-source: url('/master/assets/gui/btn_green.png') !important; }
.mine-up    { border-image-source: url('/master/assets/gui/btn_yellow.png') !important; }
.mine-up.nogold { border-image-source: url('/master/assets/gui/btn_red.png') !important; } /* or insuffisant → bouton rouge */
.bank-btn.dep { border-image-source: url('/master/assets/gui/btn_blue.png') !important; }
.bank-btn.wd  { border-image-source: url('/master/assets/gui/btn_red.png') !important; }
.forge-btn  { border-image-source: url('/master/assets/gui/btn_brown.png') !important; } /* Forger = marron */
.dp-keep    { border-image-source: url('/master/assets/gui/btn_orange.png') !important; } /* Garder = orange */
.dp-swap    { border-image-source: url('/master/assets/gui/btn_green.png') !important; }  /* Remplacer = vert */
.auto-btn   { border-image-source: url('/master/assets/gui/btn_brown.png') !important; } /* Auto = marron */
.build-switch    { border-image-source: url('/master/assets/gui/btn_blue.png') !important; }   /* Build 1 = bleu (même style 9-slice que Auto) */
.build-switch.b2 { border-image-source: url('/master/assets/gui/btn_orange.png') !important; } /* Build 2 = orange */
.create-rand{ border-image-source: url('/master/assets/gui/btn_blue.png') !important; }   /* Aléatoire = bleu */
.fi-close   { border-image-source: url('/master/assets/gui/btn_red.png') !important; width: 34px; min-height: 34px; height: 34px; margin: 0 !important; padding: 0 !important; position: absolute; top: 6px; right: 6px; }
.forge-btn:active, .auto-btn:active, .create-rand:active, .fi-close:active { filter: brightness(.95); transform: translateY(1px); }
/* Forger + Auto plus COMPACTS + icônes du pack (silhouettes blanches) */
.anvil-row .forge-btn { min-height: 44px !important; padding: 2px 10px !important;
  flex-direction: row !important; gap: 9px !important; align-items: center !important; }
.anvil-row .forge-btn .fb-t { font-size: 16px !important; }
.anvil-row .forge-btn .fb-c { font-size: 13px !important; display: inline-flex; align-items: center; gap: 3px; }
.anvil-row .auto-btn { width: 62px !important; min-height: 44px !important; padding: 2px !important; gap: 1px; }
.anvil-row .auto-btn span { font-size: 10px; }
/* Switch de BUILD (1/2) à droite du bouton Auto (le bouton Forger rétrécit via flex:1) */
/* Build = MÊME taille + style 9-slice que le bouton Auto (le Forger, flex:1, rétrécit en conséquence) */
.anvil-row .build-switch { flex: 0 0 auto; width: 62px !important; min-height: 44px !important; padding: 2px !important;
  flex-direction: column !important; gap: 0 !important; cursor: pointer; }
.anvil-row .build-switch .bs-lbl { font-size: 9px; font-weight: 700; opacity: .9; line-height: 1; }
.anvil-row .build-switch b { font-size: 18px; font-weight: 900; line-height: 1; }
/* Forger / Auto / Build : style PLAT façon boutons du chat — bord sombre 3px + LIP 3D = la COULEUR DU BOUTON en bas (2e pixel = couleur du bouton) */
.anvil-row .forge-btn, .anvil-row .auto-btn, .anvil-row .build-switch {
  border: 3px solid #2c2438 !important; border-image: none !important; border-radius: 0 !important;
  background: var(--btn-bg) !important; color: #fff !important; text-shadow: 0 1px 1px #0006 !important;
  box-shadow: 0 3px 0 var(--btn-lip) !important; } /* lip = version PLUS SOMBRE de la couleur du bouton (comme le chat) */
.anvil-row .forge-btn { --btn-bg: #a5672f; --btn-lip: #6f4419; }   /* Forger = marron */
.anvil-row .auto-btn  { --btn-bg: #a5672f; --btn-lip: #6f4419; }   /* Auto = marron */
.anvil-row .build-switch { --btn-bg: #3f6aa0; --btn-lip: #294a72; }   /* Build 1 = bleu */
.anvil-row .build-switch.b2 { --btn-bg: #c47a2a; --btn-lip: #874f16; } /* Build 2 = orange */
.anvil-row .forge-btn:active, .anvil-row .auto-btn:active, .anvil-row .build-switch:active {
  filter: none !important; transform: translateY(3px) !important; box-shadow: 0 0 0 var(--btn-lip) !important; }
/* sélection en attente (appliquée au prochain combat) : bordure qui TOURNE dans le sens HORAIRE */
/* quand l'arc-en-ciel est actif → on CACHE le border-bottom noir + le lip du bouton (le ring arc-en-ciel les remplace) */
.anvil-row .build-switch.pending { position: relative; border-bottom-color: transparent !important; box-shadow: none !important; }
/* ring sur le BORD EXTÉRIEUR du bouton (bord 3px + lip 3px) : inset relatif à la padding-box ; bottom du ring = 2px (demandé) */
.anvil-row .build-switch.pending::after { content: ''; position: absolute; inset: -3px -3px -6px -3px; pointer-events: none; z-index: 2;
  padding: 3px 3px 2px 3px; background: conic-gradient(from var(--ba), #ff5a5a, #ffb13c, #ffe24d, #5ce06a, #4db5ff, #b06bff, #ff5a5a) border-box; /* ARC-EN-CIEL, bottom = 2px */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: rarspin 2s linear infinite; } /* @property --ba + rarspin déjà définis (raretés) → rotation horaire */
/* Barre de chat rapide (sous la forge) — SANS border-radius (style master) */
.chat-bar { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.chat-open, .chat-send { flex: 0 0 auto; width: 52px; min-height: 44px; border: 3px solid #2c2438; border-radius: 0; cursor: pointer;
  background: #3f7080; color: #fff; box-shadow: 0 4px 0 #2a4c58; font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.chat-open:active, .chat-send:active, .chat-bigsend:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a4c58; }
.chat-send.muted { background: #c0392b; box-shadow: 0 4px 0 #7d2419; } /* joueur mute → bouton envoyer ROUGE */
/* Bannière cookies (RGPD) — informative, cookie de session nécessaire */
#cookieBanner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 440px; z-index: 200;
  background: #2c2438; color: #f4ecdd; border-top: 3px solid #a5672f; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.4; }
#cookieBanner a { color: #ffd766; }
#cookieBanner .cb-btns { margin-left: auto; display: flex; gap: 8px; }
#cookieBanner button { border: 2px solid #1a1626; padding: 7px 14px; font-weight: 800; font-size: 13px; cursor: pointer; color: #fff; }
#cookieBanner .cb-ok { background: #a5672f; box-shadow: 0 3px 0 #6f4419; }
#cookieBanner .cb-no { background: #55506a; box-shadow: 0 3px 0 #35314a; }
#cookieBanner button:active { transform: translateY(3px); box-shadow: none; }
.set-legal { text-align: center; font-size: 11px; color: #9a7038; margin-top: 12px; line-height: 1.8; }
.set-legal a { color: #a5672f; text-decoration: underline; }
.chat-input:disabled { opacity: .8; cursor: not-allowed; } /* saisie bloquée pendant le mute */
.chat-input { flex: 1 1 auto; min-width: 0; border: 3px solid #2c2438; border-radius: 0; padding: 4px 12px; font: inherit; font-size: 14px;
  background: #fbf3e2; color: #2c2438; outline: none; }
.chat-input::placeholder { color: #9a8c74; }
/* CHAT en grand : ancré en bas, le haut = juste sous la scène de combat (top posé en JS). CONTRAINT au cadre 440px (mode mobile même sur ordi). */
#chatPop { place-items: stretch; background: transparent; } /* garde la scène de combat visible au-dessus */
#chatPop .chat-box { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px; bottom: 0; top: 40%;
  max-height: none; height: auto; margin: 0; padding: 34px 8px 8px; border-width: 4px 0 0 0; display: flex; flex-direction: column; text-align: left; }
.chat-log { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; background: #efe1bf; box-shadow: inset 0 0 0 2px #e7cfa0; }
/* chaque message = son conteneur, texte ALIGNÉ À GAUCHE, fond tan foncé + texte noir. Seul le CORPS coupe les mots longs ; pseudo/heure ne se coupent JAMAIS. */
.chat-msg { display: block; background: #d9bd82; color: #1a1206; font-size: 14px; line-height: 1.35; padding: 6px 10px; border: 1px solid #c99a5e; border-radius: 0; text-align: left; overflow-wrap: anywhere; word-break: normal; }
.chat-msg .cm-who { font-weight: 800; color: #7a3b16; margin-right: 4px; white-space: nowrap; }
.chat-msg .cm-body { overflow-wrap: anywhere; }
.chat-msg.cm-mine { background: #cdb887; } /* MES messages (classe 'cm-mine' — surtout PAS '.me' : collision HUD) */
.chat-msg.cm-mine .cm-who { color: #1d5a86; }
/* ZÉRO border-radius sur tout le chat */
#chatPop .chat-box, #chatPop .chat-log, #chatPop .chat-msg, #chatPop .chat-input, #chatPop .chat-send, #chatPop .fi-close { border-radius: 0 !important; }
.chat-msg .cm-time { font-size: 10px; color: #8a6a3a; margin-left: 6px; white-space: nowrap; }
/* actions de modération (signaler / bloquer) sur chaque message des autres */
.chat-msg .cm-act { float: right; display: inline-flex; gap: 2px; margin: -2px -4px 0 6px; }
.chat-msg .cm-act button { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 3px; opacity: .55; line-height: 1; }
.chat-msg .cm-act button:hover { opacity: 1; }
.chat-compose { display: flex; gap: 8px; padding: 8px 4px 4px; flex: 0 0 auto; }
.chat-compose .chat-input { font-size: 15px; }
.b-ic { display: inline-block; width: 16px; height: 16px; background: center/contain no-repeat; vertical-align: -2px; filter: drop-shadow(0 1px 1px #0006); }
.auto-ic { width: 22px; height: 22px; }
/* Auto ACTIF : bouton plus clair + logo qui tourne */
.auto-btn.on { filter: brightness(1.2) saturate(1.25); }
.auto-btn.on .auto-ic { animation: autospin 1.1s linear infinite; }
@keyframes autospin { to { transform: rotate(360deg); } }
.pet-summon { border-image-source: url('/master/assets/gui/btn_blue.png') !important; }
.pet-eq     { border-image-source: url('/master/assets/gui/btn_green.png') !important; }
.pet-sell   { border-image-source: url('/master/assets/gui/btn_orange.png') !important; } /* « Améliorer » = orange */
.pet-summon:active, .pet-eq:active, .pet-sell:active { filter: brightness(.95); transform: translateY(1px); }
.pet-summon[disabled], .pet-eq[disabled], .pet-sell[disabled] { filter: grayscale(.6) brightness(.85); opacity: .7; }
/* Réclamer + Améliorer côte à côte, EXACTEMENT la même taille que Déposer/Retirer */
.mine-actions { display: flex; gap: 8px; align-items: stretch; }
.mine-actions .mine-claim, .mine-actions .mine-up, .bank-row .bank-btn {
  flex: 1 1 0; min-width: 0; width: auto; margin: 0 !important;
  min-height: 50px !important; padding: 3px 8px !important; }
/* Améliorer + Réclamer : contenu centré sur UNE seule ligne, même police */
.mine-actions .mine-claim, .mine-actions .mine-up {
  flex-direction: row !important; flex-wrap: nowrap !important; gap: 5px !important;
  align-items: center !important; justify-content: center !important; }
.mine-actions .mine-claim .mc-t, .mine-actions .mine-up .mu-t { font-size: 16px !important; }
.mine-actions .mine-up .mu-c { font-size: 13px; white-space: nowrap; }
.create-go    { border-image-source: url('/master/assets/gui/btn_green.png') !important; }
/* Aléatoire = MÊME taille de police que « Commencer à forger » */
.create-rand, .create-go { font-size: 16px !important; }
.create-rand .cr-dice { vertical-align: -4px; }
.mine-claim:active, .mine-up:active, .bank-btn:active, #recruitGo:active, .create-go:active { filter: brightness(.95); transform: translateY(1px); }

/* ---------- TITRE = texte brun + ligne de séparation avec losange (façon maquette) ---------- */
.tab-page .pg-title, .tab-page .bank-title,
.ov-box:not(.dp-box) .pg-title {
  position: relative; padding-bottom: 13px; margin-bottom: 14px;
}
.tab-page .pg-title::after, .tab-page .bank-title::after,
.ov-box:not(.dp-box) .pg-title::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 5px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--cr-div) 22%, var(--cr-div) 78%, transparent);
}
.tab-page .pg-title::before, .tab-page .bank-title::before,
.ov-box:not(.dp-box) .pg-title::before {
  content: '◆'; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  color: #c98a4e; font-size: 13px; line-height: 1; padding: 0 5px; background: var(--cr-bg); z-index: 1;
}

/* ---------- POPUPS génériques (drop sauf dp-box, retour d'absence, création, login) ---------- */
.ov-box:not(.dp-box) { background: var(--cr-bg); border: 3px solid var(--cr-ink);
  box-shadow: inset 0 0 0 3px var(--cr-hi), inset 0 0 0 4px var(--cr-ln), 0 12px 0 #0003; }
.ov-box:not(.dp-box) .ov-sub { color: var(--cr-sub); }
.ov-x { background: #ff5a4d; border-color: #7a1f16; border-radius: 9px;
  box-shadow: 0 3px 0 #a8281c; }
.ov-x:active { box-shadow: 0 1px 0 #a8281c; }

.offline-box, .login-box, .create-box {
  background: var(--cr-bg); border: 3px solid var(--cr-ink);
  box-shadow: inset 0 0 0 3px var(--cr-hi), inset 0 0 0 4px var(--cr-ln), 0 12px 0 #0003;
}
.offline-box h2, .login-box h2, .create-box h2 { color: var(--cr-ink); }
/* écran de création : tout en crème (cohérent avec les pages) */
.create-title { color: var(--cr-ink) !important; }
.create-stage { background: radial-gradient(circle at 50% 34%, #fff7e6, #ead2a2 76%) !important;
  border-color: #c98a4e !important; box-shadow: inset 0 4px 10px #00000018, 0 0 14px #c98a4e44 !important; }
.create-box input { background: #fffaf0 !important; color: var(--cr-ink) !important; border-color: #d8b87f !important; }
.create-box input::placeholder { color: #b09a78 !important; }
.cust-row .cyc-lab { color: var(--cr-sub) !important; }
.offline-box p, .login-box p { color: var(--cr-sub); }
.off-st { background: var(--cr-hi); border-color: var(--cr-ink); }
.off-st b { color: var(--cr-ink); } .off-st span { color: var(--cr-sub); }

/* cartes blanches → légèrement crème sur fond parchemin */
.unit-card, #recruitBar { background: var(--cr-hi); border-color: var(--cr-ink); }
.uc-name { color: var(--cr-ink); } .rb-tot { color: var(--cr-ink); }
.cust-row > .lbl { color: var(--cr-ink); }

/* ---------- BARRE DE NAVIGATION : tuiles PLEINE LARGEUR à coins BISEAUTÉS (chanfrein), actif plus clair + plus haut ---------- */
/* CONTENEUR EN FLUX (prend sa place, ne recouvre jamais le contenu des pages), SANS radius */
/* Barre = thème tan/marron (comme le conteneur « Effet possédé » de Compagnon), border top marron foncé */
#bottomnav { position: relative; flex: 0 0 auto; z-index: 5;
  display: flex; gap: 0; align-items: stretch;
  background: linear-gradient(180deg, #f0ddb4, #e3cb98) !important;
  border: 0 !important; border-top: 3px solid #a8743f !important; border-radius: 0 !important;
  box-shadow: 0 -6px 16px #0006 !important;
  padding: 0 0 max(2px, calc(env(safe-area-inset-bottom) - 32px)) !important; } /* nav descendue de 32px (boutons plus bas) */
/* chaque onglet = tuile pleine hauteur, jointive, fond tan (comme « Effet possédé ») */
.nav-b { flex: 1 1 0; position: relative; cursor: pointer; min-height: 54px; padding: 6px 2px 8px; color: #6a4a22;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, #efddb6, #e2c993);
  box-shadow: inset 1px 0 0 #ffffff40, inset -1px 0 0 #00000018; }
.nav-b .nb-ic.gicon { display: inline-block; width: 27px; height: 27px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 1px 1px #0008); }
/* libellé VISIBLE sur tous les onglets (texte foncé sur fond tan) */
.nav-b .nb-t { display: block; font-size: 9.5px; font-weight: 900; color: #6a4a22; line-height: 1;
  text-shadow: 0 1px 0 #ffffff66; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* onglet ACTIF : fond CLAIR (comme la page Compagnon) */
.nav-b.active { color: #5a3a1a; min-height: 54px;
  background: linear-gradient(180deg, #fdf6e2, #f3e6c4) !important;
  box-shadow: inset 0 2px 0 #ffffffcc, inset 1px 0 0 #00000018 !important; }
.nav-b.active .nb-t { color: #5a3a1a; text-shadow: 0 1px 0 #ffffff88; }
.nav-b.active .nb-ic.gicon { filter: drop-shadow(0 1px 1px #ffffff80); }
.nav-b.locked .nb-ic.gicon { filter: grayscale(1) brightness(.7); }
.nav-b.locked { opacity: .55; }

/* ---------- BOUTONS façon pack : reflet brillant en haut + coins arrondis ---------- */
.forge-btn, .auto-btn, .mine-up, .bank-btn, #recruitGo, .uc-up,
.dp-keep, .dp-swap, .login-box button, .create-box #cgo, .offline-box button {
  position: relative; overflow: hidden; border-radius: 16px;
}
.forge-btn::before, .auto-btn::before, .mine-up::before, .bank-btn::before, #recruitGo::before, .uc-up::before,
.dp-keep::before, .dp-swap::before, .login-box button::before, .create-box #cgo::before, .offline-box button::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44%;
  background: linear-gradient(#ffffff70, #ffffff00); border-radius: 14px 14px 40px 40px / 14px 14px 18px 18px;
  pointer-events: none;
}
/* Garder/Remplacer = boutons 9-slice du pack (orange/vert) qui ont DÉJÀ leur reflet → on retire le reflet CSS en doublon */
.dp-keep::before, .dp-swap::before { display: none !important; }

/* ---------- SLOTS plus petits (laisser de la place à la map) : 5 colonnes ---------- */
/* conteneur d'objets = VRAI panneau gris sombre du pack (PanelFrame_03 teinté, border-image 9-slice) */
/* conteneur d'objets : pas d'arrondi, fond = couleur du menu (bottomnav) → bloc continu avec la nav */
/* Conteneur Forge = thème Compagnon : fond clair, border-top marron foncé */
#forge { border: 0 !important; border-image: none !important; background: #f6edd4 !important;
  border-top: 4px solid #a8743f !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 8px 10px !important; }
/* bandeau niveau/xp/aléatoire = tan (comme « Effet possédé »), texte foncé */
#forge .forge-head { background: linear-gradient(180deg, #f0ddb6, #e6cf9c); border: 2px solid #cba06322; padding: 7px 9px; margin: -2px -2px 8px; }
#forge .forge-lvl, #forge .forge-lvl b { color: #5a3a1a !important; }
#forge .hammer-next { color: #8a5a28 !important; opacity: 1; }
/* GRILLE 10 SLOTS façon preview : ARME grande (gauche) · tenue grande + ceinture petite · amulette+2 anneaux · bottes carré · SPÉCIAL grand (droite) */
.gear { display: grid; gap: 6px; margin: 4px 0 6px; height: 196px; /* HUD objets plus haut (pas écrasé) */
  grid-template-columns: 1.5fr 1fr 1.15fr 1fr 1.5fr; grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "weapon helmet chest amulet special"
    "weapon pants  chest ring   special"
    "weapon boots  belt  ring2  special"; }
/* slots = VRAI cadre GUI carré-arrondi (ItemFrame_05 teinté), plus de tuile CSS */
.gear .slot { aspect-ratio: auto; min-height: 0; background: none !important; border-radius: 0 !important;
  border: 9px solid transparent !important; box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); /* effet CREUX (slot enfoncé) */
  border-image: url('/master/assets/gui/hud_slot.png') 18 fill / 9px stretch !important; }
.gear .slot.sel { outline: 0 !important; filter: none; } /* pas de sélection visible (slots = tests) */
.gear .slot .ic, .gear .slot .ic.gear { width: 64%; height: 64%; }
.gear .slot .ic-img { width: 66%; height: 66%; object-fit: contain; filter: drop-shadow(0 2px 2px #0008); }
.gear .slot .ic-img.ghost { filter: grayscale(1) brightness(1.7) opacity(0.38); } /* slot vide = icône fantôme grisée */
.gear .slot .lv { bottom: 2px; }
/* projectile (flèche) qui vole du héros vers la cible */
.proj { position: absolute; bottom: calc(38% + 12px); width: 19px; height: 19px; z-index: 3; /* taille RÉDUITE de 50% */
  pointer-events: none; will-change: transform, left;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 2px 2px #0007); }
.proj.nock { width: 32px; height: 32px; } /* flèche ENCOCHÉE sur l'arc : plus grande que la flèche en vol (bien visible sur l'arc) */
.proj.orb { width: 11px; height: 11px; filter: drop-shadow(0 0 5px rgba(255,255,255,.6)); } /* boule de magie (−50%) */
.proj.petproj { width: auto; height: auto; background: none; filter: drop-shadow(0 1px 2px #0006); } /* bullet du pet : taille = moitié de la native (posée en JS) */
.gear .slot.afford::after { display: none; } /* pas de flèche d'amélioration sur les slots */
/* toast « arme : X » quand on clique le slot arme (test des portées) */
.wp-toast { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(20, 16, 26, 0.85); color: #fff; font-weight: 800; font-size: 13px;
  padding: 5px 12px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 6px #0006;
  animation: wpt .25s ease-out; }
@keyframes wpt { from { opacity: 0; transform: translate(-50%, -6px); } }
#forge { padding: 9px 8px 9px; }
.slot .lv { font-size: 9px; padding: 0 4px; }


/* Effet de CHARGEMENT de la forge : jauge claire qui remplit TOUTE la hauteur du bouton de 0 à 100% (3 s) → 100% = on forge.
   Le bouton est un 9-slice (bordure transparente 12px) : on déborde de -12px en haut/bas/gauche pour couvrir aussi la bordure,
   et on désactive le clip (overflow visible) → la jauge fait bien 100% de la hauteur visible. */
.forge-btn { position: relative; overflow: visible; }
.forge-btn.loading::after { content: ''; position: absolute; top: -12px; bottom: -12px; left: -12px; width: 0; pointer-events: none; z-index: 2;
  background: rgba(255, 246, 225, .34); box-shadow: inset -2px 0 0 rgba(255,255,255,.55);
  border-radius: 13px 0 0 13px; animation: forgefill 1s linear forwards; }
@keyframes forgefill { from { width: 0; } to { width: calc(100% + 24px); } }

/* Raretés 11-20 : fond de motifs SVG animés (configurables via rarete.html → data/rarete.json → RARFX.apply). SOUS l'icône/texte. */
.rar-hi { position: relative; overflow: hidden; }
.rar-hi::before { content: ''; position: absolute; inset: -16px; z-index: 0; pointer-events: none;
  background-image: var(--rarfx); background-repeat: repeat; background-size: var(--rarsize, 14px 14px);
  animation: rarfx var(--rarspeed, 11s) linear infinite; }
.rar-hi > * , .rar-hi > span { position: relative; z-index: 1; }
@keyframes rarfx { from { background-position: 0 0; } to { background-position: 28px 84px; } }
/* rareté 20 = ARC-EN-CIEL : la teinte du motif cycle en continu (hue-rotate), comme sur Aurore */
/* rar20 : FOND arc-en-ciel animé (couche dégradé SOUS les étoiles) + les étoiles par-dessus, même drift + hue */
.rar20::before {
  background-image: var(--rarfx), linear-gradient(90deg, #ff5a5a, #ffb13c, #ffe24d, #5ce06a, #4db5ff, #7a5cff, #ff5a5a);
  background-size: var(--rarsize, 14px 14px), 200% 100%;
  background-repeat: repeat, repeat; /* repeat + dégradé seamless (1er=dernier #ff5a5a) → aucun trou noir pendant le balayage */
  animation: rar20bg 8s linear infinite, rar20hue 3.5s linear infinite;
}
@keyframes rar20hue { to { filter: hue-rotate(360deg); } }
@keyframes rar20bg { to { background-position: 28px 84px, 200% 0; } } /* étoiles dérivent + le dégradé balaie en boucle continue */
/* Bordure arc-en-ciel tournante (rareté 20 « Infini ») — même recette qu'Aurore (@property --ba + conic-gradient) */
@property --ba { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rarspin { to { --ba: 360deg; } }
/* Cartes d'objet (drop/inspection) — thumbnail : cadre STATIQUE (couleur de rareté via --rcl) + thumbnail visible ; fond sombre + motif pour 11-20 */
.iv-ico .iv-thumb { position: absolute; inset: 0; background: center / 76% no-repeat; z-index: 1; }
/* 11-20 : fond sombre de rareté (motif rar-hi par-dessus) + bordure ANIMÉE conic tournante (couche border-box) */
.iv-anim { background: linear-gradient(180deg, var(--rbg1, #2a2016), var(--rbg2, #1a130b)) padding-box,
    conic-gradient(from var(--ba), var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55)) border-box !important; }
/* rareté 20 « Infini » : bordure ARC-EN-CIEL tournante (au lieu de la couleur pleine) — APRÈS .iv-anim pour l'emporter */
.iv-ico.rar20 { border: 3px solid transparent !important;
  background: linear-gradient(#241a2e, #150f1f) padding-box, conic-gradient(from var(--ba), #ff5a5a, #ffb13c, #ffe24d, #5ce06a, #4db5ff, #b06bff, #ff5a5a) border-box !important;
  background-size: auto !important; background-repeat: no-repeat !important; animation: rarspin 3.5s linear infinite !important; }
@keyframes rarsweep { to { background-position: 0 0, 200% 0; } }
/* texte de rareté (objets ET compagnons, TOUTES raretés) : dégradé de couleur qui glisse gauche→droite */
.rar-sweep { background-image: linear-gradient(90deg, var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55), var(--rcl, #e9dcc0), var(--rcd, #8a7a55));
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important;
  animation: rarsweeptext 3s linear infinite; }
.rar20t { background-image: linear-gradient(90deg, #ff5a5a, #ffb13c, #ffe24d, #5ce06a, #4db5ff, #b06bff, #ff5a5a) !important; }
@keyframes rarsweeptext { from { background-position: 0 0; } to { background-position: 200% 0; } }
/* VFX poison DISCRET (flipbook piloté en JS) — sur le corps du héros / du monstre empoisonné */
.poisonfx { position: absolute; bottom: calc(38% + 16px); width: 42px; height: 42px; margin-left: 42px; transform: translateX(-50%);
  z-index: 3; background-repeat: no-repeat; background-size: auto 42px; pointer-events: none; opacity: .9; } /* margin-left:42 + -50% = centré sur le sprite (comme .hpbar) */
/* Effet plein-champ VICTOIRE / DÉFAITE (autour de la scène de combat) */
#combatResult { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
#combatResult .cr-txt { position: relative; z-index: 2; font-family: "LT Avocado", "Baloo 2", sans-serif; font-weight: 900;
  font-size: 34px; letter-spacing: 1px; animation: crpop .5s cubic-bezier(.2,1.4,.4,1) both; }
#combatResult.win::before { content: ''; position: absolute; inset: -20%; z-index: 0;
  background: radial-gradient(circle, #ffe98a66, transparent 62%); animation: crglow 1.1s ease-out both; }
#combatResult.win::after { content: ''; position: absolute; width: 220%; height: 220%; z-index: 0; opacity: .5;
  background: repeating-conic-gradient(from 0deg, #ffe98a33 0 7deg, transparent 7deg 22deg); animation: crrays 7s linear infinite; }
#combatResult.win .cr-txt { color: #ffdf5a; text-shadow: 0 3px 0 #a55f00, 0 0 16px #ffbb33; }
#combatResult.lose::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle, transparent 28%, #3a0000cc); animation: crglow .8s ease-out both; }
#combatResult.lose .cr-txt { color: #ff5a4a; text-shadow: 0 3px 0 #4a0000, 0 0 14px #ff2a1a;
  animation: crpop .5s both, crshake .45s .25s ease-in-out; }
@keyframes crpop { from { transform: scale(0) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes crglow { from { opacity: 0; } 40% { opacity: 1; } to { opacity: .65; } }
@keyframes crrays { to { transform: rotate(360deg); } }
@keyframes crshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.off-go { border-image-source: url('/master/assets/gui/btn_blue.png') !important; } /* « Continuer à forger » = bleu (design boutons Master) */
.set-orange { border-image-source: url('/master/assets/gui/btn_orange.png') !important; } /* Changer de serveur = orange */
.set-del { border-image-source: url('/master/assets/gui/btn_red.png') !important; } /* Supprimer le compte = ROUGE (surcharge .ac-start) */
/* Sélecteur de langue (Paramètres) */
.set-lang { width: 100%; padding: 10px 12px; border: 2px solid #7a3b16; border-radius: 0; background: #fffaf0; color: #4a3016; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 #d8c6a0; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg,transparent 50%,#a5672f 50%),linear-gradient(135deg,#a5672f 50%,transparent 50%); background-position: right 14px center,right 9px center; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
/* ===== Modal in-game (confirm/alert) — design master crème/marron, zéro border-radius ===== */
.aim-modal { z-index: 300; }
.aim-modal .am-box { background: #f6edd4; border: 3px solid #7a3b16; box-shadow: inset 0 0 0 2px #fff7e6, 0 10px 30px #0009; padding: 20px 18px 16px; max-width: min(340px, 90vw); text-align: center; }
.aim-modal .am-msg { color: #4a3016; font-weight: 700; font-size: 15px; line-height: 1.45; margin: 2px 0 16px; }
.aim-modal .am-sub { display: inline-block; margin-top: 6px; color: #a5672f; font-size: 16px; font-weight: 800; }
.aim-modal .am-btns { display: flex; gap: 10px; justify-content: center; }
.aim-modal .am-btn { flex: 1; padding: 11px 14px; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; border: 3px solid #2c2438; }
.aim-modal .am-ok { background: #a5672f; box-shadow: 0 4px 0 #6f4419; }
.aim-modal .am-cancel { background: #6a6478; box-shadow: 0 4px 0 #45415a; }
.aim-modal .am-danger { background: #c0392b; box-shadow: 0 4px 0 #7d2419; }
.aim-modal .am-btn:active { transform: translateY(3px); box-shadow: none; }
/* Badge serveur sur l'écran de création (perso pour un realm choisi) */
.create-realm { text-align: center; font-weight: 800; font-size: 14px; color: #a5672f; background: #fff7e6; border: 2px solid #d8c6a0; padding: 7px 12px; margin-bottom: 10px; }
/* Switch de serveur : cartes avec sprite paperdoll + niveau (design master, zéro border-radius) */
.srv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; max-height: 132px; overflow-y: auto; padding-right: 2px; }
.srv-grid::-webkit-scrollbar { width: 6px; }
.srv-grid::-webkit-scrollbar-thumb { background: #c9b183; }
.srv-card { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px; cursor: pointer; background: #fffaf0; border: 2px solid #d8c6a0; box-shadow: 0 3px 0 #e6d4ac; }
.srv-card.on { border-color: #a5672f; background: #fff3dd; box-shadow: 0 3px 0 #a5672f; }
.srv-card:active { transform: translateY(2px); box-shadow: none; }
.srv-ava { width: 42px; height: 42px; flex: 0 0 auto; background: #f0e2c2; border: 2px solid #a5672f; box-shadow: 0 2px 0 #6f4419; overflow: hidden; display: block; position: relative; }
.srv-ava.empty { display: grid; place-items: center; }
.srv-ava .srv-plus { font-size: 24px; font-weight: 800; color: #b08a4a; }
/* cadrage IDENTIQUE à l'avatar du HUD (.me .ava > canvas) : tête + buste, centré, non étiré */
.srv-ava canvas { display: block; width: 215%; height: 215%; margin: -55% 0 0 -57%; image-rendering: pixelated; }
.srv-info { display: flex; flex-direction: column; min-width: 0; }
.srv-info b { font-size: 13px; color: #4a3016; line-height: 1.2; }
.srv-info small { font-size: 11px; color: #9a7038; }
.srv-cur { position: absolute; top: 3px; right: 6px; color: #2e8b57; font-weight: 900; font-size: 13px; }
/* Sélecteur de langue CUSTOM (dropdown drapeaux, design master, zéro border-radius) */
.lang-dd { position: relative; }
.lang-cur { width: 100%; display: flex; align-items: center; text-align: left; padding: 10px 12px; border: 2px solid #7a3b16; border-radius: 0; background: #fffaf0; color: #4a3016; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 #d8c6a0; cursor: pointer; }
.lang-cur:active { transform: translateY(2px); box-shadow: none; }
.lang-cur .lang-arw { margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #a5672f; }
.lang-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fffaf0; border: 2px solid #7a3b16; box-shadow: 0 8px 18px #0007; max-height: 262px; overflow-y: auto; }
.lang-menu .lang-opt { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid #ecdcb6; background: transparent; color: #4a3016; font-weight: 700; font-size: 14px; cursor: pointer; }
.lang-menu .lang-opt:last-child { border-bottom: 0; }
.lang-menu .lang-opt:hover { background: #f4e6c8; }
.lang-menu .lang-opt.on { background: #a5672f; color: #fff; }
/* Serveur verrouillé (cadenas) : grisé, non cliquable */
.srv-card.locked { cursor: not-allowed; opacity: 0.72; filter: grayscale(0.4); }
.srv-card.locked .srv-info b { color: #8a7a5e; }
.srv-ava .srv-lock { width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 1px 1px #0006); }