.hud-adaptable { position:fixed; z-index:19; color:#dbedf2; background:rgba(8,23,31,.93); border:1px solid #3b626d; border-radius:10px; box-shadow:0 6px 22px #0005; font:12px/1.35 Inter,'Segoe UI',sans-serif; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
.hud-adaptable button { font:inherit; color:inherit; cursor:pointer; touch-action:none; }
.hud-adaptable button:focus-visible,.hud-adaptable summary:focus-visible { outline:2px solid #78edec; outline-offset:2px; }
.hud-adaptable .hud-commandes { opacity:1; pointer-events:auto; top:8px; right:8px; gap:4px; }
.hud-adaptable .hud-commandes button { width:22px; height:22px; background:#142f3a; border-color:#42606a; }
.hud-adaptable .hud-commandes svg { width:10px; height:10px; }
.hud-adaptable[data-bord-vise]::after { content:'Fixation au bord · 3 s'; position:absolute; inset:0; display:grid; place-items:center; background:#082730e8; color:#8ff5e4; border:2px solid #8ff5e4; border-radius:inherit; pointer-events:none; animation:fixation-bord 3s linear; }
@keyframes fixation-bord { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0) } }
.hud-adaptable[data-ancrage] { border-color:#61b9ac; }
#interaction-prompt.prise-liane:not([hidden]) { display:flex!important; bottom:132px; max-width:calc(100vw - 32px); }
#interaction-prompt.prise-liane small { font-size:9px; }
#interaction-prompt.prise-liane strong { font-size:11px; }
.panneau-commandes { top:190px; right:16px; width:calc(238px * var(--echelle-hud,1)); font-size:clamp(11px,calc(12px * var(--echelle-hud,1)),22px); display:flex; flex-direction:column; }
.commandes-entete { min-height:38px; display:flex; align-items:center; gap:8px; padding:3px 84px 3px 8px; flex-shrink:0; }
.commandes-entete b { font-size:10px; letter-spacing:.1em; }
.commandes-oeil,.profile-dock .commandes-oeil { position:relative; width:28px; height:28px; flex-shrink:0; display:grid; grid-template:none; place-items:center; align-self:center; padding:0; border:0; border-radius:5px; background:#173942; color:#83efd9!important; cursor:pointer; }
.commandes-oeil svg,.commande-action svg { width:1.5em; height:1.5em; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.commandes-oeil svg { width:20px; height:20px; }
.commandes-oeil:focus-visible { outline:2px solid #78edec; outline-offset:2px; }
.oeil-barre { display:none; position:absolute; width:23px; height:2px; background:currentColor; transform:rotate(-45deg); box-shadow:0 0 0 2px #173942; }
.commandes-oeil[aria-expanded=false] .oeil-barre { display:block; }
.commandes-oeil[aria-expanded=false] { color:#f1ac90!important; }
.profile-dock.replie > button:not(.commandes-oeil) { display:none; }
.panneau-commandes.replie .commandes-contenu { display:none; }
.panneau-commandes.replie { width:238px; }
.panneau-commandes.replie[data-ancrage] { width:238px; }
.commandes-contenu { padding:0 8px 8px; overflow:auto; overscroll-behavior:contain; max-height:min(510px,calc(100dvh - 246px)); scrollbar-width:thin; scrollbar-color:#46767c transparent; }
.commandes-aide { margin:4px 2px 8px; font-size:.79em; color:#94adb5; }
.commandes-direction { display:flex; gap:4px; margin-bottom:5px; }
.commandes-direction button { flex:1; background:#1a3642; border:1px solid #466671; border-radius:4px; min-height:28px; }
.panneau-commandes details { border-top:1px solid #34505a; }
.panneau-commandes summary { padding:8px 2px; cursor:pointer; color:#a3e4dd; font-size:.9em; font-weight:600; }
.commandes-lignes { display:grid; gap:3px; padding-bottom:7px; }
.commande-action { display:flex; align-items:center; text-align:left; gap:7px; padding:6px; background:#112a34; border:1px solid transparent; border-radius:5px; min-height:34px; }
.commande-action[hidden] { display:none; }
.commande-action span { flex:1; }
.commande-action svg { color:#87c8cc; }
.commande-action kbd { font-size:.72em; line-height:1.5; white-space:nowrap; padding:1px 4px; border:1px solid #456471; border-radius:3px; color:#bcd4dc; background:#081c25; }
.commande-action:hover,.commande-action.tenue,.commandes-direction .tenue { background:#244853; border-color:#75c9c5; }
.commandes-retour { margin:5px 2px 8px; color:#c8e5d6; font-size:.8em; min-height:2.7em; }
.panneau-commandes:is([data-ancrage=haut],[data-ancrage=bas]) { width:min(calc(720px * var(--echelle-hud,1)),calc(100vw - 16px)); }
.panneau-commandes:is([data-ancrage=haut],[data-ancrage=bas]) .commandes-contenu { max-height:min(260px,calc(100dvh - 70px)); }
.panneau-commandes:is([data-ancrage=haut],[data-ancrage=bas]) .commandes-lignes { grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); }
.panneau-commandes:is([data-ancrage=gauche],[data-ancrage=droite]) .commandes-contenu { max-height:calc(100dvh - 64px); }
#sorts-flottants { bottom:16px; left:50%; transform:translateX(-50%); padding:7px 9px 9px; }
#sorts-flottants header { display:flex; align-items:center; gap:8px; color:#91b5bc; font-size:9px; letter-spacing:.14em; padding:0 86px 8px 0; min-height:28px; }
#sorts-flottants.replie .spell-bar { display:none; }
#sorts-flottants.replie header { padding-bottom:0; }
#sorts-flottants .spell-bar { --case:clamp(24px,calc(44px * var(--echelle-hud,1)),100px); grid-template-columns:repeat(var(--slots,6),minmax(0,1fr)); width:calc(var(--slots,6) * var(--case) + (var(--slots,6) - 1) * 3px); max-width:calc(100vw - 38px); margin:0; gap:3px; }
#sorts-flottants .spell-slot { padding:0; min-width:0; border-radius:5px; cursor:pointer; }
#sorts-flottants:is([data-ancrage=gauche],[data-ancrage=droite]) { max-height:calc(100dvh - 16px); overflow:auto; }
#sorts-flottants:is([data-ancrage=gauche],[data-ancrage=droite]) .spell-bar { grid-template-columns:1fr; width:var(--case); margin:auto; }
#sorts-flottants:is([data-ancrage=gauche],[data-ancrage=droite]) header { padding:0 0 32px; text-align:center; min-width:74px; }
#sorts-flottants:is([data-ancrage=gauche],[data-ancrage=droite]) .hud-commandes { top:42px; }
@media(pointer:coarse) { .commande-action,.commandes-direction button { min-height:44px; } .hud-adaptable .hud-commandes button,.commandes-oeil { width:32px; height:32px; } .commandes-entete { min-height:46px; padding-right:114px; } }
@media(max-width:700px) { .panneau-commandes { top:180px; right:10px; width:210px; } .commandes-contenu { max-height:min(370px,calc(100dvh - 232px)); } }
@media(prefers-reduced-motion:reduce) { .hud-adaptable[data-bord-vise]::after { animation:none; } }