/* Refonte des attaques : emplacements, cartes d’amélioration, onglet Capacités, niveau permanent. */
.mv.locked.planned { opacity: .72; border-style: dashed; }
.mv.locked.planned .orb { filter: saturate(.55) brightness(.8); }
.mv.locked.planned .sub { color: var(--gold); }
.mv.unlock { animation: slotOpen .9s ease-out; }
@keyframes slotOpen { 0% { transform: scale(1.18); box-shadow: 0 0 0 3px #fff, 0 0 30px var(--gold); filter: brightness(2); } 60% { transform: scale(.98); } 100% { transform: none; box-shadow: none; filter: none; } }
.pick.legend { background-image: linear-gradient(115deg, transparent 30%, rgba(255,230,140,.28) 45%, transparent 60%), linear-gradient(180deg, #3a2a08, #1a1004) !important; background-size: 250% 100%, 100% 100%; animation: pop .3s, shine 1.6s linear infinite; }
.pick.legend .ic .orb-big { box-shadow: 0 0 18px #ffcb3d, 0 0 0 2px #fff6c8; color: #fff6c8; animation: legendPulse 1.2s ease-in-out infinite; }
@keyframes legendPulse { 50% { transform: scale(1.12) rotate(8deg); } }
.cap-tabs { gap: 6px; margin: 6px 0 4px; }
.cap-tabs .btn { font-size: 16px; padding: 4px 10px; }
.cap-head { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.cap-lvl { font-size: 18px; color: var(--dim); white-space: nowrap; }
.cap-lvl b { font-size: 30px; color: var(--gold); text-shadow: 0 2px 0 #6b3b00; }
.cap-xp { height: 9px; }
.cap-xp i { background: linear-gradient(180deg, #fff6c8, var(--xp)); transform-origin: left; transition: transform .6s; }
.cap-sig { font-size: 16px; color: var(--gold); margin: 2px 0; }
.cap-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cap-slot { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 2px solid var(--tc); border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 28%, transparent), rgba(8,15,40,.85) 70%); cursor: pointer; font-size: 17px; min-height: 44px; transition: transform .12s; }
.cap-slot:hover { transform: translateY(-2px); }
.cap-slot.sel { box-shadow: 0 0 0 2px #fff, 0 0 14px var(--gold); animation: nudge .5s; }
.cap-slot.empty { border-style: dashed; opacity: .75; }
.cap-slot .muted { font-size: 13px; }
.cap-n { width: 20px; height: 20px; border-radius: 50%; background: var(--tc); color: #0a0820; display: grid; place-items: center; font-size: 14px; flex: none; }
.cap-x { position: absolute; top: 1px; right: 2px; background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 13px; padding: 0 3px; }
.cap-x:hover { color: var(--bad); }
.cap-list { max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 3px; }
.cap-mv { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-left: 4px solid var(--tc); border-radius: 3px; background: rgba(8,15,40,.7); font-size: 16px; cursor: pointer; transition: background .12s, transform .12s; }
.cap-mv:hover { background: color-mix(in srgb, var(--tc) 22%, rgba(8,15,40,.85)); transform: translateX(2px); }
.cap-mv.on { background: color-mix(in srgb, var(--tc) 30%, rgba(8,15,40,.85)); box-shadow: inset 0 0 0 1px var(--tc); }
.cap-mv.lock { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.cap-mv.sig b { color: var(--gold); }
.cap-mv.nope { animation: lockShake2 .3s; }
@keyframes lockShake2 { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cap-lv { width: 52px; color: var(--dim); font-size: 14px; flex: none; }
.cap-ty { width: 62px; font-size: 12px; color: var(--tc); flex: none; text-transform: uppercase; letter-spacing: 1px; }
.cap-in { font-size: 12px; white-space: nowrap; }
.cap-eq { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #3a2400; display: grid; place-items: center; font-size: 12px; flex: none; }
.lvl-res { display: flex; align-items: center; gap: 10px; }
.lvl-from { color: var(--dim); }
.lvl-arrow { color: var(--gold); animation: nudge .8s infinite; }
.lvl-to { color: var(--txt); }
.lvl-to.up { color: var(--gold); font-size: 30px; text-shadow: 0 2px 0 #6b3b00; animation: grow .5s .5s both; }
.lvl-res .bar { max-width: 260px; }
.lvl-new { margin-top: 4px; font-size: 18px; animation: pop .4s .8s both; }

/* Bonbons Exp (onglet Capacités) */
.cap-bon { margin: 6px 0; padding: 6px 8px; border: 2px solid rgba(255, 211, 92, .35); border-radius: 4px; background: rgba(40, 30, 10, .35); }
.cap-bon-t { font-size: 16px; margin-bottom: 4px; }
.cap-bon-l { display: flex; gap: 6px; flex-wrap: wrap; }
.cap-bonb { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; font: inherit; font-size: 16px; color: #e8f0ff; cursor: pointer;
  background: rgba(10, 16, 40, .8); border: 2px solid rgba(255, 255, 255, .2); border-radius: 4px; }
.cap-bonb img { width: 32px; height: 32px; image-rendering: pixelated; }
.cap-bonb.b-s { border-color: rgba(96, 172, 255, .7); }
.cap-bonb.b-m { border-color: rgba(255, 200, 64, .7); }
.cap-bonb.b-xl { border-color: rgba(214, 110, 255, .8); }
.cap-bonb:hover:not([disabled]), .cap-bonb:focus-visible { background: rgba(40, 56, 110, .95); border-color: #fff; }
.cap-bonb[disabled] { opacity: .45; cursor: default; }
.cap-bonb[disabled] img { filter: grayscale(1); }
.cap-bon-n { color: #ffd35c; }
.cap-bon-g { color: #b8c4e0; }
.cap-bon-msg { margin-top: 4px; font-size: 16px; }
.cap-lvl.cap-pop { animation: capPop .5s ease-out; }
@keyframes capPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: #ffd35c; } 100% { transform: scale(1); } }