/* ═════════════════════════════════════════════════════════════════════════════
   profil-pokemon.css — LA FICHE ATHLETE FACON CARTE POKEMON.
   Chargee APRES profil-fifa.css (qui rebranche les jetons du site, partie commune),
   seulement en mode « pokemon » (panel > Interface, ou ?carte=pokemon).
   ⚠ Rien n'est masque. Couleurs de niveau intactes. Deux themes.
   La CARTE elle-meme a toujours des couleurs claires (comme une vraie carte) : son
   texte est fonce dans les deux themes, il ne depend pas du mode clair/sombre.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Palette de la fiche : « Pokedex » ──────────────────────────────────── */
html body.bk-pokemon:not(#bkf) {
    --f-bg:  #12141b; --f-s1: #1b1e28; --f-s2: #232735; --f-s3: #2c3142;
    --f-bd:  #343a4f; --f-bd2: #46506b;
    --f-tx:  #f4f6fb; --f-tx2: #ccd2e0; --f-tx3: #9ea7bb;
    --f-acc: #ffcb05;   /* jaune Pokemon */
    --f-acc2:#6fb2ff;   /* bleu */
    --f-red: #ff5a3c;
    --f-glow: 0 10px 28px rgba(0,0,0,.4);
    background:
        radial-gradient(700px 360px at 90% -60px, rgba(255,203,5,.10), transparent 70%),
        radial-gradient(700px 360px at 10% -60px, rgba(255,90,60,.10), transparent 70%),
        var(--f-bg) !important;
}
html body.bk-pokemon.p2-light:not(#bkf) {
    --f-bg:  #e9edf3; --f-s1: #f7f9fc; --f-s2: #eef2f8; --f-s3: #dfe5ee;
    --f-bd:  #c8d1de; --f-bd2: #aebacb;
    --f-tx:  #121826; --f-tx2: #33405a; --f-tx3: #4d5872;
    --f-acc: #9a6b00;   /* jaune assombri : 4,9:1 sur --f-s1 */
    --f-acc2:#1f5fa0;
    --f-red: #c41e0a;
    --f-glow: 0 1px 2px rgba(18,24,38,.08), 0 10px 24px rgba(18,24,38,.10);
    background:
        radial-gradient(700px 360px at 90% -60px, rgba(255,203,5,.22), transparent 70%),
        radial-gradient(700px 360px at 10% -60px, rgba(196,30,10,.10), transparent 70%),
        var(--f-bg) !important;
}

