/* Styles statiques (hors JS). Le seul inline toléré = valeurs dynamiques via
   variables CSS (ex. --c = couleur du perso). color-mix gère les teintes alpha. */

/* ---- Bouton générique (this.btn) ---- */
.pm-btn{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em;
  padding:12px 18px; border-radius:3px; cursor:pointer; border:1px solid #4c443b; background:#241f1b;
  color:#ece4d6; width:auto; text-transform:uppercase; transition:transform .08s, filter .15s; }
.pm-btn--small{ font-size:12px; padding:8px 12px; }
.pm-btn--wide{ width:100%; }
.pm-btn--primary{ border-color:#e0a53b; background:linear-gradient(180deg,#e9b24b,#c98a2f); color:#1a1207; box-shadow:0 3px 0 #8a5e1f; }
.pm-btn--danger{ border-color:#cf5040; background:rgba(207,80,64,.12); color:#cf5040; }
.pm-btn:active:not(:disabled){ transform:translateY(2px); }
.pm-btn:disabled{ background:#1a1614; color:#8d8377; opacity:.5; cursor:not-allowed; box-shadow:none; border-color:#4c443b; }

/* ---- Carte de sélection de personnage (style trading card) ---- */
.pm-card{ width:300px; background:#f4eddf; border-radius:16px; padding-bottom:14px;
  overflow:visible; box-shadow:0 18px 44px rgba(0,0,0,.5); animation:pmFade .3s ease; }
.pm-card__panel{ position:relative; height:182px; margin:12px 12px 0; }
.pm-card__frame{ position:absolute; inset:0; border-radius:12px; overflow:hidden;
  box-shadow:inset 0 0 26px rgba(0,0,0,.4);
  background:radial-gradient(120% 105% at 50% 32%,
    color-mix(in srgb, var(--c) 55%, transparent) 0%,
    color-mix(in srgb, var(--c) 16%, transparent) 58%, #14100c 100%); }
.pm-card__frame--locked{ background:#0c0a09; }
.pm-card__img{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  height:244px; width:auto; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
  animation:pmRise .5s cubic-bezier(.2,.8,.2,1) backwards; }
.pm-card__locked{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:80px; color:#8d8377; filter:blur(2px); }
.pm-card__body{ padding:10px 18px 0; text-align:center; }
.pm-card__tag{ font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--c); margin-bottom:3px; }
.pm-card__name{ font-size:22px; font-weight:800; color:#26201b; line-height:1.1; }
.pm-card__desc{ font-size:12px; color:#8a7f70; line-height:1.45; margin:8px 0 12px; min-height:52px; }
.pm-card__cta{ padding:12px 14px 0; }
.pm-card__icons{ display:flex; justify-content:space-around; padding:8px 18px 10px; border-top:1px solid #ddd5c0; margin-top:4px; }
.pm-card__icon-slot{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.pm-card__icon-val{ font-size:17px; font-weight:800; color:#26201b; line-height:1; }
.pm-card__icon-lbl{ font-size:8px; letter-spacing:.08em; color:#8a7f70; text-transform:uppercase; }
.pm-card__icon-sub{ font-size:8px; color:#b0a898; margin-top:1px; line-height:1.2; text-align:center; }

.pm-stats{ display:flex; align-items:stretch; border-radius:10px; overflow:hidden; margin:0 14px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--c) 96%, transparent),
    color-mix(in srgb, var(--c) 66%, transparent));
  box-shadow:0 5px 12px color-mix(in srgb, var(--c) 28%, transparent); }
.pm-stats--locked{ background:#4c443b; box-shadow:none; }
.pm-stats__col{ flex:1; text-align:center; padding:9px 2px; }
.pm-stats__val{ font-size:20px; font-weight:800; color:#fff; line-height:1; }
.pm-stats__lbl{ font-size:8.5px; letter-spacing:.1em; color:rgba(255,255,255,.82); margin-top:4px; }
.pm-stats__div{ width:1px; align-self:stretch; background:rgba(255,255,255,.22); margin:9px 0; }

@media (orientation:portrait){
  .pm-card{ width:282px; }
  .pm-card__panel{ height:164px; }
  .pm-card__img{ height:220px; }
}