/* ===== Valforge — prototype ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0e0c16;
  --bg2: #17141f;
  --card: #1e1a2b;
  --card-edge: #322b47;
  --text: #eae6f2;
  --muted: #8d86a3;
  --gold: #e8c35a;
  --hp: #5fd668;
  --hp-low: #e05555;
  --energy: #5fa8e8;
  --shield: #9ecfe8;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse at 50% -20%, #241d3a 0%, var(--bg) 60%);
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.screen {
  display: none;
  flex-direction: column;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}
.screen.active { display: flex; }

/* ===== Boutons ===== */
.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 12px 28px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn-primary {
  background: linear-gradient(160deg, #f0d075, #c99a2e);
  border-color: #f5e0a0;
  color: #221a05;
  box-shadow: 0 4px 18px rgba(232, 195, 90, 0.35);
}
.btn-small { padding: 6px 14px; font-size: 0.85rem; border-radius: 8px; }

/* ===== Écran de lancement ===== */
#screen-title {
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #070911;
}
.splash-visual { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.splash-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  animation: splashDrift 16s ease-in-out infinite alternate;
}
.splash-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #02030ae8 0%, #0607134d 27%, #05061124 48%, #03040bc7 80%, #02030afa 100%),
    radial-gradient(ellipse at 50% 46%, transparent 24%, #02030a88 100%);
}
.splash-magic,
.splash-magic::before,
.splash-magic::after {
  position: absolute;
  inset: -15%;
  content: '';
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffcc6d 0 1px, transparent 1.8px),
    radial-gradient(circle, #6fcfff 0 1px, transparent 2px);
  background-size: 67px 79px, 89px 103px;
  opacity: 0.2;
  animation: magicRise 12s linear infinite;
}
.splash-magic::before { transform: translateX(31px) scale(0.8); animation-duration: 17s; opacity: 0.16; }
.splash-magic::after { transform: translateX(-26px) scale(1.1); animation-duration: 21s; opacity: 0.1; }
.splash-content {
  width: min(100%, 520px);
  min-height: 100%;
  padding: max(24px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.title-emblem { font-size: 4rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes splashDrift {
  0% { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.13) translate3d(0, -1.5%, 0); }
}
@keyframes magicRise {
  from { transform: translate3d(0, 9%, 0); }
  to { transform: translate3d(0, -9%, 0); }
}
.game-title {
  font-size: 3.2rem;
  letter-spacing: 0.35em;
  margin: 10px 0 4px 0.35em;
  background: linear-gradient(180deg, #f7e6b0, var(--gold) 55%, #a37b1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(232, 195, 90, 0.25);
}
.tagline { color: #ddd9e7; margin: 2px 0 22px; font-size: 0.92rem; letter-spacing: 0.07em; text-shadow: 0 2px 12px #000; }
.proto-note { color: #aca6b9; font-size: 0.75rem; margin-top: 13px; text-shadow: 0 1px 5px #000; }
.launch-loader { width: min(100%, 390px); margin-bottom: 18px; }
.launch-loader-line { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 7px; color: #d7d2df; font-size: 0.75rem; }
.launch-loader-line strong { color: #ffe39a; font-variant-numeric: tabular-nums; }
.launch-track { height: 8px; padding: 2px; border-radius: 99px; overflow: hidden; background: #03040bbd; border: 1px solid #b9913a80; box-shadow: inset 0 1px 4px #000, 0 0 18px #429fd620; }
.launch-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d8dd1, #6ad8ff 45%, #f3c85c 100%); box-shadow: 0 0 12px #69d6ff, 0 0 18px #e8c35a; transition: width 0.35s ease; }
.login-btn { width: min(100%, 330px); min-height: 54px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.13em; border-radius: 8px; border-width: 1px; box-shadow: 0 0 0 1px #352709, 0 8px 28px #0009, 0 0 22px #e8c35a40; }
.login-btn:not(:disabled) { animation: loginReady 2.4s ease-in-out infinite; }
.login-icon { font-size: 0.68rem; }
.loading-music-control {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; max-width: 100%; margin-top: 14px; padding: 8px 14px;
  border: 1px solid #b896534f; border-radius: 24px; background: #0b101dc9;
  color: #d7c69d; font: inherit; font-size: .875rem; cursor: pointer;
  box-shadow: 0 3px 14px #0005; transition: border-color .2s, background .2s;
}
.loading-music-control:hover { border-color: #d6b66c; background: #171d2ee6; }
.loading-music-control:focus-visible { outline: 2px solid #f4d287; outline-offset: 4px; }
.loading-music-control .vf-icon { width: 20px; height: 20px; }
.loading-music-control[data-state="playing"] { border-color: #c9a55b99; color: #f0d99e; }
.loading-music-bars { display: inline-flex; align-items: center; gap: 3px; width: 17px; height: 16px; }
.loading-music-bars i { width: 3px; height: 3px; border-radius: 2px; background: currentColor; }
.loading-music-control[data-state="playing"] .loading-music-bars i { height: 12px; animation: loadingMusicPulse 1.2s ease-in-out infinite alternate; }
.loading-music-control[data-state="playing"] .loading-music-bars i:nth-child(2) { animation-delay: -.45s; }
.loading-music-control[data-state="playing"] .loading-music-bars i:nth-child(3) { animation-delay: -.8s; }
@keyframes loadingMusicPulse { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes loginReady { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }

/* ===== Art officiel des héros (PNG) ===== */
.title-logo-wrap {
  position: relative;
  width: min(94vw, 470px);
  aspect-ratio: 3 / 1;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  margin-top: clamp(18px, 7vh, 68px);
  isolation: isolate;
  animation: logoHover 5.5s ease-in-out infinite;
}
.title-logo-wrap::before {
  content: '';
  position: absolute;
  inset: 18% 5%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 50%, #ef9d394a 0%, #387bd64a 43%, transparent 72%);
  filter: blur(21px);
  animation: logoAura 3.8s ease-in-out infinite alternate;
}
.title-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px #000c) drop-shadow(0 0 12px #438fd755) drop-shadow(0 0 8px #e7a84640);
}
.logo-aura {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 42%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(90deg, #e9912a66, #57bfff66);
  filter: blur(24px);
  z-index: -1;
}
.logo-sparks, .logo-sparks i { position: absolute; inset: 0; pointer-events: none; }
.logo-sparks i::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd37b;
  box-shadow: 0 0 8px #ffad39;
  animation: logoSpark 4s ease-out infinite;
}
.logo-sparks i:nth-child(1)::before { left: 15%; top: 66%; animation-delay: 0s; }
.logo-sparks i:nth-child(2)::before { left: 34%; top: 73%; animation-delay: 1.1s; background: #71d7ff; box-shadow: 0 0 8px #409ce8; }
.logo-sparks i:nth-child(3)::before { left: 70%; top: 67%; animation-delay: 2.1s; }
.logo-sparks i:nth-child(4)::before { left: 86%; top: 58%; animation-delay: 3s; background: #71d7ff; box-shadow: 0 0 8px #409ce8; }
@keyframes logoHover {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.012); }
}
@keyframes logoAura { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 0.95; transform: scale(1.06); } }
@keyframes logoSpark {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.5); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(8px, -38px, 0) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-art, .splash-magic, .splash-magic::before, .splash-magic::after, .title-logo-wrap, .title-logo-wrap::before, .logo-sparks i::before, .login-btn:not(:disabled) { animation: none; }
  .loading-music-control[data-state="playing"] .loading-music-bars i { animation: none; }
}
.hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 10px;
  display: block;
}
.card-sprite .hero-art { aspect-ratio: 1 / 1.15; }
.sheet-sprite .hero-art { aspect-ratio: 2 / 3; object-fit: cover; }
.summon-sprite .hero-art { aspect-ratio: 2 / 3; }
/* Carte complète (ratio natif 2/3, cadre inclus dans l'image) */
.hero-card-art {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.sheet-sprite.has-card { width: 158px; }
.hero-card .card-sprite.card-full { width: 100%; }
/* Héros sans carte officielle : l'art en pied présenté au format carte */
.card-sprite.art-as-card .hero-art {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.locked-hero .hero-card-art { filter: grayscale(0.85) brightness(0.8); }
.sheet-skills-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.skill-chip {
  background: #00000030;
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.skill-chip:active { border-color: var(--gold); }
.skill-chip.active { color: #fff1ad; border-color: var(--gold); background: #e8c35a16; }
.skill-chip.ult { color: var(--gold); border-color: #6b5a2a; }
.summon-sprite.has-card { width: min(240px, 58vw); }
.unit .unit-sprite .hero-art {
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 8px;
}
/* animations de combat adaptées à l'art PNG */
.unit.hit .hero-art { animation: spriteHurt 0.4s ease; }
.unit.healed .hero-art { filter: drop-shadow(0 0 8px #5fd668) brightness(1.15); }
.unit.casting .hero-art { filter: drop-shadow(0 0 10px var(--gold)) brightness(1.25); }
.unit.dead .hero-art { filter: grayscale(1) brightness(0.5); }
.locked-hero .hero-art { filter: grayscale(1) brightness(0.55); }

/* ===== Hub ===== */
#screen-hub {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #05060a;
}
#screen-hub::before {
  content: '';
  position: absolute;
  inset: -28px;
  z-index: -1;
  background: linear-gradient(#05060a66, #05060aaa), url('../assets/art/village.jpg') center / cover;
  filter: blur(20px) brightness(0.52) saturate(0.8);
  transform: scale(1.06);
}
.hub-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
  min-height: 76px;
  padding: max(8px, env(safe-area-inset-top)) clamp(10px, 2.2vw, 22px) 8px;
  background: linear-gradient(180deg, #0d101afb, #11101af2);
  border-bottom: 1px solid #8d713f88;
  box-shadow: 0 7px 22px #0009, inset 0 -1px 0 #ffffff0a;
}
.hub-player-status { display: flex; align-items: center; min-width: 0; gap: clamp(8px, 1.5vw, 16px); }
.player-profile-entry {
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 5px 2px 2px;
  margin: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.player-profile-entry:hover { background: #ffffff0a; }
.player-profile-entry:active { transform: scale(0.985); }
.player-profile-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.player-profile-copy > strong { max-width: 155px; color: #f5ecd4; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.player-profile-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.player-profile-meta-row small { color: #a9a2b5; font-size: 0.7rem; white-space: nowrap; }
.vip-badge { display: inline-flex; align-items: center; gap: 3px; color: #211704; background: linear-gradient(180deg, #ffe496, #d89b2e); border: 1px solid #fff1b2; border-radius: 5px; padding: 2px 5px; font-size: 0.6rem; font-weight: 900; line-height: 1; box-shadow: 0 1px 5px #0008; }
.vip-badge > span { color: #7a310f; font-size: 0.68rem; }
.hub-topbar .avatar-frame-small { width: 50px; height: 50px; padding: 3px; }
.hub-power { display: flex; align-items: center; gap: 6px; min-width: 94px; padding: 6px 9px; border-left: 1px solid #ffffff18; }
.hub-power-icon { color: #ffd65a; font-size: 1.05rem; filter: drop-shadow(0 0 5px #f1b92f99); }
.hub-power > span:last-child { display: flex; flex-direction: column; }
.hub-power small { color: #9991a9; font-size: 0.6rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; }
.hub-power strong { color: #fff0b3; margin-top: 3px; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.hub-wallet { display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
.currency-pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 72px; min-height: 32px; padding: 5px 10px; border: 1px solid #40374e; border-radius: 999px; background: linear-gradient(180deg, #1a1823e8, #0c0b12e8); box-shadow: inset 0 1px 0 #ffffff0d, 0 2px 7px #0008; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.currency-gold { color: #f2cc66; border-color: #6c5627; }
.currency-gems { color: #b89bff; border-color: #56427b; }
.currency-royal { color: #ffb5dc; border-color: #7f3e68; background: linear-gradient(180deg, #251527, #110b16); }
.royal-icon { color: #ff79ba; font-size: 1rem; text-shadow: 0 0 7px #ff3ca5; }

/* ===== Profil joueur ===== */
#screen-profile { background: radial-gradient(circle at 50% 0%, #2a203d 0%, var(--bg) 46%); }
.profile-page-header { flex: 0 0 auto; }
.profile-level-pill { color: #ffe6a4; border: 1px solid #806a32; background: #e8c35a12; border-radius: 999px; padding: 5px 9px; font-size: 0.75rem; font-weight: 800; }
.profile-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 2px 28px; }
.profile-identity-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 17px 15px;
  overflow: hidden;
  border: 1px solid #756031;
  border-radius: 18px;
  background: linear-gradient(135deg, #241b34ee, #12101cee 70%);
  box-shadow: inset 0 1px 0 #ffffff12, 0 10px 30px #0006;
}
.profile-identity-card::after { content: ''; position: absolute; right: -42px; top: -64px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, #477fd335, transparent 68%); pointer-events: none; }
.profile-identity-copy { flex: 1; min-width: 0; position: relative; z-index: 1; }
.profile-kicker { color: var(--gold); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; }
.profile-identity-copy h3 { color: #f4ead0; font-size: 1.3rem; line-height: 1.2; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile-account-line { color: var(--muted); font-size: 0.78rem; }
.profile-stats-strip { display: flex; gap: 13px; margin-top: 12px; }
.profile-stats-strip span { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
.profile-stats-strip b { display: block; color: #f3e8cb; font-size: 0.82rem; margin-bottom: 2px; }
.profile-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 13px 0; border-bottom: 1px solid #ffffff14; }
.profile-tab { min-height: 42px; padding: 8px 3px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 0.78rem; cursor: pointer; }
.profile-tab.active { color: #f3cf6c; border-bottom-color: var(--gold); }
.profile-panel { display: none; }
.profile-panel.active { display: block; animation: fadeIn 0.25s ease; }
.profile-section { padding: 14px; border: 1px solid #322b47; border-radius: 15px; background: #17141fe8; }
.profile-section > h3, .profile-section-heading h3 { color: #f2e8cf; font-size: 1rem; }
.profile-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.profile-section-heading p { color: var(--muted); font-size: 0.78rem; line-height: 1.4; margin-top: 3px; }
.profile-section-heading > span { flex: 0 0 auto; color: var(--gold); font-size: 0.75rem; font-weight: 700; border: 1px solid #615024; border-radius: 99px; padding: 4px 7px; }
.profile-field { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-height: 49px; padding: 9px 0; border-bottom: 1px solid #ffffff0c; color: #c9c3d2; font-size: 0.875rem; }
.profile-field:last-of-type { border-bottom: 0; }
.profile-field.readonly strong { color: #eee6d4; font-size: 0.83rem; text-align: right; }
.profile-field input, .profile-field select { min-width: 0; color: var(--text); background: #0b0912; border: 1px solid #3d3551; border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 0.875rem; }
.profile-field select { width: min(54%, 210px); }
.nickname-edit { display: flex; min-width: 0; align-items: center; gap: 6px; }
.nickname-edit input { width: min(36vw, 150px); }
.nickname-edit .btn { padding: 9px 10px; }
.profile-settings-note { color: var(--muted); font-size: 0.75rem; line-height: 1.45; margin-top: 12px; }
.profile-reward-unlock { display: inline-block; color: #ffe49b; margin-top: 7px; font-weight: 700; }
.setting-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: #78cf91; font: inherit; font-size: 0.78rem; cursor: pointer; }
.setting-toggle > span { position: relative; width: 42px; height: 23px; border-radius: 99px; background: #41794f; box-shadow: inset 0 1px 4px #0007; }
.setting-toggle > span::after { content: ''; position: absolute; width: 17px; height: 17px; top: 3px; right: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px #0008; transition: transform 0.2s; }
.setting-toggle[aria-pressed="false"] { color: var(--muted); }
.setting-toggle[aria-pressed="false"] > span { background: #3b3743; }
.setting-toggle[aria-pressed="false"] > span::after { transform: translateX(-19px); }

.avatar-frame {
  --frame-a: #9c8c72;
  --frame-b: #4c4337;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 25deg, var(--frame-a), var(--frame-b), var(--frame-a), #17131e, var(--frame-a));
  box-shadow: 0 0 0 1px #000, 0 4px 14px #0008, 0 0 13px color-mix(in srgb, var(--frame-a) 35%, transparent);
}
.avatar-frame::before { content: ''; position: absolute; inset: 2px; border: 1px solid #ffffff45; border-radius: inherit; pointer-events: none; }
.avatar-crop,
.avatar-choice .avatar-face {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: #0a0810;
}
.avatar-crop { width: 100%; height: 100%; }
.avatar-crop img,
.avatar-choice .avatar-face img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--avatar-width, 220%);
  max-width: none;
  height: auto;
  transform: translate(var(--avatar-shift-x, -50%), var(--avatar-shift-y, -22%));
}
.avatar-frame-small { width: 45px; height: 45px; padding: 3px; }
.avatar-frame-large { width: 96px; height: 96px; }
.avatar-frame[data-frame="silver"] { --frame-a: #e5e9ef; --frame-b: #707887; }
.avatar-frame[data-frame="sapphire"] { --frame-a: #70cfff; --frame-b: #254f9d; }
.avatar-frame[data-frame="pve-scout"] { --frame-a: #8ed66c; --frame-b: #395628; }
.avatar-frame[data-frame="pve-conqueror"] { --frame-a: #65d7c1; --frame-b: #164d56; }
.avatar-frame[data-frame="pve-legend"] { --frame-a: #80e9ff; --frame-b: #6c49c6; }
.avatar-frame[data-frame="pvp-duelist"] { --frame-a: #de9658; --frame-b: #7b2d22; }
.avatar-frame[data-frame="pvp-champion"] { --frame-a: #ffcb52; --frame-b: #b43b28; }
.avatar-frame[data-frame="pvp-crown"] { --frame-a: #ff6a73; --frame-b: #84286d; }
.avatar-frame[data-frame="alliance-banner"] { --frame-a: #83a8ff; --frame-b: #373a8c; }
.avatar-frame[data-frame="alliance-guardian"] { --frame-a: #bd9cff; --frame-b: #513086; }
.avatar-frame[data-frame="alliance-legend"] { --frame-a: #f0d877; --frame-b: #6d43b6; }

.avatar-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avatar-choice { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 5px; padding: 9px 5px; color: var(--text); background: #0e0b15; border: 1px solid #30283f; border-radius: 12px; font: inherit; cursor: pointer; }
.avatar-choice .avatar-face { width: 58px; height: 58px; background: #08070d; }
.avatar-choice b { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; }
.avatar-choice small { min-height: 2.6em; color: var(--muted); font-size: 0.62rem; line-height: 1.3; }
.avatar-choice.selected { border-color: var(--gold); background: #e8c35a0e; box-shadow: inset 0 0 14px #e8c35a12; }
.avatar-choice.locked { filter: grayscale(0.7); }
.avatar-choice.locked .avatar-face { opacity: 0.38; }
.avatar-lock { position: absolute; top: 47px; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #09070ddc; font-size: 0.7rem; }

.frame-choice-list { display: grid; gap: 8px; }
.frame-option { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 9px; color: var(--text); text-align: left; background: #0e0b15; border: 1px solid #30283f; border-radius: 12px; font: inherit; cursor: pointer; }
.frame-option .avatar-frame { width: 50px; height: 50px; padding: 4px; }
.frame-option-copy { min-width: 0; }
.frame-option-copy b, .frame-option-copy small { display: block; }
.frame-option-copy b { color: #ece3cc; font-size: 0.82rem; }
.frame-option-copy small { color: var(--muted); font-size: 0.69rem; line-height: 1.35; margin-top: 2px; }
.frame-mode { align-self: start; padding: 3px 6px; border-radius: 99px; color: #cfbfdc; background: #ffffff0a; border: 1px solid #ffffff12; font-size: 0.61rem; font-weight: 800; text-transform: uppercase; }
.frame-option.selected { border-color: var(--gold); background: #e8c35a0e; }
.frame-option.locked { opacity: 0.48; filter: grayscale(0.65); }

@media (max-width: 390px) {
  .profile-identity-card { gap: 12px; padding: 14px 11px; }
  .avatar-frame-large { width: 82px; height: 82px; }
  .profile-stats-strip { gap: 8px; }
  .profile-tab { font-size: 0.7rem; }
  .profile-section { padding: 12px 10px; }
  .nickname-edit { flex-direction: column; align-items: stretch; }
  .nickname-edit input { width: 145px; }
}
.gold-pill {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
}
.hub-menu { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; flex: 1; overflow-y: auto; }
.hub-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  padding: 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s, border-color 0.15s;
}
.hub-btn:active { transform: scale(0.98); }
.hub-btn:not(.disabled):hover { border-color: var(--gold); }
.hub-btn.disabled { opacity: 0.4; cursor: default; }
.hub-icon { font-size: 1.8rem; }
.hub-label small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.pills { display: flex; gap: 8px; }
.gem-pill {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #b58aff;
}
/* ===== Village ===== */
.village-scene {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.village-svg {
  width: 100%;
  max-height: 100%;
  border-radius: 18px;
  border: 1px solid var(--card-edge);
  box-shadow: 0 10px 40px #0008 inset, 0 4px 20px #0006;
}
.village-map {
  position: relative;
  height: 100%;
  aspect-ratio: 941 / 1672;
  max-height: 100%;
  max-width: 100%;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: -18px 0 34px #0009, 18px 0 34px #0009;
}
.village-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0008, transparent 8%, transparent 92%, #0008); }
.village-map img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
}
.hub-bottom-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(7px, 1.4vw, 14px);
  min-height: 68px;
  padding: 7px clamp(12px, 4vw, 34px) max(7px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #11101af6, #09080ffc);
  border-top: 1px solid #8d713f88;
  box-shadow: 0 -7px 22px #0009, inset 0 1px 0 #ffffff0a;
}
.bottom-menu-item,
.bottom-menu-slot {
  min-width: 0;
  height: 48px;
  border-radius: 13px;
  border: 1px solid #363041;
  background: linear-gradient(180deg, #1c1924, #0d0c12);
  box-shadow: inset 0 1px 0 #ffffff0b, 0 2px 7px #0008;
}
.bottom-menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b7afc3; font: inherit; cursor: pointer; }
.bottom-menu-item > span { font-size: 1.2rem; line-height: 1; }
.bottom-menu-item small { font-size: 0.68rem; font-weight: 700; }
.bottom-menu-item.active { color: #ffe399; border-color: #9f7d32; background: radial-gradient(circle at 50% 20%, #5c4725, #17131c 70%); box-shadow: inset 0 1px 0 #fff1b633, 0 0 12px #d7a92e36; }
.bottom-menu-slot { display: grid; place-items: center; color: #615a6c; border-style: dashed; }
.bottom-menu-slot b { font-size: 1.05rem; font-weight: 500; }

@media (max-width: 700px) {
  .hub-topbar { display: grid; grid-template-columns: 1fr; gap: 6px; min-height: 0; padding: max(7px, env(safe-area-inset-top)) 9px 7px; }
  .hub-player-status { justify-content: space-between; }
  .hub-wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .currency-pill { min-width: 0; min-height: 29px; padding: 4px 7px; }
  .hub-bottom-bar { min-height: 60px; gap: 6px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); }
  .bottom-menu-item, .bottom-menu-slot { height: 44px; border-radius: 11px; }
}

@media (max-width: 390px) {
  .hub-topbar .avatar-frame-small { width: 44px; height: 44px; }
  .player-profile-copy > strong { max-width: 118px; font-size: 0.82rem; }
  .player-profile-meta-row { gap: 4px; }
  .player-profile-meta-row small { font-size: 0.64rem; }
  .hub-power { min-width: 78px; padding: 5px 6px; }
  .hub-power small { display: none; }
  .hub-power strong { margin-top: 0; font-size: 0.72rem; }
  .currency-pill { font-size: 0.7rem; }
  .bottom-menu-item small { font-size: 0.62rem; }
}
.hotspot {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.hotspot:not(.locked):hover .hotspot-label,
.hotspot:not(.locked):active .hotspot-label {
  background: #000d;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(232, 195, 90, 0.5);
}
.hotspot.locked { cursor: default; }
.hotspot.locked .hotspot-label { opacity: 0.65; }
.hotspot-label {
  background: #000a;
  border: 1px solid #ffffff33;
  border-radius: 12px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.building { cursor: pointer; }
.building:not(.locked):hover { filter: brightness(1.2) drop-shadow(0 0 6px #e8c35a88); }
.building:not(.locked):active { filter: brightness(1.35); }
.building.locked { opacity: 0.5; cursor: default; }
.v-label text {
  fill: #eae6f2;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
.v-stars circle { animation: starTwinkle 3s ease-in-out infinite; }
.v-stars circle:nth-child(2n) { animation-delay: -1.2s; }
.v-stars circle:nth-child(3n) { animation-delay: -2.1s; }
@keyframes starTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.v-orb { animation: orbBreath 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes orbBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.v-flag { animation: flagWave 2s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes flagWave { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.82) skewY(3deg); } }
.v-smoke circle { animation: smokeRise 3.4s ease-in infinite; }
.v-smoke circle:nth-child(2) { animation-delay: -1.1s; }
.v-smoke circle:nth-child(3) { animation-delay: -2.2s; }
@keyframes smokeRise {
  0% { transform: translateY(6px); opacity: 0; }
  30% { opacity: 0.45; }
  100% { transform: translateY(-16px) translateX(4px); opacity: 0; }
}

/* ===== Invocation ===== */
.summon-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.summon-portal {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #7a4fd0;
  border-top-color: #d9c2ff;
  border-bottom-color: #d9c2ff44;
  animation: portalSpin 6s linear infinite;
  box-shadow: 0 0 30px #7a4fd066, inset 0 0 30px #7a4fd044;
}
@keyframes portalSpin { to { transform: rotate(360deg); } }
.portal-core { font-size: 4rem; animation: float 3s ease-in-out infinite; }
.summon-portal.active .portal-ring {
  animation: portalSpin 0.5s linear infinite;
  box-shadow: 0 0 60px #b58affcc, inset 0 0 50px #b58aff88;
}
.summon-portal.active .portal-core { animation: portalShake 0.15s linear infinite; }
@keyframes portalShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  75% { transform: translate(3px, -2px); }
}
.summon-collection { color: var(--gold); font-weight: 700; font-size: 0.9rem; }
.summon-rates { color: #d9cfba; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.025em; }
.summon-hint { color: var(--muted); font-size: 0.75rem; }
.summon-reveal { text-align: center; }
.summon-new { color: var(--gold); font-weight: 800; letter-spacing: 0.1em; margin-bottom: 8px; min-height: 1.2em; }
.summon-sprite { width: 110px; margin: 0 auto 8px; animation: popIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.summon-sprite.hero-race-frame {
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--race-frame) 82%, var(--tier-color));
  border-radius: 15px;
  background: #07060c;
  box-shadow: 0 8px 28px #000b, 0 0 22px color-mix(in srgb, var(--race-glow) 30%, transparent);
}
.summon-sprite.hero-race-frame::before { inset: 5px; border-width: 2px; border-radius: 10px; }
.summon-sprite.hero-race-frame::after { top: 10px; left: 12px; font-size: 1.05rem; }
.summon-sprite .hero-frame-media { width: 100%; }
.summon-sprite .hero-moon-row { top: 9px; font-size: 0.9rem; }
.summon-sprite .hero-star-row { bottom: 9px; padding: 3px 9px; border-radius: 999px; background: #050409b8; font-size: 0.85rem; }
.summon-sub { color: var(--muted); font-size: 0.85rem; margin: 6px 0 16px; }

/* Héros verrouillés */
.locked-hero { opacity: 0.8; }
.locked-hero .card-sprite { filter: grayscale(1) brightness(0.7); }

/* ===== En-têtes de page ===== */
.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
}
.page-header h2 { flex: 1; font-size: 1.1rem; }
.btn-back { min-width: 40px; }

/* ===== Filtre des factions ===== */
.faction-filter {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin: 1px -2px 4px;
  padding: 4px 2px 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.faction-filter::-webkit-scrollbar { display: none; }
.faction-filter-btn {
  --faction-color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 37px;
  padding: 7px 12px;
  color: #ada6ba;
  background: linear-gradient(180deg, #1b1824, #100e16);
  border: 1px solid #393247;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.faction-filter-btn:active { transform: scale(0.96); }
.faction-filter-btn > span { font-size: 0.92rem; }
.faction-filter-btn.active { color: var(--faction-color); border-color: color-mix(in srgb, var(--faction-color) 65%, #4a4059); background: color-mix(in srgb, var(--faction-color) 12%, #131019); box-shadow: inset 0 0 12px color-mix(in srgb, var(--faction-color) 10%, transparent), 0 0 9px color-mix(in srgb, var(--faction-color) 16%, transparent); }

/* ===== Campagne ===== */
.campaign-list { flex: 1; overflow-y: auto; padding-bottom: 16px; }
.chapter-title { color: var(--gold); font-size: 0.9rem; margin: 14px 2px 8px; }
.stage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.stage-row:disabled { opacity: 0.35; cursor: default; }
.stage-row.open { border-color: var(--gold); box-shadow: 0 0 12px rgba(232, 195, 90, 0.2); }
.stage-row.done { opacity: 0.6; }
.stage-row.boss { background: linear-gradient(160deg, #2b1a2e, var(--card)); }
.stage-num { font-size: 1.2rem; }
.stage-name { flex: 1; }
.stage-name small { display: block; font-weight: 400; font-size: 0.7rem; color: var(--muted); }
.stage-reward { font-size: 0.78rem; color: var(--gold); white-space: nowrap; }

/* ===== Fiche héros : carte à gauche, détails à droite ===== */
.hero-sheet {
  --sheet-primary: #dbc162;
  --sheet-secondary: #66cfff;
  --sheet-deep: #0e0c16;
  --sheet-panel: #151220;
  --sheet-line: #716034;
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, var(--sheet-panel) 0%, var(--sheet-deep) 72%);
  border: 1px solid var(--sheet-line);
  border-radius: 20px;
  padding: 18px;
  width: min(96vw, 1120px);
  max-height: 94dvh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 30px 80px #000d, 0 0 32px color-mix(in srgb, var(--sheet-secondary) 13%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sheet-primary) 24%, transparent);
  animation: popIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.hero-sheet::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.85;
}
.hero-sheet > * { position: relative; z-index: 1; }
#hero-sheet[data-faction="Néphilim"] {
  --sheet-primary: #f0d56f; --sheet-secondary: #69cfff; --sheet-deep: #090e1b; --sheet-panel: #1c1a2a; --sheet-line: #9a8140;
  background: radial-gradient(circle at 50% -8%, #f0d56f2e, transparent 32%), linear-gradient(145deg, #201d31, #090e1b 74%);
}
#hero-sheet[data-faction="Néphilim"]::before {
  background: conic-gradient(from 225deg at 50% 0%, transparent 0 12%, #69cfff12 12.5% 13%, transparent 13.5% 24%, #f0d56f10 24.5% 25%, transparent 25.5% 100%);
}
#hero-sheet[data-faction="Bête"] {
  --sheet-primary: #d8a75b; --sheet-secondary: #7eaa50; --sheet-deep: #100e0a; --sheet-panel: #262016; --sheet-line: #79572d;
  border-radius: 26px 9px 26px 9px;
  background: radial-gradient(ellipse at 15% 20%, #7eaa5028, transparent 34%), linear-gradient(145deg, #292116, #100e0a 72%);
}
#hero-sheet[data-faction="Bête"]::before {
  background: repeating-linear-gradient(116deg, transparent 0 42px, #d8a75b0c 43px 45px, transparent 46px 58px);
}
#hero-sheet[data-faction="Elfe"] {
  --sheet-primary: #bfe58c; --sheet-secondary: #4bc58a; --sheet-deep: #07130f; --sheet-panel: #14271e; --sheet-line: #55865f;
  border-radius: 32px 10px 32px 10px;
  background: radial-gradient(ellipse at 0% 0%, #4bc58a30, transparent 32%), radial-gradient(ellipse at 100% 100%, #bfe58c1d, transparent 36%), linear-gradient(145deg, #17291f, #07130f 72%);
}
#hero-sheet[data-faction="Elfe"]::before {
  background: radial-gradient(ellipse at 8% 50%, transparent 0 54%, #bfe58c10 55% 56%, transparent 57%), radial-gradient(ellipse at 92% 50%, transparent 0 54%, #4bc58a10 55% 56%, transparent 57%);
}
#hero-sheet[data-faction="Orc"] {
  --sheet-primary: #df7542; --sheet-secondary: #7ca540; --sheet-deep: #100b09; --sheet-panel: #2a1812; --sheet-line: #8d432e;
  border-radius: 5px 20px 5px 20px;
  background: linear-gradient(132deg, #7ca54018 0 14%, transparent 14% 80%, #df754218 80%), linear-gradient(145deg, #2b1812, #100b09 72%);
}
#hero-sheet[data-faction="Orc"]::before {
  background: repeating-linear-gradient(45deg, transparent 0 48px, #df75420d 49px 51px, transparent 52px 70px);
}
#hero-sheet[data-faction="Nain"] {
  --sheet-primary: #e3b55d; --sheet-secondary: #4aa6d8; --sheet-deep: #0d1013; --sheet-panel: #25201a; --sheet-line: #966c35;
  border-radius: 7px;
  background: linear-gradient(145deg, #29231c, #0d1013 72%);
}
#hero-sheet[data-faction="Nain"]::before {
  background: linear-gradient(#4aa6d80c 1px, transparent 1px), linear-gradient(90deg, #e3b55d0c 1px, transparent 1px);
  background-size: 34px 34px;
}
#hero-sheet[data-faction="Ombre"] {
  --sheet-primary: #b88af0; --sheet-secondary: #7b3bc2; --sheet-deep: #09070f; --sheet-panel: #1c1327; --sheet-line: #68468f;
  border-radius: 23px;
  background: radial-gradient(circle at 82% 16%, #7b3bc23a, transparent 30%), radial-gradient(circle at 12% 86%, #b88af018, transparent 34%), linear-gradient(145deg, #21142e, #09070f 72%);
}
#hero-sheet[data-faction="Ombre"]::before {
  background: radial-gradient(ellipse at 50% 18%, #b88af00e, transparent 45%), repeating-linear-gradient(125deg, transparent 0 60px, #7b3bc208 61px 63px);
}
#hero-sheet[data-faction="Mort-Vivant"] {
  --sheet-primary: #a8d39b; --sheet-secondary: #4bc4a6; --sheet-deep: #07100e; --sheet-panel: #16221d; --sheet-line: #547967;
  border-radius: 6px 24px 6px 24px;
  background: radial-gradient(circle at 50% 0%, #a8d39b20, transparent 32%), linear-gradient(145deg, #19251f, #07100e 72%);
}
#hero-sheet[data-faction="Mort-Vivant"]::before {
  background: linear-gradient(72deg, transparent 0 19%, #4bc4a60c 19.3% 19.8%, transparent 20.1% 72%, #a8d39b0b 72.3% 72.8%, transparent 73.1%), repeating-linear-gradient(152deg, transparent 0 71px, #a8d39b08 72px 73px);
}
#hero-sheet[data-faction="Divinité"] {
  --sheet-primary: #ffeda0; --sheet-secondary: #87cffa; --sheet-deep: #080916; --sheet-panel: #1c1933; --sheet-line: #b89b42;
  border-radius: 30px;
  background: radial-gradient(circle at 50% -12%, #ffeda03b, transparent 34%), radial-gradient(circle at 88% 72%, #87cffa22, transparent 30%), linear-gradient(145deg, #201c39, #080916 74%);
}
#hero-sheet[data-faction="Divinité"]::before {
  background-image: radial-gradient(circle, #ffeda060 0 1px, transparent 1.5px), radial-gradient(circle, #87cffa45 0 1px, transparent 1.5px);
  background-position: 0 0, 17px 21px;
  background-size: 43px 43px, 59px 59px;
}
.sheet-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sheet-nav-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin: 0 42px 12px 0; }
.sheet-nav-btn { display: grid; place-items: center; width: 38px; height: 38px; color: var(--sheet-primary); background: linear-gradient(180deg, color-mix(in srgb, var(--sheet-panel) 82%, #fff 8%), var(--sheet-deep)); border: 1px solid var(--sheet-line); border-radius: 50%; font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 #ffffff12, 0 3px 10px #0008; }
.sheet-nav-btn:active { transform: scale(0.92); }
.sheet-nav-btn:disabled { opacity: 0.3; cursor: default; }
.sheet-eyebrow { align-self: center; color: var(--sheet-primary); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.22em; margin: 0; text-align: center; }
.sheet-faction-mark { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; margin-right: 5px; color: var(--sheet-secondary); border: 1px solid color-mix(in srgb, var(--sheet-primary) 65%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--sheet-secondary) 12%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--sheet-secondary) 26%, transparent); font-size: 0.82rem; letter-spacing: 0; vertical-align: middle; }
.sheet-columns { display: flex; gap: 22px; align-items: flex-start; }
.sheet-left { flex: 0 0 34%; max-width: 340px; }
.sheet-card { width: 100%; }
.sheet-card.hero-race-frame {
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--race-frame) 82%, var(--tier-color));
  border-radius: 15px;
  background: #07060c;
  box-shadow: 0 8px 28px #000b, 0 0 22px color-mix(in srgb, var(--race-glow) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--race-accent) 45%, transparent);
}
.sheet-card.hero-race-frame::before { inset: 5px; border-width: 2px; border-radius: 10px; }
.sheet-card.hero-race-frame::after { top: 10px; left: 12px; font-size: 1.15rem; }
.sheet-card .hero-frame-media { width: 100%; }
.sheet-card .hero-moon-row { top: 10px; font-size: 1rem; }
.sheet-card .hero-star-row { bottom: 10px; padding: 3px 10px; border-radius: 999px; background: #050409b8; font-size: 0.95rem; }
.sheet-card .hero-card-art { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.sheet-card .hero-art {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center;
  background: radial-gradient(circle at 50% 32%, #5b477044, #07060c 72%);
  border: 1px solid #ffffff12;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
#sheet-power {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--sheet-primary);
  text-align: center;
  margin: 10px 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#sheet-power .vf-icon { width: 18px; height: 18px; }
#sheet-power b { color: #fff6d8; font-size: 1rem; letter-spacing: 0; }
.sheet-right { flex: 1; min-width: 0; }
.sheet-identity { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sheet-right h2 { font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.1; padding-right: 34px; }
#sheet-meta { color: var(--muted); font-size: 0.78rem; margin: 4px 0 10px; }
.sheet-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-right: 34px; }
.sheet-rarity, .sheet-tier { border-radius: 999px; padding: 5px 9px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }
.sheet-rarity { color: #fff1ad; border: 1px solid #8d7431; background: #e8c35a12; }
.sheet-tier { color: var(--tier-color, var(--gold)); border: 1px solid color-mix(in srgb, var(--tier-color, var(--gold)) 65%, #50445f); background: color-mix(in srgb, var(--tier-color, var(--gold)) 12%, #14101b); }
.sheet-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; border-bottom: 1px solid #ffffff18; margin: 4px 0 14px; }
.sheet-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 9px 4px; font: inherit; font-size: 0.72rem; cursor: pointer; }
.sheet-tab.active { color: var(--sheet-primary); border-bottom-color: var(--sheet-primary); }
.sheet-panel { display: none; }
.sheet-panel.active { display: block; animation: fadeIn 0.25s ease; }
.level-panel, .awakening-skill-card, .gear-slot, .sheet-skill { background: #00000035; border: 1px solid color-mix(in srgb, var(--sheet-primary) 13%, #ffffff0d); }
.level-panel { border-radius: 12px; padding: 10px 12px; margin-bottom: 13px; }
.level-line { display: flex; justify-content: space-between; color: #f4e8c7; font-size: 0.74rem; font-weight: 700; margin-bottom: 8px; }
.level-line span:last-child { color: var(--sheet-primary); }
.level-track { height: 7px; overflow: hidden; border-radius: 99px; background: #0008; }
.level-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sheet-secondary), var(--sheet-primary)); box-shadow: 0 0 10px color-mix(in srgb, var(--sheet-primary) 55%, transparent); }
.sheet-section-title { color: color-mix(in srgb, var(--sheet-primary) 68%, #c8bfae); border-left: 2px solid var(--sheet-secondary); padding-left: 7px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.13em; margin: 11px 0 7px; }
.sheet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.sheet-actions { display: grid; gap: 7px; margin-top: 10px; }
.sheet-actions .btn { flex: 1; padding: 12px 8px; font-size: 0.9rem; }
.stat-cell {
  --stat-color: var(--sheet-primary);
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 9%, #00000035), #00000035);
  border: 1px solid color-mix(in srgb, var(--stat-color) 24%, #ffffff0d);
  border-radius: 10px;
  padding: 8px;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: left;
}
.stat-hp { --stat-color: #e66d76; }
.stat-atk { --stat-color: #ef9555; }
.stat-def { --stat-color: #66aee9; }
.stat-spd { --stat-color: #5fd2c4; }
.stat-crit { --stat-color: #f0c85a; }
.stat-skill { --stat-color: #b986ed; }
.stat-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; color: var(--stat-color); border: 1px solid color-mix(in srgb, var(--stat-color) 52%, transparent); border-radius: 9px; background: radial-gradient(circle, color-mix(in srgb, var(--stat-color) 23%, transparent), #0004 72%); box-shadow: inset 0 0 9px color-mix(in srgb, var(--stat-color) 12%, transparent); }
.stat-label { align-self: end; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; }
.stat-cell b { align-self: start; display: block; color: var(--text); font-size: 0.98rem; line-height: 1.05; margin-top: 2px; }
.vf-icon { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.vf-icon .icon-fill { fill: currentColor; stroke: none; }
.sheet-skill {
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.sheet-skill h3 { color: var(--gold); font-size: 0.9rem; }
.sheet-skill p { color: var(--muted); font-size: 0.78rem; margin-top: 4px; line-height: 1.4; }
.awakening-skill-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-radius: 12px; padding: 10px; overflow: hidden; }
.awakening-sigil { display: grid; place-items: center; width: 44px; height: 44px; color: var(--sheet-secondary); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sheet-secondary) 28%, transparent), #0004 72%); border: 1px solid color-mix(in srgb, var(--sheet-primary) 62%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--sheet-secondary) 18%, transparent); }
.awakening-sigil .vf-icon { width: 26px; height: 26px; }
.awakening-copy b, .awakening-copy small { display: block; }
.awakening-copy b { color: #f3ead3; font-size: 0.83rem; }
.awakening-copy small { color: #bdb4c7; font-size: 0.68rem; line-height: 1.4; margin-top: 3px; }
.awakening-skill-card em { color: #8f879a; font-size: 0.62rem; font-style: normal; font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; }
.awakening-progress { grid-column: 2 / 4; height: 4px; overflow: hidden; border-radius: 99px; background: #0009; }
.awakening-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sheet-secondary), var(--sheet-primary)); }
.awakening-skill-card.locked .awakening-sigil { color: #777080; filter: grayscale(0.75); box-shadow: none; }
.awakening-skill-card.unlocked { border-color: color-mix(in srgb, var(--sheet-primary) 66%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--sheet-secondary) 9%, transparent), 0 0 15px color-mix(in srgb, var(--sheet-primary) 12%, transparent); }
.awakening-skill-card.unlocked em { color: #7ee19b; }
.sheet-actions #btn-awaken.is-ready { color: var(--sheet-primary); border-color: var(--sheet-line); box-shadow: 0 0 12px color-mix(in srgb, var(--sheet-secondary) 16%, transparent); }
.gear-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gear-slot { display: grid; grid-template-columns: 38px 1fr; border-radius: 11px; padding: 9px; }
.gear-slot > span { grid-row: 1 / 3; align-self: center; font-size: 1.35rem; }
.gear-slot b { color: #f3ead3; font-size: 0.78rem; }
.gear-slot small { color: var(--muted); font-size: 0.65rem; }
.sheet-note { color: var(--muted); font-size: 0.7rem; line-height: 1.45; margin-top: 12px; }
.awakening-path { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 22px 4px; }
.awakening-path span { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 50%; border: 1px solid #4d4658; background: #0005; color: #665f71; font-weight: 800; position: relative; }
.awakening-path span:not(:last-child)::after { content: ''; position: absolute; left: calc(100% + 1px); width: 9px; height: 1px; background: #4d4658; }
.awakening-path span.unlocked { color: #fff1ad; border-color: var(--gold); background: radial-gradient(circle, #e8c35a44, #0005); box-shadow: 0 0 14px #e8c35a33; }
.awakening-path span small { display: block; font-size: 0.5rem; line-height: 1; margin-top: 2px; font-weight: 800; }

@media (max-width: 520px) {
  .hero-sheet { padding: 16px 12px; }
  .sheet-nav-row { margin-right: 36px; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 5px; }
  .sheet-nav-btn { width: 34px; height: 34px; font-size: 1.55rem; }
  .sheet-columns { flex-direction: column; }
  .sheet-left { width: min(66vw, 250px); max-width: none; margin: 0 auto; }
  .sheet-right { width: 100%; }
  .sheet-badges { margin-right: 34px; }
  .sheet-tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(88px, 1fr)); }
  .sheet-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 390px) {
  .awakening-skill-card { grid-template-columns: 44px minmax(0, 1fr); }
  .awakening-skill-card em { grid-column: 2; justify-self: start; }
  .awakening-progress { grid-column: 2; width: 100%; }
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 0.85rem;
  z-index: 40;
  box-shadow: 0 6px 24px #000a;
  animation: toastIn 0.4s ease;
  max-width: 88vw;
  text-align: center;
}
.toast b { color: var(--gold); }
.toast.hidden { display: none; }
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ===== Sélection ===== */
.select-header { text-align: center; padding: 14px 0 8px; }
.select-header h2 { font-size: 1.15rem; }
#select-count { color: var(--gold); }
.hint { color: var(--muted); font-size: 0.78rem; margin-top: 4px; min-height: 1em; }
.hint.centered { text-align: center; padding-bottom: 6px; }
.hint strong { color: var(--gold); font-weight: 600; }

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  overflow-y: auto;
  padding: 6px 2px;
  flex: 1;
}
.roster-manage { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; align-content: start; }

/* Les cartes hors écran ne sont ni peintes ni composées (gros gain GPU
   sur les longues listes) ; la taille estimée évite les sauts de scroll. */
.hero-card-compact,
.owned-rank-card { content-visibility: auto; contain-intrinsic-size: auto 170px; }
.owned-rank-card { contain-intrinsic-size: auto 78px; }
.hero-card {
  background: var(--card);
  border: 2px solid var(--card-edge);
  border-radius: 14px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.hero-card:active { transform: scale(0.95); }
.hero-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(232, 195, 90, 0.35);
  transform: translateY(-2px);
}
.hero-card .emoji { font-size: 2rem; display: block; }
.hero-card .card-sprite { width: 58px; margin: 0 auto; }
.roster-manage .hero-card { cursor: pointer; }
.hero-race-frame {
  --race-frame: #9b8d75;
  --race-accent: #d8c7a0;
  --race-glow: #806f55;
  --race-symbol: '✦';
  position: relative;
  isolation: isolate;
}
.hero-race-frame[data-faction="Néphilim"] { --race-frame: #dbc162; --race-accent: #f8ecb7; --race-glow: #66cfff; --race-symbol: '✦'; }
.hero-race-frame[data-faction="Bête"] { --race-frame: #9d7138; --race-accent: #d8a75b; --race-glow: #7aa84d; --race-symbol: '爪'; }
.hero-race-frame[data-faction="Elfe"] { --race-frame: #79a96b; --race-accent: #c2e38d; --race-glow: #48b984; --race-symbol: '❧'; }
.hero-race-frame[data-faction="Orc"] { --race-frame: #9b4a32; --race-accent: #e07a45; --race-glow: #6fa638; --race-symbol: 'ᛉ'; }
.hero-race-frame[data-faction="Nain"] { --race-frame: #b17937; --race-accent: #e1b65f; --race-glow: #4aa6d8; --race-symbol: 'ᚱ'; }
.hero-race-frame[data-faction="Ombre"] { --race-frame: #72519d; --race-accent: #b282ed; --race-glow: #7338bd; --race-symbol: '◈'; }
.hero-race-frame[data-faction="Mort-Vivant"] { --race-frame: #66866f; --race-accent: #a7d19a; --race-glow: #48b99b; --race-symbol: '☠'; }
.hero-race-frame[data-faction="Divinité"] { --race-frame: #d9b94f; --race-accent: #fff0a1; --race-glow: #72c8ed; --race-symbol: '✧'; }
.roster-manage .hero-card-compact {
  padding: 0;
  overflow: hidden;
  background: #08070d;
  border: 2px solid color-mix(in srgb, var(--race-frame) 82%, var(--tier-color));
  border-radius: 10px;
  box-shadow: 0 4px 12px #000b, 0 0 10px color-mix(in srgb, var(--race-glow) 28%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--race-accent) 35%, transparent);
}
.hero-race-frame::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 3px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--race-accent) 50%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(135deg, var(--race-accent) 0 2px, transparent 2px) top left / 24px 24px no-repeat,
    linear-gradient(225deg, var(--race-accent) 0 2px, transparent 2px) top right / 24px 24px no-repeat,
    linear-gradient(45deg, var(--race-accent) 0 2px, transparent 2px) bottom left / 24px 24px no-repeat,
    linear-gradient(315deg, var(--race-accent) 0 2px, transparent 2px) bottom right / 24px 24px no-repeat;
}
.hero-race-frame::after {
  content: var(--race-symbol);
  position: absolute;
  z-index: 5;
  top: 5px;
  left: 7px;
  color: var(--race-accent);
  font-size: 0.7rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--race-glow));
  pointer-events: none;
}
.roster-manage .hero-card-compact:hover { border-color: var(--tier-color); transform: translateY(-2px); }
.roster-manage .hero-card-compact:focus-visible { outline: 2px solid var(--tier-color); outline-offset: 2px; }
.roster-manage .hero-card-compact .card-sprite { width: 100%; margin: 0; }
.roster-manage .hero-card-compact .hero-card-art,
.roster-manage .hero-card-compact .art-as-card .hero-art { border-radius: 8px; box-shadow: none; }
.hero-lock-mark { position: absolute; z-index: 6; display: grid; place-items: center; height: 21px; top: 4px; background: #07060cdd; box-shadow: 0 2px 6px #000b; font-size: 0.67rem; }
.hero-lock-mark { width: 21px; border-radius: 50%; }
.hero-lock-mark { right: 4px; border: 1px solid #ffffff36; font-size: 0.58rem; }
.hero-moon-row, .hero-star-row {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px #000, 0 0 6px currentColor;
  pointer-events: none;
}
.hero-moon-row { top: 5px; color: #f0e5ff; font-size: 0.72rem; }
.hero-star-row { bottom: 5px; color: var(--tier-color); font-size: 0.68rem; }
.compact-card-name { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 18px 4px 22px; color: #f0e9da; background: linear-gradient(transparent, #050409ed 48%); font-size: 0.62rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.roster-manage .hero-card-compact.locked-hero { opacity: 0.66; }
.hero-card .name { display: block; font-weight: 700; font-size: 0.85rem; margin-top: 4px; }
.hero-card .meta { display: block; }
.hero-card .meta { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.hero-card .faction-chip {
  position: absolute; top: 5px; right: 6px; font-size: 0.7rem;
}
.hero-card .skill-tip { font-size: 0.62rem; color: var(--muted); margin-top: 4px; line-height: 1.25; }

.difficulty-wrap { padding: 8px 0 4px; }
.difficulty-wrap h3 { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.difficulty-list { display: flex; gap: 8px; }
.difficulty-btn {
  flex: 1;
  background: var(--card);
  border: 2px solid var(--card-edge);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 4px;
  cursor: pointer;
}
.difficulty-btn small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.difficulty-btn.selected { border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 195, 90, 0.3); }

.select-footer { padding: 12px 0 16px; text-align: center; }
.select-footer .btn { width: 100%; }

/* ===== Héros : classement possédé + catalogue progressif ===== */
#screen-heroes.screen {
  width: 100%;
  max-width: 1120px;
  padding-inline: clamp(10px, 2.2vw, 22px);
}
#screen-heroes .page-header { flex: 0 0 auto; }
.heroes-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 3px 2px max(20px, env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}
.owned-ranking-panel,
.hero-catalog {
  border: 1px solid #3a3149;
  border-radius: 17px;
  background: linear-gradient(145deg, #1a1624e8, #0d0b13ed);
  box-shadow: 0 10px 28px #0007, inset 0 1px 0 #ffffff0a;
}
.owned-ranking-panel {
  position: relative;
  overflow: hidden;
  padding: 13px 12px 12px;
  border-color: #6e5b30;
  background:
    radial-gradient(circle at 8% 0%, #e8c35a18, transparent 35%),
    linear-gradient(145deg, #211b28f2, #0d0b13f5);
}
.owned-ranking-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 75%, #e8c35a08);
}
.hero-catalog { margin-top: 12px; padding: 13px 12px 14px; }
.heroes-section-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.heroes-section-heading h3 { margin: 1px 0 0; color: #f2ead8; font-size: 1rem; line-height: 1.2; }
.heroes-section-kicker { display: block; color: var(--gold); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; }
.heroes-section-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  color: #c9c1d3;
  background: #07060ca8;
  font-size: 0.78rem;
  font-weight: 800;
}
.catalog-heading { margin-bottom: 5px; }
.owned-ranking-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 290px);
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 2px 1px 7px;
  scrollbar-width: thin;
  scrollbar-color: #7e6835 transparent;
}
.owned-rank-card {
  --tier-color: var(--gold);
  display: grid;
  grid-template-columns: 34px 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 8px 9px 8px 7px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(145deg, color-mix(in srgb, var(--race-glow) 12%, #18141f), #0c0a11 78%);
  border: 1px solid color-mix(in srgb, var(--race-frame) 68%, #332b3e);
  border-radius: 13px;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: inset 0 1px 0 #ffffff0c, 0 4px 12px #0007;
}
.owned-rank-card::before,
.owned-rank-card::after { display: none; }
.owned-rank-card:hover { border-color: var(--race-accent); }
.owned-rank-card:active { transform: scale(0.98); }
.owned-rank-card:focus-visible { outline: 2px solid var(--tier-color); outline-offset: 2px; }
.ranking-position {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  color: #a8a0b6;
  background: #08070d;
  border: 1px solid #403749;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 900;
}
.rank-1 .ranking-position { color: #2b1b02; background: linear-gradient(145deg, #fff0a3, #c99522); border-color: #fff0a3; box-shadow: 0 0 12px #e8c35a66; }
.rank-2 .ranking-position { color: #20222b; background: linear-gradient(145deg, #f1f4f8, #8d99a8); border-color: #e4edf5; }
.rank-3 .ranking-position { color: #251307; background: linear-gradient(145deg, #e7a66b, #925026); border-color: #edb078; }
.ranking-portrait {
  display: block;
  width: 58px;
  height: 60px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--race-frame) 72%, var(--tier-color));
  border-radius: 9px;
  background: #07060c;
  box-shadow: 0 0 10px color-mix(in srgb, var(--race-glow) 25%, transparent);
}
.ranking-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.ranking-portrait-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.6rem; }
.ranking-copy { min-width: 0; }
.ranking-copy strong,
.ranking-copy small,
.ranking-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-copy strong { color: #f4eddf; font-size: 0.88rem; }
.ranking-copy small { margin-top: 3px; color: #aaa2b6; font-size: 0.72rem; }
.ranking-copy > span { margin-top: 3px; color: var(--tier-color); font-size: 0.72rem; font-weight: 800; }
.ranking-power { align-self: stretch; display: flex; min-width: 67px; flex-direction: column; align-items: flex-end; justify-content: center; }
.ranking-power small { color: #857d91; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; }
.ranking-power b { margin-top: 4px; color: #fff0a5; font-size: 0.88rem; white-space: nowrap; }
#screen-heroes .faction-filter { margin-top: 0; }
#screen-heroes .roster-manage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 9px;
  align-content: start;
  flex: none;
  overflow: visible;
  padding: 3px 0 2px;
}
#screen-heroes .roster-manage .hero-card-compact { min-width: 0; font: inherit; }
#screen-heroes .roster-manage .hero-card-compact.locked-hero { opacity: 0.9; }
#screen-heroes .locked-hero .card-sprite { filter: grayscale(0.72) saturate(0.55) brightness(0.76); }
#screen-heroes .locked-hero .hero-art,
#screen-heroes .locked-hero .hero-card-art { filter: none; }
#screen-heroes .compact-card-name { padding-bottom: 25px; font-size: 0.75rem; }
#screen-heroes .hero-star-row { bottom: 6px; padding: 2px 7px; border-radius: 99px; background: #050409c7; font-size: 0.76rem; }
#screen-heroes .hero-lock-mark { width: 25px; height: 25px; font-size: 0.68rem; }
.heroes-more-btn { display: block; width: 100%; margin-top: 11px; color: #eadbaf; border-color: #6b5830; background: linear-gradient(180deg, #292133, #15111d); }
.heroes-more-btn.hidden { display: none; }
.heroes-empty { grid-column: 1 / -1; width: 100%; padding: 20px 12px; color: var(--muted); font-size: 0.86rem; text-align: center; }

@media (max-width: 520px) {
  .owned-ranking-panel, .hero-catalog { border-radius: 14px; padding: 11px 9px; }
  .owned-ranking-list { grid-auto-columns: min(88vw, 310px); }
  .owned-rank-card { grid-template-columns: 31px 52px minmax(0, 1fr) auto; gap: 7px; padding-inline: 6px 8px; }
  .ranking-portrait { width: 52px; height: 56px; }
  .ranking-power { min-width: 61px; }
  .ranking-power b { font-size: 0.8rem; }
  #screen-heroes .roster-manage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
}

@media (max-width: 350px) {
  #screen-heroes .roster-manage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-copy small { display: none; }
}

/* ===== Combat ===== */
.battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
#battle-round { font-weight: 700; color: var(--text); }

.battlefield { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  height: 31dvh;
}
.battle-divider {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.battle-divider::before, .battle-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--card-edge);
}

.unit {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  position: relative;
  transition: opacity 0.5s, filter 0.5s;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.unit .unit-sprite { width: 62%; max-width: 74px; min-height: 0; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.unit .unit-sprite:has(.hero-art) { width: 88%; max-width: 110px; align-items: stretch; }
.unit .unit-sprite .sprite { max-height: 100%; }
.unit .uname { font-size: 0.6rem; font-weight: 600; margin: 1px 0 3px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.unit .bars { width: 90%; }
.unit .bar { height: 5px; border-radius: 3px; background: #0008; overflow: hidden; margin-top: 2px; }
.unit .bar .fill { height: 100%; border-radius: 3px; transition: width 0.35s; }
.unit .hp-fill { background: var(--hp); width: 100%; }
.unit .hp-fill.low { background: var(--hp-low); }
.unit .en-fill { background: var(--energy); width: 40%; }
.unit .shield-badge {
  position: absolute; top: 2px; right: 4px;
  font-size: 0.6rem; color: var(--shield); font-weight: 700;
}
.unit.dead { opacity: 0.18; filter: grayscale(1); }

/* Animations de combat */
@keyframes lungeUp   { 40% { transform: translateY(-14px) scale(1.08); } }
@keyframes lungeDown { 40% { transform: translateY(14px) scale(1.08); } }
.unit.attack-up   { animation: lungeUp 0.35s ease; z-index: 2; }
.unit.attack-down { animation: lungeDown 0.35s ease; z-index: 2; }

@keyframes hitFlash {
  0% { background: #e0555580; }
  100% { background: var(--card); }
}
.unit.hit { animation: hitFlash 0.4s ease; }

@keyframes healFlash {
  0% { background: #5fd66860; box-shadow: 0 0 16px #5fd66880; }
  100% { background: var(--card); }
}
.unit.healed { animation: healFlash 0.5s ease; }

@keyframes shieldFlash {
  0% { box-shadow: 0 0 0 3px var(--shield); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.unit.shielded { animation: shieldFlash 0.5s ease; }

@keyframes skillGlow {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 22px var(--gold), 0 0 6px var(--gold); border-color: var(--gold); }
}
.unit.casting { animation: skillGlow 0.5s ease; z-index: 2; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.battlefield.shake { animation: shake 0.3s; }

.float-num {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 0.95rem;
  color: #ff8f6b;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  animation: floatUp 0.9s ease-out forwards;
  z-index: 5;
}
.float-num.crit { color: #ffd23e; font-size: 1.25rem; }
.float-num.heal-num { color: var(--hp); }
.float-num.shield-num { color: var(--shield); }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(1); }
}

.skill-banner {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #000c 20%, #000c 80%, transparent);
  color: var(--gold);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  padding: 10px 46px;
  pointer-events: none;
  animation: banner 0.9s ease forwards;
  z-index: 10;
  white-space: nowrap;
}
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.battle-log {
  height: 92px;
  overflow-y: auto;
  font-size: 0.72rem;
  color: var(--muted);
  background: #00000030;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.battle-log .lg-skill { color: var(--gold); }
.battle-log .lg-death { color: var(--hp-low); }

/* ===== Résultat ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: #000c;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: fadeIn 0.4s;
}
@keyframes fadeIn { from { opacity: 0; } }
.overlay.hidden { display: none; }
.result-card {
  background: var(--bg2);
  border: 1px solid var(--card-edge);
  border-radius: 18px;
  padding: 26px 22px;
  width: min(92vw, 380px);
  text-align: center;
  animation: popIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } }
#result-title { font-size: 1.7rem; margin-bottom: 14px; }
#result-title.win { color: var(--gold); text-shadow: 0 0 24px rgba(232, 195, 90, 0.4); }
#result-title.lose { color: var(--hp-low); }
#result-stats { margin-bottom: 18px; }
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 4px 0;
}
.stat-row .sname { width: 84px; text-align: left; white-space: nowrap; overflow: hidden; }
.stat-row .sbar { flex: 1; height: 8px; background: #0006; border-radius: 4px; overflow: hidden; }
.stat-row .sbar div { height: 100%; background: linear-gradient(90deg, #e8734a, var(--gold)); border-radius: 4px; }
.stat-row .sval { width: 52px; text-align: right; color: var(--muted); font-size: 0.75rem; }
.result-actions { display: flex; gap: 10px; justify-content: center; }

/* ===== Fiche héros prestige — composition inspirée de la maquette validée ===== */
#hero-overlay {
  padding: 8px;
  background: #030406fa;
}
#hero-overlay .hero-sheet {
  --ornament: #c89642;
  display: flex;
  flex-direction: column;
  width: min(99vw, 1640px);
  height: min(97dvh, 940px);
  max-height: 97dvh;
  padding: 0;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--sheet-primary) 72%, var(--ornament));
  border-radius: 4px;
  background-color: #080b0e;
  box-shadow: 0 32px 100px #000, 0 0 42px color-mix(in srgb, var(--sheet-secondary) 17%, transparent), inset 0 0 55px #000b;
}
#hero-overlay .hero-sheet::before {
  z-index: 0;
  opacity: 0.74;
  background:
    linear-gradient(115deg, transparent 0 17%, #ffffff05 17.2% 17.35%, transparent 17.6% 64%, #ffffff04 64.2% 64.35%, transparent 64.6%),
    linear-gradient(32deg, transparent 0 39%, #ffffff04 39.2% 39.35%, transparent 39.6% 78%, #ffffff03 78.2% 78.3%, transparent 78.6%),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--sheet-secondary) 13%, transparent), transparent 29%),
    radial-gradient(circle at 84% 86%, color-mix(in srgb, var(--sheet-primary) 9%, transparent), transparent 32%),
    linear-gradient(145deg, #11161a, #050709 72%);
}
#hero-overlay .hero-sheet::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--sheet-primary) 46%, #61481f);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 24px color-mix(in srgb, var(--sheet-primary) 7%, transparent);
}
#hero-overlay .hero-sheet > * { position: relative; z-index: 2; }

.hero-sheet-bar {
  flex: 0 0 65px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border-bottom: 2px solid color-mix(in srgb, var(--sheet-primary) 68%, #4e391a);
  background: linear-gradient(180deg, #10151ae8, #07090ce8);
  box-shadow: 0 4px 18px #000b, inset 0 -1px 0 #000;
}
.sheet-back-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--sheet-primary);
  border-radius: 50%;
  color: #f6d887;
  background: radial-gradient(circle, #2b2418, #090a0c 72%);
  box-shadow: inset 0 0 0 3px #08090b, 0 0 12px color-mix(in srgb, var(--sheet-primary) 22%, transparent);
  font: 700 1.55rem/1 Georgia, serif;
  cursor: pointer;
}
.sheet-back-btn:active { transform: scale(0.94); }
.sheet-title-lockup {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sheet-title-lockup p {
  color: #ecd094;
  font: 500 clamp(1.05rem, 2.35vw, 2rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.13em;
  text-shadow: 0 2px 7px #000, 0 0 18px color-mix(in srgb, var(--sheet-primary) 18%, transparent);
  white-space: nowrap;
}
.sheet-faction-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--sheet-primary) 72%, #80602b);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sheet-secondary) 22%, #111), #050608 72%);
  overflow: hidden;
}
.sheet-faction-mark img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sheet-secondary) 55%, transparent)); }
.sheet-wallet { justify-self: end; display: flex; align-items: center; gap: 8px; }
.sheet-wallet-item {
  display: grid;
  grid-template-columns: 24px auto 22px;
  align-items: center;
  gap: 5px;
  min-width: 104px;
  height: 38px;
  padding: 4px 5px 4px 8px;
  border: 1px solid #6e542a;
  color: #f1e4ca;
  background: linear-gradient(180deg, #171717, #070809);
  box-shadow: inset 0 0 10px #000;
  font-family: Georgia, serif;
}
.sheet-wallet-item i { display: grid; place-items: center; width: 21px; height: 21px; font-style: normal; }
.wallet-gold i { border: 2px solid #f0c45c; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff0a5, #c4821d 68%); box-shadow: 0 0 8px #e4a92f66; }
.wallet-gems i { width: 17px; height: 22px; margin-left: 2px; transform: rotate(45deg) skew(-7deg, -7deg); border: 1px solid #8fe2ff; background: linear-gradient(135deg, #baf4ff, #167cdd 48%, #162b9a); box-shadow: 0 0 9px #3ab9ff99; }
.wallet-royal i { color: #d3a4ff; font-size: 1.1rem; text-shadow: 0 0 8px #9c5fd8; }
.sheet-wallet-item b { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.sheet-wallet-item em { display: grid; place-items: center; width: 22px; height: 22px; color: #e9c469; border: 1px solid #79602d; border-radius: 50%; font: 700 1rem/1 sans-serif; font-style: normal; }

#hero-overlay .sheet-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(290px, 35%) minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  padding: 13px;
  overflow: hidden;
}
#hero-overlay .sheet-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-width: none;
}
.sheet-card-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 22px; }
#hero-overlay .sheet-card {
  position: relative;
  width: min(100%, 500px);
  height: auto;
  max-height: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--sheet-primary) 76%, #bd8535);
  border-radius: 8px 8px 20px 20px;
  background: #050608;
  box-shadow: 0 12px 34px #000d, 0 0 22px color-mix(in srgb, var(--sheet-secondary) 24%, transparent), inset 0 0 0 2px #0a0c0e;
}
#hero-overlay .sheet-card.hero-race-frame::before {
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--sheet-primary) 60%, #d8ab5c);
  border-radius: 4px 4px 14px 14px;
  background:
    linear-gradient(135deg, var(--sheet-primary) 0 3px, transparent 3px) top left / 46px 46px no-repeat,
    linear-gradient(225deg, var(--sheet-primary) 0 3px, transparent 3px) top right / 46px 46px no-repeat,
    linear-gradient(45deg, var(--sheet-primary) 0 3px, transparent 3px) bottom left / 46px 46px no-repeat,
    linear-gradient(315deg, var(--sheet-primary) 0 3px, transparent 3px) bottom right / 46px 46px no-repeat;
}
#hero-overlay .sheet-card.hero-race-frame::after { content: none; }
#hero-overlay .sheet-card .hero-frame-media { width: 100%; height: 100%; }
#hero-overlay .sheet-card .hero-card-art,
#hero-overlay .sheet-card .hero-art { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: #06080a; }
#hero-overlay .sheet-card.has-card .hero-card-art { object-fit: contain; }
#hero-overlay .sheet-card:not(.has-card) .hero-art { object-fit: cover; object-position: center top; }
.sheet-card-emblem { position: absolute; z-index: 7; top: 14px; left: 14px; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sheet-secondary) 62%, transparent)); }
.sheet-card-caption {
  position: absolute;
  z-index: 6;
  left: 9px;
  right: 9px;
  bottom: 9px;
  padding: 34px 12px 17px;
  color: #f2d894;
  text-align: center;
  background: linear-gradient(transparent, #050709f2 35%);
  text-shadow: 0 2px 6px #000;
}
.sheet-card-caption strong { display: block; font: 500 clamp(1.25rem, 2.1vw, 2rem)/1 Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; }
.sheet-card-caption small { display: block; color: #cab98e; font: 0.72rem/1.2 Georgia, serif; letter-spacing: 0.08em; margin-top: 5px; text-transform: uppercase; }
#hero-overlay .sheet-card.has-card .sheet-card-caption { display: none; }
#hero-overlay .sheet-card .hero-moon-row { top: 16px; font-size: 1rem; }
#hero-overlay .sheet-card .hero-star-row { bottom: 78px; padding: 3px 10px; color: #ffd45e; background: #050608b5; border-radius: 999px; font-size: clamp(0.86rem, 1.4vw, 1.2rem); }
#hero-overlay .sheet-card.has-card .hero-star-row { bottom: 14px; }
.sheet-card-stage .sheet-nav-btn {
  position: absolute;
  z-index: 9;
  top: 50%;
  width: 42px;
  height: 58px;
  margin-top: -29px;
  border-radius: 4px;
  color: #f2d98f;
  background: linear-gradient(180deg, #201b13e8, #070809ed);
  border: 1px solid color-mix(in srgb, var(--sheet-primary) 64%, #6e4c1f);
}
.sheet-card-stage .sheet-prev { left: 0; }
.sheet-card-stage .sheet-next { right: 0; }
#hero-overlay .sheet-actions { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
#hero-overlay .sheet-actions .btn {
  min-height: 54px;
  padding: 10px 8px;
  border: 2px solid color-mix(in srgb, var(--sheet-primary) 70%, #7b5420);
  border-radius: 3px 14px 3px 14px;
  color: #ecd39b;
  background: linear-gradient(145deg, #1d2329, #080a0c);
  box-shadow: inset 0 0 0 2px #070809, inset 0 0 16px color-mix(in srgb, var(--sheet-secondary) 8%, transparent);
  font: 600 clamp(0.78rem, 1.2vw, 1.03rem)/1.15 Georgia, serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#hero-overlay .sheet-actions .btn-primary { color: #241605; background: linear-gradient(145deg, #f0d27f, #a8671c); box-shadow: inset 0 0 0 2px #5e3b13, 0 4px 18px #0009; }
#hero-overlay .sheet-actions .btn:disabled { opacity: 0.56; }

#hero-overlay .sheet-right { display: flex; flex-direction: column; gap: 9px; min-width: 0; min-height: 0; }
#hero-overlay .sheet-identity,
#hero-overlay .level-panel,
.sheet-dashboard-panel,
#hero-overlay .sheet-panel:not([data-sheet-panel="overview"]) {
  border: 1px solid color-mix(in srgb, var(--sheet-primary) 48%, #59401c);
  border-radius: 3px 14px 3px 14px;
  background: linear-gradient(145deg, #10161acd, #07090bd9);
  box-shadow: inset 0 0 0 2px #050607, inset 0 0 20px color-mix(in srgb, var(--sheet-secondary) 6%, transparent);
}
#hero-overlay .sheet-identity {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 145px;
  padding: 14px 18px;
}
.sheet-identity-copy { min-width: 0; }
#hero-overlay .sheet-right h2 {
  padding: 0;
  color: #f0d495 !important;
  font: 500 clamp(1.9rem, 3.5vw, 3.5rem)/0.95 Georgia, "Times New Roman", serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}
#sheet-hero-title { color: #d0ae70; font: 500 clamp(0.8rem, 1.35vw, 1.15rem)/1.15 Georgia, serif; letter-spacing: 0.11em; margin-top: 7px; text-transform: uppercase; }
.sheet-identity-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.identity-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 5px; border: 1px solid color-mix(in srgb, var(--sheet-primary) 58%, #5b421e); border-radius: 999px; color: #e5d3ae; background: #080a0dcc; font: 0.75rem/1 Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; }
.identity-chip img { width: 24px; height: 24px; object-fit: contain; }
.role-identity > span { display: grid; place-items: center; width: 21px; height: 21px; color: var(--sheet-primary); border: 1px solid #6a4d24; border-radius: 50%; }
#hero-overlay .sheet-badges { flex-direction: row; align-items: center; gap: 6px; margin: 9px 0 0; }
#hero-overlay .sheet-rarity,
#hero-overlay .sheet-tier { border-radius: 2px 8px 2px 8px; padding: 5px 9px; font-size: 0.64rem; }
#hero-overlay #sheet-power {
  position: relative;
  display: grid;
  grid-template-columns: 54px auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: end;
  gap: 1px 12px;
  min-width: 205px;
  margin: 0;
  padding: 12px 10px 12px 18px;
  color: #d1ad68;
  border-left: 1px solid #60471f;
  text-align: left;
}
#hero-overlay #sheet-power::before { content: ''; grid-row: 1 / 3; grid-column: 1; width: 48px; height: 58px; border: 2px solid var(--sheet-primary); border-radius: 50% 50% 42% 42%; background: radial-gradient(circle, color-mix(in srgb, var(--sheet-secondary) 21%, transparent), #080a0c 72%); box-shadow: 0 0 15px color-mix(in srgb, var(--sheet-secondary) 19%, transparent); }
#hero-overlay #sheet-power .vf-icon { position: absolute; left: 32px; top: 50%; width: 25px; height: 25px; transform: translateY(-50%); color: var(--sheet-primary); }
#hero-overlay #sheet-power span { grid-column: 2; align-self: end; font: 0.68rem/1 Georgia, serif; letter-spacing: 0.15em; }
#hero-overlay #sheet-power b { grid-column: 2; align-self: start; color: #f0ce81; font: 500 clamp(1.55rem, 2.7vw, 2.65rem)/1 Georgia, serif; }

#hero-overlay .level-panel { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; margin: 0; }
.level-main { min-width: 0; }
#hero-overlay .level-line { margin-bottom: 7px; color: #e4d5b4; font: 0.9rem/1 Georgia, serif; letter-spacing: 0.09em; }
#hero-overlay .level-track { height: 13px; padding: 3px; border: 1px solid #6d542b; border-radius: 2px; background: #020304; box-shadow: inset 0 0 8px #000; }
#hero-overlay .level-track span { background: linear-gradient(90deg, #174e8e, var(--sheet-secondary), #7ed7ff); box-shadow: 0 0 10px color-mix(in srgb, var(--sheet-secondary) 60%, transparent); }
.ascension-badge { min-width: 155px; padding: 12px 15px; color: #e9c871; border: 1px solid var(--sheet-primary); border-radius: 2px 12px 2px 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--sheet-secondary) 18%, #111820), #050709); text-align: center; font: 600 0.86rem/1.15 Georgia, serif; letter-spacing: 0.07em; text-transform: uppercase; }

#hero-overlay .sheet-panel { min-height: 0; }
#hero-overlay .sheet-panel.active { flex: 1; overflow-y: auto; animation: fadeIn 0.22s ease; }
.sheet-overview-grid { display: grid; grid-template-columns: minmax(250px, 42%) minmax(0, 1fr); gap: 9px; min-height: 100%; }
.sheet-overview-right { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; min-width: 0; }
.sheet-dashboard-panel { min-width: 0; padding: 8px 10px 10px; }
#hero-overlay .sheet-section-title { margin: 0 0 8px; padding: 0 0 7px; color: #e0bd73; border: 0; border-bottom: 1px solid #5f4822; text-align: center; font: 500 clamp(0.78rem, 1.2vw, 1.05rem)/1 Georgia, serif; letter-spacing: 0.12em; }
#hero-overlay .sheet-stats { grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; }
#hero-overlay .stat-cell { min-height: 76px; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; padding: 9px 8px; border-width: 0 1px 1px 0; border-color: color-mix(in srgb, var(--sheet-primary) 24%, #ffffff0b); border-radius: 0; background: transparent; }
#hero-overlay .stat-cell:nth-child(even) { border-right: 0; }
#hero-overlay .stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
#hero-overlay .stat-icon { width: 43px; height: 43px; border-radius: 50%; border-color: color-mix(in srgb, var(--stat-color) 64%, #9b7133); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--stat-color) 35%, #2a1e10), #080a0c 72%); box-shadow: inset 0 0 0 2px #050607, 0 0 10px color-mix(in srgb, var(--stat-color) 16%, transparent); }
#hero-overlay .stat-icon .vf-icon { width: 27px; height: 27px; }
#hero-overlay .stat-label { color: #d5c8aa; font: 0.72rem/1 Georgia, serif; letter-spacing: 0.11em; }
#hero-overlay .stat-cell b { color: #f0e5cc; font: 500 clamp(0.9rem, 1.35vw, 1.18rem)/1 Georgia, serif; }

#hero-overlay .gear-grid { gap: 8px; }
#hero-overlay .gear-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#hero-overlay .gear-slot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 118px; padding: 8px 5px 6px; border: 1px solid color-mix(in srgb, var(--sheet-primary) 54%, #59401c); border-radius: 2px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sheet-secondary) 10%, #1b150d), #050607 72%); box-shadow: inset 0 0 0 2px #050607; text-align: center; }
#hero-overlay .gear-slot > span { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 5px; color: #d9b15a; font-size: 0; }
#hero-overlay .gear-slot .vf-icon { width: 50px; height: 50px; stroke-width: 1.25; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sheet-primary) 22%, transparent)); }
#hero-overlay .gear-slot b { color: #dac89f; font: 0.66rem/1 Georgia, serif; letter-spacing: 0.08em; text-transform: uppercase; }
#hero-overlay .gear-slot small { color: var(--sheet-primary); font: 0.7rem/1 Georgia, serif; margin-top: 4px; }
#hero-overlay [data-sheet-panel="gear"] { padding: 14px; overflow-y: auto; }
#hero-overlay [data-sheet-panel="gear"] .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#hero-overlay [data-sheet-panel="gear"] .gear-slot { min-height: 150px; }

#hero-overlay .awakening-dashboard { min-height: 0; }
#hero-overlay .awakening-skill-card { height: calc(100% - 31px); min-height: 98px; grid-template-columns: 64px minmax(0, 1fr) auto; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; }
#hero-overlay .awakening-sigil { width: 58px; height: 58px; border: 2px solid var(--sheet-primary); box-shadow: inset 0 0 0 3px #050607, 0 0 14px color-mix(in srgb, var(--sheet-secondary) 22%, transparent); }
#hero-overlay .awakening-sigil .vf-icon { width: 35px; height: 35px; }
#hero-overlay .awakening-copy b { color: #efcf89; font: 500 clamp(0.82rem, 1.25vw, 1.08rem)/1.15 Georgia, serif; text-transform: uppercase; }
#hero-overlay .awakening-copy small { color: #c1b69d; font-size: 0.72rem; }
#hero-overlay .awakening-skill-card em { color: #8f879a; }

#hero-overlay [data-sheet-panel="skills"],
#hero-overlay [data-sheet-panel="awakening"] { padding: 16px; }
#hero-overlay .sheet-skill { border-color: color-mix(in srgb, var(--sheet-primary) 32%, #ffffff0d); background: #050708aa; }
#hero-overlay .sheet-skill h3 { color: var(--sheet-primary); }
#hero-overlay .awakening-path span.unlocked { color: #fff1ad; border-color: var(--sheet-primary); background: radial-gradient(circle, color-mix(in srgb, var(--sheet-secondary) 25%, transparent), #0005); }

#hero-overlay .sheet-tabs {
  flex: 0 0 58px;
  order: 9;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--sheet-primary) 45%, #59401c);
  border-radius: 2px 10px 2px 10px;
  overflow: hidden;
  background: #050708e8;
}
#hero-overlay .sheet-tab { position: relative; padding: 10px 8px; color: #a8956d; border: 0; border-right: 1px solid #4f3b1d; background: linear-gradient(180deg, #12171b, #07090b); font: 500 clamp(0.68rem, 1.2vw, 1rem)/1 Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; }
#hero-overlay .sheet-tab:last-child { border-right: 0; }
#hero-overlay .sheet-tab.active { color: #f0d38c; background: linear-gradient(180deg, color-mix(in srgb, var(--sheet-secondary) 15%, #16202a), #08101a); box-shadow: inset 0 3px 0 var(--sheet-primary), inset 0 0 18px color-mix(in srgb, var(--sheet-secondary) 13%, transparent); }

.faction-emblem { display: inline-block; width: 1.45em; height: 1.45em; flex: 0 0 auto; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 4px currentColor); }
.faction-filter-btn .faction-emblem { width: 28px; height: 28px; }
.owned-rank-card .faction-emblem { width: 18px; height: 18px; }
.roster-manage .hero-card-compact.hero-race-frame::after,
.summon-sprite.hero-race-frame::after,
.owned-rank-card.hero-race-frame::after { content: none; }
.card-faction-emblem { position: absolute; z-index: 7; top: 5px; left: 6px; width: 25px; height: 25px; padding: 2px; border: 1px solid color-mix(in srgb, var(--race-accent) 58%, #ffffff25); border-radius: 50%; background: #050608d9; }
.summon-sprite .card-faction-emblem { top: 9px; left: 10px; width: 32px; height: 32px; }
.hero-card .faction-chip { display: grid; place-items: center; width: 28px; height: 28px; padding: 2px; border: 1px solid color-mix(in srgb, var(--race-accent) 58%, #ffffff25); border-radius: 50%; background: #050608d9; }
.hero-card .faction-chip .faction-emblem { width: 23px; height: 23px; }

@media (max-width: 980px) {
  .sheet-wallet-item { min-width: 86px; grid-template-columns: 21px auto 18px; gap: 3px; }
  .sheet-wallet-item em { width: 18px; height: 18px; }
  #hero-overlay .sheet-columns { grid-template-columns: minmax(260px, 38%) minmax(0, 1fr); }
  #hero-overlay .sheet-identity { min-height: 126px; padding: 12px 14px; }
  #hero-overlay #sheet-power { min-width: 165px; grid-template-columns: 45px auto; padding-left: 12px; }
  #hero-overlay #sheet-power::before { width: 41px; height: 50px; }
  #hero-overlay #sheet-power .vf-icon { left: 24px; }
  .sheet-overview-grid { grid-template-columns: 1fr; }
  .sheet-overview-right { grid-template-rows: auto auto; }
}

@media (max-width: 760px) {
  #hero-overlay { padding: 0; }
  #hero-overlay .hero-sheet { width: 100vw; height: 100dvh; max-height: none; overflow-y: auto; border-width: 0; border-radius: 0; }
  .hero-sheet-bar { position: sticky !important; z-index: 15 !important; top: 0; flex-basis: 56px; min-height: 56px; padding: max(5px, env(safe-area-inset-top)) 8px 5px; }
  .sheet-back-btn { width: 40px; height: 40px; }
  .sheet-title-lockup { position: static; transform: none; justify-self: center; gap: 6px; }
  .sheet-title-lockup p { font-size: 0.86rem; letter-spacing: 0.08em; }
  .sheet-faction-mark { width: 31px; height: 31px; }
  .sheet-wallet { gap: 4px; }
  .sheet-wallet-item { min-width: 0; height: 32px; grid-template-columns: 18px auto; padding: 3px 6px; }
  .sheet-wallet-item i { width: 17px; height: 17px; }
  .wallet-gems i { width: 13px; height: 17px; }
  .sheet-wallet-item b { font-size: 0.72rem; }
  .sheet-wallet-item em { display: none; }
  .wallet-royal { display: none; }
  #hero-overlay .sheet-columns { display: block; padding: 10px; overflow: visible; }
  #hero-overlay .sheet-left { width: 100%; }
  .sheet-card-stage { height: auto; padding: 0 24px; }
  #hero-overlay .sheet-card { width: min(78vw, 360px); height: auto; aspect-ratio: 2 / 3; }
  #hero-overlay .sheet-actions { width: min(100%, 460px); margin: 10px auto 14px; }
  #hero-overlay .sheet-actions .btn { min-height: 48px; font-size: 0.72rem; }
  #hero-overlay .sheet-right { overflow: visible; }
  #hero-overlay .sheet-identity { grid-template-columns: 1fr; min-height: 0; }
  #hero-overlay #sheet-power { justify-self: stretch; border-top: 1px solid #60471f; border-left: 0; min-width: 0; justify-content: start; }
  #hero-overlay #sheet-power .vf-icon { left: 30px; }
  #hero-overlay .level-panel { grid-template-columns: 1fr; gap: 9px; }
  .ascension-badge { min-width: 0; }
  #hero-overlay .sheet-panel.active { overflow: visible; }
  .sheet-overview-grid { display: block; }
  .sheet-overview-right { display: block; }
  .sheet-dashboard-panel { margin-bottom: 9px; }
  #hero-overlay .gear-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #hero-overlay .awakening-skill-card { height: auto; }
  #hero-overlay .sheet-tabs { position: sticky; z-index: 12; bottom: 0; min-height: 54px; }
}

@media (max-width: 420px) {
  .sheet-title-lockup p { display: none; }
  #hero-overlay .sheet-right h2 { font-size: 1.7rem; }
  #sheet-hero-title { font-size: 0.74rem; }
  #hero-overlay .stat-cell { grid-template-columns: 42px minmax(0, 1fr); min-height: 70px; padding-inline: 5px; }
  #hero-overlay .stat-icon { width: 38px; height: 38px; }
  #hero-overlay .awakening-skill-card { grid-template-columns: 54px minmax(0, 1fr); }
  #hero-overlay .awakening-skill-card em { grid-column: 2; justify-self: start; }
  #hero-overlay .awakening-progress { grid-column: 2; }
  #hero-overlay .sheet-tab { font-size: 0.62rem; padding-inline: 3px; letter-spacing: 0.02em; }
}


/* ===== Collection Néphilim v2 =====
   Le portrait, le cadre de rang et la progression sont des couches séparées.
   Les cinq cadres gagnent réellement en richesse graphique de 1 à 5 étoiles. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nephilim-card {
  --nephilim-ivory: #f5edda;
  --nephilim-gold: #e8bd62;
  --nephilim-blue: #69cfff;
  position: relative;
  isolation: isolate;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  color: var(--nephilim-ivory);
  border-color: color-mix(in srgb, var(--tier-color) 46%, #e6d8b2) !important;
  background: #020408;
  box-shadow:
    0 9px 24px #000e,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 28%, #4abfff44),
    inset 0 0 0 1px #f7e8bd2e !important;
}

.nephilim-card[data-stars="1"] { --frame-glow: 2px; }
.nephilim-card[data-stars="2"] { --frame-glow: 5px; }
.nephilim-card[data-stars="3"] { --frame-glow: 9px; }
.nephilim-card[data-stars="4"] { --frame-glow: 13px; }
.nephilim-card[data-stars="5"] { --frame-glow: 18px; }

.nephilim-card.hero-race-frame::before,
.nephilim-card.hero-race-frame::after { content: none !important; }

.nephilim-card-art,
.nephilim-card-vignette,
.nephilim-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nephilim-card-art { z-index: 0; overflow: hidden; background: #020408; }
.nephilim-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(0.94) contrast(1.035) brightness(0.92);
  transform: scale(1.006);
}
.nephilim-card[data-stars="4"] .nephilim-portrait,
.nephilim-card[data-stars="5"] .nephilim-portrait { filter: saturate(1.02) contrast(1.045) brightness(0.97); }

.nephilim-card-vignette {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 31%, transparent 38%, #02040a1c 70%, #0102058a 100%),
    linear-gradient(180deg, #01030a2e 0%, transparent 17%, transparent 62%, #020309a6 78%, #010205e8 100%);
}

.nephilim-frame-overlay {
  z-index: 5;
  display: block;
  object-fit: fill;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px #79cfff4a) saturate(0.96);
}
.nephilim-card[data-stars="1"] .nephilim-frame-overlay { filter: brightness(0.82) saturate(0.68); }
.nephilim-card[data-stars="2"] .nephilim-frame-overlay { filter: brightness(0.9) saturate(0.82) drop-shadow(0 0 2px #6bc8ff38); }
.nephilim-card[data-stars="3"] .nephilim-frame-overlay { filter: brightness(0.98) saturate(0.92) drop-shadow(0 0 3px #6bc8ff4f); }
.nephilim-card[data-stars="4"] .nephilim-frame-overlay { filter: brightness(1.02) saturate(1.02) drop-shadow(0 0 4px #6bc8ff6b); }
.nephilim-card[data-stars="5"] .nephilim-frame-overlay { filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 6px #78d5ff85); }

.nephilim-moon-track {
  position: absolute;
  z-index: 9;
  top: 2.8%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.65vw, 7px);
  min-width: 42%;
  height: 5.6%;
  padding: 0 8px;
  transform: translateX(-50%);
  border: 1px solid #d8bd7638;
  border-radius: 999px;
  background: linear-gradient(180deg, #101827e6, #03050bea);
  box-shadow: inset 0 0 9px #000d, 0 2px 10px #000d;
  pointer-events: none;
}
.nephilim-moon-track::before,
.nephilim-moon-track::after {
  content: '✦';
  color: #d8b96599;
  font-size: 0.42em;
}
.nephilim-moon-track i {
  color: #93a4b9;
  font: 900 clamp(0.5rem, 1.3vw, 1rem)/1 Georgia, serif;
  font-style: normal;
  opacity: 0.22;
  transform: rotate(-13deg) scale(0.84);
  text-shadow: none;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.nephilim-moon-track i.active {
  color: #fff3c6;
  opacity: 1;
  transform: rotate(-13deg) scale(1);
  text-shadow: 0 0 5px #fff5c2, 0 0 11px #62c9ff;
}
.nephilim-moon-track.maxed {
  gap: clamp(3px, 0.82vw, 9px);
}
.nephilim-moon-track.maxed i.central {
  color: #fff8d8;
  transform: rotate(-13deg) translateY(-4%) scale(1.62);
  text-shadow: 0 0 6px #fff8d8, 0 0 13px #ffd56c, 0 0 20px #62c9ff;
}

.nephilim-lineage {
  position: absolute;
  z-index: 8;
  top: 9.4%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 64%;
  padding: 3px 10px;
  transform: translateX(-50%);
  color: #f8edcf;
  border: 1px solid #d9b6665e;
  border-radius: 2px 2px 10px 10px;
  background: linear-gradient(180deg, #182438d9, #06080dd9);
  box-shadow: inset 0 0 0 1px #ffffff0a, 0 3px 9px #000d;
  font: 700 clamp(0.42rem, 1vw, 0.7rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.15em;
  white-space: nowrap;
  pointer-events: none;
}
.nephilim-lineage .faction-emblem { width: 1.45em; height: 1.45em; }

.nephilim-nameplate {
  position: absolute;
  z-index: 8;
  right: 17%;
  bottom: 9.5%;
  left: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 10.5%;
  padding: 1% 3%;
  color: #152034;
  text-align: center;
  text-shadow: 0 1px 0 #fff9d2, 0 0 5px #f0d78b;
  pointer-events: none;
}
.nephilim-card[data-stars="3"] .nephilim-nameplate { bottom: 7.5%; }
.nephilim-nameplate strong,
.nephilim-nameplate small,
.nephilim-nameplate em {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.nephilim-nameplate strong {
  color: #151b29;
  font: 700 clamp(0.68rem, 2.2vw, 1.72rem)/0.95 Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
}
.nephilim-nameplate small {
  margin-top: 0.32em;
  color: #564528;
  font: 700 clamp(0.38rem, 0.83vw, 0.66rem)/1 Georgia, serif;
  letter-spacing: 0.055em;
}
.nephilim-nameplate em {
  margin-top: 0.32em;
  color: #1a4261;
  font: 800 clamp(0.36rem, 0.76vw, 0.61rem)/1 sans-serif;
  font-style: normal;
  letter-spacing: 0.09em;
  text-shadow: 0 1px 0 #eefbff;
}

.nephilim-star-crown {
  position: absolute;
  z-index: 9;
  bottom: 3.1%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 0.42vw, 5px);
  min-width: 38%;
  transform: translateX(-50%);
  color: var(--tier-color);
  font-size: clamp(0.58rem, 1.65vw, 1.28rem);
  line-height: 1;
  pointer-events: none;
}
.nephilim-star-crown i {
  font-style: normal;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 4px currentColor);
}

.hero-card-compact.nephilim-card {
  min-height: 0;
  padding: 0;
  border-width: 1px;
  border-radius: 4px;
}
.hero-card-compact.nephilim-card .nephilim-moon-track { top: 3%; min-width: 48%; height: 5.5%; padding-inline: 4px; }
.hero-card-compact.nephilim-card .nephilim-moon-track::before,
.hero-card-compact.nephilim-card .nephilim-moon-track::after { display: none; }
.hero-card-compact.nephilim-card .nephilim-moon-track i { font-size: clamp(0.34rem, 0.82vw, 0.58rem); }
.hero-card-compact.nephilim-card .nephilim-lineage { top: 9.3%; gap: 2px; padding: 2px 5px; font-size: clamp(0.3rem, 0.66vw, 0.46rem); letter-spacing: 0.08em; }
.hero-card-compact.nephilim-card .nephilim-nameplate { right: 13%; bottom: 9%; left: 13%; min-height: 11%; padding-inline: 1%; }
.hero-card-compact.nephilim-card[data-stars="3"] .nephilim-nameplate { bottom: 7%; }
.hero-card-compact.nephilim-card .nephilim-nameplate strong { font-size: clamp(0.54rem, 1.15vw, 0.82rem); letter-spacing: 0.045em; }
.hero-card-compact.nephilim-card .nephilim-nameplate small { display: none; }
.hero-card-compact.nephilim-card .nephilim-nameplate em { margin-top: 0.35em; font-size: clamp(0.29rem, 0.58vw, 0.42rem); letter-spacing: 0.055em; }
.hero-card-compact.nephilim-card .nephilim-star-crown { bottom: 2.8%; font-size: clamp(0.45rem, 0.9vw, 0.68rem); }
.hero-card-compact.nephilim-card .hero-lock-mark { top: 13%; right: 6%; color: #f7df9b; border-color: #d6b36080; background: #03050ade; }
.hero-card-compact.nephilim-card.locked-hero { opacity: 0.84 !important; }
.hero-card-compact.nephilim-card.locked-hero .nephilim-portrait { filter: grayscale(0.24) saturate(0.66) brightness(0.74); }

.summon-sprite.nephilim-card { width: min(280px, 66vw); border-radius: 7px; }
.summon-sprite.nephilim-card .nephilim-nameplate strong { font-size: 1.12rem; }
.summon-sprite.nephilim-card .nephilim-nameplate small { font-size: 0.48rem; }
.summon-sprite.nephilim-card .nephilim-nameplate em { font-size: 0.45rem; }
.summon-sprite.nephilim-card .nephilim-star-crown { font-size: 0.88rem; }

#hero-overlay .sheet-card.nephilim-card {
  width: min(100%, 500px);
  border: 1px solid #f3dd9c82;
  border-radius: 6px;
  background: #020408;
}
#hero-overlay .sheet-card.nephilim-card .nephilim-moon-track { top: 2.9%; }
#hero-overlay .sheet-card.nephilim-card .nephilim-lineage { top: 9.5%; }
#hero-overlay .sheet-card.nephilim-card .nephilim-nameplate strong { font-size: clamp(1.25rem, 2.3vw, 1.9rem); }
#hero-overlay .sheet-card.nephilim-card .nephilim-nameplate small { font-size: clamp(0.52rem, 0.83vw, 0.68rem); }
#hero-overlay .sheet-card.nephilim-card .nephilim-nameplate em { font-size: clamp(0.48rem, 0.76vw, 0.62rem); }
#hero-overlay .sheet-card.nephilim-card .nephilim-star-crown { font-size: clamp(0.9rem, 1.55vw, 1.28rem); }

@media (max-width: 520px) {
  .summon-sprite.nephilim-card { width: min(260px, 72vw); }
  #hero-overlay .sheet-card.nephilim-card .nephilim-nameplate { right: 14%; left: 14%; }
  #hero-overlay .sheet-card.nephilim-card .nephilim-nameplate strong { font-size: 1.22rem; }
  #hero-overlay .sheet-card.nephilim-card .nephilim-nameplate small { font-size: 0.48rem; }
  #hero-overlay .sheet-card.nephilim-card .nephilim-nameplate em { font-size: 0.44rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .nephilim-card[data-stars="5"] .nephilim-frame-overlay { animation: nephilimLegendPulse 3.8s ease-in-out infinite; }
  .nephilim-moon-track.maxed i.central { animation: nephilimMoonPulse 2.4s ease-in-out infinite; }
}

/* Pulse en opacité uniquement : animer un filter (drop-shadow) sur le cadre
   1024x1536 en mix-blend-mode forçait le GPU à re-rastériser la couche à
   chaque frame — c'était la cause des gels sur la fiche héros. */
@keyframes nephilimLegendPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}
@keyframes nephilimMoonPulse {
  0%, 100% { transform: rotate(-13deg) translateY(-4%) scale(1.55); }
  50% { transform: rotate(-13deg) translateY(-12%) scale(1.72); }
}

/* ===== Collection Bête v2 =====
   Même architecture en couches que les Néphilims, avec un langage visuel
   propre à la faction : fer, bois, ivoire et énergie émeraude. */
.nephilim-card.beast-card {
  --nephilim-ivory: #f0e1bd;
  --nephilim-gold: #c9984d;
  --nephilim-blue: #6fd36f;
  color: #f3e8ca;
  border-color: color-mix(in srgb, var(--tier-color) 42%, #b88c4b) !important;
  background: #020503;
  box-shadow:
    0 9px 24px #000e,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 22%, #57b85b52),
    inset 0 0 0 1px #dbb66d2e !important;
}

.beast-card .nephilim-card-art { background: #020503; }
.beast-card .nephilim-portrait {
  filter: saturate(0.98) contrast(1.045) brightness(0.9);
}
.beast-card[data-stars="4"] .nephilim-portrait,
.beast-card[data-stars="5"] .nephilim-portrait {
  filter: saturate(1.06) contrast(1.05) brightness(0.95);
}
/* Les portraits légendaires v3 placent déjà le visage sous le cimier.
   L'illustration reste donc bord à bord afin que le décor remplisse aussi
   toute la partie haute du cadre. */
.beast-card .nephilim-card-vignette {
  background:
    radial-gradient(ellipse at 50% 31%, transparent 37%, #07100624 69%, #0104028f 100%),
    linear-gradient(180deg, #02070332 0%, transparent 17%, transparent 60%, #071006a8 78%, #010302ed 100%);
}
.nephilim-card.beast-card .nephilim-frame-overlay {
  filter: drop-shadow(0 0 3px #62c86d4f) saturate(1.02);
}
.nephilim-card.beast-card[data-stars="1"] .nephilim-frame-overlay {
  filter: brightness(0.82) saturate(0.72);
}
.nephilim-card.beast-card[data-stars="2"] .nephilim-frame-overlay {
  filter: brightness(0.9) saturate(0.88) drop-shadow(0 0 2px #62c86d38);
}
.nephilim-card.beast-card[data-stars="3"] .nephilim-frame-overlay {
  filter: brightness(0.97) saturate(0.96) drop-shadow(0 0 3px #62c86d52);
}
.nephilim-card.beast-card[data-stars="4"] .nephilim-frame-overlay {
  filter: brightness(1.02) saturate(1.04) drop-shadow(0 0 4px #62d67170);
}
.nephilim-card.beast-card[data-stars="5"] .nephilim-frame-overlay {
  filter: brightness(1.07) saturate(1.1) drop-shadow(0 0 6px #70e47d8c);
}
.beast-card .nephilim-moon-track {
  color: #f1dfb4;
  border-color: #aa84495c;
  background: linear-gradient(180deg, #172215e8, #040803ed);
  box-shadow: inset 0 0 9px #000d, 0 2px 10px #000d;
}
.beast-card .nephilim-moon-track::before,
.beast-card .nephilim-moon-track::after { color: #c99b548f; }
.beast-card .nephilim-moon-track i.active {
  color: #fff0bf;
  text-shadow: 0 0 5px #fff0bf, 0 0 11px #5bd16b;
}
.beast-card .nephilim-moon-track.maxed i.central {
  color: #fff5cf;
  text-shadow: 0 0 6px #fff5cf, 0 0 13px #d5a84e, 0 0 20px #58d16c;
}
.beast-card .nephilim-nameplate {
  color: #21180d;
  text-shadow: 0 1px 0 #fff4d3, 0 0 5px #d9b56e;
}
.beast-card .nephilim-nameplate strong { color: #21180d; }
.beast-card .nephilim-nameplate small { color: #5e4523; }
.beast-card .nephilim-nameplate em {
  color: #285128;
  text-shadow: 0 1px 0 #f4ffe7;
}

/* ===== Collection Elfe v1 =====
   Architecture en couches commune aux Néphilims, habillée de bois vivant,
   d'argent lunaire, de feuillages et d'une lueur d'émeraude. */
.nephilim-card.elf-card {
  --nephilim-ivory: #eff4dc;
  --nephilim-gold: #c8ad61;
  --nephilim-blue: #62d79a;
  color: #f0f5df;
  border-color: color-mix(in srgb, var(--tier-color) 40%, #91b972) !important;
  background: #020603;
  box-shadow:
    0 9px 24px #000e,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 22%, #54d69252),
    inset 0 0 0 1px #cdeaa02e !important;
}

.elf-card .nephilim-card-art { background: #020603; }
.elf-card:not([data-stars="5"]) .nephilim-card-art {
  background:
    linear-gradient(#02060342, #02060342),
    var(--portrait-backdrop) center top / cover no-repeat,
    #020603;
}
.elf-card .nephilim-portrait {
  object-position: center top;
  filter: saturate(0.98) contrast(1.04) brightness(0.91);
}
.elf-card:not([data-stars="5"]) .nephilim-portrait {
  object-fit: contain;
  object-position: center;
  transform: scale(0.92) translateY(4%);
}
.elf-card[data-stars="4"] .nephilim-portrait,
.elf-card[data-stars="5"] .nephilim-portrait {
  filter: saturate(1.055) contrast(1.045) brightness(0.96);
}
.elf-card .nephilim-card-vignette {
  background:
    radial-gradient(ellipse at 50% 31%, transparent 38%, #06110820 70%, #0105038c 100%),
    linear-gradient(180deg, #02100728 0%, transparent 17%, transparent 61%, #071209a6 79%, #010403ed 100%);
}
.nephilim-card.elf-card .nephilim-frame-overlay {
  filter: drop-shadow(0 0 3px #58d89552) saturate(1.02);
}
.nephilim-card.elf-card[data-stars="1"] .nephilim-frame-overlay {
  filter: brightness(0.83) saturate(0.76);
}
.nephilim-card.elf-card[data-stars="2"] .nephilim-frame-overlay {
  filter: brightness(0.91) saturate(0.9) drop-shadow(0 0 2px #58d89538);
}
.nephilim-card.elf-card[data-stars="3"] .nephilim-frame-overlay {
  filter: brightness(0.98) saturate(0.98) drop-shadow(0 0 3px #58d89555);
}
.nephilim-card.elf-card[data-stars="4"] .nephilim-frame-overlay {
  filter: brightness(1.03) saturate(1.05) drop-shadow(0 0 4px #61dfa073);
}
.nephilim-card.elf-card[data-stars="5"] .nephilim-frame-overlay {
  filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 6px #70efad91);
}
.elf-card .nephilim-moon-track {
  color: #eef5d9;
  border-color: #92b76463;
  background: linear-gradient(180deg, #152719e8, #030904ed);
  box-shadow: inset 0 0 9px #000d, 0 2px 10px #000d;
}
.elf-card .nephilim-moon-track::before,
.elf-card .nephilim-moon-track::after {
  content: '❧';
  color: #b7d47a9c;
}
.elf-card .nephilim-moon-track i.active {
  color: #f4ffd7;
  text-shadow: 0 0 5px #f4ffd7, 0 0 11px #58da95;
}
.elf-card .nephilim-moon-track.maxed i.central {
  color: #f7ffe3;
  text-shadow: 0 0 6px #f7ffe3, 0 0 13px #d8bb66, 0 0 20px #5de29c;
}
.elf-card .nephilim-nameplate {
  color: #162315;
  text-shadow: 0 1px 0 #f6ffe8, 0 0 5px #c4d99a;
}
.elf-card .nephilim-nameplate strong { color: #162315; }
.elf-card .nephilim-nameplate small { color: #4c5f35; }
.elf-card .nephilim-nameplate em {
  color: #246044;
  text-shadow: 0 1px 0 #f3ffe8;
}

/* ===== Collection Orc v1 =====
   Fer noir martelé, os, cuir rouge et braises : la brutalité de la Horde
   sans épaissir les ornements qui bordent le portrait. */
.nephilim-card.orc-card {
  --nephilim-ivory: #ead9b6;
  --nephilim-gold: #b27b42;
  --nephilim-blue: #db4230;
  color: #f0dfc0;
  border-color: color-mix(in srgb, var(--tier-color) 40%, #9a442d) !important;
  background: #060201;
  box-shadow:
    0 9px 24px #000e,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 22%, #c9342857),
    inset 0 0 0 1px #d39a572b !important;
}

.orc-card .nephilim-card-art { background: #060201; }
.orc-card .nephilim-portrait {
  object-position: center top;
  filter: saturate(0.98) contrast(1.055) brightness(0.9);
}
.orc-card[data-stars="4"] .nephilim-portrait,
.orc-card[data-stars="5"] .nephilim-portrait {
  filter: saturate(1.055) contrast(1.06) brightness(0.95);
}
.orc-card .nephilim-card-vignette {
  background:
    radial-gradient(ellipse at 50% 32%, transparent 40%, #18070424 72%, #0501008f 100%),
    linear-gradient(180deg, #16040224 0%, transparent 18%, transparent 61%, #160603a6 80%, #030100ed 100%);
}
.nephilim-card.orc-card .nephilim-frame-overlay {
  filter: drop-shadow(0 0 3px #cc382f55) saturate(1.02);
}
.nephilim-card.orc-card[data-stars="1"] .nephilim-frame-overlay {
  filter: brightness(0.79) saturate(0.76);
}
.nephilim-card.orc-card[data-stars="2"] .nephilim-frame-overlay {
  filter: brightness(0.88) saturate(0.9) drop-shadow(0 0 2px #b52e2738);
}
.nephilim-card.orc-card[data-stars="3"] .nephilim-frame-overlay {
  filter: brightness(0.96) saturate(0.99) drop-shadow(0 0 3px #c6372d55);
}
.nephilim-card.orc-card[data-stars="4"] .nephilim-frame-overlay {
  filter: brightness(1.02) saturate(1.06) drop-shadow(0 0 4px #d9403375);
}
.nephilim-card.orc-card[data-stars="5"] .nephilim-frame-overlay {
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 7px #ed4a3a96);
}
.orc-card .nephilim-moon-track {
  color: #ead6ad;
  border-color: #9c603d66;
  background: linear-gradient(180deg, #29100be8, #080201ed);
  box-shadow: inset 0 0 9px #000e, 0 2px 10px #000e;
}
.orc-card .nephilim-moon-track::before,
.orc-card .nephilim-moon-track::after {
  content: 'ᛉ';
  color: #c261419e;
}
.orc-card .nephilim-moon-track i.active {
  color: #ffe2ae;
  text-shadow: 0 0 5px #ffe2ae, 0 0 11px #db3d30;
}
.orc-card .nephilim-moon-track.maxed i.central {
  color: #fff0c4;
  text-shadow: 0 0 6px #fff0c4, 0 0 13px #d68d43, 0 0 21px #e13f31;
}
.orc-card .nephilim-nameplate {
  color: #24150d;
  text-shadow: 0 1px 0 #fff0cf, 0 0 5px #c69b66;
}
.orc-card .nephilim-nameplate strong { color: #24150d; }
.orc-card .nephilim-nameplate small { color: #684329; }
.orc-card .nephilim-nameplate em {
  color: #77291f;
  text-shadow: 0 1px 0 #ffe8c2;
}

/* ===== Collection Nain v1 ===== */
.nephilim-card.dwarf-card {
  --nephilim-ivory: #eee0bf;
  --nephilim-gold: #c68b3d;
  --nephilim-blue: #ee9a32;
  color: #f2e4c7;
  border-color: color-mix(in srgb, var(--tier-color) 42%, #ad7434) !important;
  background: #040302;
  box-shadow: 0 9px 24px #000e,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 22%, #d9812e55),
    inset 0 0 0 1px #e5b55b2d !important;
}
.dwarf-card .nephilim-card-art { background: #040302; }
.dwarf-card .nephilim-portrait {
  object-position: center top;
  filter: saturate(0.98) contrast(1.055) brightness(0.91);
}
.dwarf-card[data-stars="4"] .nephilim-portrait,
.dwarf-card[data-stars="5"] .nephilim-portrait { filter: saturate(1.05) contrast(1.06) brightness(0.96); }
.dwarf-card .nephilim-card-vignette {
  background: radial-gradient(ellipse at 50% 32%, transparent 40%, #120b0426 72%, #04020190 100%),
    linear-gradient(180deg, #11090226 0%, transparent 18%, transparent 61%, #160c04a5 80%, #030201ed 100%);
}
.nephilim-card.dwarf-card .nephilim-frame-overlay { filter: drop-shadow(0 0 3px #de8b3552) saturate(1.02); }
.nephilim-card.dwarf-card[data-stars="1"] .nephilim-frame-overlay { filter: brightness(0.82) saturate(0.78); }
.nephilim-card.dwarf-card[data-stars="2"] .nephilim-frame-overlay { filter: brightness(0.9) saturate(0.9) drop-shadow(0 0 2px #c2793038); }
.nephilim-card.dwarf-card[data-stars="3"] .nephilim-frame-overlay { filter: brightness(0.98) saturate(1) drop-shadow(0 0 3px #d6863555); }
.nephilim-card.dwarf-card[data-stars="4"] .nephilim-frame-overlay { filter: brightness(1.03) saturate(1.06) drop-shadow(0 0 4px #e9953972); }
.nephilim-card.dwarf-card[data-stars="5"] .nephilim-frame-overlay { filter: brightness(1.09) saturate(1.12) drop-shadow(0 0 7px #f2a23b94); }
.dwarf-card .nephilim-moon-track {
  color: #f0dfbd;
  border-color: #a7753e68;
  background: linear-gradient(180deg, #24170be8, #070401ed);
  box-shadow: inset 0 0 9px #000e, 0 2px 10px #000e;
}
.dwarf-card .nephilim-moon-track::before,
.dwarf-card .nephilim-moon-track::after { content: '◆'; color: #ce8b3f9c; }
.dwarf-card .nephilim-moon-track i.active { color: #ffe6ad; text-shadow: 0 0 5px #ffe6ad, 0 0 11px #dd8b35; }
.dwarf-card .nephilim-moon-track.maxed i.central { color: #fff1c5; text-shadow: 0 0 6px #fff1c5, 0 0 13px #e6a044, 0 0 21px #ef9634; }
.dwarf-card .nephilim-nameplate { color: #271b0e; text-shadow: 0 1px 0 #fff2d4, 0 0 5px #c9a16a; }
.dwarf-card .nephilim-nameplate strong { color: #271b0e; }
.dwarf-card .nephilim-nameplate small { color: #694c27; }
.dwarf-card .nephilim-nameplate em { color: #81511f; text-shadow: 0 1px 0 #ffedcb; }

/* ===== Collection Ombre v1 ===== */
.nephilim-card.shadow-card {
  --nephilim-ivory: #ddd8ea;
  --nephilim-gold: #8f7aac;
  --nephilim-blue: #9c4dff;
  color: #e8e1f4;
  border-color: color-mix(in srgb, var(--tier-color) 40%, #75509d) !important;
  background: #020104;
  box-shadow: 0 9px 24px #000f,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 21%, #7b27c955),
    inset 0 0 0 1px #b988ec29 !important;
}
.shadow-card .nephilim-card-art { background: #020104; }
.shadow-card .nephilim-portrait {
  object-position: center top;
  filter: saturate(1.03) contrast(1.065) brightness(0.92);
}
.shadow-card[data-stars="4"] .nephilim-portrait,
.shadow-card[data-stars="5"] .nephilim-portrait { filter: saturate(1.1) contrast(1.07) brightness(0.97); }
.shadow-card .nephilim-card-vignette {
  background: radial-gradient(ellipse at 50% 31%, transparent 41%, #160a282c 73%, #02010494 100%),
    linear-gradient(180deg, #14051f2e 0%, transparent 20%, transparent 61%, #14051fa8 81%, #020104f0 100%);
}
.nephilim-card.shadow-card .nephilim-frame-overlay { filter: drop-shadow(0 0 3px #9640dc58) saturate(1.04); }
.nephilim-card.shadow-card[data-stars="1"] .nephilim-frame-overlay { filter: brightness(0.8) saturate(0.76); }
.nephilim-card.shadow-card[data-stars="2"] .nephilim-frame-overlay { filter: brightness(0.89) saturate(0.91) drop-shadow(0 0 2px #7432ac45); }
.nephilim-card.shadow-card[data-stars="3"] .nephilim-frame-overlay { filter: brightness(0.98) saturate(1.03) drop-shadow(0 0 3px #8e3bd162); }
.nephilim-card.shadow-card[data-stars="4"] .nephilim-frame-overlay { filter: brightness(1.04) saturate(1.1) drop-shadow(0 0 5px #a74cfc7c); }
.nephilim-card.shadow-card[data-stars="5"] .nephilim-frame-overlay { filter: brightness(1.1) saturate(1.17) drop-shadow(0 0 8px #b75dff9c); }
.shadow-card .nephilim-moon-track {
  color: #d9c9eb;
  border-color: #7851a66b;
  background: linear-gradient(180deg, #1a0d29ed, #030105f2);
  box-shadow: inset 0 0 9px #000f, 0 2px 10px #000f;
}
.shadow-card .nephilim-moon-track::before,
.shadow-card .nephilim-moon-track::after { content: '◐'; color: #9b55dba6; }
.shadow-card .nephilim-moon-track i.active { color: #e8c8ff; text-shadow: 0 0 5px #e8c8ff, 0 0 12px #8b35dc; }
.shadow-card .nephilim-moon-track.maxed i.central { color: #f4e2ff; text-shadow: 0 0 6px #f4e2ff, 0 0 14px #9c43ec, 0 0 22px #7130bb; }
.shadow-card .nephilim-nameplate { color: #201526; text-shadow: 0 1px 0 #f8efff, 0 0 5px #ae91bd; }
.shadow-card .nephilim-nameplate strong { color: #201526; }
.shadow-card .nephilim-nameplate small { color: #5b4169; }
.shadow-card .nephilim-nameplate em { color: #683287; text-shadow: 0 1px 0 #f7e8ff; }

/* ===== Collection Mort-Vivant v1 ===== */
.nephilim-card.undead-card {
  --nephilim-ivory: #ded9c8;
  --nephilim-gold: #9b8061;
  --nephilim-blue: #39cbb8;
  color: #e3dfd1;
  border-color: color-mix(in srgb, var(--tier-color) 39%, #577f77) !important;
  background: #020403;
  box-shadow: 0 9px 24px #000f,
    0 0 calc(7px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 20%, #27aa9a55),
    inset 0 0 0 1px #7dd9c22b !important;
}
.undead-card .nephilim-card-art { background: #020403; }
.undead-card .nephilim-portrait {
  object-position: center top;
  filter: saturate(0.93) contrast(1.075) brightness(0.91);
}
.undead-card[data-stars="4"] .nephilim-portrait,
.undead-card[data-stars="5"] .nephilim-portrait { filter: saturate(1.01) contrast(1.08) brightness(0.96); }
.undead-card .nephilim-card-vignette {
  background: radial-gradient(ellipse at 50% 31%, transparent 40%, #071c192f 72%, #02040396 100%),
    linear-gradient(180deg, #05171430 0%, transparent 20%, transparent 60%, #071b17ac 81%, #010302f2 100%);
}
.nephilim-card.undead-card .nephilim-frame-overlay { filter: drop-shadow(0 0 3px #42c3b359) saturate(1.01); }
.nephilim-card.undead-card[data-stars="1"] .nephilim-frame-overlay { filter: brightness(0.79) saturate(0.72); }
.nephilim-card.undead-card[data-stars="2"] .nephilim-frame-overlay { filter: brightness(0.88) saturate(0.86) drop-shadow(0 0 2px #378f8248); }
.nephilim-card.undead-card[data-stars="3"] .nephilim-frame-overlay { filter: brightness(0.97) saturate(0.98) drop-shadow(0 0 3px #3cb7a563); }
.nephilim-card.undead-card[data-stars="4"] .nephilim-frame-overlay { filter: brightness(1.03) saturate(1.05) drop-shadow(0 0 5px #44cdb883); }
.nephilim-card.undead-card[data-stars="5"] .nephilim-frame-overlay { filter: brightness(1.09) saturate(1.12) drop-shadow(0 0 8px #52e5cd9d); }
.undead-card .nephilim-moon-track {
  color: #d7d0bd;
  border-color: #688b7a6f;
  background: linear-gradient(180deg, #10211ded, #020403f3);
  box-shadow: inset 0 0 9px #000f, 0 2px 10px #000f;
}
.undead-card .nephilim-moon-track::before,
.undead-card .nephilim-moon-track::after { content: '☠'; color: #56b6a59e; }
.undead-card .nephilim-moon-track i.active { color: #bfffee; text-shadow: 0 0 5px #bfffee, 0 0 12px #22a994; }
.undead-card .nephilim-moon-track.maxed i.central { color: #dcfff5; text-shadow: 0 0 6px #dcfff5, 0 0 14px #36c8b0, 0 0 22px #178476; }
.undead-card .nephilim-nameplate { color: #26251f; text-shadow: 0 1px 0 #fffdf0, 0 0 5px #aaa88f; }
.undead-card .nephilim-nameplate strong { color: #26251f; }
.undead-card .nephilim-nameplate small { color: #55584a; }
.undead-card .nephilim-nameplate em { color: #356c62; text-shadow: 0 1px 0 #effff9; }

/* ===== Collection Divinité v1 ===== */
.nephilim-card.divine-card {
  --nephilim-ivory: #fff9e9;
  --nephilim-gold: #e4bc63;
  --nephilim-blue: #7b70ff;
  color: #fff9e8;
  border-color: color-mix(in srgb, var(--tier-color) 43%, #d7b75f) !important;
  background: #02030a;
  box-shadow: 0 9px 24px #000e,
    0 0 calc(8px + var(--frame-glow, 5px)) color-mix(in srgb, var(--tier-color) 25%, #766dff62),
    inset 0 0 0 1px #fff2be38 !important;
}
.divine-card .nephilim-card-art { background: #02030a; }
.divine-card .nephilim-portrait {
  object-position: center top;
  filter: saturate(1.02) contrast(1.045) brightness(0.96);
}
.divine-card[data-stars="4"] .nephilim-portrait,
.divine-card[data-stars="5"] .nephilim-portrait { filter: saturate(1.09) contrast(1.05) brightness(1.01); }
.divine-card .nephilim-card-vignette {
  background: radial-gradient(ellipse at 50% 31%, transparent 42%, #17123a24 74%, #02030a91 100%),
    linear-gradient(180deg, #25163c20 0%, transparent 20%, transparent 62%, #1013339e 82%, #010207ed 100%);
}
.nephilim-card.divine-card .nephilim-frame-overlay { filter: drop-shadow(0 0 3px #b2a2ff62) saturate(1.04); }
.nephilim-card.divine-card[data-stars="1"] .nephilim-frame-overlay { filter: brightness(0.84) saturate(0.78); }
.nephilim-card.divine-card[data-stars="2"] .nephilim-frame-overlay { filter: brightness(0.92) saturate(0.91) drop-shadow(0 0 2px #dbc36f50); }
.nephilim-card.divine-card[data-stars="3"] .nephilim-frame-overlay { filter: brightness(1) saturate(1.03) drop-shadow(0 0 4px #887cff6c); }
.nephilim-card.divine-card[data-stars="4"] .nephilim-frame-overlay { filter: brightness(1.06) saturate(1.09) drop-shadow(0 0 6px #9185ff88); }
.nephilim-card.divine-card[data-stars="5"] .nephilim-frame-overlay { filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 9px #a89cffae); }
.divine-card .nephilim-moon-track {
  color: #fff1c6;
  border-color: #d1b56378;
  background: linear-gradient(180deg, #17142ced, #02030af4);
  box-shadow: inset 0 0 9px #000e, 0 2px 10px #000e;
}
.divine-card .nephilim-moon-track::before,
.divine-card .nephilim-moon-track::after { content: '✦'; color: #cbb7ffb0; }
.divine-card .nephilim-moon-track i.active { color: #fff7d8; text-shadow: 0 0 5px #fff7d8, 0 0 12px #8276ff; }
.divine-card .nephilim-moon-track.maxed i.central { color: #fffef3; text-shadow: 0 0 7px #fffef3, 0 0 15px #d9b95e, 0 0 24px #776cff; }
.divine-card .nephilim-nameplate { color: #251f36; text-shadow: 0 1px 0 #fffef6, 0 0 6px #d8ccac; }
.divine-card .nephilim-nameplate strong { color: #251f36; }
.divine-card .nephilim-nameplate small { color: #5f5877; }
.divine-card .nephilim-nameplate em { color: #6558a1; text-shadow: 0 1px 0 #fffdf2; }