/* ===== Héros 3D (hero3d.js) : unité de combat + aperçu de la fiche ===== */
.unit.card-unit .unit-sprite.unit-3d-wrap { aspect-ratio: 2 / 3; position: relative; border-radius: 10px; overflow: hidden; }
.unit-3d { position: absolute; inset: 0; }
.unit-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.unit-3d.hero3d-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #ffffff33; border-top-color: var(--gold); animation: hero3dSpin 0.9s linear infinite; }
.unit-3d.hero3d-failed::after { content: "3D indisponible"; position: absolute; inset: auto 0 6px; text-align: center; font-size: 0.55rem; color: var(--muted); }
@keyframes hero3dSpin { to { transform: rotate(360deg); } }
.unit.card-unit .unit-3d-wrap { background: radial-gradient(ellipse at 50% 85%, #ffffff12, transparent 70%); }
.unit.card-unit.casting .unit-3d { filter: drop-shadow(0 0 12px var(--gold)) brightness(1.15); }
.unit.card-unit.hit .unit-3d { animation: spriteHurt 0.4s ease; }
.unit.card-unit.healed .unit-3d { filter: drop-shadow(0 0 8px #5fd668) brightness(1.15); }
.unit.card-unit.dead .unit-3d { filter: grayscale(0.8) brightness(0.6); }
.grid-enemy .unit.card-unit .unit-3d-wrap { box-shadow: inset 0 0 0 1px #e86a6a55; }

/* Fiche du héros */
.hero3d-controls { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 0.72rem; color: var(--muted); }
.hero3d-controls .btn { flex: 0 0 auto; }

/* Aperçu plein cadre */
.hero3d-card { width: min(94vw, 420px); padding: 10px 12px 12px; }
.hero3d-stage { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 60dvh; margin: 6px auto; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 72%, #39404a 0%, #1a222c 55%, #0c1119 100%); border: 1px solid #9e875b66; }
.hero3d-stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.hero3d-stage.hero3d-loading::after { content: "Chargement du modèle…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.8rem; }
.hero3d-stage.hero3d-failed::after { content: "WebGL indisponible sur cet appareil"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.8rem; }
.hero3d-hint { margin: 2px 0 6px; font-size: 0.68rem; color: var(--muted); text-align: center; }
.hero3d-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }