/* =====================================================================
   HUD du vrai client (maquettes uiproto : combat.html, placement.html,
   resultat.html, monde.html) branché sur le jeu. Chargé après theme.css
   et style.css ; les images du thème sont dans css/theme/slices/.
   ===================================================================== */

/* ---- cohabitation theme.css / style.css ---------------------------------- */
.window-new > .win-close, .window-new > .win-left, .window-new > .win-right { z-index: 2; }
html, body { overflow: auto; }
.screen { position: relative; width: 100%; height: auto; min-height: 100vh; overflow: visible; }
#screen-combat, #screen-hub { height: 100vh; overflow: hidden; }
.ui { position: absolute; }
.keycap { font: var(--f-defaultFont); color: var(--c-defaultLightColor); display: flex; align-items: center; justify-content: center; padding-bottom: 1px; }
.tooltip { white-space: normal; max-width: 280px; line-height: 1.3; }
.tooltip b { color: #ffe08a; }
.tooltip .tt-titre { font: bold 12px/1.3 Tahoma, "DejaVu Sans", Verdana, sans-serif; color: #ffe08a; margin-bottom: 2px; }
.tooltip .tt-ligne { color: var(--c-defaultLightColor); }
/* carte de sort (tipCarte) : habillage .tooltip */
#card-tip { position: fixed; z-index: 60; pointer-events: none; width: 269px; }
/* Les illustrations du client sont transparentes : elles se posent sur spellCardBackground (px_themeSimple3_825_353_198x143) */
#card-tip img { display: block; width: 269px; height: auto; max-height: 372px; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); border: 0; border-radius: 0;
  background-image: url(theme/slices/px_themeSimple3_825_353_198x143.png); background-size: 100% 100%; background-repeat: no-repeat; }
#card-tip .tip-txt { margin-top: 2px; font: var(--f-tooltipFont); color: var(--c-defaultLightColor); background: rgba(40,33,20,.93); border: 1px solid #8f7f52; border-radius: 0; padding: 4px 7px; line-height: 1.35; }
#card-tip .tip-txt div:first-child { color: #ffe08a; font-weight: bold; }

/* =========================================================================
   COMBAT
   ========================================================================= */
#screen-combat { background: #1e1a14; }
#arena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #15120d; cursor: pointer; }
#screen-combat .ui, #screen-combat .window-new { z-index: 2; }

/* --- timeline (timelineDialog.xml : north_west 700×105) --- */
#timeline { left: 10px; top: 5px; height: 105px; display: flex; align-items: flex-start; }
#timeline .tl-big { position: relative; width: 65px; height: 95px; }
#timeline .tl-big > .btn { position: absolute; left: 0; top: 5px; width: 65px; height: 83px; cursor: pointer; }
#timeline .tl-big > .btn > .ico { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); pointer-events: none; }
#timeline .tl-big > .arrow { position: absolute; left: 50%; top: 0; width: 26px; height: 22px; transform: translateX(-50%); }
#timeline .tl-big > .buff { position: absolute; left: 50%; bottom: 10px; width: 15px; height: 12px; transform: translateX(-50%); }
#timeline .tl-small { position: relative; width: 35px; height: 95px; }
#timeline .tl-small > .btn { position: absolute; left: 50%; top: 10px; width: 33px; height: 46px; transform: translateX(-50%); cursor: pointer; }
#timeline .tl-small > .btn > .ico { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; }
#timeline .tl-small > .buff { position: absolute; left: 50%; top: 56px; width: 15px; height: 12px; transform: translateX(-50%); }
#timeline .tl-summon { position: relative; width: 25px; height: 95px; }
#timeline .tl-summon > .btn { position: absolute; left: calc(50% - 1px); top: 11px; width: 25px; height: 30px; transform: translateX(-50%); cursor: pointer; }
#timeline .tl-summon > .btn > .ico { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); pointer-events: none; }
#timeline .tl-next { position: relative; width: 32px; height: 95px; }
#timeline .tl-next > .box { position: absolute; left: 0; top: 10px; width: 32px; height: 34px; }
#timeline .tl-next > .box > .label { position: absolute; left: 0; top: calc(50% + 7px); width: 32px; height: 20px; transform: translateY(-50%); justify-content: center; }
#timeline .hidden-fighter { opacity: .3; }
#timeline .hp { position: absolute; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; background: #1a1a1a; border: 1px solid rgba(0,0,0,.6); pointer-events: none; }
#timeline .tl-big > .hp { bottom: 4px; width: 50px; }
#timeline .tl-small > .hp { top: 58px; }
#timeline .tl-summon > .hp { top: 43px; width: 20px; }
#timeline .hp > i { display: block; height: 100%; background: #6fd36f; }
#timeline .hp.bas > i { background: #e8c84f; }
#timeline .hp.critique > i { background: #e05a4a; }
#timeline .plc > .btn { outline: 2px solid #ffe08a; outline-offset: -1px; border-radius: 3px; }
#timeline .ico.img.godot { background-size: 64% auto; }

/* --- cartes événement (fightEventCardsDialog.xml : north_east 250×161) --- */
#eventCards { right: 0; top: 5px; width: 250px; height: 161px; }
.evcard { position: absolute; }
.evcard > * { position: absolute; left: 50%; transform: translateX(-50%); }
.evcard .name { white-space: nowrap; }
.evcard .desc { transform: translateX(-50%); text-align: center; }
.evcard.c3 { left: calc(50% + 43px - 34px); top: 36px; width: 68px; height: 93px; }
.evcard.c3 > .img { top: 10px; width: 58px; height: 40px; }
.evcard.c3 > .deco { width: 66px; height: 58px; }
.evcard.c2 { left: calc(50% - 44px); top: 18px; width: 88px; height: 121px; }
.evcard.c2 > .img { top: 12px; width: 75px; height: 52px; }
.evcard.c2 > .deco { top: 10px; width: 86px; height: 75px; }
.evcard.c1 { left: 0; top: 0; width: 118px; height: 161px; }
.evcard.c1 > .name { top: 5px; width: 110px; height: 20px; justify-content: center; font-size: 12px; }
.evcard.c1 > .img { top: 20px; width: 100px; height: 70px; }
.evcard.c1 > .deco { width: 115px; height: 100px; }
.evcard.c1 > .desc { bottom: 7px; width: 95px; height: 55px; font-size: 9px; }

/* --- bandeau du bas (fightMenuBarDialog.xml) --- */
#screen-combat #menuband { left: 2.5%; right: 2.5%; bottom: 0; height: 36px; z-index: 1; }
#bottom { left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#bottomLeft { left: 0; bottom: 0; width: 550px; height: 60px; }
#tools { bottom: 0; left: calc(50% + 105px); transform: translateX(-50%); width: 200px; height: 23px; display: flex; justify-content: flex-end; gap: 2px; }
#tools .tool { position: relative; width: 23px; height: 23px; cursor: pointer; }
#tools .tool > .img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#tools .tool.on > .img { filter: sepia(1) saturate(4) hue-rotate(-15deg) brightness(1.1); }
#screen-combat #sysbar { left: calc(50% + 100px); transform: translateX(-50%); top: 0; width: 120px; height: 27px; }
#sysbar > button { position: absolute; bottom: 1px; width: 31px; height: 18px; }
#sysbar > button > .img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* --- contrôles du combattant (fighterControlsDialog.xml : 550×150, origine bas-gauche) --- */
#controls { left: 0; bottom: 0; width: 550px; height: 150px; pointer-events: none; }
#controls > * { pointer-events: auto; }
#spellbar, #coachcards, #spellbar .cell, #coachcards .cc { pointer-events: none; }
#spellbar .cell > button, #spellbar .cell > .keycap, #coachcards .cc > button, #coachcards .cc > .keycap { pointer-events: auto; }
#spellbar .cell { position: absolute; bottom: 5px; width: 41px; height: 155px; }
#spellbar .cell > .spell { position: absolute; left: 50%; bottom: 0; width: 38px; height: 38px; transform: translateX(-50%); cursor: pointer; border-radius: 4px; }
#spellbar .cell > .spell.sel, #weapon.sel, #coachcards .cc.sel > .card { box-shadow: 0 0 0 2px #ffe08a, 0 0 10px 2px rgba(255,211,107,.9); }
#spellbar .cell > .spell.off, #weapon.off > .wicon, #coachcards .cc.off > .illu { filter: grayscale(1) brightness(.55); }
#spellbar .cell > .spell:disabled { cursor: not-allowed; filter: grayscale(1) brightness(.55); opacity: 1; }
#spellbar .cell > .cd { position: absolute; left: 50%; bottom: 0; width: 38px; height: 38px; transform: translateX(-50%); font: var(--f-countdownFont); color: var(--c-healthPointColor); display: flex; align-items: center; justify-content: center; pointer-events: none; -webkit-text-stroke: 1px #000; paint-order: stroke fill; }
#spellbar .cell > .na, #weapon > .na { position: absolute; left: 50%; bottom: 5px; width: 28px; height: 28px; transform: translateX(-50%); pointer-events: none; }
#weapon > .na { bottom: 4px; }
#spellbar .cell > .keycap { position: absolute; left: 27px; bottom: -5px; width: 16px; height: 16px; }
#weapon > .wicon { width: 31px; height: 31px; pointer-events: none; }
#weapon { border-radius: 6px; }
#coachcards .cc { position: absolute; bottom: 0; width: 44px; height: 43px; }
#coachcards .cc > .illu { position: absolute; left: 2px; top: 5px; width: 26px; height: 19px; background-size: cover; pointer-events: none; }
#coachcards .cc > .card { position: absolute; left: 0; top: 0; width: 30px; height: 43px; cursor: pointer; }
#coachcards .cc > .card:disabled { cursor: not-allowed; opacity: 1; filter: none; }
#coachcards .cc > .na { position: absolute; left: 0; top: 0; pointer-events: none; }
#coachcards .cc > .keycap { position: absolute; left: 14px; bottom: -3px; width: 16px; height: 16px; }
#fstats .label { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* styles du client : Health (19px crème) et MovePoint (19px noir) pour les PA comme pour les PM */
#hpLabel { left: 30px; bottom: 35px; width: 40px; height: 20px; }
#apLabel { left: 9px; bottom: 10px; width: 25px; height: 20px; }
#mpLabel { left: 68px; bottom: 10px; width: 25px; height: 20px; }
#fstats .label { display: flex; align-items: center; justify-content: center; }
#countdown .turn { position: absolute; left: calc(50% - 7px); bottom: 0; width: 44px; height: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; font: var(--f-defaultBoldFont); color: var(--c-defaultLightColor); }
#countdown .time { position: absolute; left: calc(50% - 2px); top: 25px; width: 50px; height: 20px; transform: translateX(-50%); font: var(--f-countdownFont); color: var(--c-defaultDarkColor); display: flex; align-items: center; justify-content: center; }
#countdown .time.urgent { color: rgb(204,0,0); }
#fighterView { pointer-events: none; }
#fighterSprite { position: absolute; left: 50%; bottom: 0; width: 140px; height: 220px; transform: translateX(-50%); pointer-events: none; }
#controls .fleche { cursor: pointer; }
#controls .fleche.selected { filter: brightness(1.35) drop-shadow(0 0 3px #ffe08a); }
#controls .fleche.disabled, #btn-passer:disabled { filter: saturate(.3) brightness(.9); opacity: .75; }
#btn-quitter { cursor: pointer; }
#screen-combat.placement #spellbar, #screen-combat.placement #weapon, #screen-combat.placement #weapon-key, #screen-combat.placement #coachcards, #screen-combat.placement #btn-passer { display: none; }
#screen-combat.ia #spellbar .cell > .spell, #screen-combat.ia #coachcards .cc > .card { cursor: default; }

/* --- phase de placement (fightPlacementDialog.xml) --- */
#placementBand { left: 50%; top: 0; transform: translateX(-50%); width: 350px; height: 34px; display: flex; align-items: center; justify-content: center; }
#placementBand > .label { width: 100%; height: 100%; justify-content: center; }
#btn-pret { left: calc(50% - 63px); bottom: 0; transform: translateX(-50%); width: 130px; height: 27px; z-index: 5; justify-content: center; padding-right: 35px; padding-bottom: 3px; }
#btn-pret:disabled { filter: saturate(.3) brightness(.9); }

/* --- message d'état --- */
#hud-msg { left: 560px; right: 350px; bottom: 64px; text-align: center; font: var(--f-defaultBoldFont); color: var(--c-defaultLightColor); text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; min-height: 14px; }
#hud-msg.alerte { color: #ff9a8a; }
#hud-msg:empty { display: none; }

/* --- chat (chatDialog.xml : 341×250 sud-est) --- */
.chatbox { right: 0; bottom: 0; width: 341px; height: 250px; }
.chatbox .chatBar { left: calc(50% - 1px); transform: translateX(-50%); bottom: 0; width: 341px; height: 37px; }
.chatbox .chatHistory { left: calc(50% - 10px); transform: translateX(-50%); bottom: 33px; width: 340px; height: 85%; }
.chatbox .chatTabs { position: absolute; left: 0; width: 100%; bottom: 25px; height: 90%; pointer-events: none; }
.chatbox .chatTabs .tabrow { position: absolute; left: 0; top: 0; width: 100%; height: 25px; display: flex; pointer-events: auto; }
.chatbox .chatTabs .tabrow > div { position: relative; width: 100px; height: 25px; }
.chatbox .chatTabs .tabrow > div > button { position: absolute; left: 5%; top: 0; width: 90%; height: 25px; cursor: pointer; }
.chatbox .chatTabs .tabrow > div > button.on { filter: brightness(1.25); }
.chatbox .chatTabs .tabrow > div > .label { position: absolute; left: 0; top: 0; width: 100%; height: 25px; justify-content: center; pointer-events: none; }
.chatbox .chatTabs .tabrow > div > .arr { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 11px; height: 9px; pointer-events: none; }
.chatbox .chatBox { left: 50%; transform: translateX(-50%); bottom: 0; width: 330px; height: 90%; }
.chatbox .chatText { left: 50%; transform: translateX(-50%); bottom: 0; width: 95%; height: 85%; }
.chatbox.reduit .chatHistory { display: none; }
.chat-history .tour { color: #ffe08a; font-weight: bold; }
.chat-history .alerte { color: #ff9a8a; }
.chat-history .moi { color: #e6d58a; }
.chat-history div { padding: 1px 0; }

/* --- fiche du combattant (fighterInformationsDialog + fighterStatisticsCard.xml) --- */
#fcard { right: 8px; top: 172px; width: 270px; height: 377px; z-index: 3; }
#fcard .name { position: absolute; left: 0; top: 22px; width: 100%; height: 30px; justify-content: center; }
#fcard .top { position: absolute; left: 22px; top: 60px; width: 226px; height: 80px; display: flex; }
#fcard .portrait { width: 75px; height: 75px; position: relative; overflow: hidden; }
#fcard .portrait .bg { position: absolute; inset: 0; background: url(../assets/gui/breeds/backgrounds/3.png) center / cover; }
#fcard .portrait .bg.rouge { background-image: url(../assets/gui/breeds/backgrounds/1.png); }
#fcard .portrait .ico { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); background: center / 100% 100% no-repeat; }
#fcard .portrait .ico.godot { background-size: 70% auto; }
#fcard .stats { margin-left: 8px; width: 140px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
#fcard .stats .row { display: flex; justify-content: space-between; font: var(--f-defaultBoldFont); }
#fcard .stats .hp { color: var(--c-healthPointColor); }
#fcard .stats .ap { color: var(--c-actionPointColor); }
#fcard .stats .mp { color: var(--c-movePointColor); }
#fcard .stats .init { color: var(--c-initiativePointColor); }
#fcard .mid { position: absolute; left: 22px; top: 150px; width: 226px; height: 110px; display: flex; font: var(--f-defaultFont); color: var(--c-defaultBlackColor); }
#fcard .mid .left { width: 109px; display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }
#fcard .mid .left .row { display: flex; justify-content: space-between; }
#fcard .mid .left b { font: var(--f-defaultBoldFont); color: var(--c-defaultDarkColor); }
#fcard .mid .right { flex: 1; display: flex; justify-content: space-around; padding-top: 2px; }
#fcard .mid .col { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#fcard .mid .col .h { font: var(--f-defaultBoldFont); color: var(--c-defaultDarkColor); margin-bottom: 2px; }
#fcard .mid .col .el { display: flex; align-items: center; gap: 4px; width: 46px; justify-content: space-between; }
#fcard .mid .col .el .img { width: 15px; height: 15px; }
#fcard .effets { position: absolute; left: 22px; top: 258px; width: 226px; height: 30px; font: var(--f-defaultSmallFont, 9px Tahoma, sans-serif); font-size: 9px; line-height: 1.2; color: var(--c-defaultDarkColor); overflow: hidden; text-align: center; }
#fcard .effets b { color: #7a2a10; }
#fcard .equip { position: absolute; left: 11px; bottom: 52px; width: 248px; height: 40px; }
#fcard .equip .bg, #fcard .spells .bg { position: absolute; left: 0; top: 0; width: 248px; height: 17px; }
#fcard .equip .slots { position: absolute; left: calc(50% - 2px); transform: translateX(-50%); top: 0; width: 170px; height: 40px; display: flex; }
#fcard .equip .slot { position: relative; width: 34px; height: 34px; }
#fcard .equip .slot > .img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#fcard .spells { position: absolute; left: 11px; bottom: 22px; width: 248px; height: 30px; }
#fcard .spells .list { position: absolute; left: calc(50% - 2px); transform: translateX(-50%); top: 3px; width: 204px; height: 34px; display: flex; }
#fcard .spells .list .sp { position: relative; width: 34px; height: 34px; }
#fcard .spells .list .sp > .img { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; }
#fcard .close { position: absolute; right: 35px; top: 30px; width: 15px; height: 15px; cursor: pointer; }
#fcard.epingle { box-shadow: none; }

/* --- fin de combat (fightResultDialog.xml : fenêtre 750×420) --- */
#fin { position: absolute; inset: 0; z-index: 20 !important; background: rgba(0,0,0,.45); }
#result { left: 50%; top: 50%; width: 750px; height: 420px; transform: translate(-50%, -50%); }
#result .win-content { overflow: visible; }
#result .coachName { justify-content: center; height: 25px; }
#result .rank { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); background-size: 100% 100%; }
#result .rank.godot { background-size: 70% auto; background-position: center; background-repeat: no-repeat; }
#result .colTitle { height: 20px; display: flex; align-items: center; justify-content: center; }
#result .ladderRow > div { position: relative; height: 20px; display: flex; align-items: center; justify-content: center; }
#result .ladderRow > div:first-child { justify-content: flex-start; padding-left: 16px; }
#result .ladderRow .delta { position: absolute; right: 10px; }
#result .ladderRow .delta.plus { color: var(--c-movePointColor); }
#result .ladderRow .delta.moins { color: var(--c-healthPointColor); }
#result .portrait { position: absolute; left: 50%; bottom: 46px; width: 110px; height: 110px; transform: translateX(-50%); background: center / 100% 100% no-repeat; }
#result .portrait.godot { background-size: auto 100%; }
#result .wonCard { position: relative; width: 52px; height: 77px; margin: 0 4px; }
#result .wonCard .bg { position: absolute; left: 50%; top: 50%; width: 52px; height: 77px; transform: translate(-50%, -50%); }
#result .wonCard .illu { position: absolute; left: 50%; top: 50%; width: 87%; height: 87%; transform: translate(-50%, -50%); background-size: cover; background-position: center; }
#result .wonCard .frame { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); }
#result .wonCard .n { position: absolute; left: 0; right: 0; bottom: -14px; text-align: center; font: var(--f-defaultSmallBoldFont, bold 9px Tahoma, sans-serif); font-size: 9px; color: var(--c-defaultDarkColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fin-bonus { justify-content: center; }
#fin-txt { justify-content: center; }
#fin-menu { z-index: 3; }
#result .win-close { cursor: pointer; }

/* =========================================================================
   ÎLE (monde.html)
   ========================================================================= */
#screen-hub { background: #15120d; }
#hub-main { position: relative; height: 100vh; overflow: hidden; }
#hub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#screen-hub #menuband { left: 2.5%; right: 2.5%; bottom: 0; height: 36px; z-index: 1; }
#menuBar { left: 0; right: 0; bottom: 0; height: 500px; pointer-events: none; z-index: 2; }
#menuBar > * { pointer-events: auto; }
#leftBlock { left: 0; bottom: 0; width: 371px; height: 60px; }
#toolsList { display: flex; justify-content: flex-end; align-items: center; }
#toolsList .tool { position: relative; width: 29px; height: 20px; margin: 0 3px; cursor: pointer; }
#toolsList .tool > .img { position: absolute; left: calc(50% + 1px); top: calc(50% + 1px); transform: translate(-50%, -50%); }
#toolsList .tool.on > .img { filter: sepia(1) saturate(4) hue-rotate(-15deg) brightness(1.1); }
#screen-hub #sysbar > button { position: absolute; bottom: 1px; width: 31px; height: 18px; cursor: pointer; }
#centerMenu { left: calc(50% + 1px); transform: translateX(-50%); bottom: 0; width: 279px; height: 147px; }
#centerMenu button { cursor: pointer; }
#squareRow { display: flex; }
#squareRow > button { position: relative; width: 32px; height: 32px; margin-right: 9px; }
#squareRow > button:last-child { margin-right: 0; }
#squareRow > button > .img { position: absolute; left: 50%; transform: translate(-50%, -50%); }
#menuTool { left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 38px; z-index: 2; }
#hub-chat { z-index: 2; }

/* --- mini-carte (miniMapDialog.xml : north_west 200×200) --- */
#miniMap { left: 0; top: 0; width: 200px; height: 200px; z-index: 2; }
#miniMap .map { position: absolute; inset: 6px; overflow: hidden; background: #2a2416 no-repeat; }
#miniMap .coach { position: absolute; left: 92px; top: 86px; width: 26px; height: 36px; margin-left: -13px; margin-top: -33px; }
#miniMap .zoom { position: absolute; bottom: 4px; width: 22px; height: 23px; cursor: pointer; }
#hub-infos { left: 0; top: 204px; width: 200px; padding: 2px 10px; display: flex; flex-direction: column; gap: 1px; font: var(--f-defaultFont); color: var(--c-defaultLightColor); z-index: 2; border-width: 10px 10px 10px 10px; border-image-slice: 20 10 20 10; }
#hub-infos .hud-coach { font: var(--f-styledLightFont, bold 12px "Copperplate Gothic Bold", serif); color: #ffe08a; }
#hub-infos:empty { display: none; }
#miniMap.hidden + #hub-infos { top: 4px; }

/* --- fenêtre Menu (menuDialog.xml : 350×275 centrée) --- */
#menuDialog { left: 50%; top: 50%; width: 350px; height: 275px; transform: translate(-50%, -50%); z-index: 7; }
#menuDialog .title { position: absolute; left: 50%; top: 20px; width: 300px; height: 25px; transform: translateX(-50%); }
#menuDialog .title .label { position: absolute; inset: 0; justify-content: center; }
#menuDialog .btns { position: absolute; left: 35px; bottom: 25px; width: 280px; height: 170px; display: flex; flex-direction: column; justify-content: space-between; }
#menuDialog .btns button { width: 280px; height: 32px; cursor: pointer; }
#hub-tip { z-index: 8; }

/* --- bulle des PNJ (contenu de meta_ui.js) : popup du thème --- */
#hub-bulle { position: absolute; z-index: 5; max-width: 300px; padding: 12px 14px 10px; border-image: url(theme/slices/ns_themeSimple184_41_themeSimple194_41_themeSimple195_52_52x38.png) 11 11 11 11 fill / 11px 11px 11px 11px stretch; border-style: solid; border-width: 11px; background: none; border-radius: 0; box-shadow: 0 4px 8px rgba(0,0,0,.5); color: var(--c-defaultDarkColor); font: var(--f-defaultFont); }
#hub-bulle > b { display: block; font: var(--f-styledLightFont, bold 12px "Copperplate Gothic Bold", serif); color: var(--c-defaultDarkColor); margin: 0 0 4px; }
#hub-bulle p { margin: 4px 0 8px; line-height: 1.3; }
#hub-bulle .btn { display: block; width: 100%; text-align: center; margin: 3px 0; background: none; border-radius: 0; border-image: url(theme/slices/ns_themeDefault230_416_themeDefault238_416_themeDefault238_423_161x17.png) 7 8 5 8 fill / 7px 8px 5px 8px stretch; border-style: solid; border-width: 7px 8px 5px 8px; font: normal 12px/1.2 "Copperplate Gothic Bold", "CopperplateB", serif; color: rgb(230,230,204); padding: 2px 6px; }
#hub-bulle .btn:hover { border-image-source: url(theme/slices/ns_themeOver230_416_themeOver238_416_themeOver238_423_161x17.png); }
#hub-bulle .btn.ferme { position: absolute; top: -6px; right: -6px; width: 25px; height: 14px; border: 0; padding: 0; font-size: 0; background: url(theme/slices/px_themeDefault_485_458_25x14.png) center / 100% 100% no-repeat; }

/* --- panneau de l'île (contenu de meta_ui.js) habillé en window-new --- */
#hub-panneau { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; pointer-events: none; }
#hub-panneau .panneau-box, #hub-panneau .win-content, #hub-panneau .win-close, #hub-panneau .win-back { pointer-events: auto; }
#hub-panneau .panneau-box { position: relative; width: min(960px, 94%); height: min(640px, 92%); background: none; border: 0; border-radius: 0; box-shadow: none; display: block; color: var(--c-defaultDarkColor); }
#hub-panneau .win-content { display: flex; flex-direction: column; padding: 14px 44px 20px; }
#hub-panneau .panneau-tete { position: relative; height: 25px; margin: 6px auto 8px; width: auto; max-width: 92%; min-width: 300px; padding: 0 24px; background: none; border: 0; border-radius: 0; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--c-defaultDarkColor); }
#hub-panneau .panneau-tete .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#hub-panneau-corps { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; font-family: Tahoma, "DejaVu Sans", Verdana, sans-serif; font-size: 12px; }
#hub-panneau .win-close { cursor: pointer; }
#hub-panneau .carte, #hub-panneau .article, #hub-panneau .item { background: rgba(0,0,0,.08); border-color: rgba(74,43,18,.45); }
#hub-panneau .carte.sel { border-color: #d9a640; box-shadow: 0 0 6px #d9a640; }
#hub-panneau .btn { font: normal 12px/1.2 "Copperplate Gothic Bold", serif; color: rgb(230,230,204); background: none; border-radius: 0; border-image: url(theme/slices/ns_themeDefault230_416_themeDefault238_416_themeDefault238_423_161x17.png) 7 8 5 8 fill / 7px 8px 5px 8px stretch; border-style: solid; border-width: 7px 8px 5px 8px; padding: 2px 8px; }
#hub-panneau .btn:hover { border-image-source: url(theme/slices/ns_themeOver230_416_themeOver238_416_themeOver238_423_161x17.png); }
#hub-panneau .btn:disabled { color: #a8a090; filter: saturate(.3); }
#hub-panneau .btn.rouge { border-image-source: url(theme/slices/ns_themeDefault545_2_themeDefault552_2_themeDefault552_8_162x31.png); color: rgb(26,26,26); }
#hub-panneau .btn.grand { font-size: 14px; padding: 4px 14px; }
#hub-panneau .recrue h4, #hub-panneau .section h4 { font: normal 13px/1.2 "Copperplate Gothic Bold", serif; color: var(--c-defaultDarkColor); }
#hub-panneau .muted { color: #5a4a2a; }
#hub-panneau .etat { color: #8a3a10; }
#hub-panneau .recrue input, #hub-panneau select { font: var(--f-defaultFont); color: var(--c-defaultBlackColor); background: var(--c-editableAreaColor); border: 1px solid rgba(74,43,18,.6); border-radius: 0; padding: 2px 4px; }

/* =========================================================================
   Fenêtres des écrans Élite / coach / résultats (gabarit .window-new)
   ========================================================================= */
#screen-menu, #screen-multi, #screen-carte, #screen-equipe, #screen-resultats { background: #000 url(../assets/gui/theme/images/fullBackground.png) center / cover no-repeat; }
#screen-menu, #screen-multi, #screen-resultats { display: flex; align-items: center; justify-content: center; }
.elite-win { position: relative; width: 640px; min-height: 400px; margin: 30px auto; }
.elite-win .win-content { position: relative; inset: auto; padding: 16px 48px 30px; color: var(--c-defaultDarkColor); font: var(--f-defaultFont); display: flex; flex-direction: column; align-items: center; }
.elite-win .win-title { position: relative; width: 60%; min-width: 260px; height: 25px; margin: 6px auto 8px; display: flex; align-items: center; justify-content: center; }
.elite-win .win-title .label, .elite-win .win-title h1, .elite-win .win-title h2 { margin: 0; font: normal 14px/1.2 "Copperplate Gothic Bold", serif; color: var(--c-defaultDarkColor); white-space: nowrap; }
.elite-win .sub { color: var(--c-defaultDarkColor); margin: 2px 0 14px; font-style: italic; text-align: center; }
.elite-win .win-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.elite-win .win-btns button, .menu-btns button { min-width: 160px; height: 32px; padding: 0 16px; cursor: pointer; }
.menu-btns { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 14px; }
.menu-btns button { width: 280px; }
.elite-win .options { margin: 6px 0 10px; text-align: left; display: inline-block; color: var(--c-defaultLightColor); font: var(--f-defaultFont); padding: 2px 10px; border-width: 10px; }
.elite-win .options label { display: block; margin: 3px 0; cursor: pointer; }
.elite-win .hint, .elite-win .help { color: var(--c-defaultDarkColor); font: var(--f-defaultFont); margin: 4px 0; text-align: center; }
.elite-win .hint a { color: #8a3a10; }
.elite-win kbd { background: #d9c79a; border: 1px solid #5b4f35; border-radius: 3px; padding: 0 3px; font-size: 10px; }
.menu-win { width: 640px; }
.multi-win { width: 980px; }
.multi-win .multi-box { padding: 10px 14px 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.multi-win .multi-col { color: var(--c-defaultLightColor); border-radius: 0; border-width: 20px 10px; min-width: 0; width: auto; box-sizing: border-box; }
.multi-win .multi-col h3 { font: normal 14px/1.2 "Copperplate Gothic Bold", serif; color: #ffe08a; }
.multi-win .multi-col p { font: var(--f-defaultFont); }
.multi-win .multi-col button { min-width: 140px; max-width: 100%; height: 32px; cursor: pointer; }
.multi-win .multi-col input { width: 100%; box-sizing: border-box; font: bold 18px Tahoma, sans-serif; letter-spacing: 4px; border-radius: 0; background: var(--c-editableAreaColor); border: 1px solid rgba(74,43,18,.6); color: var(--c-defaultBlackColor); }
.multi-win .statut { color: var(--c-defaultDarkColor); font: var(--f-defaultBoldFont); }
#screen-multi .help, #screen-multi .statut { color: var(--c-defaultDarkColor); font: var(--f-defaultFont); }
#screen-multi .statut { font-weight: bold; min-height: 16px; }
.multi-win .win-close { cursor: pointer; }
.res-win { width: 760px; }
.res-win #res-corps { max-height: 460px; width: 100%; font: var(--f-defaultFont); color: var(--c-defaultDarkColor); }
.res-win #res-titre.gagne { color: #2f6a1a; } .res-win #res-titre.perdu { color: #8a2a1a; }
.res-win table.res th, .res-win table.res td { border-bottom: 1px solid rgba(74,43,18,.25); }
.res-win table.res tr.mort td { color: #8a2a1a; }
.res-win .muted { color: #5a4a2a; }
.res-win .win-btns button { min-width: 180px; }
/* barres des écrans Équipe / Carte */
.bar { background: rgba(0,0,0,.55); border-bottom: 0; color: var(--c-defaultLightColor); padding: 8px 16px; }
.bar h2 { font: normal 18px/1.2 "Copperplate Gothic Bold", serif; color: var(--c-defaultLightColor); }
.bar button { height: 32px; min-width: 120px; padding: 0 14px; cursor: pointer; }
.bar .ttab { height: 24px; min-width: 110px; padding: 0 12px; border-radius: 0; background: none; color: rgb(74,43,18); }
.bar .ttab.active { border-image-source: url(theme/slices/ns_themeSelectedDefault306_368_themeSelectedDefault314_368_themeSelectedDefault314_374_78x20.png); color: rgb(230,230,204); }
.bar .ttab.active[data-team="0"] { color: #9ad0ff; } .bar .ttab.active[data-team="1"] { color: #ff9a9a; }
.etabs .etab { height: 24px; min-width: 100px; padding: 0 12px; border-radius: 0; background: none; color: rgb(74,43,18); cursor: pointer; }
.etabs .etab.active { border-image-source: url(theme/slices/ns_themeSelectedDefault306_368_themeSelectedDefault314_368_themeSelectedDefault314_374_78x20.png); color: rgb(230,230,204); }
.editor-right { border-radius: 0; border-width: 20px 10px; background-color: rgb(135,122,82); color: var(--c-defaultLightColor); }
.editor-right .item .cout, .editor-right .item .meta { color: #2a1f10; }
.editor-right p { color: var(--c-defaultLightColor); }
.editor-right .btn { font: normal 12px/1.2 "Copperplate Gothic Bold", serif; color: rgb(230,230,204); background: none; border-radius: 0; border-image: url(theme/slices/ns_themeDefault230_416_themeDefault238_416_themeDefault238_423_161x17.png) 7 8 5 8 fill / 7px 8px 5px 8px stretch; border-style: solid; border-width: 7px 8px 5px 8px; padding: 2px 8px; }
.editor-actions button { height: 28px; min-width: 120px; cursor: pointer; }
#maps-grid { padding: 20px 20px 40px; }
.maps-titre { color: var(--c-defaultLightColor); font: normal 16px/1.2 "Copperplate Gothic Bold", serif; }

/* --- fighterCreationDialog.xml : fenêtre de création d'un combattant --- */
#fighterCreation { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
#fighterCreation .window-new { pointer-events: auto; }
#fighterCreation .fc-radios { display: flex; align-items: center; justify-content: center; gap: 18px; }
#fighterCreation .fc-radios button { border: 0; background-color: transparent; padding: 0; cursor: pointer; opacity: .55; }
#fighterCreation .fc-radios button.selected { opacity: 1; }
#fighterCreation .fc-couleurs { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1px; }
#fighterCreation .fc-couleurs button { width: 16px; height: 16px; padding: 0; border: 0; background-color: transparent; cursor: pointer; }
#fighterCreation .fc-classes { display: grid; grid-template-columns: repeat(7, 110px); grid-auto-rows: 110px; justify-content: center; align-content: center; }
#fighterCreation .fc-classes button { width: 110px; height: 110px; border: 0; background-color: transparent; padding: 0; cursor: pointer; position: relative; }
#fighterCreation #fc-apercu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#fighterCreation input.ui-texteditorFighterCreation { text-align: center; color: #000; caret-color: #000; }

/* --- teamManagementDialog / teamManagementElite : écran d'équipe du mode Élite --- */
#screen-equipe { display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
#screen-equipe .tm-win { position: relative; }
#screen-equipe .tm-tabs { position: absolute; left: -92px; top: 70px; display: flex; flex-direction: column; gap: 4px; }
#screen-equipe .tm-tabs button { width: 92px; height: 34px; cursor: pointer; background-color: transparent; border: 0; }
#screen-equipe .tm-tabs button[disabled] { opacity: .45; cursor: default; }
#screen-equipe .tm-slots { position: relative; }
#screen-equipe .tslot { cursor: pointer; }
#screen-equipe .tslot.sel .ui-containerEvolutionSelectedFighter { outline: 2px solid #d9a640; }
#screen-equipe .tslot-fig { display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
#screen-equipe .tslot-fig img { max-height: 118px; max-width: 96px; }
#screen-equipe .tslot-stats { position: absolute; }
#screen-equipe .ui-containerEvolutionStats .label { position: absolute; right: 4px; top: 1px; font: var(--f-defaultBoldFont); color: var(--c-defaultLightColor); }
#screen-equipe .ui-containerEvolutionStats .img { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); }
#screen-equipe .tm-edit { display: flex; flex-direction: column; }
#screen-equipe .tm-etabs { display: flex; align-items: center; gap: 6px; padding: 0 6px 4px; }
#screen-equipe .tm-etabs .tm-spacer { flex: 1; }
#screen-equipe .tm-etabs button { height: 26px; padding: 0 10px; cursor: pointer; background-color: transparent; border: 0; font: var(--f-styledLightFont); color: var(--c-defaultLightColor); }
#screen-equipe .tm-etabs .etab.active, #screen-equipe .tm-etabs .ttab.active { filter: brightness(1.35); }
#screen-equipe .tm-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
#screen-equipe .etab-body { flex: 1; min-width: 0; overflow: auto; }
#screen-equipe .tm-stats { width: 250px; flex: none; position: relative; }
#screen-equipe #tm-stats { width: 260px; flex: none; overflow: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
#screen-equipe #tm-stats .st-bloc { display: flex; flex-wrap: wrap; gap: 2px 10px; }
#screen-equipe #tm-stats h5 { width: 100%; margin: 2px 0 0; font: var(--f-smallStyledLightTitleFont); color: var(--c-defaultLightColor); }
#screen-equipe #tm-stats .st { display: inline-flex; align-items: center; gap: 4px; min-width: 74px; font: var(--f-defaultFont); color: var(--c-defaultLightColor); }
#screen-equipe #tm-stats .st i { font-style: normal; opacity: .8; }
#screen-equipe #tm-stats .st b { color: #fff; }
#screen-equipe #tm-stats .el { width: 16px; height: 16px; vertical-align: middle; }

/* --- fighterEquipmentDialog : sorts et équipements --- */
/* fighterEquipmentDialog.xml */
#fighterEquipment { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#fighterEquipment .fe-win { position: relative; pointer-events: auto; }
#fighterEquipment .ui { box-sizing: border-box; }
/* plainBackground color="0.77, 0.75, 0.59, 1.0" */
#fighterEquipment .fe-beige { background: rgb(196, 191, 150); }
/* repeatableImage : SpellBackgroundSemiCircle x7 / EquipmentBackgroundSemiSquare x6 */
#fighterEquipment .fe-rep7, #fighterEquipment .fe-rep6 { background-repeat: repeat-x; background-position: left center; border: 0; }
/* barre du haut : cellules 27x27 */
#fighterEquipment .fe-mini { display: flex; align-items: center; gap: 3px; }
#fighterEquipment .fe-mini-eq { justify-content: flex-end; }
#fighterEquipment .fe-m { width: 27px; height: 27px; position: relative; cursor: pointer; flex: 0 0 auto; }
#fighterEquipment .fe-m img, #fighterEquipment .fe-c img, #fighterEquipment .fe-i img, #fighterEquipment .fe-ty-c img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* onglets du tabbedContainer (tabsPosition=north, tabsAlignment=center) */
#fighterEquipment .fe-tabs { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; gap: 2px; justify-content: center; z-index: 2; }
/* tabsSizesEquilibrate="true" : les deux onglets se partagent la largeur du tabbedContainer */
#fighterEquipment .fe-tabs button { flex: 1 1 0; height: 26px; padding: 0; border: 0; background-color: transparent; cursor: pointer;
  font: var(--f-styledLightFont); color: var(--c-defaultDarkColor); }
#fighterEquipment .fe-tabs button.active { color: var(--c-defaultLightColor); filter: brightness(1.2); }
#fighterEquipment .fe-pane.hidden { display: none; }
/* list cellSize="66,54" : les sorts choisis */
#fighterEquipment .fe-choisis { display: flex; align-items: center; justify-content: center; }
#fighterEquipment .fe-c { width: 66px; height: 54px; position: relative; cursor: pointer; flex: 0 0 auto; }
/* list cellSize="40,40" : catalogues (breedSpells / selectedItemCardList) */
#fighterEquipment .fe-cat { display: flex; align-items: center; gap: 0; overflow: hidden; }
#fighterEquipment #fe-breedspells { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
#fighterEquipment .fe-i { width: 38px; height: 38px; margin: 0 1px; position: relative; cursor: pointer; flex: 0 0 auto; }
#fighterEquipment .fe-i.pris { filter: brightness(1.5) saturate(1.3); }
#fighterEquipment .ui-buttonListLeftArrow[disabled], #fighterEquipment .ui-buttonListRightArrow[disabled] { opacity: .35; cursor: default; }
/* rl horizontal : les 5 types de kartes, highlight EquipmentTypeSelectedBackground 70x83 */
#fighterEquipment .fe-types { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
#fighterEquipment .fe-ty { position: relative; width: 70px; height: 54px; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
#fighterEquipment .fe-ty-bg { position: absolute; left: 0; bottom: -7px; width: 70px; height: 83px; pointer-events: none; }
#fighterEquipment .fe-ty-c { position: relative; width: 38px; height: 38px; margin-bottom: 6px; }
/* vue du combattant */
#fighterEquipment #fe-apercu { position: absolute; left: 0; top: 0; }
#fighterEquipment .label { display: flex; align-items: center; justify-content: center; }
#fighterEquipment .fe-valeur { font: var(--f-defaultBoldFont); color: #3a2d10; }
/* karte en grand (270x377) */
#fighterEquipment .fe-illus { object-fit: cover; }
#fighterEquipment .fe-desc { overflow: hidden; white-space: pre-line; }
#fighterEquipment .fe-bg { overflow: hidden; font-style: italic; }
#fighterEquipment .ui-labelFighterCardValue { white-space: nowrap; text-align: center; }
/* Les styles du thème portent déjà leur text-align : PA, cible, portée, relance et zone sont
   centrés (text-align:center), seuls le nom et la valeur sont à gauche (text-align:left). */
#fighterEquipment .fe-carte-sort .label, #fighterEquipment .fe-carte-equip .label { justify-content: center; }
#fighterEquipment .ui-labelFighterCardNameSmall { justify-content: flex-start; }
/* Les libellés gardent leur débordement (les PA font 20 px de police dans une boîte de 20 px,
   ils se centrent sur la bille) ; seuls les pavés de texte sont rognés. */
#fighterEquipment .fe-desc, #fighterEquipment .fe-bg { overflow: hidden; }
/* le bandeau droit est en blanc : un liseré sombre le rend lisible quel que soit le fond */
#fighterEquipment .ui-labelFighterCardTarget, #fighterEquipment .ui-labelFighterCardAOE,
#fighterEquipment .ui-labelSpellFighterCardActionPoints { text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); }
/* <labelAppearance alignment="south"/> : portée, cible et zone sont calées en bas de leur boîte de 50x35 */
#fighterEquipment .ui-labelFighterCardTarget, #fighterEquipment .ui-labelFighterCardAOE { align-items: flex-end; }
#fighterEquipment .fe-desc { align-items: flex-start; line-height: 1.15; }
/* panneau Infos */
#fighterEquipment .fe-aide { overflow: auto; color: var(--c-defaultLightColor); font: var(--f-defaultFont); padding: 4px; }
#fighterEquipment .fe-aide b { display: block; text-align: center; margin-bottom: 6px; color: #fff; }
#fighterEquipment .fe-aide p { margin: 0; }
/* panneau droit : Dommages / Résistances / Capacités */
#fighterEquipment .fe-stats { display: flex; flex-direction: column; justify-content: space-between; padding: 6px 10px; }
#fighterEquipment .fe-sec-t { height: 25px; display: flex; align-items: center; justify-content: center; }
#fighterEquipment .fe-st { height: 25px; display: flex; align-items: center; gap: 4px; padding: 0 3px; margin-top: 2px; }
#fighterEquipment .fe-st i { width: 20px; height: 20px; flex: 0 0 auto; }
#fighterEquipment .fe-st-n { flex: 1; font: var(--f-defaultBoldFont); color: #2c2206; }
#fighterEquipment .fe-st-v { width: 46px; text-align: right; font: var(--f-defaultBoldFont); color: #2c2206; }

/* messageBoxDialog.xml (style "new") : barre de titre, icône + texte (maxWidth 250), boutons large 70x15 */
#messageBox { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#messageBox.hidden { display: none; }
#messageBox .mb-win { pointer-events: auto; min-width: 260px; max-width: 420px; }
#messageBox .mb-titre { height: 25px; display: flex; align-items: center; justify-content: center; }
#messageBox .mb-corps { display: flex; align-items: center; gap: 10px; background: rgb(196,191,150); padding: 20px 25px 0; }
#messageBox .mb-icone { width: 32px; height: 32px; flex: 0 0 auto; }
#messageBox .mb-icone[src=""] { display: none; }
#messageBox .mb-texte { min-width: 50px; max-width: 250px; font: var(--f-defaultFont); color: var(--c-defaultDarkColor); white-space: pre-wrap; }
#messageBox .mb-pied { display: flex; justify-content: center; gap: 20px; background: rgb(196,191,150); padding: 12px 25px 20px; }
#messageBox .mb-pied button { min-width: 90px; height: 24px; cursor: pointer; padding: 0 10px; }

/* Jouer à deux : liste des coachs en ligne (friendsList.xml) */
#multi-lobby { display: flex; flex-direction: column; text-align: left; }
#multi-lobby h3 { margin: 0 0 6px; }
#multi-lobby .multi-liste { flex: 1; min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
#multi-lobby .multi-liste .vide { opacity: .6; font: var(--f-defaultFont); padding: 6px 4px; }
#multi-lobby .coach { display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 4px; cursor: pointer; background: rgba(0,0,0,.12); }
#multi-lobby .coach:hover { background: rgba(0,0,0,.3); }
#multi-lobby .coach .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#multi-lobby .coach .niv { opacity: .75; font: var(--f-defaultFont); }
#multi-lobby .multi-leg { margin: 6px 0 0; font: var(--f-defaultFont); text-align: center; }

/* teamManagementElite.xml : emplacements, boutons d'édition, liste des équipes enregistrées */
#screen-equipe .tslot-fig { pointer-events: none; }
#screen-equipe .tslot-anm { display: block; width: 130px; height: 190px; }
#screen-equipe .tslot-btn { display: flex; align-items: center; justify-content: center; }
#screen-equipe .tslot-btn button { width: 24px; height: 24px; border: 0; background-color: transparent; cursor: pointer; padding: 0; }
#screen-equipe .tm-cross { display: flex; align-items: center; gap: 6px; font: var(--f-defaultFont); color: var(--c-defaultLightColor); cursor: pointer; }
#screen-equipe #tm-presets-box.hidden { display: none; }
#screen-equipe .tm-presets { position: relative; }
#screen-equipe .tpreset { cursor: pointer; }
#screen-equipe .tpreset .tp-im { object-fit: contain; }
#screen-equipe .tp-st { display: block; }
#screen-equipe .tp-st .label { display: flex; align-items: center; justify-content: flex-end; font: var(--f-defaultBoldFont); color: var(--c-defaultLightColor); }

/* Infobulle de sort en combat : la carte 270x377 du client */
#card-tip .tip-card { position: relative; width: 270px; height: 377px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
#card-tip .tip-card.hidden { display: none; }
#card-tip .tip-card .fe-carte-sort, #card-tip .tip-card .fe-carte-equip { position: absolute; left: 0; top: 0; }
#card-tip .tip-card .label { display: flex; align-items: center; justify-content: center; }
#card-tip .tip-card .ui-labelFighterCardNameSmall { justify-content: flex-start; }
#card-tip .tip-card .ui-labelFighterCardTarget, #card-tip .tip-card .ui-labelFighterCardAOE { align-items: flex-end;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); }
#card-tip .tip-card .ui-labelSpellFighterCardActionPoints { text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); }
#card-tip .tip-card .ui-labelFighterCardValue { white-space: nowrap; text-align: center; }
#card-tip .tip-card .fe-desc { overflow: hidden; white-space: pre-line; align-items: flex-start; line-height: 1.15; }
#card-tip .tip-card .fe-bg { overflow: hidden; font-style: italic; }
#card-tip .tip-card .fe-illus { object-fit: cover; }

/* customFightDialog.xml : règles d'équipe / règles de combat */
#customFight { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#customFight.hidden { display: none; }
#customFight .cf-win { position: relative; pointer-events: auto; }
#customFight .ui { box-sizing: border-box; }
#customFight .cf-tabs { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; gap: 2px; z-index: 2; }
#customFight .cf-tabs button { flex: 1 1 0; height: 26px; border: 0; background-color: transparent; cursor: pointer;
  font: var(--f-styledLightFont); color: var(--c-defaultDarkColor); }
#customFight .cf-tabs button.active { color: var(--c-defaultLightColor); filter: brightness(1.2); }
#customFight .cf-pane.hidden { display: none; }
/* une section : liste des panoplies à gauche (cellules 135x15), grille des cartes à droite */
#customFight .cf-cats { overflow: auto; display: flex; flex-direction: column; }
#customFight .cf-cats button { flex: 0 0 15px; height: 15px; border: 0; background-color: transparent; cursor: pointer; text-align: left;
  padding: 0 5px; font: var(--f-defaultFont); color: #2c2206; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#customFight .cf-cats button:hover { background: rgba(0,0,0,.18); }
#customFight .cf-cats button.sel { background: rgba(0,0,0,.45); color: #ffe08a; }
#customFight .cf-cats::-webkit-scrollbar { width: 6px; }
#customFight .cf-cats::-webkit-scrollbar-thumb { background: rgba(0,0,0,.4); }
#customFight .cf-grid { overflow-y: auto; overflow-x: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; }
#customFight .cf-cell { width: 29px; height: 30px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#customFight .cf-cell .ui-containerFightOption { width: 27px; height: 28px; display: flex; align-items: center; justify-content: center; }
#customFight .cf-cell img { width: 22px; height: 22px; }
#customFight .cf-cell.on .ui-containerFightOption { box-shadow: 0 0 0 2px #ffe08a, 0 0 8px 2px rgba(255,211,107,.8); }
#customFight .cf-cell .ui-imageLock { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; pointer-events: none; }
#customFight .cf-cell.verrou { cursor: not-allowed; }
#customFight .cf-cell.verrou img:not(.ui-imageLock) { filter: grayscale(1) brightness(.6); }
#customFight .cf-resume { overflow: auto; color: var(--c-defaultLightColor); font: var(--f-defaultFont); padding: 6px 8px; }
#customFight .cf-resume h4 { margin: 8px 0 3px; color: #ffe08a; font: normal 12px/1.2 "Copperplate Gothic Bold", serif; }
#customFight .cf-resume div { margin: 1px 0; }
#customFight .cf-resume .vide { opacity: .65; }

#customFight .win-close { cursor: pointer; }