/* ─── 2. La fiche : panneaux facon Pokedex (bandeau rouge, coins ronds) ─────── */
body.bk-pokemon .p2-block,
body.bk-pokemon.bk-skin-console .sf-main > *,
body.bk-pokemon.bk-skin-console .sf-side > *,
body.bk-pokemon .chart-card {
    background: var(--f-s1) !important;
    border: 2px solid var(--f-bd) !important;
    border-top: 4px solid var(--f-red) !important;
    border-radius: 16px !important;
    box-shadow: var(--f-glow) !important;
}
body.bk-pokemon .p2-block { padding: 14px 16px !important; }
body.bk-pokemon h2:not([style*="background"]), body.bk-pokemon .p2-rubrique { font-weight: 900 !important; letter-spacing: .01em; }
body.bk-pokemon .p2-rubrique { color: var(--f-acc) !important; -webkit-text-fill-color: var(--f-acc) !important; }
body.bk-pokemon .bk-table th {
    background: var(--f-s3) !important; color: var(--f-tx2) !important; -webkit-text-fill-color: var(--f-tx2) !important;
}
body.bk-pokemon .bk-table tr:hover td { background: color-mix(in srgb, var(--f-acc) 10%, transparent) !important; }
body.bk-pokemon .bk-plaque-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ─── 3. LA CARTE ───────────────────────────────────────────────────────────── */
.bkp-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 6px auto 4px; }
.bkp-card {
    /* couleur du type, posee par profil-fifa.js (data-type) */
    --t1: #efe9d6; --t2: #cfc6a6;
    width: 290px; max-width: 86vw; box-sizing: border-box;
    padding: 10px; border-radius: 16px;
    background: linear-gradient(145deg, #ffe066, #f2c418 45%, #d9a700);
    box-shadow: 0 18px 34px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.15);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: #1a1a1a; transition: transform .25s ease;
}
.bkp-card:hover { transform: translateY(-4px) rotate(.6deg); }
.bkp-card[data-type="electrik"] { --t1: #fff3b0; --t2: #f6cf2e; }
.bkp-card[data-type="feu"]      { --t1: #ffd3b0; --t2: #f08a45; }
.bkp-card[data-type="plante"]   { --t1: #d2f0bd; --t2: #79c75a; }
.bkp-card[data-type="vol"]      { --t1: #e2dbff; --t2: #a891ee; }
.bkp-card[data-type="roche"]    { --t1: #ece0b6; --t2: #bca35a; }
.bkp-in {
    border-radius: 9px; padding: 8px 10px 10px;
    background: linear-gradient(170deg, var(--t1), var(--t2));
    display: flex; flex-direction: column; gap: 6px;
}
/* Paliers : un liseré de rareté autour du cadre jaune. */
.bkp-special { box-shadow: 0 0 0 3px #1a1a1a, 0 0 22px rgba(255,203,5,.7), 0 18px 34px rgba(0,0,0,.45); }
.bkp-special .bkp-in { background: linear-gradient(170deg, var(--t1), var(--t2) 60%, #e8d9ff); }
.bkp-or { box-shadow: 0 0 0 2px #b88a00, 0 18px 34px rgba(0,0,0,.4); }
.bkp-retire { filter: grayscale(1); opacity: .55; }

.bkp-head { display: flex; align-items: center; gap: 6px; }
.bkp-stage { font-size: 9.5px; font-weight: 800; text-transform: uppercase; background: rgba(255,255,255,.6); border-radius: 4px; padding: 1px 5px; }
.bkp-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.bkp-pv { font-size: 18px; font-weight: 900; color: #b3140a; white-space: nowrap; }
.bkp-pv small { font-size: 9px; margin-right: 2px; }
.bkp-type-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

.bkp-art {
    position: relative; height: 150px; border-radius: 4px;
    border: 4px solid; border-color: #f6f6f6 #c9c9c9 #b0b0b0 #e9e9e9;
    background: radial-gradient(120px 90px at 50% 40%, rgba(255,255,255,.75), transparent 70%), linear-gradient(160deg, var(--t2), var(--t1));
    display: grid; place-items: center;
}
.bkp-art svg { width: 110px; height: 110px; fill: rgba(0,0,0,.45); }
.bkp-flag { position: absolute; left: 6px; top: 6px; }
.bkp-flag img { display: block; width: 30px !important; height: auto !important; margin: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.bkp-niv { position: absolute; right: 6px; top: 6px; font-size: 11px; font-weight: 900; background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 6px; }

.bkp-strip { font-size: 10.5px; font-style: italic; font-weight: 600; text-align: center; background: linear-gradient(90deg, #c9c9c9, #f2f2f2, #c9c9c9);
    border-radius: 3px; padding: 2px 6px; overflow-wrap: anywhere; color: #222; }

.bkp-atk { display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.bkp-a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,.18); padding-bottom: 5px; }
.bkp-cost { display: flex; gap: 2px; }
.bkp-cost i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.bkp-a-t b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.bkp-a-t small { display: block; font-size: 10.5px; line-height: 1.3; color: #333; overflow-wrap: anywhere; }
.bkp-dmg { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bkp-wait { margin: 6px 0; font-size: 12px; font-style: italic; color: #333; }

.bkp-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; border-top: 1px solid rgba(0,0,0,.2); padding-top: 5px; }
.bkp-bottom small { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; color: #333; }
.bkp-bottom b { font-size: 13px; }
.bkp-flavor { margin: 2px 0 0; font-size: 10.5px; line-height: 1.35; font-style: italic; color: #2b2b2b;
    border: 1px solid rgba(0,0,0,.25); border-radius: 3px; padding: 4px 6px; background: rgba(255,255,255,.35); }

@media (prefers-reduced-motion: reduce) {
    .bkp-card, .bkp-card:hover { transition: none; transform: none; }
}

/* Ligne « Devant X % des N pratiquants » : explique le bonus de PV (0 a 9). */
.bkp-rank { font-size: 10.5px; font-weight: 700; text-align: center; color: #1a1a1a; line-height: 1.3; overflow-wrap: anywhere; }
.bkp-pv b { font: inherit; }