/* =========================================================
   Fiche créature — V4 compacte, portrait/tags MMEG + runes
   ========================================================= */
.creatureUpgradePanel {
    position:fixed;
    inset:0;
    z-index:1500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:11px 12px;
    pointer-events:none;
    visibility:hidden;
}
.creatureUpgradePanel.is-open { pointer-events:auto; visibility:visible; }

.creatureUpgradePanelBackdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(0,7,14,.68);
    opacity:0;
    transition:opacity .16s ease;
}
.creatureUpgradePanel.is-open .creatureUpgradePanelBackdrop { opacity:1; }

.creatureUpgradePanelShell {
    position:relative;
    z-index:1;
    width:min(92vw,480px);
}

.creatureUpgradePanelDialog {
    position:relative;
    z-index:1;
    width:100%;
    overflow:hidden;
    border:2px solid rgba(167,209,235,.42);
    border-radius:13px;
    background:linear-gradient(180deg,#132b3e 0%,#0b1d2b 100%);
    box-shadow:0 18px 45px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.07);
    color:#f5fbff;
    transform:scale(.975);
    opacity:0;
    transition:transform .16s ease,opacity .16s ease;
}
.creatureUpgradePanel.is-open .creatureUpgradePanelDialog { transform:scale(1); opacity:1; }

/* La feuille V1 applique encore un margin global aux <button>.
   La modale gère elle-même tous ses espacements. */
.creatureUpgradePanel button { margin:0; }

.creatureUpgradePanelNav {
    position:absolute;
    top:50%;
    z-index:3;
    display:grid;
    place-items:center;
    width:43px;
    height:64px;
    margin:0;
    padding:0;
    transform:translateY(-50%);
    border:1px solid rgba(213,236,251,.66);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(34,104,151,.9),rgba(17,65,100,.94));
    color:#f3fbff;
    box-shadow:0 4px 8px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);
    font:900 24px/1 "Poppins",Arial,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
    transition:filter .12s ease,transform .12s ease,opacity .12s ease;
}
.creatureUpgradePanelNav--previous { right:calc(100% + 10px); }
.creatureUpgradePanelNav--next { left:calc(100% + 10px); }
.creatureUpgradePanelNav:hover:not(:disabled),
.creatureUpgradePanelNav:focus-visible {
    outline:none;
    filter:brightness(1.13);
}
.creatureUpgradePanelNav:active:not(:disabled) { transform:translateY(-50%) scale(.95); }
.creatureUpgradePanelNav:disabled { opacity:.28; cursor:default; }

.creatureUpgradePanelHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:44px;
    padding:6px 7px 6px 13px;
    border-bottom:1px solid rgba(172,211,235,.18);
    background:linear-gradient(180deg,#163a56,#10283b);
}
.creatureUpgradePanelName {
    overflow:hidden;
    color:#fff;
    font:800 16px/1.15 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureUpgradePanelHeaderActions {
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
}
.creatureUpgradePanelLock,
.creatureUpgradePanelFavorite,
.creatureUpgradePanelSettings {
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    margin:0;
    padding:0;
    border:1px solid rgba(172,211,235,.45);
    border-radius:8px;
    background:rgba(255,255,255,.04);
    color:#b9ccda;
    font-size:12px;
    cursor:pointer;
}
.creatureUpgradePanelLock:hover:not(:disabled),
.creatureUpgradePanelFavorite:hover:not(:disabled),
.creatureUpgradePanelSettings:hover:not(:disabled) { filter:brightness(1.15); }
.creatureUpgradePanelFavorite:focus-visible,
.creatureUpgradePanelSettings:focus-visible {
    outline:2px solid rgba(111,220,255,.82);
    outline-offset:1px;
}
.creatureUpgradePanelLock.is-locked {
    border-color:rgba(255,202,88,.78);
    background:rgba(128,76,16,.32);
    color:#ffd66d;
    box-shadow:0 0 8px rgba(255,190,54,.16);
}
.creatureUpgradePanelFavorite.is-favorite {
    border-color:rgba(255,212,88,.86);
    background:rgba(122,80,13,.34);
    color:#ffd85b;
    box-shadow:0 0 9px rgba(255,196,51,.2);
}
.creatureUpgradePanelLock:disabled,
.creatureUpgradePanelFavorite:disabled,
.creatureUpgradePanelSettings:disabled { opacity:.55; cursor:default; }


.creatureRankAutoSettingsModal {
    position:fixed;
    inset:0;
    z-index:285;
    display:grid;
    place-items:center;
    padding:16px;
}
.creatureRankAutoSettingsModal[hidden] { display:none !important; }
.creatureRankAutoSettingsBackdrop {
    position:absolute;
    inset:0;
    margin:0;
    padding:0;
    border:0;
    background:rgba(1,10,18,.72);
    backdrop-filter:blur(2px);
}
.creatureRankAutoSettingsDialog {
    position:relative;
    z-index:1;
    width:min(430px,calc(100vw - 28px));
    max-height:min(650px,calc(100dvh - 28px));
    overflow:auto;
    border:1px solid rgba(116,196,236,.48);
    border-radius:15px;
    background:linear-gradient(180deg,#102d44 0%,#081d2e 100%);
    color:#eef9ff;
    box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.08);
    font-family:"Poppins",Arial,sans-serif;
}
.creatureRankAutoSettingsHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 12px 10px 14px;
    border-bottom:1px solid rgba(172,211,235,.16);
}
.creatureRankAutoSettingsHeader div { display:grid; gap:2px; min-width:0; }
.creatureRankAutoSettingsHeader small {
    color:#8fdfff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
}
.creatureRankAutoSettingsHeader strong {
    color:#fff;
    font-size:16px;
    font-weight:800;
    line-height:1.15;
}
.creatureRankAutoSettingsClose {
    flex:0 0 auto;
    width:31px;
    height:31px;
    margin:0;
    padding:0;
    border:1px solid rgba(172,211,235,.4);
    border-radius:8px;
    background:rgba(255,255,255,.04);
    color:#fff;
    font:900 20px/1 Arial,sans-serif;
    cursor:pointer;
}
.creatureRankAutoSettingsBody {
    display:grid;
    gap:13px;
    padding:13px 14px 10px;
}
.creatureRankAutoSettingsIntro {
    margin:0;
    color:#a9c8d9;
    font-size:12px;
    font-weight:500;
    line-height:1.45;
}
.creatureRankAutoElementFieldset {
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}
.creatureRankAutoElementFieldset legend {
    margin:0 0 7px;
    padding:0;
    color:#ffd779;
    font-size:11px;
    font-weight:700;
    letter-spacing:.2px;
}
.creatureRankAutoElementGrid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}
.creatureRankAutoElementGrid label {
    position:relative;
    display:grid;
    place-items:center;
    min-height:40px;
    margin:0;
    border:1px solid rgba(126,181,212,.32);
    border-radius:9px;
    background:rgba(255,255,255,.035);
    color:#dcebf4;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
}
.creatureRankAutoElementGrid input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.creatureRankAutoElementGrid label:has(input:checked) {
    border-color:rgba(255,198,75,.88);
    background:linear-gradient(180deg,rgba(144,86,16,.48),rgba(79,43,8,.52));
    color:#ffe39b;
    box-shadow:inset 0 0 0 1px rgba(255,221,133,.12),0 0 8px rgba(255,166,36,.08);
}
.creatureRankAutoDuplicateToggle {
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:0;
    padding:10px;
    border:1px solid rgba(126,181,212,.27);
    border-radius:10px;
    background:rgba(0,0,0,.13);
    cursor:pointer;
}
.creatureRankAutoDuplicateToggle input {
    flex:0 0 auto;
    width:17px;
    height:17px;
    margin:1px 0 0;
    accent-color:#d79929;
}
.creatureRankAutoDuplicateToggle span { display:grid; gap:3px; }
.creatureRankAutoDuplicateToggle strong {
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1.3;
}
.creatureRankAutoDuplicateToggle small {
    color:#9ebccc;
    font-size:10px;
    font-weight:500;
    line-height:1.4;
}
.creatureRankAutoSettingsStatus {
    min-height:13px;
    margin:0;
    color:#8fe6ff;
    font-size:10px;
    font-weight:600;
    text-align:center;
}
.creatureRankAutoSettingsStatus.is-error { color:#ff9d9d; }
.creatureRankAutoSettingsFooter {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:8px;
    padding:10px 14px 14px;
}
.creatureRankAutoSettingsCancel,
.creatureRankAutoSettingsSave {
    min-height:36px;
    margin:0;
    padding:0 10px;
    border-radius:9px;
    font:700 11px/1 "Poppins",Arial,sans-serif;
    cursor:pointer;
}
.creatureRankAutoSettingsCancel {
    border:1px solid rgba(172,211,235,.3);
    background:rgba(255,255,255,.04);
    color:#bcd0db;
}
.creatureRankAutoSettingsSave {
    border:1px solid rgba(255,211,92,.78);
    background:linear-gradient(180deg,#b9780f,#80500a);
    color:#fff6d0;
    box-shadow:inset 0 1px rgba(255,255,255,.18),0 4px 10px rgba(0,0,0,.24);
}
.creatureRankAutoSettingsCancel:disabled,
.creatureRankAutoSettingsSave:disabled,
.creatureRankAutoElementGrid input:disabled + span { opacity:.52; cursor:default; }

@media (max-width:420px) {
    .creatureRankAutoSettingsModal { padding:8px; }
    .creatureRankAutoSettingsDialog { width:min(390px,calc(100vw - 16px)); }
    .creatureRankAutoElementGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .creatureRankAutoSettingsHeader strong { font-size:15px; }
}
.creatureUpgradePanelClose {
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    margin:0;
    padding:0;
    border:1px solid rgba(255,228,168,.72);
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:13px;
}

.creatureUpgradePanelBody {
    display:grid;
    grid-template-columns:184px minmax(0,1fr);
    gap:0;
    padding:0;
}

/* ---------------------------
   Colonne créature
   --------------------------- */
.creatureUpgradeIdentity {
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    padding:11px 10px 10px;
    border-right:1px solid rgba(166,204,228,.17);
    background:rgba(4,14,23,.24);
}

.creatureUpgradeMedallion {
    display:grid;
    place-items:center;
    width:100%;
    height:126px;
}
.creatureMedallion--detail {
    width:118px;
    height:136px;
    --medallion-scale:1.62;
    --medallion-core-top:16px;
}
.creatureMedallion--detail .creatureMedallionPower { display:none; }
.creatureMedallion--detail .creatureMedallionSelectionGlow {
    opacity:.16;
    transform:translate(-50%,-50%) scale(1.02);
}
/* Même convention que partout ailleurs : le niveau reste dans le badge
   sombre superposé au portrait, en bas à droite. */
.creatureMedallion--detail .creatureMedallionLevel {
    display:block;
    min-width:19px;
    height:18px;
    padding:0 5px;
    line-height:18px;
    font-size:8px;
    right:0;
    bottom:0;
}

.creatureUpgradePowerLine {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:100%;
    margin-top:1px;
    padding:5px 8px;
    border-radius:7px;
    background:rgba(0,0,0,.28);
    color:#f8e9b4;
    font-family:"Poppins",sans-serif;
}
.creatureUpgradePowerIcon { width:21px; height:21px; object-fit:contain; }
.creatureUpgradePowerLine span { font-size:10px; font-weight:800; }
.creatureUpgradePowerLine strong { color:#fff1b0; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.creatureUpgradeEffectivePower {
    margin-top:4px;
    color:#8fe3ff;
    font:600 9px/1.2 "Poppins",sans-serif;
    text-align:center;
}

.creatureUpgradeCombatStats {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    margin-top:6px;
}
.creatureUpgradeCombatStats > span {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    padding:3px 5px;
    border:1px solid rgba(154,202,239,.2);
    border-radius:5px;
    background:rgba(2,15,35,.46);
    font-family:"Poppins",sans-serif;
}
.creatureUpgradeCombatStats small {
    font-size:8px;
    font-weight:800;
    color:#9fc4dd;
}
.creatureUpgradeCombatStats strong {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#f7f1da;
    font-size:10px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

/* 1re ligne : exactement élément + rôle + famille (Anima/Chimera/Materia). */
.creatureUpgradePrimaryIcons,
.creatureUpgradeTraitTags {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    width:100%;
}
.creatureUpgradePrimaryIcons { margin-top:8px; }
.creatureUpgradeTraitTags { margin-top:5px; min-height:33px; }

.creatureUpgradeTag {
    position:relative;
    display:grid;
    place-items:center;
    flex:0 0 33px;
    width:33px;
    height:33px;
    min-height:0;
    padding:2px;
    border:1px solid rgba(194,216,232,.28);
    border-radius:6px;
    background:linear-gradient(180deg,rgba(56,48,54,.94),rgba(26,23,29,.96));
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35);
    overflow:hidden;
}
.creatureUpgradeTag[hidden] { display:none; }
.creatureUpgradeTag img {
    display:block;
    width:28px;
    height:28px;
    object-fit:contain;
}
.creatureUpgradeTagLabel {
    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;
}

/* ---------------------------
   Colonne amélioration / runes
   --------------------------- */
.creatureUpgradeControls {
    min-width:0;
    padding:11px 11px 12px;
    background:rgba(8,23,34,.28);
}
.creatureUpgradeSectionHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.creatureUpgradeSectionLabel {
    color:#9bdcff;
    font:800 10px/1 "Poppins",sans-serif;
    letter-spacing:.75px;
}

/* Sélecteur global repris du Clicker V1 : x1 -> x10 -> x100 -> x1000. */
.creatureUpgradeBulkModeBtn {
    display:flex;
    flex:0 0 54px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    width:100%;
    min-width:0;
    min-height:44px;
    height:44px;
    margin:0;
    padding:3px 3px;
    box-sizing:border-box;
    align-self:start;
    border:1px solid rgba(116,205,240,.58);
    border-radius:11px;
    background:linear-gradient(180deg,rgba(26,107,145,.96),rgba(12,62,91,.98));
    color:#eafaff;
    box-shadow:0 4px 10px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
    font-family:"Poppins",sans-serif;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease,filter .12s ease,border-color .12s ease;
}
.creatureUpgradeBulkModeBtn:hover,
.creatureUpgradeBulkModeBtn:focus-visible {
    filter:brightness(1.08);
    border-color:rgba(156,230,255,.92);
    outline:none;
}
.creatureUpgradeBulkModeBtn:active { transform:translateY(1px) scale(.98); }
.creatureUpgradeBulkModeBtn.is-active {
    border-color:rgba(255,218,91,.88);
    background:linear-gradient(180deg,rgba(194,126,17,.98),rgba(117,70,8,.99));
    color:#fff8d7;
}
.creatureUpgradeBulkModeBtn.is-keyboard-override {
    box-shadow:0 0 0 2px rgba(113,218,255,.2),0 4px 10px rgba(0,0,0,.24);
}
.creatureUpgradeBulkModeValue {
    font-size:15px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.3px;
}
.creatureUpgradeBulkModeLabel {
    font-size:6.5px;
    font-weight:800;
    line-height:1;
    letter-spacing:.45px;
    opacity:.78;
}
.creatureUpgradeLevelActionBox {
    display:grid;
    grid-template-columns:minmax(0,1fr) 54px;
    align-items:start;
    gap:6px;
    margin-top:8px;
}
.creatureUpgradeActionBtn {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    min-width:0;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0 11px;
    box-sizing:border-box;
    align-self:start;
    border:1px solid rgba(255,222,145,.56);
    border-radius:11px;
    background:linear-gradient(180deg,#f5aa39,#cd7e1b);
    color:#fff;
    text-transform:uppercase;
    box-shadow:inset 0 1px rgba(255,255,255,.18);
}
.creatureUpgradeActionBtn:disabled {
    opacity:1;
    cursor:not-allowed;
    border-color:rgba(184,196,207,.34);
    background:linear-gradient(180deg,#66727d,#46515b);
    color:rgba(239,244,248,.68);
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    filter:saturate(.45);
}
.creatureUpgradeActionBtn:disabled .creatureUpgradeActionBtnMeta {
    color:rgba(239,244,248,.58);
}
.creatureUpgradeActionBtnLabel {
    overflow:hidden;
    font:800 14px/1 "Poppins",sans-serif;
    letter-spacing:.15px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureUpgradeActionBtnMeta {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:4px;
    color:#fff7d2;
}
.creatureUpgradeActionBtnMeta img { width:16px; height:16px; object-fit:contain; }
.creatureUpgradeActionBtnMeta strong { font:800 16px/1 "Poppins",sans-serif; font-variant-numeric:tabular-nums; }
.creatureUpgradePreviewRow {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    margin-top:8px;
    padding:7px 10px;
    border:1px solid rgba(142,203,237,.16);
    border-radius:8px;
    background:rgba(0,0,0,.16);
}
.creatureUpgradePreviewItem {
    display:flex;
    flex:1 1 0;
    min-width:0;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.creatureUpgradePreviewItem small {
    color:#94d7f7;
    font:800 7.5px/1 "Poppins",sans-serif;
    letter-spacing:.4px;
}
.creatureUpgradePreviewItem strong {
    display:flex;
    align-items:center;
    gap:4px;
    color:#fff;
    font:800 12px/1 "Poppins",sans-serif;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.creatureUpgradePreviewItem i {
    color:#ffd476;
    font-style:normal;
}
.creatureUpgradePreviewItem span:last-child { color:#ffd476; }
.creatureUpgradePreviewDivider {
    flex:0 0 1px;
    align-self:stretch;
    background:rgba(163,202,226,.16);
}
.creatureUpgradeLevelHint {
    margin:8px 0 0;
    color:#b9ced9;
    font:600 9.5px/1.3 "Poppins",sans-serif;
}
.creatureUpgradeMaxLevelCost {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:28px;
    margin-top:8px;
    padding:6px 9px;
    border:1px solid rgba(255,212,118,.18);
    border-radius:8px;
    background:rgba(255,196,75,.055);
}
.creatureUpgradeMaxLevelCost > span {
    min-width:0;
    color:#b9ced9;
    font:800 8px/1.2 "Poppins",sans-serif;
    letter-spacing:.35px;
}
.creatureUpgradeMaxLevelCost > strong {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:4px;
    color:#ffe09a;
    font:900 12px/1 "Poppins",sans-serif;
    font-variant-numeric:tabular-nums;
}
.creatureUpgradeMaxLevelCost > strong img {
    width:15px;
    height:15px;
    object-fit:contain;
}
.creatureUpgradeMaxLevelCost.is-maxed {
    display:none;
}

.creatureUpgradePanelError {
    margin:8px 0 0;
    color:#ff9696;
    font:700 9.5px/1.3 "Poppins",sans-serif;
}

/* ---------------------------
   Rank-up / sélection du food
   --------------------------- */
.creatureUpgradeRankSection {
    margin-top:11px;
    padding-top:10px;
    border-top:1px solid rgba(163,202,226,.14);
}
.creatureUpgradeRankHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    display: none;
}
.creatureUpgradeRankPreview {
    color:#ffe09a;
    font:800 10px/1 "Poppins",sans-serif;
    white-space:nowrap;
}
.creatureUpgradeRankRule {
    min-height:24px;
    margin:6px 0 0;
    color:#b9ced9;
    font:600 8.5px/1.35 "Poppins",sans-serif;
}
.creatureUpgradeRankFood {
    display:flex;
    align-items:flex-start;
    gap:5px;
    min-height:66px;
    margin-top:6px;
    padding:4px 3px 3px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    touch-action:pan-x;
    cursor:grab;
    -webkit-overflow-scrolling:touch;
}
.creatureUpgradeRankFood::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
}
.creatureUpgradeRankFood.is-dragging { cursor:grabbing; }
.creatureUpgradeRankFoodEmpty {
    align-self:center;
    width:100%;
    color:#8197a6;
    font:600 8.5px/1.3 "Poppins",sans-serif;
    text-align:center;
}
.creatureUpgradeRankCollectionLoading {
    align-self:center;
    width:100%;
    min-height:50px;
    justify-content:center;
    color:#b9ced9;
    font-size:9px;
}
.creatureUpgradeRankCollectionLoading .uiLoadingSpinner {
    width:14px;
    height:14px;
    flex-basis:14px;
}
.creatureUpgradeRankCollectionError {
    color:#d9a7a7;
}
.creatureUpgradeRankFoodButton {
    position:relative;
    flex:0 0 52px;
    width:52px;
    height:62px;
    margin:0;
    padding:0;
    border:1px solid rgba(180,213,231,.22);
    border-radius:9px;
    background:rgba(1,12,20,.28);
    color:#fff;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;
}
.creatureUpgradeRankFoodButton:hover,
.creatureUpgradeRankFoodButton:focus-visible {
    outline:none;
    border-color:rgba(157,222,255,.68);
    background:rgba(16,54,76,.42);
}
.creatureUpgradeRankFoodButton.is-selected {
    border-color:rgba(255,214,88,.96);
    background:rgba(118,77,8,.34);
    box-shadow:0 0 0 2px rgba(255,200,51,.13),0 3px 9px rgba(0,0,0,.28);
}
.creatureUpgradeRankFoodButton.is-prepare-pending {
    border-color:rgba(94,204,244,.76);
    background:rgba(24,76,102,.30);
    box-shadow:0 0 0 2px rgba(94,204,244,.12),0 0 10px rgba(54,174,225,.13);
    pointer-events:none;
}
.creatureUpgradeRankFoodButton.is-prepare-pending::after { display:none; }
.creatureRankPrepareOverlay {
    position:absolute;
    z-index:9;
    inset:0;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(0,18,29,.32);
    pointer-events:none;
}
.creatureRankPrepareOverlay .creatureRankPrepareSpinner {
    width:14px;
    height:14px;
    flex-basis:14px;
    border-width:2px;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.creatureUpgradeRankFoodButton--universal {
    display:grid;
    place-items:center;
    overflow:hidden;
    border-color:rgba(206,171,255,.52);
    background:linear-gradient(180deg,rgba(72,35,103,.46),rgba(18,12,31,.5));
}
.creatureUpgradeRankFoodButton--universal:disabled,
.creatureUpgradeRankFoodButton--universal.is-unaffordable {
    opacity:.46;
    cursor:not-allowed;
    filter:saturate(.55);
}
.creatureUpgradeRankFoodButton--universal.is-unaffordable {
    pointer-events:auto;
}
.creatureRankUniversalFoodIcon {
    display:block;
    width:40px;
    height:40px;
    object-fit:contain;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.creatureRankUniversalFoodOwned {
    position:absolute;
    top:2px;
    right:2px;
    min-width:24px;
    max-width:46px;
    padding:1px 4px;
    border:1px solid rgba(177,231,255,.45);
    border-radius:999px;
    background:rgba(8,35,53,.92);
    color:#dff7ff;
    font:900 8px/1.2 "Poppins",sans-serif;
    text-align:center;
    box-shadow:0 2px 4px rgba(0,0,0,.38);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureRankUniversalFoodCost {
    position:absolute;
    left:50%;
    bottom:2px;
    min-width:24px;
    padding:1px 4px;
    border:1px solid rgba(232,217,255,.5);
    border-radius:999px;
    background:rgba(23,12,35,.9);
    color:#f2e7ff;
    font:900 8px/1.2 "Poppins",sans-serif;
    text-align:center;
    transform:translateX(-50%);
    box-shadow:0 2px 4px rgba(0,0,0,.4);
}

.creatureUpgradeRankFoodButton.is-selected::after {
    content:"✓";
    position:absolute;
    z-index:8;
    right:2px;
    bottom:2px;
    display:grid;
    place-items:center;
    width:14px;
    height:14px;
    border:1px solid rgba(255,244,194,.9);
    border-radius:50%;
    background:#b77b12;
    color:#fff;
    font:900 9px/1 Arial,sans-serif;
    box-shadow:0 2px 5px rgba(0,0,0,.42);
}
.creatureMedallion--rank-food {
    width:50px;
    height:60px;
    --medallion-scale:.76;
    --medallion-core-top:8px;
}
.creatureMedallion--rank-food .creatureMedallionLevel {
    display:block;
    min-width:17px;
    height:16px;
    right:0;
    bottom:0;
    padding:0 4px;
    font-size:7px;
    line-height:16px;
}
.creatureUpgradeRankFooter {
    display:grid;
    grid-template-columns:minmax(0,1fr) 122px 92px;
    align-items:center;
    gap:7px;
    margin-top:5px;
}
.creatureUpgradeRankFooterInfo {
    grid-column:1;
    min-width:0;
    align-self:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
}
.creatureUpgradeRankCount {
    color:#91b9cd;
    font:700 8.5px/1.25 "Poppins",sans-serif;
}
.creatureUpgradeRankStatus {
    color:#ff9696;
    font:700 9.5px/1.2 "Poppins",sans-serif;
    overflow-wrap:anywhere;
}
.creatureUpgradeRankStatus[hidden] { display:none; }
.creatureRankActionSlot--level { grid-column:2; }
.creatureRankActionSlot--rank { grid-column:3; }
.creatureRankActionSlot[hidden] { display:none; }
.creatureRankActionSlot > .creatureUpgradeRankButton { width:100%; }
.creatureRankActionSlot > .creatureUpgradeRankButton:disabled { pointer-events:none; }
.creatureRankActionSlot:focus-visible { outline:2px solid #8edcff; outline-offset:2px; border-radius:9px; }
.creatureRankMissingCrystalIcon { display:inline-block; width:14px; height:14px; margin:0 2px; object-fit:contain; vertical-align:-3px; }
.creatureUpgradeRankButton {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:36px;
    margin:0;
    padding:5px 8px;
    border:1px solid rgba(255,222,145,.58);
    border-radius:9px;
    background:linear-gradient(180deg,#d69124,#9a5e0f);
    color:#fff;
    box-shadow:inset 0 1px rgba(255,255,255,.14);
    cursor:pointer;
    justify-self:stretch;
}
.creatureUpgradeRankPrepareLevelButton {
    min-height:36px;
    padding:5px 10px;
    border-color:rgba(122,205,243,.58);
    background:linear-gradient(180deg,#5fb9ea,#2c88b8);
    box-shadow:inset 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(19,72,103,.28);
}
.creatureUpgradeRankPrepareLevelButton[hidden] { display:none; }
.creatureUpgradeRankPrepareLevelButton strong { font-size:9px; letter-spacing:.02em; }
.creatureUpgradeRankPrepareLevelButton small { color:#e6f8ff; font-size:8px; }
.creatureUpgradeRankButton strong { font:900 11px/1 "Poppins",sans-serif; }
.creatureUpgradeRankButton small { color:#fff1bc; font:800 7px/1 "Poppins",sans-serif; }
.creatureUpgradeRankButton:disabled { opacity:.38; cursor:not-allowed; }
.creatureUpgradeRankButton:not(:disabled):hover,
.creatureUpgradeRankButton:not(:disabled):focus-visible { outline:none; filter:brightness(1.08); }
.creatureUpgradeRankButton:not(:disabled):active { transform:scale(.98); }


/* ---------------------------
   Bulk Rank Up V1
   --------------------------- */
.creatureRankModeSwitch {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:3px;
    margin-top:5px;
    padding:2px;
    border:1px solid rgba(163,202,226,.14);
    border-radius:7px;
    background:rgba(1,12,20,.24);
}
.creatureRankModeButton {
    min-width:0;
    min-height:23px;
    margin:0;
    padding:3px 5px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:#829aaa;
    font:800 7.2px/1 "Poppins",sans-serif;
    letter-spacing:.03em;
    cursor:pointer;
}
.creatureRankModeButton.is-active {
    background:rgba(190,137,34,.32);
    color:#ffe4a3;
    box-shadow:inset 0 0 0 1px rgba(255,219,138,.24);
}
.creatureRankModeButton:focus-visible { outline:1px solid rgba(255,222,145,.75); outline-offset:1px; }

.creatureRankModeButton--max.is-active {
    background:linear-gradient(180deg,rgba(114,61,161,.5),rgba(74,33,118,.42));
    color:#efd8ff;
    box-shadow:inset 0 0 0 1px rgba(220,177,255,.34);
}
.creatureRankMaxPanel {
    display:grid;
    gap:10px;
    margin-top:7px;
    padding:12px;
    border:1px solid rgba(199,153,239,.32);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(43,20,65,.3),rgba(4,24,37,.42));
}
.creatureRankMaxPanel[hidden] { display:none !important; }
.creatureRankMaxHero { display:grid; gap:5px; text-align:center; }
.creatureRankMaxHero strong { color:#e7c8ff; font:900 14px/1.05 "Poppins",sans-serif; letter-spacing:.04em; }
.creatureRankMaxHero span { color:#c4d4de; font:700 11px/1.35 "Poppins",sans-serif; }
.creatureRankMaxComparison { min-height:122px; display:grid; place-items:center; }
.creatureRankMaxComparison.is-loading { min-height:90px; }
.creatureRankMaxComparisonInner {
    width:min(100%,330px);
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
    align-items:center;
    gap:8px;
}
.creatureRankMaxComparisonSide {
    min-width:0;
    display:grid;
    justify-items:center;
    gap:5px;
}
.creatureRankMaxComparisonLabel {
    color:#9eb7c6;
    font:900 10px/1 "Poppins",sans-serif;
    letter-spacing:.08em;
}
.creatureRankMaxComparisonSide.is-after .creatureRankMaxComparisonLabel { color:#ffd970; }
.creatureRankMaxComparisonSide .creatureMedallion--evolution { width:78px; height:78px; }
.creatureRankMaxComparisonRank {
    color:#f6fbff;
    font:900 11px/1.1 "Poppins",sans-serif;
    text-shadow:0 1px 2px #000;
}
.creatureRankMaxComparisonArrow {
    color:#ffe27a;
    font:900 30px/1 "Poppins",sans-serif;
    text-align:center;
}
.creatureRankMaxMetrics {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}
.creatureRankMaxMetric {
    min-width:0;
    display:grid;
    gap:4px;
    place-items:center;
    padding:7px 5px;
    border:1px solid rgba(151,195,221,.2);
    border-radius:8px;
    background:rgba(3,22,35,.48);
    text-align:center;
}
.creatureRankMaxMetric span {
    color:#a9c0cd;
    font:800 10px/1.15 "Poppins",sans-serif;
}
.creatureRankMaxMetric strong {
    color:#fff0ad;
    font:900 12px/1 "Poppins",sans-serif;
}
.creatureRankMaxStatus {
    min-height:38px;
    display:grid;
    place-items:center;
    padding:8px 10px;
    border-radius:7px;
    background:rgba(4,17,29,.48);
    color:#dceaf1;
    font:700 10.5px/1.4 "Poppins",sans-serif;
    text-align:center;
}
.creatureRankMaxExecution {
    min-height:246px;
    display:grid;
    place-items:center;
}
.creatureRankMaxExecution[hidden] { display:none !important; }
.creatureRankMaxPanel.is-executing .creatureRankMaxComparison,
.creatureRankMaxPanel.is-executing .creatureRankMaxMetrics,
.creatureRankMaxPanel.is-executing .creatureRankMaxStatus { display:none !important; }
.creatureRankMaxExecutionCard {
    width:min(100%,330px);
    min-height:224px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:10px;
    padding:16px 14px 14px;
    border:1px solid rgba(212,171,255,.35);
    border-radius:14px;
    background:
        radial-gradient(circle at 50% 38%,rgba(135,67,193,.18),transparent 46%),
        linear-gradient(180deg,rgba(24,14,43,.88),rgba(4,24,37,.86));
    box-shadow:inset 0 0 24px rgba(160,83,222,.07),0 8px 24px rgba(0,0,0,.22);
}
.creatureRankMaxExecutionCard.is-complete { border-color:rgba(255,218,112,.48); }
.creatureRankMaxExecutionCard.is-error { border-color:rgba(255,124,124,.5); }
.creatureRankMaxExecutionStatus {
    color:#cdb4df;
    font:900 10px/1.15 "Poppins",sans-serif;
    letter-spacing:.07em;
    text-align:center;
}
.creatureRankMaxExecutionPortraitStage {
    position:relative;
    width:102px;
    height:102px;
    display:grid;
    place-items:center;
}
.creatureRankMaxExecutionPortraitStage .creatureMedallion--evolution {
    width:94px;
    height:94px;
}
.creatureRankMaxExecutionPortrait {
    position:relative;
    z-index:2;
}
.creatureRankMaxExecutionFlash {
    position:absolute;
    z-index:1;
    inset:7px;
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    box-shadow:0 0 0 0 rgba(255,223,112,.5),0 0 28px rgba(203,129,255,.28);
}
.creatureRankMaxExecutionCard.is-rank-change .creatureRankMaxExecutionPortrait {
    animation:rankMaxPortraitUpgrade .62s cubic-bezier(.2,.85,.25,1.2) both;
}
.creatureRankMaxExecutionCard.is-rank-change .creatureRankMaxExecutionFlash {
    animation:rankMaxUpgradeFlash .68s ease-out both;
}
.creatureRankMaxExecutionRank {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:7px;
    color:#9fb7c5;
    font:900 11px/1 "Poppins",sans-serif;
    letter-spacing:.04em;
}
.creatureRankMaxExecutionRank strong {
    color:#ffe079;
    font:900 25px/1 "Poppins",sans-serif;
    text-shadow:0 1px 2px #000,0 0 12px rgba(255,214,92,.2);
}
.creatureRankMaxExecutionCard.is-rank-change .creatureRankMaxExecutionRank strong {
    animation:rankMaxRankUpgrade .56s cubic-bezier(.2,.9,.25,1.3) both;
}
.creatureRankMaxExecutionAttack {
    min-width:190px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid rgba(151,195,221,.18);
    border-radius:9px;
    background:rgba(3,22,35,.5);
}
.creatureRankMaxExecutionAttack > span {
    color:#a8bdc9;
    font:900 10px/1 "Poppins",sans-serif;
    letter-spacing:.05em;
}
.creatureRankMaxExecutionAttackValues {
    position:relative;
    min-height:18px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    color:#eef9ff;
    font:900 13px/1 "Poppins",sans-serif;
    white-space:nowrap;
}
.creatureRankMaxExecutionAttackValues strong { font:inherit; }
.creatureRankMaxExecutionAttackValues em {
    color:#7cf0ad;
    font:900 10px/1 "Poppins",sans-serif;
    font-style:normal;
}
.creatureRankMaxExecutionAttackValues .is-old {
    position:absolute;
    right:0;
    animation:rankMaxAttackOldOut .58s ease-in both;
}
.creatureRankMaxExecutionAttackValues .is-new {
    margin-left:auto;
    color:#fff0a8;
    animation:rankMaxAttackNewIn .62s ease-out both;
}
.creatureRankMaxExecutionAttackValues .is-new + em {
    animation:rankMaxAttackGainIn .64s .08s ease-out both;
}
.creatureRankMaxExecutionMessage {
    max-width:300px;
    min-height:28px;
    margin:0;
    color:#d8e5ec;
    font:700 10.5px/1.35 "Poppins",sans-serif;
    text-align:center;
}
@keyframes rankMaxPortraitUpgrade {
    0% { transform:scale(.94); filter:brightness(1); }
    42% { transform:scale(1.1); filter:brightness(1.45); }
    100% { transform:scale(1); filter:brightness(1); }
}
@keyframes rankMaxUpgradeFlash {
    0% { opacity:0; transform:scale(.72); box-shadow:0 0 0 0 rgba(255,223,112,.55),0 0 18px rgba(203,129,255,.2); }
    30% { opacity:1; }
    100% { opacity:0; transform:scale(1.28); box-shadow:0 0 0 14px rgba(255,223,112,0),0 0 36px rgba(203,129,255,0); }
}
@keyframes rankMaxRankUpgrade {
    0% { opacity:.25; transform:translateY(5px) scale(.72); }
    70% { opacity:1; transform:translateY(-1px) scale(1.14); }
    100% { transform:translateY(0) scale(1); }
}
@keyframes rankMaxAttackOldOut {
    0% { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(-8px); }
}
@keyframes rankMaxAttackNewIn {
    0% { opacity:0; transform:translateY(8px) scale(.92); }
    55% { opacity:1; transform:translateY(-1px) scale(1.06); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes rankMaxAttackGainIn {
    from { opacity:0; transform:translateX(-5px); }
    to { opacity:1; transform:translateX(0); }
}
@media (prefers-reduced-motion:reduce) {
    .creatureRankMaxExecutionPortrait,
    .creatureRankMaxExecutionFlash,
    .creatureRankMaxExecutionRank strong,
    .creatureRankMaxExecutionAttackValues strong,
    .creatureRankMaxExecutionAttackValues em { animation:none !important; }
}
.creatureRankMaxExecute {
    justify-self:center;
    min-width:166px;
    min-height:46px;
    background:linear-gradient(180deg,#8a4eb4,#572c82);
    border-color:rgba(225,191,255,.68);
}
.creatureRankMaxExecute strong { font-size:12px; }
.creatureRankMaxExecute small { color:#ecd9ff; font-size:10px; }
@media (max-width:520px) {
    .creatureRankMaxPanel { padding:10px 8px; }
    .creatureRankMaxHero strong { font-size:13px; }
    .creatureRankMaxHero span { font-size:10px; }
    .creatureRankMaxComparisonSide .creatureMedallion--evolution { width:70px; height:70px; }
    .creatureRankMaxMetrics { gap:4px; }
    .creatureRankMaxMetric { padding:6px 3px; }
    .creatureRankMaxMetric span { font-size:10px; }
    .creatureRankMaxMetric strong { font-size:11px; }
    .creatureRankMaxExecution { min-height:218px; }
    .creatureRankMaxExecutionCard { min-height:202px; padding:13px 9px 11px; }
    .creatureRankMaxExecutionPortraitStage { width:94px; height:94px; }
    .creatureRankMaxExecutionPortraitStage .creatureMedallion--evolution { width:86px; height:86px; }
    .creatureRankMaxExecutionRank strong { font-size:23px; }
    .creatureRankMaxExecutionAttack { min-width:176px; padding:7px 10px; }
}
.creatureBulkRankPanel {
    position:relative;
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
}
.creatureBulkRankTitleRow {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    margin-top:5px;
}
.creatureBulkRankTitle {
    margin:0;
    color:#f1cc70;
    font:900 10.5px/1 "Poppins",sans-serif;
    letter-spacing:.06em;
    text-align:center;
}
.creatureBulkRankTargets {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
}
.creatureBulkRankTargetButton {
    min-width:42px;
    min-height:24px;
    margin:0;
    padding:3px 8px;
    border:1px solid rgba(161,200,223,.22);
    border-radius:5px;
    background:rgba(4,22,34,.78);
    color:#9eb6c4;
    font:800 8.5px/1 "Poppins",sans-serif;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureBulkRankTargetButton.is-active {
    border-color:rgba(255,215,111,.56);
    background:linear-gradient(180deg,rgba(193,133,28,.88),rgba(107,67,10,.94));
    color:#fff2bd;
}
.creatureBulkRankTargetButton:disabled { cursor:default; opacity:.62; }
.creatureBulkRankTargetButton:focus-visible { outline:1px solid rgba(255,222,145,.82); outline-offset:1px; }
.creatureBulkRankIntermediateToggle {
    min-height:24px;
    margin:0 0 0 2px;
    padding:3px 8px;
    border:1px solid rgba(161,200,223,.22);
    border-radius:999px;
    background:rgba(4,22,34,.78);
    color:#91aab8;
    font:800 7.8px/1 "Poppins",sans-serif;
    letter-spacing:.02em;
    cursor:pointer;
    touch-action:manipulation;
    white-space:nowrap;
}
.creatureBulkRankIntermediateToggle.is-active {
    border-color:rgba(90,203,156,.58);
    background:linear-gradient(180deg,rgba(31,119,84,.92),rgba(13,67,48,.96));
    color:#c9ffe7;
    box-shadow:inset 0 0 0 1px rgba(172,255,217,.12);
}
.creatureBulkRankIntermediateToggle:disabled { cursor:default; opacity:.55; }
.creatureBulkRankIntermediateToggle:focus-visible { outline:1px solid rgba(186,255,222,.78); outline-offset:1px; }
.creatureBulkRankToolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:17px;
    margin-top:4px;
    gap:4px;
}
.creatureBulkRankStatus {
    min-width:0;
    color:#a9becb;
    font:700 8.6px/1.25 "Poppins",sans-serif;
}
.creatureBulkRankReset {
    flex:0 0 auto;
    min-height:17px;
    margin:0;
    padding:2px 6px;
    border:1px solid rgba(163,202,226,.22);
    border-radius:999px;
    background:rgba(9,28,40,.68);
    color:#a8c3d2;
    font:800 7.4px/1 "Poppins",sans-serif;
    cursor:pointer;
}
.creatureBulkRankTree {
    width:100%;
    min-width:0;
    max-width:100%;
    margin-top:3px;
    overflow:hidden;
}
.creatureBulkRankTree.is-busy {
    pointer-events:none;
    opacity:.72;
}
/* Le premier calcul Bulk réserve immédiatement la hauteur occupée par l'arbre.
   La modale ne se contracte donc plus pendant l'aller-retour serveur. */
.creatureBulkRankTree.is-loading {
    display:grid;
    place-items:center;
    min-height:225px;
}
.bulkRankLoading {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:0;
    padding:12px;
    color:rgba(239,246,255,.88);
    font:700 10px/1.2 "Poppins",sans-serif;
    letter-spacing:.02em;
    text-align:center;
}
.bulkRankLoadingSpinner {
    width:18px;
    height:18px;
    flex:0 0 18px;
    border:2px solid rgba(196,219,255,.24);
    border-top-color:#f2bd52;
    border-right-color:rgba(101,205,255,.88);
    border-radius:50%;
    box-shadow:0 0 9px rgba(84,193,255,.18);
    animation:bulkRankLoadingSpin .78s linear infinite;
}
@keyframes bulkRankLoadingSpin {
    to { transform:rotate(360deg); }
}
@media (prefers-reduced-motion:reduce) {
    .bulkRankLoadingSpinner { animation-duration:1.8s; }
}
.bulkRankGrid {
    --bulk-rank-gap:3px;
    display:grid;
    grid-template-columns:repeat(var(--bulk-rank-columns),minmax(0,1fr));
    align-items:center;
    gap:var(--bulk-rank-gap);
    width:100%;
    min-width:0;
    padding:7px 0 6px;
}
.bulkRankColumn {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:92px;
}
.bulkRankColumn:not(:last-child)::after {
    content:"";
    position:absolute;
    z-index:0;
    top:50%;
    /* Le connecteur vit uniquement dans l’espace ENTRE deux colonnes.
       Il ne traverse donc plus les médaillons, même lorsqu’ils sont grands. */
    left:calc(100% - 1px);
    width:calc(var(--bulk-rank-gap) + 2px);
    height:1px;
    background:linear-gradient(90deg,rgba(232,194,104,.55),rgba(232,194,104,.16));
    pointer-events:none;
}
.bulkRankColumnLabel {
    position:relative;
    z-index:2;
    display:block;
    max-width:100%;
    margin-bottom:4px;
    overflow:hidden;
    color:#91a9b7;
    font:800 7.6px/1 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bulkRankColumn--target .bulkRankColumnLabel { color:#e9c66f; }
.bulkRankGrid.is-compact-preparation .bulkRankColumn::after { display:none; }
.bulkRankColumn--compact-preparation {
    min-height:110px;
    padding:0 5px;
}
.bulkRankFastPreparation {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
}
.bulkRankFastHeading {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    margin-bottom:8px;
    color:#8edcff;
    text-align:center;
}
.bulkRankFastHeading strong {
    font:900 9.6px/1.15 "Poppins",sans-serif;
    letter-spacing:.03em;
    white-space:nowrap;
}
.bulkRankFastInfoButton {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:17px;
    height:17px;
    padding:0;
    border:1px solid rgba(126,216,255,.48);
    border-radius:50%;
    background:rgba(18,64,88,.52);
    color:#dff6ff;
    font:900 10px/1 Georgia,serif;
    cursor:pointer;
    box-shadow:inset 0 0 8px rgba(81,195,242,.08);
}
.bulkRankFastInfoButton:hover,
.bulkRankFastInfoButton:focus-visible,
.bulkRankFastInfoButton.is-active {
    border-color:rgba(142,220,255,.9);
    background:rgba(28,93,124,.72);
    outline:none;
}
.bulkRankFastArrow {
    position:relative;
    width:min(132px,88%);
    height:24px;
}
.bulkRankFastArrow::before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:10px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,rgba(232,194,104,.28),rgba(246,209,112,.95));
    box-shadow:0 0 7px rgba(246,209,112,.16);
    transform:translateY(-50%);
}
.bulkRankFastArrow::after {
    content:"";
    position:absolute;
    top:50%;
    right:0;
    width:10px;
    height:10px;
    border-top:2px solid #f6d170;
    border-right:2px solid #f6d170;
    transform:translateY(-50%) rotate(45deg);
}
.bulkRankFastInfo {
    width:min(190px,100%);
    margin-top:4px;
    padding:7px 8px;
    border:1px solid rgba(126,216,255,.22);
    border-radius:7px;
    background:rgba(5,25,36,.88);
    color:#b8d0dc;
    font:700 8px/1.42 "Poppins",sans-serif;
    text-align:center;
}
.bulkRankFastInfo[hidden] { display:none; }
.bulkRankTargetPower {
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:66px;
    margin-top:2px;
    padding:3px 5px;
    border:1px solid rgba(158,196,219,.28);
    border-radius:6px;
    background:rgba(0,0,0,.30);
    white-space:nowrap;
}
.bulkRankTargetPower img { width:11px; height:11px; object-fit:contain; }
.bulkRankTargetPower span { color:#aebfca; font:800 5.8px/1 "Poppins",sans-serif; }
.bulkRankTargetPower strong { color:#ffe69a; font:900 9px/1 "Poppins",sans-serif; }
.bulkRankColumn--target.is-result .bulkRankTargetPower {
    border-color:rgba(255,215,111,.38);
    background:rgba(86,55,9,.24);
}
.bulkRankColumn--target.is-result .bulkRankTargetPower strong { color:#fff0af; }

/* Bulk Rank Up : réutilise exactement le badge DPS standard des aperçus
   progression (Evolution/Rank/Ascension). Cette classe ne gère que son
   positionnement dans la colonne. */
.bulkRankTargetPowerSlot {
    position:relative;
    z-index:3;
    margin-top:5px;
}

.bulkRankTargetHolder,
.bulkRankFoodStack {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
}
.bulkRankFoodStack { gap:2px; }
.bulkRankNode {
    position:relative;
    display:grid;
    place-items:center;
    width:min(82px,100%);
    aspect-ratio:1 / 1.08;
    height:auto;
    min-width:0;
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#fff;
    cursor:pointer;
}
/* Plus une étape contient de sacrifices, plus ses médaillons se compactent.
   On garde ainsi des portraits généreux sans qu'un stack ×4 déborde sur le footer. */
.bulkRankFoodStack:has(> .bulkRankNode:nth-child(2)) .bulkRankNode { width:min(68px,100%); }
.bulkRankFoodStack:has(> .bulkRankNode:nth-child(3)) .bulkRankNode { width:min(57px,100%); }
.bulkRankFoodStack:has(> .bulkRankNode:nth-child(4)) .bulkRankNode { width:min(49px,100%); }
.bulkRankNode:hover,
.bulkRankNode:focus-visible {
    outline:none;
    border:0;
    background:transparent;
}
.bulkRankNode:hover .creatureMedallion--bulk-rank,
.bulkRankNode:focus-visible .creatureMedallion--bulk-rank {
    filter:brightness(1.08);
    transform:translateY(-1px);
}
.bulkRankNode.requires-build {
    border:0;
    background:transparent;
}
.bulkRankNode.is-missing {
    opacity:.55;
    cursor:not-allowed;
}
.bulkRankNode--compact {
    width:min(58px,100%);
}
.creatureMedallion--bulk-rank,
.creatureMedallion--bulk-rank-target,
.creatureMedallion--bulk-rank-result {
    width:100%;
    height:100%;
    --medallion-scale:1.30;
    --medallion-core-top:7px;
}
.bulkRankFoodStack:has(> .bulkRankNode:nth-child(2)) .creatureMedallion--bulk-rank { --medallion-scale:1.08; --medallion-core-top:6px; }
.bulkRankFoodStack:has(> .bulkRankNode:nth-child(3)) .creatureMedallion--bulk-rank { --medallion-scale:.90; --medallion-core-top:5px; }
.bulkRankFoodStack:has(> .bulkRankNode:nth-child(4)) .creatureMedallion--bulk-rank { --medallion-scale:.76; --medallion-core-top:4px; }
.creatureMedallion--bulk-rank-target {
    width:min(72px,100%);
    aspect-ratio:1 / 1.08;
    height:auto;
    --medallion-scale:1.12;
    --medallion-core-top:7px;
}
.creatureMedallion--bulk-rank-result {
    width:min(96px,100%);
    aspect-ratio:1 / 1.10;
    height:auto;
    --medallion-scale:1.48;
    --medallion-core-top:6px;
}
.creatureMedallion--bulk-rank .creatureMedallionLevel,
.creatureMedallion--bulk-rank-target .creatureMedallionLevel,
.creatureMedallion--bulk-rank-result .creatureMedallionLevel,
.creatureMedallion--bulk-rank .creatureMedallionPower,
.creatureMedallion--bulk-rank-target .creatureMedallionPower,
.creatureMedallion--bulk-rank-result .creatureMedallionPower { display:none !important; }
.bulkRankBuildMarker {
    position:absolute;
    z-index:9;
    right:-2px;
    bottom:-1px;
    display:grid;
    place-items:center;
    width:12px;
    height:12px;
    border:1px solid rgba(196,231,249,.62);
    border-radius:50%;
    background:#285f7d;
    color:#fff;
    font:900 7px/1 Arial,sans-serif;
    box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.bulkRankMissing {
    display:grid;
    place-items:center;
    width:21px;
    height:21px;
    border:1px dashed rgba(255,145,145,.55);
    border-radius:50%;
    color:#ffaaaa;
    font:900 11px/1 Arial,sans-serif;
}
.bulkRankNode.is-missing small {
    position:absolute;
    bottom:1px;
    color:#d3a4a4;
    font:800 5px/1 "Poppins",sans-serif;
}
.creatureBulkRankDetail {
    min-width:0;
    margin-top:4px;
    padding:4px 5px;
    border:1px solid rgba(153,200,224,.17);
    border-radius:7px;
    background:rgba(2,15,24,.48);
}
.bulkRankDetailHead {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
}
.bulkRankDetailHead strong {
    min-width:0;
    overflow:hidden;
    color:#dcebf3;
    font:800 7px/1.15 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bulkRankDetailClose {
    width:18px;
    height:18px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#9eb6c4;
    font:900 14px/1 Arial,sans-serif;
    cursor:pointer;
}
.bulkRankDetailBody {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    margin-top:3px;
}
.bulkRankDetailLabel {
    flex:0 1 auto;
    min-width:0;
    color:#8fa8b7;
    font:700 6.4px/1.15 "Poppins",sans-serif;
}
.bulkRankDetailChildren {
    display:flex;
    align-items:center;
    gap:2px;
    min-width:0;
    overflow:hidden;
}
.bulkRankExcludeButton {
    flex:0 0 auto;
    min-height:22px;
    margin:0 0 0 auto;
    padding:3px 6px;
    border:1px solid rgba(255,170,137,.34);
    border-radius:6px;
    background:rgba(98,38,21,.42);
    color:#ffc2aa;
    font:800 6px/1 "Poppins",sans-serif;
    cursor:pointer;
}
.creatureBulkRankFooter {
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:minmax(0,1fr) 22px 92px;
    align-items:center;
    gap:6px;
    margin-top:7px;
}
.creatureBulkRankSummary {
    grid-column:1;
    min-width:0;
    color:#93b2c2;
    font:700 8.4px/1.25 "Poppins",sans-serif;
}
.creatureBulkRankReviewButton {
    grid-column:2;
    justify-self:center;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    min-width:20px;
    min-height:20px;
    margin:0;
    padding:0;
    border:1px solid rgba(164,205,226,.34);
    border-radius:50%;
    background:rgba(8,31,44,.84);
    color:#b8d7e6;
    font:900 11px/1 Georgia,serif;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureBulkRankReviewButton:hover,
.creatureBulkRankReviewButton:focus-visible,
.creatureBulkRankReviewButton.is-active {
    border-color:rgba(255,213,106,.65);
    color:#ffe093;
    outline:none;
}
.creatureBulkRankReviewButton:disabled { opacity:.35; cursor:default; }
.creatureBulkRankReview {
    position:absolute;
    z-index:40;
    left:3px;
    right:3px;
    bottom:39px;
    max-height:210px;
    padding:6px;
    overflow:hidden;
    border:1px solid rgba(158,205,229,.28);
    border-radius:9px;
    background:rgba(3,20,30,.98);
    box-shadow:0 8px 24px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.025);
}
.creatureBulkRankReview[hidden] { display:none !important; }
.creatureBulkRankReviewHead {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:18px;
    margin-bottom:4px;
    gap:5px;
}
.creatureBulkRankReviewHead strong {
    color:#f0d17c;
    font:900 7.5px/1 "Poppins",sans-serif;
    letter-spacing:.04em;
}
.creatureBulkRankReviewClose {
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#a9c0cc;
    font:900 16px/1 Arial,sans-serif;
    cursor:pointer;
}
.creatureBulkRankReviewList {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(48px,1fr));
    align-items:start;
    gap:2px 3px;
    max-height:178px;
    padding:2px 1px 4px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}
.bulkRankReviewItem {
    position:relative;
    display:grid;
    place-items:center;
    width:48px;
    height:52px;
    min-width:0;
    justify-self:center;
}
.creatureMedallion--bulk-rank-review {
    width:100%;
    height:100%;
    --medallion-scale:.78;
    --medallion-core-top:4px;
}
.creatureMedallion--bulk-rank-review .creatureMedallionLevel,
.creatureMedallion--bulk-rank-review .creatureMedallionPower { display:none !important; }
.bulkRankReviewBuildMarker {
    position:absolute;
    z-index:9;
    right:0;
    bottom:1px;
    display:grid;
    place-items:center;
    width:11px;
    height:11px;
    border:1px solid rgba(196,231,249,.62);
    border-radius:50%;
    background:#285f7d;
    color:#fff;
    font:900 6px/1 Arial,sans-serif;
    box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.creatureBulkRankExecute {
    grid-column:3;
    min-width:92px;
    min-height:36px;
    padding:5px 8px;
    font:900 10px/1 "Poppins",sans-serif;
    justify-self:stretch;
}

.creatureUpgradeSectionLabel--runes {
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(163,202,226,.14);
}

/* Emplacements de runes vides — structure et dimensions reprises du CSS MMEG.
   Ici on utilise les vrais assets `rune-hole-empty-*` au lieu de redessiner
   les formes en CSS. Le DOM reste identique à la page de détail d'origine. */
.detail-runes {
    margin:8px -4px 0;
}
.detail-runes > [class*="col-"] {
    padding-left:4px;
    padding-right:4px;
}
.detail-runes .child-container-stat {
    height:58px;
}
.detail-runes .container-stats {
    position:relative;
    display:inline-block;
}
.detail-runes .bg-rune-hex,
.detail-runes .bg-rune-square,
.detail-runes .bg-rune-leaf {
    width:58px;
    height:58px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}
.detail-runes .bg-rune-hex {
    background-image:url('/img/ui/runes/rune-hole-empty-hex.png');
}
.detail-runes .bg-rune-square {
    background-image:url('/img/ui/runes/rune-hole-empty-square.png');
}
.detail-runes .bg-rune-leaf {
    background-image:url('/img/ui/runes/rune-hole-empty-leaf.png');
}
.creatureUpgradeRuneHint {
    display:block;
    margin-top:2px;
    color:#8e9fad;
    font:600 9px/1.2 "Poppins",sans-serif;
    text-align:center;
}

/* Le halo de survol du badge niveau ne doit jamais se propager à toute la Quick Team. */
.creatureMedallionLevel.is-details-trigger {
    cursor:pointer;
    transition:background .14s ease,box-shadow .14s ease;
}
.creatureMedallionLevel.is-details-trigger:hover {
    background:#123e5b;
    box-shadow:0 0 0 1px rgba(125,211,255,.38),0 2px 6px rgba(0,0,0,.45);
}

body.creature-upgrade-panel-open { overflow:hidden; }

@media (max-width:620px) {
    /* On réserve volontairement les bandes latérales aux flèches :
       elles restent hors du contenu sans coller aux bords de l'écran. */
    .creatureUpgradePanelShell { width:min(85vw,430px); }
    .creatureUpgradePanelNav { width:30px; height:58px; }
    .creatureUpgradePanelNav--previous { right:calc(100% - 2px); left:auto; }
    .creatureUpgradePanelNav--next { left:calc(100% - 2px); right:auto; }
}

@media (max-width:520px) {
    .creatureUpgradePanelShell { width:min(85vw,430px); }
    .creatureUpgradePanelNav { width:28px; height:58px; font-size:22px; }
    .creatureUpgradePanelBody { grid-template-columns:158px minmax(0,1fr); }
    .creatureUpgradeIdentity { padding:9px 7px 8px; }
    .creatureUpgradeMedallion { height:111px; }
    .creatureMedallion--detail { width:103px; height:121px; --medallion-scale:1.42; --medallion-core-top:14px; }
    .creatureUpgradeTag { flex-basis:30px; width:30px; height:30px; }
    .creatureUpgradeTag img { width:26px; height:26px; }
    .creatureUpgradeControls { padding:10px; }
    .creatureUpgradeLevelActionBox { grid-template-columns:minmax(0,1fr) 52px; gap:6px; }
    .creatureUpgradeBulkModeBtn { min-height:42px; height:42px; }
    .creatureUpgradeActionBtn { height:42px; min-height:42px; padding:0 10px; }
    .creatureUpgradeActionBtnLabel { font-size:12px; }
    .creatureUpgradeActionBtnMeta strong { font-size:14px; }
    .creatureUpgradePreviewRow { gap:6px; padding:6px 7px; }
    .creatureUpgradePreviewItem { gap:4px; }
    .creatureUpgradePreviewItem small { font-size:7px; }
    .creatureUpgradePreviewItem strong { font-size:11px; }
    .creatureUpgradeRankFood { min-height:61px; gap:4px; }
    .creatureUpgradeRankFoodButton { flex-basis:48px; width:48px; height:58px; }
    .creatureMedallion--rank-food { width:46px; height:56px; --medallion-scale:.70; --medallion-core-top:8px; }
    .creatureUpgradeRankFooter { grid-template-columns:minmax(0,1fr) 112px 86px; }
    .creatureUpgradeRankButton strong { font-size:10px; }
    .creatureUpgradeRankPrepareLevelButton strong { font-size:8.5px; }
    .creatureUpgradeRankPrepareLevelButton small { font-size:7.5px; }
}

@media (max-width:390px) {
    .creatureUpgradePanel { padding:5px; }
    .creatureUpgradePanelShell { width:86vw; }
    .creatureUpgradePanelNav { width:26px; height:54px; border-radius:10px; font-size:21px; }
    .creatureUpgradePanelBody { grid-template-columns:139px minmax(0,1fr); }
    .creatureUpgradeMedallion { height:100px; }
    .creatureMedallion--detail { width:92px; height:108px; --medallion-scale:1.28; --medallion-core-top:13px; }
    .creatureUpgradeTag { flex-basis:28px; width:28px; height:28px; }
    .creatureUpgradeTag img { width:24px; height:24px; }
}

@media (prefers-reduced-motion:reduce) {
    .creatureUpgradePanelBackdrop,
    .creatureUpgradePanelDialog,
    .creatureUpgradePanelNav,
    .creatureMedallionLevel.is-details-trigger { transition:none; }
}

/* =========================================================
   Fiche créature — navigation par onglets
   ========================================================= */
.creatureUpgradeTabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    margin-bottom:8px;
    padding:3px;
    border:1px solid rgba(145,198,229,.18);
    border-radius:9px;
    background:rgba(2,13,23,.42);
}
.creatureUpgradeTab {
    min-width:0;
    min-height:29px;
    margin:0;
    padding:4px 5px;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:#88acc4;
    font:800 8px/1 "Poppins",sans-serif;
    letter-spacing:.15px;
    text-transform:uppercase;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureUpgradeTab.is-active {
    border-color:rgba(255,220,112,.62);
    background:linear-gradient(180deg,rgba(206,139,30,.94),rgba(117,72,10,.96));
    color:#fff8d6;
    box-shadow:inset 0 1px rgba(255,255,255,.14),0 2px 5px rgba(0,0,0,.22);
}
.creatureUpgradeTab:focus-visible { outline:2px solid rgba(114,215,255,.7); outline-offset:1px; }
.creatureUpgradeTabPanel[hidden] { display:none !important; }
.creatureUpgradeTabPanel { min-width:0; }
.creatureUpgradeTabPanel .creatureUpgradeLevelActionBox { margin-top:0; }
.creatureUpgradeTabPanel .creatureUpgradeRankSection { margin-top:0; padding-top:0; border-top:0; }
.creatureUpgradeTabPanel .creatureUpgradeSectionLabel--runes { margin-top:0; padding-top:0; border-top:0; }

@media (max-width:520px) {
    .creatureUpgradePanelShell { width:min(88vw,430px); }
    .creatureUpgradePanelDialog { max-height:calc(100dvh - 14px); }
    .creatureUpgradePanelBody {
        display:grid;
        grid-template-columns:1fr;
        max-height:calc(100dvh - 58px);
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .creatureUpgradeIdentity {
        display:grid;
        grid-template-columns:minmax(112px,.9fr) minmax(0,1.1fr);
        grid-template-areas:
            "med stats"
            "med stats"
            "power primary"
            "effective traits";
        gap:4px 8px;
        align-items:center;
        padding:7px 9px 6px;
        border-right:0;
        border-bottom:1px solid rgba(166,204,228,.17);
    }
    .creatureUpgradeMedallion { grid-area:med; height:98px; }
    .creatureMedallion--detail { width:92px; height:108px; --medallion-scale:1.28; --medallion-core-top:13px; }
    .creatureUpgradePowerLine { grid-area:power; margin:0; padding:4px 5px; }
    .creatureUpgradePowerIcon { width:18px; height:18px; }
    .creatureUpgradePowerLine span { font-size:8px; }
    .creatureUpgradePowerLine strong { font-size:14px; }
    .creatureUpgradeEffectivePower { grid-area:effective; margin:0; font-size:7.5px; }
    .creatureUpgradeCombatStats { grid-area:stats; align-self:start; margin:0; gap:3px; }
    .creatureUpgradeCombatStats > span { padding:3px 5px; }
    .creatureUpgradeCombatStats small { font-size:7px; }
    .creatureUpgradeCombatStats strong { font-size:9px; }
    .creatureUpgradePrimaryIcons { grid-area:primary; margin:0; gap:4px; }
    .creatureUpgradeTraitTags { grid-area:traits; margin:0; min-height:0; gap:4px; }
    .creatureUpgradeTag { flex-basis:27px; width:27px; height:27px; }
    .creatureUpgradeTag img { width:23px; height:23px; }

    .creatureUpgradeControls { padding:7px 8px 8px; }
    .creatureUpgradeTabs { gap:3px; margin-bottom:6px; padding:2px; }
    .creatureUpgradeTab { min-height:27px; padding:3px; font-size:7.5px; }
    .creatureUpgradeLevelActionBox { grid-template-columns:minmax(0,1fr) 54px; gap:6px; }
    .creatureUpgradeActionBtn,
    .creatureUpgradeBulkModeBtn { min-height:40px; height:40px; }
    .creatureUpgradeActionBtn { padding:0 9px; }
    .creatureUpgradeActionBtnLabel { font-size:11px; }
    .creatureUpgradeActionBtnMeta strong { font-size:14px; }
    .creatureUpgradePreviewRow { margin-top:6px; padding:5px 6px; }
    .creatureUpgradeRankRule { margin:5px 0; font-size:8px; line-height:1.2; }
    .creatureUpgradeRankFood { min-height:58px; }
    .creatureUpgradeRankFooter { margin-top:5px; }
    .detail-runes { margin-top:6px; }
    .detail-runes .child-container-stat { height:47px; margin-bottom:3px !important; }
    .detail-runes .bg-rune-hex,
    .detail-runes .bg-rune-square,
    .detail-runes .bg-rune-leaf { width:47px; height:47px; }
    .creatureUpgradeRuneHint { margin-top:3px; font-size:8px; }
}

@media (max-width:390px) {
    .creatureUpgradePanelShell { width:89vw; }
    .creatureUpgradeIdentity { grid-template-columns:105px minmax(0,1fr); gap:3px 6px; padding-inline:7px; }
    .creatureUpgradeMedallion { height:92px; }
    .creatureMedallion--detail { width:86px; height:101px; --medallion-scale:1.20; --medallion-core-top:12px; }
    .creatureUpgradeTag { flex-basis:25px; width:25px; height:25px; }
    .creatureUpgradeTag img { width:21px; height:21px; }
    .creatureUpgradeTab { font-size:7px; }
}


/* =========================================================
   Évolution / Ascension — progression avancée
   ========================================================= */
.creatureProgressionModes {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    margin:0 0 7px;
    padding:2px;
    border:1px solid rgba(143,195,224,.16);
    border-radius:8px;
    background:rgba(2,13,23,.42);
}
.creatureProgressionMode {
    min-width:0;
    min-height:25px;
    margin:0;
    padding:3px 4px;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:#8eabbc;
    font:800 7.5px/1 "Poppins",sans-serif;
    letter-spacing:.12px;
    text-transform:uppercase;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureProgressionMode.is-active {
    border-color:rgba(126,214,255,.48);
    background:linear-gradient(180deg,rgba(21,93,128,.92),rgba(8,50,76,.96));
    color:#eaf9ff;
    box-shadow:inset 0 1px rgba(255,255,255,.1);
}
.creatureProgressionMode:focus-visible { outline:2px solid rgba(114,215,255,.7); outline-offset:1px; }
.creatureProgressionPanel[hidden] { display:none !important; }
.creatureProgressionPanel { min-width:0; }

.creatureEvolutionSection,
.creatureAscensionSection {
    min-width:0;
}
.creatureEvolutionBranches {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin-top:6px;
}
.creatureEvolutionBranch {
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:center;
    gap:6px;
    min-width:0;
    min-height:58px;
    margin:0;
    padding:4px 6px 4px 4px;
    overflow:hidden;
    border:1px solid rgba(166,206,229,.22);
    border-radius:9px;
    background:rgba(1,14,23,.38);
    color:#e9f5fb;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureEvolutionBranch:hover,
.creatureEvolutionBranch:focus-visible {
    outline:none;
    border-color:rgba(126,214,255,.6);
    background:rgba(13,56,79,.46);
}
.creatureEvolutionBranch.is-selected {
    border-color:rgba(255,214,88,.9);
    background:linear-gradient(135deg,rgba(119,77,9,.52),rgba(24,57,69,.5));
    box-shadow:0 0 0 2px rgba(255,202,50,.1),inset 0 1px rgba(255,255,255,.08);
}
.creatureEvolutionBranchPortrait {
    display:block;
    width:50px;
    height:50px;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.42));
}
.creatureEvolutionBranchInfo {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.creatureEvolutionBranchInfo strong {
    overflow:hidden;
    color:#fff2b7;
    font:800 9px/1.15 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureEvolutionBranchInfo small {
    overflow:hidden;
    color:#a9c3d2;
    font:700 7px/1.25 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureEvolutionEmpty {
    grid-column:1 / -1;
    padding:12px 8px;
    color:#8197a6;
    font:600 8.5px/1.3 "Poppins",sans-serif;
    text-align:center;
}
.creatureEvolutionCost {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    margin-top:7px;
}
.creatureEvolutionCostItem {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:35px;
    padding:4px 4px;
    border:1px solid rgba(165,205,226,.16);
    border-radius:7px;
    background:rgba(2,17,27,.4);
    text-align:left;
}
.creatureEvolutionCostIcon {
    display:block;
    width:28px;
    height:28px;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.46));
}
.creatureEvolutionCostText {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}
.creatureEvolutionCostItem small {
    display:block;
    width:100%;
    overflow:hidden;
    color:#92adbc;
    font:700 6.5px/1.1 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureEvolutionCostItem strong {
    margin-top:2px;
    color:#dbf5ff;
    font:800 8px/1 "Poppins",sans-serif;
}
.creatureEvolutionCostItem.is-missing {
    border-color:rgba(241,103,103,.38);
    background:rgba(102,23,23,.2);
}
.creatureEvolutionCostItem.is-missing strong { color:#ffaaaa; }
.creatureEvolutionButton {
    width:100%;
    margin-top:6px;
}

.creatureAscensionFooter {
    grid-template-columns:minmax(0,1fr) minmax(184px,52%);
    align-items:end;
    margin-top:7px;
}
.creatureAscensionFooter .creatureUpgradeRankCount { grid-column:1; }
.creatureAscensionFooter .creatureUpgradeRankButton {
    grid-column:2;
    min-height:50px;
    padding:7px 12px;
}
.creatureAscensionFooter .creatureUpgradeRankButton strong {
    font-size:12px;
    line-height:1.05;
}
.creatureAscensionFooter .creatureUpgradeRankButton small {
    font-size:8.5px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
}
.creatureAscensionFoodButton.is-selected {
    border-color:#d6a1ff;
    background:rgba(104,42,144,.34);
    box-shadow:0 0 0 2px rgba(198,132,255,.12),0 3px 9px rgba(0,0,0,.28);
}
.creatureAscensionFoodButton.is-selected::after {
    border-color:#f3ddff;
    background:#8c4fb2;
}
.creatureAscensionFoodButton.is-equipped,
.creatureAscensionFoodButton.is-locked {
    opacity:.58;
    cursor:not-allowed;
    filter:saturate(.55);
}
.creatureAscensionFoodButton.is-equipped::after,
.creatureAscensionFoodButton.is-locked::after { display:none; }
.creatureAscensionFoodStatus {
    position:absolute;
    left:50%;
    bottom:2px;
    z-index:5;
    transform:translateX(-50%);
    padding:1px 5px;
    border:1px solid rgba(255,214,119,.38);
    border-radius:999px;
    background:rgba(18,27,36,.92);
    color:#ffe09a;
    font:800 6px/1.25 "Poppins",sans-serif;
    letter-spacing:.04em;
    white-space:nowrap;
}
.creatureAscensionSection .creatureUpgradeRankPreview { color:#dcb3ff; }
.creatureAscensionSection .creatureUpgradeRankButton {
    border-color:rgba(215,166,255,.62);
    background:linear-gradient(180deg,#9b5dc6,#66378b);
}
.creatureAscensionSection .creatureUpgradeRankButton small { color:#f1dfff; }
.creatureAscensionResult { color:#f0c4ff; font-weight:900; text-shadow:0 0 6px rgba(197,112,255,.28); }

@media (max-width:520px) {
    .creatureProgressionModes { gap:3px; margin-bottom:5px; }
    .creatureProgressionMode { min-height:23px; padding:2px 3px; font-size:6.8px; }
    .creatureEvolutionBranches { gap:4px; margin-top:4px; }
    .creatureEvolutionBranch {
        grid-template-columns:43px minmax(0,1fr);
        gap:4px;
        min-height:49px;
        padding:3px 4px 3px 3px;
    }
    .creatureEvolutionBranchPortrait { width:41px; height:41px; }
    .creatureEvolutionBranchInfo strong { font-size:7.8px; }
    .creatureEvolutionBranchInfo small { font-size:6.2px; }
    .creatureEvolutionCost { gap:3px; margin-top:5px; }
    .creatureEvolutionCostItem { grid-template-columns:24px minmax(0,1fr); min-height:31px; padding:3px; }
    .creatureEvolutionCostIcon { width:22px; height:22px; }
    .creatureEvolutionCostItem small { font-size:5.8px; }
    .creatureEvolutionCostItem strong { font-size:7.2px; }
    .creatureEvolutionButton { margin-top:5px; }
    .creatureAscensionFooter {
        grid-template-columns:minmax(0,1fr) minmax(172px,54%);
        margin-top:5px;
    }
    .creatureAscensionFooter .creatureUpgradeRankButton {
        min-height:48px;
        padding:6px 10px;
    }
    .creatureAscensionFooter .creatureUpgradeRankButton strong { font-size:11.5px; }
    .creatureAscensionFooter .creatureUpgradeRankButton small { font-size:8px; }
}

@media (max-width:390px) {
    .creatureEvolutionBranch {
        grid-template-columns:38px minmax(0,1fr);
        min-height:44px;
    }
    .creatureEvolutionBranchPortrait { width:36px; height:36px; }
    .creatureEvolutionBranchInfo small { white-space:normal; }
}


/* Evolution reveal — short server-authoritative transformation feedback. */
.creatureUpgradePanelDialog { position: relative; }


/* Feedback court de progression sur le médaillon principal uniquement. */
.creatureUpgradeMedallion .creatureMedallionStar.is-rank-gain {
    animation:creatureRankStarGain 610ms var(--progress-delay, 0ms) cubic-bezier(.18,.78,.2,1) both;
    transform-origin:center;
    will-change:scale,opacity,filter;
}
.creatureUpgradeMedallion .creatureMedallionStar.is-ascension-gain {
    animation:creatureAscensionStarGain 680ms var(--progress-delay, 0ms) cubic-bezier(.16,.8,.18,1) both;
    transform-origin:center;
    will-change:scale,opacity,filter;
}
.creatureUpgradeMedallion .creatureMedallionPortrait.is-progression-complete {
    animation:creatureProgressPortraitBounce 560ms var(--progress-delay, 0ms) cubic-bezier(.2,.72,.22,1) both;
    transform-origin:center;
    will-change:scale,filter;
}
.creatureUpgradeMedallion .creatureMedallionSelectionGlow.is-progression-complete-glow {
    animation:creatureProgressCompletionGlow 620ms var(--progress-delay, 0ms) ease-out both;
    will-change:scale,opacity,filter;
}
@keyframes creatureRankStarGain {
    0% { opacity:.12; scale:.18; filter:brightness(2.1) drop-shadow(0 0 2px rgba(255,215,66,.9)); }
    48% { opacity:1; scale:1.52; filter:brightness(1.45) drop-shadow(0 0 6px rgba(255,204,41,.95)); }
    70% { scale:.86; }
    86% { scale:1.12; }
    100% { opacity:1; scale:1; filter:none; }
}
@keyframes creatureAscensionStarGain {
    0% { opacity:.08; scale:.16; filter:brightness(2.2) drop-shadow(0 0 2px rgba(202,91,255,.9)); }
    44% { opacity:1; scale:1.58; filter:brightness(1.5) drop-shadow(0 0 7px rgba(184,72,255,1)); }
    68% { scale:.84; }
    84% { scale:1.14; }
    100% { opacity:1; scale:1; filter:none; }
}
@keyframes creatureProgressPortraitBounce {
    0%, 18% { scale:1; filter:none; }
    50% { scale:1.09; filter:brightness(1.12); }
    68% { scale:.96; }
    84% { scale:1.035; }
    100% { scale:1; filter:none; }
}
@keyframes creatureProgressCompletionGlow {
    0% { opacity:.16; scale:1; filter:none; }
    42% { opacity:.72; scale:1.18; filter:brightness(1.35); }
    100% { opacity:.16; scale:1; filter:none; }
}
@media (prefers-reduced-motion: reduce) {
    .creatureUpgradeMedallion .creatureMedallionStar.is-rank-gain,
    .creatureUpgradeMedallion .creatureMedallionStar.is-ascension-gain,
    .creatureUpgradeMedallion .creatureMedallionPortrait.is-progression-complete,
    .creatureUpgradeMedallion .creatureMedallionSelectionGlow.is-progression-complete-glow {
        animation:none !important;
    }
}

.creatureEvolutionAnimation {
    position:absolute;
    inset:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    overflow:hidden;
    border-radius:inherit;
    background:
        radial-gradient(circle at 50% 46%, rgba(255,234,153,.20), transparent 30%),
        linear-gradient(180deg, rgba(3,20,36,.94), rgba(2,12,25,.98));
    color:#fff7d2;
    cursor:pointer;
    opacity:1;
    transition:opacity .16s ease;
}
.creatureEvolutionAnimation.is-closing { opacity:0; }
.creatureEvolutionAnimationTitle {
    z-index:3;
    font-size:12px;
    letter-spacing:.16em;
    color:#ffe58a;
    text-shadow:0 2px 4px rgba(0,0,0,.75);
}
.creatureEvolutionAnimationStage {
    position:relative;
    width:148px;
    height:148px;
    display:grid;
    place-items:center;
}
.creatureEvolutionAnimationForm {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    z-index:2;
}
.creatureEvolutionAnimationForm .creatureMedallion { transform-origin:center; }
.creatureEvolutionAnimationForm--old {
    animation:evolutionOldForm 1.22s cubic-bezier(.2,.72,.2,1) forwards;
}
.creatureEvolutionAnimationForm--new {
    opacity:0;
    animation:evolutionNewForm .95s .92s cubic-bezier(.16,.78,.2,1) forwards;
}
.creatureEvolutionAnimationHalo {
    position:absolute;
    inset:12px;
    z-index:1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,245,188,.9) 0 12%, rgba(255,198,64,.42) 34%, rgba(95,209,255,.16) 58%, transparent 72%);
    filter:blur(2px);
    animation:evolutionHalo 1.5s ease-in-out forwards;
}
.creatureEvolutionAnimationFlash {
    position:absolute;
    inset:-30%;
    z-index:4;
    pointer-events:none;
    background:radial-gradient(circle, rgba(255,255,255,.98), rgba(255,241,166,.55) 18%, transparent 48%);
    opacity:0;
    animation:evolutionFlash .7s .64s ease-out forwards;
}
.creatureEvolutionAnimationName {
    z-index:3;
    max-width:88%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px;
    font-weight:900;
    color:#fff;
    opacity:0;
    transform:translateY(4px);
    animation:evolutionName .5s 1.34s ease-out forwards;
}
.creatureEvolutionAnimationHint {
    z-index:3;
    font-size:8px;
    color:#9cb2c5;
    opacity:.8;
}
@keyframes evolutionOldForm {
    0% { opacity:1; filter:brightness(1); transform:scale(1); }
    55% { opacity:1; filter:brightness(2.2) saturate(.35); transform:scale(1.08); }
    78% { opacity:.92; filter:brightness(4) saturate(0); transform:scale(.94); }
    100% { opacity:0; filter:brightness(6) saturate(0); transform:scale(.76); }
}
@keyframes evolutionNewForm {
    0% { opacity:0; filter:brightness(5) saturate(0); transform:scale(.72); }
    42% { opacity:1; filter:brightness(2.3) saturate(.7); transform:scale(1.09); }
    100% { opacity:1; filter:brightness(1) saturate(1); transform:scale(1); }
}
@keyframes evolutionHalo {
    0% { opacity:.18; transform:scale(.72) rotate(0deg); }
    48% { opacity:1; transform:scale(1.13) rotate(55deg); }
    100% { opacity:.22; transform:scale(1.32) rotate(95deg); }
}
@keyframes evolutionFlash {
    0%, 24% { opacity:0; transform:scale(.55); }
    45% { opacity:1; transform:scale(1); }
    100% { opacity:0; transform:scale(1.35); }
}
@keyframes evolutionName {
    to { opacity:1; transform:translateY(0); }
}
@media (max-width:420px) {
    .creatureEvolutionAnimation { gap:6px; }
    .creatureEvolutionAnimationStage { width:130px; height:130px; }
    .creatureEvolutionAnimationName { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
    .creatureEvolutionAnimationForm--old { animation:none; opacity:0; }
    .creatureEvolutionAnimationForm--new { animation:none; opacity:1; }
    .creatureEvolutionAnimationHalo,
    .creatureEvolutionAnimationFlash { animation:none; opacity:.18; }
    .creatureEvolutionAnimationName { animation:none; opacity:1; transform:none; }
}


/* =========================================================
   Évolution — layout canonique desktop + mobile
   Une seule composition, dimensions légèrement fluides.
   ========================================================= */
.creatureEvolutionSection .creatureUpgradeRankRule {
    min-height:0;
    margin:3px 0 4px;
    line-height:1.18;
}
.creatureEvolutionBranches {
    display:block;
    margin-top:0;
}
.creatureEvolutionComparison {
    --evolution-medallion-width:88px;
    --evolution-medallion-box-height:73px;
    display:grid;
    grid-template-columns:minmax(94px,1fr) 44px minmax(94px,1fr);
    align-items:start;
    justify-items:center;
    gap:6px;
    width:100%;
    min-width:0;
    padding:0 10px 4px;
}
.creatureEvolutionForm {
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
}
.creatureMedallion--evolution {
    width:var(--evolution-medallion-width);
    height:var(--evolution-medallion-box-height);
    --medallion-scale:1.16;
    --medallion-core-top:11px;
    overflow:visible;
}
.creatureMedallion--evolution .creatureMedallionLevel {
    min-width:19px;
    height:18px;
    right:1px;
    bottom:0;
    padding:0 4px;
    font-size:7px;
    line-height:18px;
}
.creatureEvolutionForm.is-target .creatureMedallion--evolution {
    filter:drop-shadow(0 0 7px rgba(255,213,89,.2));
}
.creatureEvolutionFormPower {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:88px;
    margin-top:2px;
    padding:4px 8px;
    border:1px solid rgba(158,196,219,.34);
    border-radius:7px;
    background:rgba(0,0,0,.32);
    color:#fff4bc;
    white-space:nowrap;
    box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.creatureEvolutionFormPower img {
    width:14px;
    height:14px;
    object-fit:contain;
}
.creatureEvolutionFormPower span {
    color:#c5d4dc;
    font:800 6.8px/1 "Poppins",sans-serif;
}
.creatureEvolutionFormPower strong {
    color:#fff0ac;
    font:900 12.5px/1 "Poppins",sans-serif;
}
.creatureEvolutionArrow {
    align-self:start;
    margin-top:27px;
    color:#eef9ff;
    font:900 36px/1 Arial,sans-serif;
    text-shadow:0 2px 4px rgba(0,0,0,.55),0 0 5px rgba(182,230,255,.22);
}

/* Les trois coûts forment un seul bloc compact et lisible. */
.creatureEvolutionCost {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:8px;
    margin:6px 0 8px;
    padding:7px 9px;
    border:1px solid rgba(135,181,207,.34);
    border-radius:12px;
    background:rgba(4,25,39,.38);
    box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.creatureEvolutionCostItem {
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    min-height:36px;
    padding:0;
    border:0;
    background:transparent;
    text-align:left;
}
.creatureEvolutionCostIcon {
    width:28px;
    height:28px;
    object-fit:contain;
}
.creatureEvolutionCostText {
    display:flex;
    min-width:0;
    flex-direction:column;
    justify-content:center;
    gap:4px;
}
.creatureEvolutionCostItem small {
    display:block;
    overflow:visible;
    color:#a9bfcb;
    font:700 7.6px/1.08 "Poppins",sans-serif;
    text-overflow:clip;
    white-space:normal;
}
.creatureEvolutionCostItem strong {
    margin:0;
    color:#e9f8ff;
    font:900 10.5px/1 "Poppins",sans-serif;
    white-space:nowrap;
}
.creatureEvolutionCostItem.is-missing {
    border:0;
    background:transparent;
}
.creatureEvolutionCostItem.is-missing strong { color:#ff8f8f; }
.creatureEvolutionButton {
    min-height:41px;
    margin-top:0;
    padding:6px 9px;
    border-radius:10px;
}
.creatureEvolutionButton strong {
    font-size:12px;
    letter-spacing:.07em;
}

/* Même composition sur petit écran : seules les tailles sont resserrées. */
@media (max-width:390px) {
    .creatureEvolutionComparison {
        --evolution-medallion-width:82px;
        --evolution-medallion-box-height:69px;
        grid-template-columns:minmax(86px,1fr) 36px minmax(86px,1fr);
        gap:4px;
        padding-inline:4px;
    }
    .creatureMedallion--evolution {
        --medallion-scale:1.08;
        --medallion-core-top:10px;
    }
    .creatureEvolutionFormPower {
        min-width:80px;
        padding:3px 6px;
    }
    .creatureEvolutionFormPower img { width:13px; height:13px; }
    .creatureEvolutionFormPower span { font-size:6.3px; }
    .creatureEvolutionFormPower strong { font-size:11.5px; }
    .creatureEvolutionArrow { margin-top:25px; font-size:32px; }
    .creatureEvolutionCost {
        gap:5px;
        padding:6px;
    }
    .creatureEvolutionCostItem {
        grid-template-columns:24px minmax(0,1fr);
        gap:4px;
        min-height:34px;
    }
    .creatureEvolutionCostIcon { width:24px; height:24px; }
    .creatureEvolutionCostText { gap:3px; }
    .creatureEvolutionCostItem small { font-size:6.7px; }
    .creatureEvolutionCostItem strong { font-size:9.4px; }
    .creatureEvolutionButton { min-height:39px; }
}



/* Ascension — aperçu serveur du prochain palier */
.creatureAscensionStatsPreview {
    margin:6px 0 7px;
    padding:7px 8px 6px;
    border:1px solid rgba(212,166,255,.30);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(77,35,104,.24),rgba(15,27,42,.38));
}
.creatureAscensionStatsPreview[hidden] { display:none !important; }
.creatureAscensionStatsTitle {
    margin-bottom:5px;
    color:#dcb3ff;
    font:800 7px/1 "Poppins",sans-serif;
    letter-spacing:.45px;
}
.creatureAscensionStatsGrid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}
.creatureAscensionStatItem {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:5px;
    min-width:0;
    padding:5px 6px;
    border:1px solid rgba(150,188,211,.16);
    border-radius:7px;
    background:rgba(1,16,27,.44);
}
.creatureAscensionStatItem span { color:#9db7c6; font:800 6.5px/1 "Poppins",sans-serif; }
.creatureAscensionStatItem strong { min-width:0; color:#f4f8fb; font:800 8px/1 "Poppins",sans-serif; white-space:nowrap; }
.creatureAscensionStatItem strong b { color:#dcb3ff; font-weight:900; }
.creatureAscensionStatItem em { color:#dcb3ff; font:900 7px/1 "Poppins",sans-serif; font-style:normal; white-space:nowrap; }
.creatureAscensionStatsUnchanged {
    margin-top:5px;
    color:#8198a8;
    font:600 6.5px/1.2 "Poppins",sans-serif;
    text-align:center;
}
@media (max-width:520px) {
    .creatureAscensionStatsPreview { margin:5px 0 6px; padding:6px; }
    .creatureAscensionStatsGrid { gap:4px; }
    .creatureAscensionStatItem { gap:3px; padding:4px 5px; }
    .creatureAscensionStatItem span { font-size:6px; }
    .creatureAscensionStatItem strong { font-size:7.4px; }
    .creatureAscensionStatItem em { font-size:6.5px; }
    .creatureAscensionStatsUnchanged { font-size:6px; }
}


/* =========================================================
   UI unify pass — creature panel desktop = mobile compact layout
   ========================================================= */
.creatureUpgradePanelShell {
    width: min(88vw, 430px);
}

.creatureUpgradePanelDialog {
    max-height: calc(100dvh - 14px);
}

.creatureUpgradePanelNav {
    width: 28px;
    height: 58px;
    font-size: 22px;
}
.creatureUpgradePanelNav--previous { right: calc(100% - 2px); left: auto; }
.creatureUpgradePanelNav--next { left: calc(100% - 2px); right: auto; }

.creatureUpgradePanelBody {
    display: grid;
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 58px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.creatureUpgradeIdentity {
    display: grid;
    grid-template-columns: minmax(112px, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
        "med stats"
        "med stats"
        "power primary"
        "effective traits";
    gap: 4px 8px;
    align-items: center;
    padding: 7px 9px 6px;
    border-right: 0;
    border-bottom: 1px solid rgba(166,204,228,.17);
}

.creatureUpgradeMedallion { grid-area: med; height: 98px; }
.creatureMedallion--detail { width: 92px; height: 108px; --medallion-scale: 1.28; --medallion-core-top: 13px; }
.creatureUpgradePowerLine { grid-area: power; margin: 0; padding: 4px 5px; }
.creatureUpgradePowerIcon { width: 18px; height: 18px; }
.creatureUpgradePowerLine span { font-size: 8px; }
.creatureUpgradePowerLine strong { font-size: 14px; }
.creatureUpgradeEffectivePower { grid-area: effective; margin: 0; font-size: 7.5px; }
.creatureUpgradeCombatStats { grid-area: stats; align-self: start; margin: 0; gap: 3px; }
.creatureUpgradeCombatStats > span { padding: 3px 5px; }
.creatureUpgradeCombatStats small { font-size: 7px; }
.creatureUpgradeCombatStats strong { font-size: 9px; }
.creatureUpgradePrimaryIcons { grid-area: primary; margin: 0; gap: 4px; }
.creatureUpgradeTraitTags { grid-area: traits; margin: 0; min-height: 0; gap: 4px; }
.creatureUpgradeTag { flex-basis: 27px; width: 27px; height: 27px; }
.creatureUpgradeTag img { width: 23px; height: 23px; }

.creatureUpgradeControls { padding: 7px 8px 8px; }
.creatureUpgradeTabs { gap: 3px; margin-bottom: 6px; padding: 2px; }
.creatureUpgradeTab { min-height: 27px; padding: 3px; font-size: 7.5px; }
.creatureUpgradeLevelActionBox { grid-template-columns: minmax(0,1fr) 54px; gap: 6px; }
.creatureUpgradeActionBtn,
.creatureUpgradeBulkModeBtn { min-height: 40px; height: 40px; }
.creatureUpgradeActionBtn { padding: 0 9px; }
.creatureUpgradeActionBtnLabel { font-size: 11px; }
.creatureUpgradeActionBtnMeta strong { font-size: 14px; }
.creatureUpgradePreviewRow { margin-top: 6px; padding: 5px 6px; }
.creatureUpgradeRankRule { margin: 5px 0; font-size: 8px; line-height: 1.2; }
.creatureUpgradeRankFood { min-height: 58px; }
.creatureUpgradeRankFooter { margin-top: 5px; }
.detail-runes { margin-top: 6px; }
.detail-runes .child-container-stat { height: 47px; margin-bottom: 3px !important; }
.detail-runes .bg-rune-hex,
.detail-runes .bg-rune-square,
.detail-runes .bg-rune-leaf { width: 47px; height: 47px; }
.creatureUpgradeRuneHint { margin-top: 3px; font-size: 8px; }

@media (max-width: 390px) {
    .creatureUpgradePanelShell { width: 89vw; }
    .creatureUpgradePanelNav { width: 26px; height: 54px; border-radius: 10px; font-size: 21px; }
    .creatureUpgradeIdentity { grid-template-columns: 105px minmax(0,1fr); gap: 3px 6px; padding-inline: 7px; }
    .creatureUpgradeMedallion { height: 92px; }
    .creatureMedallion--detail { width: 86px; height: 101px; --medallion-scale: 1.20; --medallion-core-top: 12px; }
    .creatureUpgradeTag { flex-basis: 25px; width: 25px; height: 25px; }
    .creatureUpgradeTag img { width: 21px; height: 21px; }
    .creatureUpgradeTab { font-size: 7px; }
}

@media (max-width:520px) {
    .creatureBulkRankTree.is-loading { min-height:190px; }
    .creatureRankModeButton { min-height:21px; padding:2px 4px; font-size:6.5px; }
    .bulkRankGrid { --bulk-rank-gap:2px; padding-block:6px 5px; }
    .bulkRankColumn { min-height:82px; }
    .bulkRankColumn:not(:last-child)::after { left:calc(100% - 1px); width:calc(var(--bulk-rank-gap) + 2px); }
    .bulkRankNode { width:min(66px,100%); border-radius:6px; }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(2)) .bulkRankNode { width:min(56px,100%); }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(3)) .bulkRankNode { width:min(47px,100%); }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(4)) .bulkRankNode { width:min(40px,100%); }
    .bulkRankNode--compact { width:min(46px,100%); }
    .creatureMedallion--bulk-rank,
    .creatureMedallion--bulk-rank-target,
    .creatureMedallion--bulk-rank-result {
        width:100%;
        height:100%;
        --medallion-scale:1.02;
        --medallion-core-top:5px;
    }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(2)) .creatureMedallion--bulk-rank { --medallion-scale:.86; --medallion-core-top:4px; }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(3)) .creatureMedallion--bulk-rank { --medallion-scale:.72; --medallion-core-top:4px; }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(4)) .creatureMedallion--bulk-rank { --medallion-scale:.61; --medallion-core-top:3px; }
    .creatureMedallion--bulk-rank-target {
        width:min(58px,100%);
        aspect-ratio:1 / 1.08;
        height:auto;
        --medallion-scale:.88;
        --medallion-core-top:5px;
    }
    .creatureMedallion--bulk-rank-result {
        width:min(76px,100%);
        aspect-ratio:1 / 1.10;
        height:auto;
        --medallion-scale:1.16;
        --medallion-core-top:4px;
    }
    .bulkRankColumnLabel { font-size:6.8px; margin-bottom:3px; }
    .bulkRankBuildMarker { width:10px; height:10px; font-size:6px; }
    .creatureBulkRankFooter { grid-template-columns:minmax(0,1fr) 20px 92px; gap:4px; margin-top:6px; }
    .bulkRankDetailBody { gap:3px; }
    .bulkRankExcludeButton { padding:3px 5px; font-size:5.4px; }
}

@media (max-width:390px) {
    .creatureBulkRankTree.is-loading { min-height:180px; }
    .bulkRankNode { width:min(58px,100%); }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(2)) .bulkRankNode { width:min(50px,100%); }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(3)) .bulkRankNode { width:min(43px,100%); }
    .bulkRankFoodStack:has(> .bulkRankNode:nth-child(4)) .bulkRankNode { width:min(37px,100%); }
    .bulkRankNode--compact { width:min(42px,100%); }
    .creatureMedallion--bulk-rank-target { width:min(52px,100%); --medallion-scale:.78; }
    .creatureMedallion--bulk-rank-result { width:min(70px,100%); --medallion-scale:1.05; }
    .bulkRankColumn:not(:last-child)::after { left:calc(100% - 1px); width:calc(var(--bulk-rank-gap) + 2px); }
    .bulkRankColumnLabel { font-size:6.5px; }
}

@media (max-width:520px) {
    .bulkRankTargetPower { min-width:58px; padding:3px 4px; gap:2px; }
    .bulkRankTargetPower img { width:10px; height:10px; }
    .bulkRankTargetPower span { font-size:5.3px; }
    .bulkRankTargetPower strong { font-size:8.2px; }
}

@media (max-width:520px) {
    .creatureBulkRankTitleRow { gap:4px; }
    .creatureBulkRankTargetButton { min-width:40px; min-height:23px; padding:3px 7px; font-size:8px; }
    .creatureBulkRankIntermediateToggle { min-height:23px; padding:3px 7px; font-size:7.4px; }
}


@media (max-width: 640px) {
    .creatureBulkRankFooter { grid-template-columns:minmax(0,1fr) 20px 92px; gap:4px; }
    .creatureBulkRankReview { bottom:37px; max-height:176px; padding:5px; }
    .creatureBulkRankReviewList { grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); max-height:145px; gap:1px 2px; }
    .bulkRankReviewItem { width:40px; height:44px; }
    .creatureMedallion--bulk-rank-review { --medallion-scale:.67; --medallion-core-top:3px; }
}


/* =========================================================
   Heroic Rank Up + Ascension — evolution-style comparison
   ========================================================= */
.creatureProgressionComparison[hidden] { display:none !important; }
.creatureProgressionComparison {
    margin:2px 0 5px;
}
.creatureProgressionComparisonInner {
    padding-bottom:2px;
}
.creatureProgressionComparisonForm {
    position:relative;
    padding-top:12px;
}
.creatureProgressionComparisonCaption {
    position:absolute;
    top:1px;
    left:50%;
    transform:translateX(-50%);
    color:#7fa1b4;
    font:800 6.5px/1 "Poppins",sans-serif;
    letter-spacing:.08em;
    white-space:nowrap;
}
.creatureProgressionComparisonForm.is-target .creatureProgressionComparisonCaption {
    color:#ffd970;
}
.creatureProgressionComparisonInner--ascension .creatureProgressionComparisonForm.is-target .creatureProgressionComparisonCaption {
    color:#e0b1ff;
}
.creatureProgressionComparisonInner--ascension .creatureProgressionComparisonForm.is-target .creatureMedallion--evolution {
    filter:drop-shadow(0 0 8px rgba(194,112,255,.25));
}
.creatureProgressionComparisonInner--ascension .creatureProgressionComparisonForm.is-target .creatureEvolutionFormPower {
    border-color:rgba(213,158,255,.38);
    background:rgba(53,22,73,.32);
}
.creatureProgressionComparisonInner--ascension .creatureProgressionComparisonForm.is-target .creatureEvolutionFormPower strong {
    color:#e7bdff;
}
.creatureProgressionComparisonArrow {
    margin-top:39px;
}

.creatureProgressionCompositionBlock.is-active {
    margin:5px 0 6px;
    padding:6px 7px 5px;
    border:1px solid rgba(135,181,207,.30);
    border-radius:11px;
    background:rgba(4,25,39,.36);
    box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.creatureProgressionCompositionBlock.is-active .creatureUpgradeRankFood {
    min-height:62px;
    margin-top:3px;
    padding:2px 0 1px;
}
.creatureProgressionCompositionTitle {
    color:#9fc5d7;
    font:800 7px/1 "Poppins",sans-serif;
    letter-spacing:.07em;
}
.creatureProgressionCompositionTitle[hidden] { display:none !important; }
.creatureRankPrepareBlock {
    margin-top:5px;
    padding-top:5px;
    border-top:1px solid rgba(135,181,207,.16);
}
.creatureRankPrepareBlock[hidden] { display:none !important; }
.creatureProgressionCompositionTitle--prepare { color:#7fabc0; }
.creatureUpgradeRankPrepareFood { min-height: 59px !important;}
.creatureUpgradeRankPrepareFoodButton {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    height:55px;
    border-style:dashed;
    opacity:.70;
}
.creatureUpgradeRankPrepareFoodButton:hover,
.creatureUpgradeRankPrepareFoodButton:focus-visible {
    opacity:1;
    border-style:solid;
}
.creatureUpgradeRankPrepareFoodButton.is-equipped { box-shadow:inset 0 0 0 1px rgba(96,190,255,.18); }
.creatureUpgradeRankPrepareFoodButton.is-pending {
    opacity:1;
    border-style:solid;
    border-color:rgba(94,204,244,.72);
    box-shadow:inset 0 0 0 1px rgba(94,204,244,.16),0 0 10px rgba(54,174,225,.12);
    pointer-events:none;
}
.creatureUpgradeRankPrepareFoodButton .creatureMedallion--rank-food {
    flex:0 0 58px;
    height:58px;
}
.creatureRankPrepareStatus {
    display:block;
    margin-top:-1px;
    color:#9dc9dc;
    font:800 6.5px/1 "Poppins",sans-serif;
    white-space:nowrap;
    letter-spacing:.01em;
    display: none;
}
.creatureUpgradeRankPrepareFoodButton.is-pending .creatureRankPrepareStatus {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#d7f5ff;
}
.creatureRankPrepareCountBadge {
    position:absolute;
    top:2px;
    right:2px;
    z-index:13;
    display:grid;
    place-items:center;
    min-width:18px;
    height:18px;
    box-sizing:border-box;
    padding:0 5px;
    border:1px solid rgba(255,255,255,.76);
    border-radius:999px;
    background:rgba(0,0,0,.84);
    color:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.62);
    font:900 8px/16px "Poppins",sans-serif;
    white-space:nowrap;
    pointer-events:none;
}
.creatureRankPrepareSpinner {
    width:9px;
    height:9px;
    flex:0 0 9px;
    border:1px solid rgba(196,219,255,.28);
    border-top-color:#f2bd52;
    border-right-color:#65cdff;
    border-radius:50%;
    animation:uiLoadingSpin .78s linear infinite;
}
.creatureProgressionCompositionBlock--ascension {
    border-color:rgba(202,154,242,.28);
    background:linear-gradient(180deg,rgba(62,29,83,.20),rgba(4,25,39,.34));
}
.creatureProgressionCompositionBlock--ascension .creatureProgressionCompositionTitle {
    color:#d7aaf7;
}

/* L'ancien tableau de stats d'Ascension est remplacé visuellement par le
   médaillon avant/après ; on garde son nœud pour compatibilité JS. */
.creatureAscensionStatsPreview[hidden] { display:none !important; }

@media (max-width:520px) {
    .creatureProgressionComparisonForm { padding-top:10px; }
    .creatureProgressionComparisonCaption { font-size:6px; }
    .creatureProgressionComparisonArrow { margin-top:35px; }
    .creatureProgressionCompositionBlock.is-active { padding:5px 6px 4px; }
    .creatureProgressionCompositionBlock.is-active .creatureUpgradeRankFood { min-height:58px; }
    .creatureUpgradeRankPrepareFood { min-height: 59px !important;}
    .creatureUpgradeRankPrepareFoodButton { height:55px; }
    .creatureUpgradeRankPrepareFoodButton .creatureMedallion--rank-food { flex-basis:54px; height:54px; }
    .creatureRankPrepareStatus { font-size:6px; }
    .creatureRankPrepareCountBadge {
        top:1px;
        right:1px;
        min-width:17px;
        height:17px;
        padding-inline:4px;
        font-size:7.5px;
        line-height:15px;
    }
}


/* État final partagé — Ascension / Évolution MAX */
.creatureProgressionMaxState {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:58px;
    margin:8px 0 4px;
    padding:10px 14px;
    border:1px solid rgba(80,224,151,.55);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(24,91,66,.34),rgba(7,45,38,.42));
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 14px rgba(48,205,132,.08);
    color:#65efad;
    text-align:center;
}
.creatureProgressionMaxState[hidden] { display:none !important; }
.creatureProgressionMaxStateIcon {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border:1px solid rgba(115,247,181,.70);
    border-radius:50%;
    background:rgba(42,166,109,.24);
    color:#8bffc4;
    box-shadow:0 0 10px rgba(75,231,151,.16);
    font:900 14px/1 "Poppins",sans-serif;
}
.creatureProgressionMaxState strong {
    color:#70f3b1;
    font:900 13px/1.12 "Poppins",sans-serif;
    letter-spacing:.055em;
    text-shadow:0 0 10px rgba(73,229,150,.16);
}
.creatureProgressionCompositionBlock[hidden],
.creatureAscensionFooter[hidden],
.creatureEvolutionBranches[hidden],
.creatureEvolutionButton[hidden],
.creatureUpgradeRankRule[hidden] {
    display:none !important;
}
@media (max-width:520px) {
    .creatureProgressionMaxState {
        min-height:52px;
        margin-top:6px;
        padding:9px 10px;
    }
    .creatureProgressionMaxStateIcon { width:22px; height:22px; flex-basis:22px; font-size:13px; }
    .creatureProgressionMaxState strong { font-size:11.5px; }
}


/* =========================================================
   Creature detail header — Photoshop target layout
   Portrait | vertical stats | compact icon grid
   ========================================================= */
.creatureUpgradeIdentity {
    grid-template-columns: 108px minmax(116px,1fr) 92px;
    grid-template-areas:
        "med stats primary"
        "med stats traits"
        "power stats traits"
        "effective stats traits";
    column-gap:10px;
    row-gap:3px;
    align-items:start;
    padding:8px 10px 7px;
}

.creatureUpgradeMedallion {
    grid-area:med;
    height:108px;
    align-self:start;
}
.creatureMedallion--detail {
    width:100px;
    height:116px;
    --medallion-scale:1.40;
    --medallion-core-top:14px;
}

.creatureUpgradePowerLine {
    grid-area:power;
    width:100%;
    min-height:29px;
    margin:0;
    padding:4px 6px;
    justify-content:center;
    gap:4px;
}
.creatureUpgradePowerIcon { width:17px; height:17px; }
.creatureUpgradePowerLine span { font-size:8px; }
.creatureUpgradePowerLine strong { font-size:15px; }

.creatureUpgradeEffectivePower {
    grid-area:effective;
    margin:0;
    min-height:0;
    font-size:7px;
    text-align:center;
}

/* Photoshop reference: ATQ / CRIT / VIT / DCC in one vertical column. */
.creatureUpgradeCombatStats {
    grid-area:stats;
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    width:100%;
    margin:5px 0 0;
    align-self:start;
}
.creatureUpgradeCombatStats > span {
    min-height:22px;
    padding:3px 7px;
}
.creatureUpgradeCombatStats > span:nth-child(1) { order:1; } /* ATQ */
.creatureUpgradeCombatStats > span:nth-child(2) { order:3; } /* VIT */
.creatureUpgradeCombatStats > span:nth-child(3) { order:2; } /* CRIT */
.creatureUpgradeCombatStats > span:nth-child(4) { order:4; } /* DCC */
.creatureUpgradeCombatStats small { font-size:7px; }
.creatureUpgradeCombatStats strong { font-size:9.5px; }

/* Element / role / family = first icon row. */
.creatureUpgradePrimaryIcons {
    grid-area:primary;
    display:grid;
    grid-template-columns:repeat(3,27px);
    justify-content:start;
    gap:4px;
    width:89px;
    margin:5px 0 0;
}

/* Remaining tags form the compact grid below it. */
.creatureUpgradeTraitTags {
    grid-area:traits;
    display:grid;
    grid-template-columns:repeat(3,27px);
    align-content:start;
    justify-content:start;
    gap:4px;
    width:89px;
    min-height:0;
    margin:0;
}
.creatureUpgradeTag {
    flex:none;
    width:27px;
    height:27px;
}
.creatureUpgradeTag img {
    width:23px;
    height:23px;
}

/* Keep the upgrade tabs immediately below the dense header. */
.creatureUpgradeControls {
    padding-top:7px;
}

@media (max-width:390px) {
    .creatureUpgradeIdentity {
        grid-template-columns:96px minmax(104px,1fr) 80px;
        column-gap:7px;
        padding-inline:7px;
    }
    .creatureUpgradeMedallion { height:100px; }
    .creatureMedallion--detail {
        width:91px;
        height:106px;
        --medallion-scale:1.27;
        --medallion-core-top:12px;
    }
    .creatureUpgradePrimaryIcons,
    .creatureUpgradeTraitTags {
        grid-template-columns:repeat(3,24px);
        width:80px;
        gap:4px;
    }
    .creatureUpgradeTag { width:24px; height:24px; }
    .creatureUpgradeTag img { width:21px; height:21px; }
    .creatureUpgradeCombatStats > span { min-height:20px; padding:3px 5px; }
    .creatureUpgradeCombatStats strong { font-size:9px; }
}


/* =========================================================
   Creature detail header — validated harmonized layout
   Reference proportions must stay unchanged for the Glyphs UI.
   ========================================================= */
.creatureUpgradeIdentity {
    grid-template-columns:130px 153px 96px;
    grid-template-rows:20px 55px 30px;
    grid-template-areas:
        "med stats primary"
        "med stats traits"
        "power stats traits";
    column-gap:13px;
    row-gap:4px;
    align-items:start;
    padding:7px 10px 7px;
}

.creatureUpgradeMedallion {
    grid-area:med;
    width:100%;
    height:108px;
    align-self:start;
}
.creatureMedallion--detail {
    width:112px;
    height:128px;
    --medallion-scale:1.3;
    --medallion-core-top:9px;
}

.creatureUpgradePowerLine {
    grid-area:power;
    width:100%;
    min-height:32px;
    margin:0;
    padding:4px 7px;
    justify-content:center;
    gap:5px;
}
.creatureUpgradePowerIcon { width:18px; height:18px; }
.creatureUpgradePowerLine span { font-size:8.5px; }
.creatureUpgradePowerLine strong { font-size:17px; }

.creatureUpgradeEffectivePower {
    display:none !important;
}

/* Narrow vertical stat rail, matching the validated reference. */
.creatureUpgradeCombatStats {
    grid-area:stats;
    grid-template-columns:1fr;
    width:100%;
    gap:4px;
    margin:8px 0 0;
    align-self:start;
}
.creatureUpgradeCombatStats > span {
    min-height:22px;
    padding:3px 7px;
}
.creatureUpgradeCombatStats small { font-size:7px; }
.creatureUpgradeCombatStats strong { font-size:9.5px; }

/* Icon block starts slightly below the portrait top, like the mockup. */
.creatureUpgradePrimaryIcons {
    grid-area:primary;
    grid-template-columns:repeat(3,29px);
    width:95px;
    gap:4px;
    margin:16px 0 0;
    justify-content:start;
}

.creatureUpgradeTraitTags {
    grid-area:traits;
    grid-template-columns:repeat(3,29px);
    width:95px;
    gap:4px;
    margin:15px 0 0;
    align-content:start;
    justify-content:start;
}
.creatureUpgradeTag {
    width:29px;
    height:29px;
}
.creatureUpgradeTag img {
    width:25px;
    height:25px;
}

/* Reduce the empty band before the tabs. */
.creatureUpgradeControls {
    padding-top:6px;
}

@media (max-width:390px) {
    .creatureUpgradeIdentity {
        grid-template-columns:minmax(140px,1fr) 108px 80px;
        grid-template-rows:32px 65px 31px;
        column-gap:7px;
        padding-inline:7px;
    }
    .creatureUpgradeMedallion { height:101px; }
    .creatureMedallion--detail {
        width:88px;
        height:88px;
        --medallion-scale:1.30;
        --medallion-core-top:3px;
    }
    .creatureUpgradeCombatStats {
        width:108px;
        margin-top:6px;
    }
    .creatureUpgradeCombatStats > span {
        min-height:20px;
        padding:3px 5px;
    }
    .creatureUpgradePrimaryIcons,
    .creatureUpgradeTraitTags {
        grid-template-columns:repeat(3,25px);
        width:80px;
        gap:3px;
    }
    .creatureUpgradePrimaryIcons { margin-top:14px; }
    .creatureUpgradeTraitTags { margin-top:12px; }
    .creatureUpgradeTag { width:25px; height:25px; }
    .creatureUpgradeTag img { width:22px; height:22px; }
    .creatureUpgradePowerLine strong { font-size:15px; }
}

/* Keep the validated 130 / 153 / 96 proportions on narrow panels without
   changing the header composition. The container query reacts to the actual
   creature panel width (not only to the viewport), which also covers WebView. */
.creatureUpgradePanelShell {
    container-type:inline-size;
}

@container (max-width:424px) {
    .creatureUpgradeIdentity {
        grid-template-columns:
            minmax(0,130fr)
            minmax(0,153fr)
            minmax(0,96fr);
        grid-template-rows:20px 55px 30px;
        column-gap:7px;
        row-gap:4px;
        padding:7px;
    }

    .creatureUpgradeCombatStats {
        width:100%;
        min-width:0;
    }

    .creatureUpgradePrimaryIcons,
    .creatureUpgradeTraitTags {
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        min-width:0;
        gap:3px;
    }

    .creatureUpgradeTag {
        width:100%;
        max-width:29px;
        height:auto;
        aspect-ratio:1;
    }

    .creatureUpgradeTag img {
        width:86%;
        height:86%;
    }
}

/* Glyphes — interface compacte validée sous les onglets. */
.creatureGlyphWorkspace {
    display:grid;
    grid-template-columns:52% 48%;
    min-height:190px;
    margin:0 -1px;
    border-bottom:1px solid rgba(104,192,228,.22);
}
.creatureGlyphEquippedPanel {
    min-width:0;
    padding:8px 6px 7px 8px;
    border-right:1px solid rgba(104,192,228,.22);
}
.creatureGlyphEquippedHeader {
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:5px;
    color:#89dcf5;
    font-size:10px;
    font-weight:900;
    letter-spacing:.035em;
}
.creatureGlyphEquippedHeader strong,
.creatureGlyphBagTitle strong {
    display:inline-grid;
    place-items:center;
    min-width:27px;
    height:23px;
    padding:0 6px;
    border-radius:999px;
    background:#15516d;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:0;
}
.creatureGlyphSlots {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    width:100%;
    margin:0 0 8px;
    justify-items:center;
}
.creatureGlyphSlot {
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    max-width:58px;
    min-height:0;
    aspect-ratio:1;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    overflow:visible;
}
.creatureGlyphSlot::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    opacity:.72;
    pointer-events:none;
}
.creatureGlyphSlot[data-glyph-shape='hex']::before { background-image:url('/img/ui/runes/rune-hole-empty-hex.png'); }
.creatureGlyphSlot[data-glyph-shape='square']::before { background-image:url('/img/ui/runes/rune-hole-empty-square.png'); }
.creatureGlyphSlot[data-glyph-shape='leaf']::before { background-image:url('/img/ui/runes/rune-hole-empty-leaf.png'); }
.creatureGlyphSlot:not(:disabled) { cursor:pointer; }
.creatureGlyphSlot.is-selected::before {
    filter:brightness(1.2) drop-shadow(0 0 5px rgba(112,230,255,.65));
}
.creatureGlyphSlot.is-equipped::before { opacity:1; }
.creatureGlyphSlot.is-glyph-selected::before {
    filter:brightness(1.12) drop-shadow(0 0 5px rgba(112,230,255,.52));
}
.creatureGlyphSlot .glyphVisual--compact {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    max-width:58px;
    max-height:58px;
}
.creatureGlyphEmpty,
.creatureGlyphSlotStat { display:none; }
.glyphVisual {
    position:relative;
    display:inline-block;
    width:58px;
    height:58px;
    flex:0 0 auto;
}
.glyphVisual--compact { width:58px; height:58px; }
.glyphVisualBase,
.glyphVisualSet {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
}
.glyphVisualBase { z-index:1; }
.glyphVisualSet {
    z-index:2;
    transform:translate(var(--glyph-set-shift-x, 0), var(--glyph-set-shift-y, 0));
}
/* Recentrage visuel par set ET par forme.
   Clés historiques : hex = losange, square = triangle, leaf = rond.
   Chaque couple peut être retouché indépendamment sans déplacer les deux autres formes. */
.glyphVisual[data-glyph-shape='hex'][data-glyph-set='destruction'] { --glyph-set-shift-x:1%; --glyph-set-shift-y:-2%; }
.glyphVisual[data-glyph-shape='square'][data-glyph-set='destruction'] { --glyph-set-shift-x:1%; --glyph-set-shift-y:12%; }
.glyphVisual[data-glyph-shape='leaf'][data-glyph-set='destruction'] { --glyph-set-shift-x:1%; --glyph-set-shift-y:-1%; }

.glyphVisual[data-glyph-shape='hex'][data-glyph-set='force'] { --glyph-set-shift-x:0%; --glyph-set-shift-y:-3%; }
.glyphVisual[data-glyph-shape='square'][data-glyph-set='force'] { --glyph-set-shift-x:0%; --glyph-set-shift-y:9%; }
.glyphVisual[data-glyph-shape='leaf'][data-glyph-set='force'] { --glyph-set-shift-x:0%; --glyph-set-shift-y:-1%; }

.glyphVisual[data-glyph-shape='hex'][data-glyph-set='frenzy'] { --glyph-set-shift-x:0%; --glyph-set-shift-y:-4%; }
.glyphVisual[data-glyph-shape='square'][data-glyph-set='frenzy'] { --glyph-set-shift-x:0%; --glyph-set-shift-y:11%; }
.glyphVisual[data-glyph-shape='leaf'][data-glyph-set='frenzy'] { --glyph-set-shift-x:0%; --glyph-set-shift-y:-1%; }

.glyphVisual[data-glyph-shape='hex'][data-glyph-set='haste'] { --glyph-set-shift-x:3%; --glyph-set-shift-y:-2%; }
.glyphVisual[data-glyph-shape='square'][data-glyph-set='haste'] { --glyph-set-shift-x:2%; --glyph-set-shift-y:12%; }
.glyphVisual[data-glyph-shape='leaf'][data-glyph-set='haste'] { --glyph-set-shift-x:2%; --glyph-set-shift-y:-1%; }
/* Forme triangle : réduire légèrement l'icône de set pour laisser respirer la silhouette. */
.glyphVisual[data-glyph-shape='square'] .glyphVisualSet {
    width:80%;
    height:80%;
    left:10%;
    top:8%;
}
.creatureGlyphLevelBadge {
    position:absolute;
    right:-1px;
    bottom:0;
    z-index:4;
    display:grid;
    place-items:center;
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:999px;
    background:#02080c;
    color:#fff;
    font-size:8px;
    font-weight:900;
    line-height:1;
    box-shadow:0 1px 3px rgba(0,0,0,.55);
}
.creatureGlyphBonusBlock {
    min-height:37px;
    padding-top:5px;
    border-top:1px solid rgba(104,192,228,.18);
}
.creatureGlyphBonusTitle {
    display:block;
    margin-bottom:3px;
    color:#82d7f1;
    font-size:8px;
    font-weight:800;
}
.creatureGlyphBonuses {
    display:grid;
    gap:2px;
}
.creatureGlyphBonusRow {
    display:grid;
    grid-template-columns:17px minmax(0,1fr) auto;
    align-items:center;
    gap:4px;
    min-height:20px;
    font-size:10px;
    font-weight:900;
}
.creatureGlyphBonusRow img,
.creatureGlyphStatIcon {
    width:15px;
    height:15px;
    object-fit:contain;
}
.creatureGlyphBonusRow strong { color:#fff; }
.creatureGlyphBonusRow em {
    color:#28ff63;
    font-size:14px;
    font-style:normal;
    font-weight:950;
}
.creatureGlyphBonusEmpty {
    color:#7896a4;
    font-size:8px;
}

.creatureGlyphDetail {
    position:relative;
    min-width:0;
    padding:13px 7px 7px;
    background:rgba(2,27,42,.36);
}
.creatureGlyphDetailHandle {
    position:absolute;
    top:4px;
    left:50%;
    width:34px;
    height:2px;
    border-radius:999px;
    background:rgba(123,184,207,.5);
    transform:translateX(-50%);
}
.creatureGlyphDetailClear {
    position:absolute;
    top:8px;
    right:6px;
    z-index:3;
    width:24px;
    height:24px;
    padding:0;
    border:1px solid rgba(88,196,232,.42);
    border-radius:7px;
    background:rgba(5,55,76,.72);
    color:#8fe8ff;
    font-size:15px;
    line-height:20px;
}
.creatureGlyphDetailTop {
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-height:60px;
    padding-right:22px;
}
.creatureGlyphDetailVisual {
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
}
.creatureGlyphDetailVisual .glyphVisual { width:58px; height:58px; }
.creatureGlyphDetailMeta {
    min-width:0;
    display:grid;
    justify-items:start;
    gap:2px;
}
.creatureGlyphRarityBadge {
    max-width:100%;
    padding:1px 5px;
    border:1px solid #d4b21e;
    border-radius:999px;
    color:#ffdf42;
    font-size:7px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.creatureGlyphRarityBadge[data-rarity='dark'] { border-color:#7d7d85; color:#b9b9c2; }
/* Convention visuelle Glyphes : Commun blanc, Peu commun bleu, Rare vert,
   Épique jaune, Légendaire violet. Les assets set-* suivent la même échelle. */
.creatureGlyphRarityBadge[data-rarity='legendary'] { border-color:#b14eea; color:#e391ff; }
.creatureGlyphRarityBadge[data-rarity='epic'] { border-color:#e0ad20; color:#ffd75a; }
.creatureGlyphRarityBadge[data-rarity='rare'] { border-color:#35c95d; color:#8df0a5; }
.creatureGlyphRarityBadge[data-rarity='uncommon'] { border-color:#2c78d7; color:#76b3ff; }
.creatureGlyphRarityBadge[data-rarity='common'] { border-color:#b8bec7; color:#fff; }
.creatureGlyphDetailMeta small {
    color:#91bad0;
    font-size:7px;
    font-weight:800;
}
.creatureGlyphUpgradeStars {
    display:flex;
    gap:1px;
    min-height:12px;
    font-size:11px;
    line-height:1;
}
.creatureGlyphUpgradeStars .is-on { color:#ffbf00; text-shadow:0 1px 1px rgba(0,0,0,.45); }
.creatureGlyphUpgradeStars .is-off { color:#34434c; }
.creatureGlyphDetailMain {
    margin-top:6px;
}
.creatureGlyphDetailMainRow,
.creatureGlyphDetailSubRow {
    display:grid;
    grid-template-columns:16px minmax(0,1fr) auto;
    align-items:center;
    gap:3px;
    min-width:0;
    border:1px solid rgba(86,174,206,.18);
    border-radius:6px;
    background:rgba(1,24,37,.62);
    color:#f7fbfd;
    font-weight:900;
}
.creatureGlyphDetailMainRow {
    min-height:27px;
    padding:3px 6px;
    font-size:9px;
}
.creatureGlyphDetailMainRow strong { color:#ffd25c; font-size:10px; }
.creatureGlyphDetailSubs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
    margin-top:4px;
}
.creatureGlyphDetailSubRow {
    min-height:23px;
    padding:2px 4px;
    font-size:7px;
}
.creatureGlyphDetailSubRow strong { font-size:7px; }
.creatureGlyphDetailActions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:3px;
    margin-top:6px;
}
.creatureGlyphSaleNotice {
    position:absolute;
    z-index:5;
    left:50%;
    bottom:2px;
    max-width:calc(100% - 12px);
    margin:0;
    padding:3px 7px;
    border:1px solid rgba(63,224,195,.58);
    border-radius:999px;
    background:rgba(3,54,69,.94);
    box-shadow:0 2px 7px rgba(0,0,0,.28);
    color:#8fffd0;
    font:800 8px/1.15 "Poppins",sans-serif;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
    transform:translate(-50%, 55%);
}
.creatureGlyphSaleNotice[hidden] { display:none; }
.creatureGlyphAction {
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    min-width:0;
    aspect-ratio:100/74;
    padding:0;
    border:0;
    background-color:transparent;
    background-position:center;
    background-repeat:no-repeat;
    background-size:100% 100%;
    overflow:visible;
}
.creatureGlyphAction--upgrade { background-image:url('/img/ui/glyphs/actions/btn-blue.png'); }
.creatureGlyphAction--equip { background-image:url('/img/ui/glyphs/actions/btn-orange.png'); }
.creatureGlyphAction--sell { background-image:none; }
.creatureGlyphAction img {
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    width:58%;
    height:58%;
    object-fit:contain;
    transform:translate(-50%,-61%);
    pointer-events:none;
}
.creatureGlyphAction img.creatureGlyphDestroyButtonImage {
    width:100%;
    height:100%;
    object-fit:fill;
    transform:translate(-50%,-50%);
}
.creatureGlyphAction:disabled { opacity:.48; filter:saturate(.65); }
.creatureGlyphAction:not(:disabled) { cursor:pointer; }

.creatureGlyphBagHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin:0;
    padding:8px 8px 4px;
    color:#8ddbf4;
    font-weight:900;
}
.creatureGlyphBagTitle {
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
}
.creatureGlyphBagTitle span {
    font-size:11px;
    letter-spacing:.035em;
    white-space:nowrap;
}
.creatureGlyphBagSort {
    flex:0 0 auto;
    padding:4px 6px;
    border:1px solid rgba(74,178,216,.3);
    border-radius:7px;
    background:rgba(4,47,66,.48);
    color:#8bd8ef;
    font-size:7px;
    white-space:nowrap;
}
.creatureGlyphFilterRow {
    display:flex;
    align-items:center;
    gap:4px;
    padding:0 8px;
    overflow-x:auto;
    scrollbar-width:none;
}
.creatureGlyphFilterRow::-webkit-scrollbar { display:none; }
.creatureGlyphFilterRow--stats { margin-bottom:4px; }
.creatureGlyphFilter {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:25px;
    padding:3px 7px;
    border:1px solid rgba(76,177,214,.32);
    border-radius:8px;
    background:rgba(4,47,66,.62);
    color:#a9d3e5;
    font-size:7px;
    font-weight:900;
}
.creatureGlyphFilter img {
    width:12px;
    height:12px;
    object-fit:contain;
}
.creatureGlyphFilter.is-active {
    border-color:#e9b337;
    background:linear-gradient(#c78b16,#9c6407);
    color:#fff;
}
.creatureGlyphFilterRow--sets { margin-bottom:4px; }
.creatureGlyphSetFilter {
    flex:0 0 auto;
    min-width:33px;
    min-height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 7px;
    border:1px solid rgba(76,177,214,.32);
    border-radius:8px;
    background:rgba(4,47,66,.62);
    color:#a9d3e5;
}
.creatureGlyphSetFilter img {
    width:18px;
    height:18px;
    object-fit:contain;
}
.creatureGlyphSetFilter.is-active {
    border-color:#e9b337;
    background:linear-gradient(#c78b16,#9c6407);
    color:#fff;
    box-shadow:none;
}
.creatureGlyphFilterGroupGap {
    flex:0 0 4px;
}
.creatureGlyphInlineFilterGroup {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.creatureGlyphShapeFilter {
    flex:0 0 auto;
    min-width:33px;
    min-height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:2px 6px;
    border:1px solid rgba(76,177,214,.32);
    border-radius:8px;
    background:rgba(4,47,66,.62);
    color:#a9d3e5;
}
.creatureGlyphShapeFilter img {
    width:19px;
    height:19px;
    object-fit:contain;
}
.creatureGlyphShapeFilter.is-active {
    border-color:#e9b337;
    background:linear-gradient(#c78b16,#9c6407);
    color:#fff;
    box-shadow:none;
}
.creatureGlyphFilterRow--rarities { margin-bottom:4px; }
.creatureGlyphRarityFilter {
    flex:0 0 auto;
    min-width:33px;
    min-height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 7px;
    border:1px solid rgba(76,177,214,.32);
    border-radius:8px;
    background:rgba(4,47,66,.62);
    color:#a9d3e5;
    font-size:7px;
    font-weight:900;
}
.creatureGlyphRarityFilter.is-active {
    border-color:#e9b337;
    background:linear-gradient(#c78b16,#9c6407);
    color:#fff;
    box-shadow:none;
}
.creatureGlyphRaritySwatch {
    display:block;
    width:12px;
    height:12px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.12);
}
.creatureGlyphRaritySwatch[data-rarity='common'] { background:#f3f5f7; }
.creatureGlyphRaritySwatch[data-rarity='uncommon'] { background:#2c78d7; }
.creatureGlyphRaritySwatch[data-rarity='rare'] { background:#35c95d; }
.creatureGlyphRaritySwatch[data-rarity='epic'] { background:#e0ad20; }
.creatureGlyphRaritySwatch[data-rarity='legendary'] { background:#b14eea; }
.creatureGlyphRaritySwatch[data-rarity='dark'] {
    border-color:#8d8d98;
    background:#282a31;
}
.creatureGlyphBag {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    min-height:0;
    padding:3px 8px 9px;
    overflow:visible;
}
.creatureGlyphBagItem {
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    aspect-ratio:1;
    padding:0;
    border:1px solid transparent;
    border-radius:8px;
    background:rgba(3,28,43,.34);
    color:#fff;
    overflow:visible;
}
.creatureGlyphBagItem:not(:disabled) { cursor:pointer; }
.creatureGlyphBagItem.is-selected {
    border-color:#57e5ff;
    box-shadow:inset 0 0 0 1px rgba(87,229,255,.22),0 0 8px rgba(87,229,255,.12);
}
.creatureGlyphBagItem .glyphVisual {
    width:min(58px,100%);
    height:min(58px,100%);
}
.creatureGlyphBagItem .creatureGlyphLevelBadge {
    right:1px;
    bottom:1px;
}
.creatureGlyphBagEmpty {
    grid-column:1/-1;
    padding:15px 8px;
    color:#7797a6;
    font-size:9px;
    text-align:center;
}
.creatureGlyphBagItem strong,
.creatureGlyphBagItem small,
.creatureGlyphBagSubs { display:none; }
#creatureGlyphHint { display:none !important; }

@media (max-width:390px) {
    .creatureGlyphWorkspace { grid-template-columns:52% 48%; }
    .creatureGlyphEquippedPanel { padding-left:6px; padding-right:4px; }
    .creatureGlyphSlot { max-width:58px; }
    .creatureGlyphDetail { padding-left:5px; padding-right:5px; }
    .creatureGlyphDetailTop { gap:4px; }
    .creatureGlyphDetailMainRow { padding-inline:4px; }
    .creatureGlyphDetailSubs { gap:2px; }
    .creatureGlyphDetailSubRow { padding-inline:3px; }
    .creatureGlyphAction img { width:56%; height:56%; }
    .creatureGlyphBag { gap:3px; padding-inline:6px; }
    .creatureGlyphBagHeader,
    .creatureGlyphFilterRow { padding-left:6px; padding-right:6px; }
}


/* Glyphes compact UI — selection, bag viewport and scroll polish. */
.creatureGlyphSlot:focus,
.creatureGlyphSlot:focus-visible {
    outline: none;
    box-shadow: none;
}

.creatureGlyphDetailEmpty {
    display: none;
    margin: 0;
    padding: 20px 10px;
    color: #7fa6b8;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.creatureGlyphDetail.is-empty {
    display: grid;
    place-items: center;
    min-height: 178px;
    padding: 8px;
}
.creatureGlyphDetail.is-empty .creatureGlyphDetailEmpty { display: block; }
.creatureGlyphDetail.is-empty .creatureGlyphDetailHandle,
.creatureGlyphDetail.is-empty .creatureGlyphDetailClear,
.creatureGlyphDetail.is-empty .creatureGlyphDetailTop,
.creatureGlyphDetail.is-empty .creatureGlyphDetailMain,
.creatureGlyphDetail.is-empty .creatureGlyphDetailSubs,
.creatureGlyphDetail.is-empty .creatureGlyphDetailActions { display: none; }

.creatureGlyphLevelBadge {
    right: 5px;
    bottom: 6px;
}
.creatureGlyphBagItem .creatureGlyphLevelBadge {
    right: 5px;
    bottom: 6px;
}

.creatureGlyphBagHeader {
    justify-content: flex-start;
}
.creatureGlyphBagSort { display: none; }

.creatureGlyphBag {
    grid-template-columns: repeat(6, 58px);
    grid-auto-rows: 58px;
    justify-content: space-between;
    align-content: start;
    gap: 3px 0;
    max-height: 129px;
    padding: 3px 6px 7px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(76, 165, 198, .72) rgba(2, 25, 39, .3);
}
.creatureGlyphBag::-webkit-scrollbar { width: 5px; }
.creatureGlyphBag::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(2, 25, 39, .3);
}
.creatureGlyphBag::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(76, 165, 198, .72);
}
.creatureGlyphBag::-webkit-scrollbar-thumb:hover {
    background: rgba(95, 194, 228, .9);
}
.creatureGlyphBagItem {
    width: 58px;
    height: 58px;
    aspect-ratio: auto;
}
.creatureGlyphBagItem .glyphVisual {
    width: 58px;
    height: 58px;
}

/* The dialog scroll is vertical only; keep it narrow and visually integrated. */
.creatureUpgradePanelBody {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(76, 165, 198, .68) rgba(2, 25, 39, .22);
}
.creatureUpgradePanelBody::-webkit-scrollbar { width: 5px; }
.creatureUpgradePanelBody::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(2, 25, 39, .22);
}
.creatureUpgradePanelBody::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(76, 165, 198, .68);
}
.creatureUpgradePanelBody::-webkit-scrollbar-thumb:hover {
    background: rgba(95, 194, 228, .9);
}

@media (max-width: 390px) {
    .creatureGlyphBag {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px 1px;
        padding-inline: 5px;
    }
    .creatureGlyphBagItem {
        width: 100%;
        max-width: 58px;
        justify-self: center;
    }
    .creatureGlyphBagItem .glyphVisual {
        width: min(58px, 100%);
        height: min(58px, 100%);
    }
}

/* Glyph UI: neutralize Bootstrap/Reboot browser focus ring.
   Selection/focus feedback is handled by the component's own visual states. */
[data-creature-upgrade-panel="glyphs"] button:focus,
[data-creature-upgrade-panel="glyphs"] button:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Glyph equip flow — automatic free slot, compact replacement choice when both slots are occupied. */
.creatureGlyphReplaceModal[hidden] { display:none !important; }
.creatureGlyphReplaceModal {
    position:fixed;
    inset:0;
    z-index:1400;
    display:grid;
    place-items:center;
    padding:12px;
}
.creatureGlyphReplaceBackdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(0,8,14,.62);
}
.creatureGlyphReplaceDialog {
    position:relative;
    z-index:1;
    width:min(286px,calc(100vw - 24px));
    padding:8px;
    border:1px solid rgba(91,193,229,.5);
    border-radius:11px;
    background:linear-gradient(180deg,rgba(7,47,67,.98),rgba(2,27,42,.99));
    box-shadow:0 12px 30px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.025);
    color:#fff;
}
.creatureGlyphReplaceHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:24px;
    margin-bottom:6px;
}
.creatureGlyphReplaceHeader strong {
    color:#dff8ff;
    font-size:10px;
    font-weight:900;
}
.creatureGlyphReplaceClose {
    flex:0 0 auto;
    width:24px;
    height:24px;
    padding:0 0 2px;
    border:1px solid rgba(91,193,229,.42);
    border-radius:7px;
    background:rgba(4,55,76,.72);
    color:#8fe8ff;
    font-size:16px;
    line-height:1;
}
.creatureGlyphReplaceIncoming {
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-height:64px;
    padding:3px 5px;
    border:1px solid rgba(84,174,206,.17);
    border-radius:8px;
    background:rgba(1,22,34,.48);
}
.creatureGlyphReplaceIncomingVisual,
.creatureGlyphReplaceChoiceVisual {
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
}
.creatureGlyphReplaceIncomingVisual .glyphVisual,
.creatureGlyphReplaceChoiceVisual .glyphVisual {
    width:58px;
    height:58px;
}
.creatureGlyphReplaceIncomingVisual .creatureGlyphLevelBadge,
.creatureGlyphReplaceChoiceVisual .creatureGlyphLevelBadge {
    right:3px;
    bottom:4px;
}
.creatureGlyphReplaceIncomingText {
    display:grid;
    gap:2px;
    min-width:0;
}
.creatureGlyphReplaceIncomingText small {
    color:#7fcde8;
    font-size:7px;
    font-weight:800;
    text-transform:uppercase;
}
.creatureGlyphReplaceIncomingText strong {
    overflow:hidden;
    color:#ffd25c;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.creatureGlyphReplaceChoices {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin-top:6px;
}
.creatureGlyphReplaceChoice {
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    align-items:center;
    gap:4px;
    min-width:0;
    min-height:66px;
    padding:3px 4px;
    border:1px solid rgba(88,190,226,.3);
    border-radius:8px;
    background:rgba(4,42,59,.82);
    color:#fff;
    text-align:left;
}
.creatureGlyphReplaceChoice:not(:disabled) { cursor:pointer; }
.creatureGlyphReplaceChoice:not(:disabled):hover {
    border-color:#68dbf7;
    background:rgba(7,59,79,.94);
}
.creatureGlyphReplaceChoice:disabled { opacity:.55; }
.creatureGlyphReplaceChoiceMeta {
    display:grid;
    gap:2px;
    min-width:0;
}
.creatureGlyphReplaceChoiceMeta strong {
    overflow:hidden;
    color:#fff;
    font-size:7px;
    font-weight:900;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.creatureGlyphReplaceChoiceMeta small {
    color:#86bed3;
    font-size:7px;
    font-weight:800;
}
@media (max-width:390px) {
    .creatureGlyphReplaceDialog { width:min(276px,calc(100vw - 18px)); }
    .creatureGlyphReplaceChoice {
        grid-template-columns:52px minmax(0,1fr);
        min-height:60px;
        padding-inline:3px;
    }
    .creatureGlyphReplaceChoiceVisual,
    .creatureGlyphReplaceChoiceVisual .glyphVisual {
        width:52px;
        height:52px;
    }
}


/* Creature header stats — keep validated layout, add stat icons + authoritative glyph contribution. */
.creatureUpgradeCombatStats > span {
    display:grid;
    grid-template-columns:13px auto minmax(0,1fr) auto;
    align-items:center;
    justify-content:initial;
    column-gap:3px;
}
.creatureUpgradeCombatStatIcon {
    display:block;
    width:13px;
    height:13px;
    object-fit:contain;
}
.creatureUpgradeCombatStats > span > strong {
    min-width:0;
    text-align:right;
}
.creatureUpgradeCombatGlyphGain {
    color:#25e96d;
    font-size:7.5px;
    font-style:normal;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.creatureUpgradeCombatGlyphGain[hidden] { display:none !important; }
@container (max-width:424px) {
    .creatureUpgradeCombatStats > span {
        grid-template-columns:11px auto minmax(0,1fr) auto;
        column-gap:2px;
        padding-inline:4px;
    }
    .creatureUpgradeCombatStatIcon { width:11px; height:11px; }
    .creatureUpgradeCombatGlyphGain { font-size:6.5px; }
}

/* =========================================================
   Glyphes — responsive mobile/WebView polish
   The creature panel is the sizing container, so these rules follow the
   actual modal width instead of relying only on the device viewport.
   ========================================================= */
@container (max-width: 424px) {
    .creatureGlyphWorkspace {
        grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    }

    .creatureGlyphEquippedPanel {
        padding:7px 5px 6px 6px;
    }

    .creatureGlyphEquippedHeader {
        gap:5px;
        margin-bottom:4px;
        font-size:9px;
    }

    .creatureGlyphEquippedHeader strong,
    .creatureGlyphBagTitle strong {
        min-width:25px;
        height:21px;
        padding-inline:5px;
        font-size:9px;
    }

    .creatureGlyphSlots {
        gap:2px;
        margin-bottom:7px;
    }

    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:54px;
        max-height:54px;
    }

    .creatureGlyphBonusRow {
        grid-template-columns:15px minmax(0,1fr) auto;
        gap:3px;
    }

    .creatureGlyphBonusRow img,
    .creatureGlyphStatIcon {
        width:14px;
        height:14px;
    }

    .creatureGlyphBonusRow em {
        font-size:12px;
    }

    .creatureGlyphDetail {
        padding:11px 5px 6px;
    }

    .creatureGlyphDetailTop {
        grid-template-columns:52px minmax(0,1fr);
        gap:4px;
        min-height:54px;
        padding-right:20px;
    }

    .creatureGlyphDetailVisual,
    .creatureGlyphDetailVisual .glyphVisual {
        width:52px;
        height:52px;
    }

    .creatureGlyphDetailMain {
        margin-top:5px;
    }

    .creatureGlyphDetailMainRow {
        min-height:26px;
        padding-inline:4px;
    }

    .creatureGlyphDetailSubs {
        gap:2px;
        margin-top:3px;
    }

    .creatureGlyphDetailSubRow {
        grid-template-columns:14px minmax(0,1fr) auto;
        min-height:22px;
        gap:2px;
        padding-inline:3px;
    }

    .creatureGlyphDetailActions {
        gap:2px;
        margin-top:5px;
    }

    .creatureGlyphBagHeader {
        padding:7px 6px 4px;
    }

    .creatureGlyphBagTitle {
        gap:6px;
    }

    .creatureGlyphBagTitle span {
        font-size:10px;
    }

    .creatureGlyphFilterRow {
        gap:3px;
        padding-inline:6px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
    }

    .creatureGlyphFilter,
    .creatureGlyphSetFilter,
    .creatureGlyphShapeFilter,
    .creatureGlyphRarityFilter {
        min-height:24px;
        padding:3px 6px;
    }

    /* Five real columns on mobile: no clipped sixth glyph at the right edge. */
    .creatureGlyphBag {
        grid-template-columns:repeat(5,minmax(0,1fr));
        grid-auto-rows:auto;
        justify-content:stretch;
        gap:4px 3px;
        max-height:132px;
        padding:3px 6px 7px;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y;
    }

    .creatureGlyphBagItem {
        width:100%;
        max-width:58px;
        height:auto;
        aspect-ratio:1;
        justify-self:center;
    }

    .creatureGlyphBagItem .glyphVisual {
        width:min(58px,100%);
        height:auto;
        aspect-ratio:1;
    }
}

@container (max-width: 350px) {
    .creatureGlyphWorkspace {
        grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
    }

    .creatureGlyphEquippedPanel {
        padding-inline:4px;
    }

    .creatureGlyphDetail {
        padding-inline:4px;
    }

    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:50px;
        max-height:50px;
    }

    .creatureGlyphDetailTop {
        grid-template-columns:48px minmax(0,1fr);
    }

    .creatureGlyphDetailVisual,
    .creatureGlyphDetailVisual .glyphVisual {
        width:48px;
        height:48px;
    }

    .creatureGlyphBag {
        gap:3px 2px;
        padding-inline:5px;
    }

    .creatureGlyphBagItem {
        max-width:52px;
    }

    .creatureGlyphBagItem .glyphVisual {
        width:min(52px,100%);
    }
}


/* =========================================================
   Glyphes — comparaison compacte équipée / sac
   Conserve deux cartes côte à côte dans la fiche ~500 px et
   organise les six emplacements en 3 lignes par forme.
   ========================================================= */
.creatureGlyphWorkspace {
    grid-template-columns:minmax(138px,35%) minmax(0,65%);
    min-height:214px;
}
.creatureGlyphEquippedPanel {
    padding:7px 5px 6px 7px;
}
.creatureGlyphSlots {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:1px 2px;
    margin-bottom:6px;
}
.creatureGlyphSlot,
.creatureGlyphSlot .glyphVisual--compact {
    max-width:55px;
    max-height:55px;
}
.creatureGlyphSlot.is-selected::before,
.creatureGlyphSlot.is-glyph-selected::before {
    filter:brightness(1.18) drop-shadow(0 0 5px rgba(88,226,255,.72));
}

.creatureGlyphComparePanel {
    position:relative;
    min-width:0;
    padding:5px 5px 7px;
    background:rgba(2,27,42,.36);
}
.creatureGlyphCompareHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    min-height:16px;
    margin-bottom:3px;
    color:#8ee9ff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.035em;
}
.creatureGlyphCompareHeader small {
    min-width:0;
    color:#688c9d;
    font-size:6px;
    font-weight:800;
    letter-spacing:0;
    text-align:right;
    white-space:nowrap;
}
.creatureGlyphCompareCards {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    min-width:0;
}
.creatureGlyphCompareCard {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:188px;
    padding:6px 4px 4px;
    border:1px solid rgba(74,184,220,.34);
    border-top:2px solid #45cde9;
    border-radius:8px;
    background:rgba(1,22,36,.56);
    overflow:hidden;
}
.creatureGlyphCompareCard--bag {
    border-color:rgba(179,76,232,.32);
    border-top-color:#b34ce8;
}
.creatureGlyphCompareCardTitle {
    display:block;
    margin-bottom:2px;
    color:#8de9ff;
    font-size:6.5px;
    font-weight:950;
    text-align:center;
    letter-spacing:.035em;
}
.creatureGlyphCompareCard--bag .creatureGlyphCompareCardTitle { color:#e895ff; }
.creatureGlyphCompareTop {
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    gap:2px;
    min-height:49px;
}
.creatureGlyphCompareVisual,
.creatureGlyphCompareVisual .glyphVisual {
    width:46px;
    height:46px;
}
.creatureGlyphCompareMeta {
    display:grid;
    min-width:0;
    justify-items:start;
    align-content:center;
    gap:1px;
}
.creatureGlyphCompareMeta .creatureGlyphRarityBadge {
    max-width:100%;
    padding-inline:4px;
    font-size:5.7px;
}
.creatureGlyphCompareMeta small {
    color:#8fb5c7;
    font-size:5.7px;
    font-weight:800;
    white-space:nowrap;
}
.creatureGlyphCompareMeta .creatureGlyphUpgradeStars {
    min-height:8px;
    font-size:7px;
}
.creatureGlyphCompareStats {
    display:grid;
    gap:2px;
    min-width:0;
    margin-top:3px;
}
.creatureGlyphCompareStatRow {
    display:grid;
    grid-template-columns:10px minmax(21px,1fr) auto;
    align-items:center;
    gap:2px;
    min-width:0;
    min-height:18px;
    padding:1px 3px;
    border:1px solid rgba(86,174,206,.16);
    border-radius:5px;
    background:rgba(1,22,34,.66);
    color:#91afbd;
    font-size:5.9px;
    font-weight:850;
}
.creatureGlyphCompareCard--bag .creatureGlyphCompareStatRow {
    grid-template-columns:10px minmax(19px,1fr) auto auto;
}
.creatureGlyphCompareStatRow .creatureGlyphStatIcon {
    width:9px;
    height:9px;
}
.creatureGlyphCompareStatRow > span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureGlyphCompareStatName {
    display:grid;
    align-content:center;
    line-height:1.05;
}
.creatureGlyphCompareStatName small {
    display:block;
    margin-top:1px;
    overflow:hidden;
    color:#648696;
    font-size:.72em;
    font-weight:750;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureGlyphCompareStatRow.is-main {
    border-color:rgba(118,210,228,.24);
    background:rgba(20,96,119,.18);
}
.creatureGlyphCompareStatRow.is-main .creatureGlyphCompareStatName small {
    color:#bfa65e;
}
.creatureGlyphCompareStatRow strong {
    color:#f5fbff;
    font-size:6.4px;
    font-weight:950;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.creatureGlyphCompareStatRow.is-main strong { color:#ffd05d; }
.creatureGlyphCompareStatRow em {
    min-width:22px;
    font-size:5.8px;
    font-style:normal;
    font-weight:950;
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.creatureGlyphCompareStatRow em.is-positive { color:#25ee6f; }
.creatureGlyphCompareStatRow em.is-negative { color:#ff5d5d; }
.creatureGlyphCompareStatRow em.is-neutral { color:#7898a8; }
.creatureGlyphCompareActions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:end;
    gap:2px;
    margin-top:auto;
    padding-top:4px;
}
.creatureGlyphCompareActions .creatureGlyphAction {
    aspect-ratio:100/66;
}
.creatureGlyphCompareEmpty {
    display:none;
    margin:auto 2px;
    color:#6f94a5;
    font-size:6px;
    font-weight:750;
    line-height:1.25;
    text-align:center;
}
.creatureGlyphCompareCard.is-empty .creatureGlyphCompareEmpty { display:block; }
.creatureGlyphCompareCard.is-empty .creatureGlyphCompareTop,
.creatureGlyphCompareCard.is-empty .creatureGlyphCompareStats,
.creatureGlyphCompareCard.is-empty .creatureGlyphCompareActions { display:none; }
.creatureGlyphComparePanel .creatureGlyphSaleNotice {
    bottom:1px;
}

@container (max-width:424px) {
    .creatureGlyphWorkspace {
        grid-template-columns:minmax(126px,34%) minmax(0,66%);
    }
    .creatureGlyphEquippedPanel { padding-inline:5px 3px; }
    .creatureGlyphSlots { gap:0 1px; }
    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:50px;
        max-height:50px;
    }
    .creatureGlyphComparePanel { padding-inline:3px; }
    .creatureGlyphCompareCards { gap:3px; }
    .creatureGlyphCompareCard { padding-inline:3px; }
    .creatureGlyphCompareTop { grid-template-columns:42px minmax(0,1fr); }
    .creatureGlyphCompareVisual,
    .creatureGlyphCompareVisual .glyphVisual { width:42px; height:42px; }
    .creatureGlyphCompareStatRow { padding-inline:2px; }
    .creatureGlyphCompareCard--bag .creatureGlyphCompareStatRow {
        grid-template-columns:9px minmax(18px,1fr) auto auto;
    }
    .creatureGlyphCompareStatRow .creatureGlyphStatIcon { width:8px; height:8px; }
    .creatureGlyphCompareStatRow,
    .creatureGlyphCompareStatRow strong,
    .creatureGlyphCompareStatRow em { font-size:5.4px; }
}

@container (max-width:350px) {
    .creatureGlyphWorkspace {
        grid-template-columns:minmax(112px,33%) minmax(0,67%);
    }
    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact { max-width:46px; max-height:46px; }
    .creatureGlyphCompareHeader { font-size:7px; }
    .creatureGlyphCompareHeader small { font-size:5px; }
    .creatureGlyphCompareCard { min-height:180px; padding-inline:2px; }
    .creatureGlyphCompareTop { grid-template-columns:38px minmax(0,1fr); }
    .creatureGlyphCompareVisual,
    .creatureGlyphCompareVisual .glyphVisual { width:38px; height:38px; }
    .creatureGlyphCompareCard--bag .creatureGlyphCompareStatRow {
        grid-template-columns:8px minmax(15px,1fr) auto auto;
        gap:1px;
    }
    .creatureGlyphCompareStatRow { gap:1px; padding-inline:1px; }
    .creatureGlyphCompareStatRow,
    .creatureGlyphCompareStatRow strong,
    .creatureGlyphCompareStatRow em { font-size:5px; }
}

/* =========================================================
   Glyphes — layout V2 : équipe compacte, sac conservé,
   comparaison pleine largeur et lisible sous la grille.
   ========================================================= */
.creatureGlyphWorkspace {
    display:block;
    min-height:0;
    margin:0;
    border-bottom:1px solid rgba(104,192,228,.22);
}
.creatureGlyphEquippedPanel {
    display:grid;
    grid-template-columns:minmax(0,1fr) 118px;
    grid-template-areas:
        "header bonus"
        "slots bonus";
    align-items:center;
    gap:2px 8px;
    min-width:0;
    padding:6px 8px 7px;
    border-right:0;
}
.creatureGlyphEquippedHeader {
    position:relative;
    grid-area:header;
    width:100%;
    justify-self:stretch;
    min-width:0;
    margin:0;
    padding-right:77px;
    font-size:9px;
}
.creatureGlyphEquippedHeader strong {
    min-width:25px;
    height:20px;
    padding-inline:5px;
    font-size:9px;
}
.creatureGlyphSlots {
    grid-area:slots;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:none;
    align-items:center;
    justify-items:center;
    gap:1px;
    width:100%;
    margin:0;
}
.creatureGlyphSlot,
.creatureGlyphSlot .glyphVisual--compact {
    width:100%;
    max-width:46px;
    max-height:46px;
}
.creatureGlyphBonusBlock {
    grid-area:bonus;
    align-self:stretch;
    min-width:0;
    min-height:0;
    padding:2px 0 2px 8px;
    border-top:0;
    border-left:1px solid rgba(104,192,228,.18);
}
.creatureGlyphBonusTitle {
    margin-bottom:2px;
    font-size:7px;
}
.creatureGlyphBonuses { gap:1px; }
.creatureGlyphBonusRow {
    grid-template-columns:14px minmax(0,1fr) auto;
    gap:3px;
    min-height:18px;
    font-size:8px;
}
.creatureGlyphBonusRow img { width:13px; height:13px; }
.creatureGlyphBonusRow em { font-size:10px; }
.creatureGlyphBonusEmpty { font-size:7px; }

/* Le sac et ses tris gardent leur layout existant ; seule sa séparation
   avec la comparaison est renforcée. */
.creatureGlyphBag { margin-bottom:2px; }

.creatureGlyphComparePanel {
    position:relative;
    min-width:0;
    margin:0;
    padding:7px 8px 9px;
    border-top:1px solid rgba(104,192,228,.22);
    background:rgba(2,27,42,.36);
}
.creatureGlyphCompareHeader {
    min-height:19px;
    margin-bottom:5px;
    font-size:9px;
}
.creatureGlyphCompareHeader small {
    font-size:8px;
}
.creatureGlyphCompareCards {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}
.creatureGlyphCompareCard {
    min-height:244px;
    padding:8px 7px 6px;
    border-radius:9px;
}
.creatureGlyphCompareCardTitle {
    margin-bottom:4px;
    font-size:9px;
}
.creatureGlyphCompareTop {
    grid-template-columns:62px minmax(0,1fr);
    gap:7px;
    min-height:64px;
}
.creatureGlyphCompareVisual,
.creatureGlyphCompareVisual .glyphVisual {
    width:62px;
    height:62px;
}
.creatureGlyphCompareMeta { gap:2px; }
.creatureGlyphCompareMeta .creatureGlyphRarityBadge {
    padding-inline:6px;
    font-size:8px;
}
.creatureGlyphCompareMeta small {
    font-size:8px;
}
.creatureGlyphCompareMeta .creatureGlyphUpgradeStars {
    min-height:11px;
    font-size:10px;
}
.creatureGlyphCompareStats {
    gap:4px;
    margin-top:6px;
}
.creatureGlyphCompareStatRow {
    grid-template-columns:16px minmax(36px,1fr) auto;
    gap:5px;
    min-height:25px;
    padding:3px 6px;
    border-radius:6px;
    font-size:9px;
}
.creatureGlyphCompareCard--bag .creatureGlyphCompareStatRow {
    grid-template-columns:16px minmax(34px,1fr) auto auto;
}
.creatureGlyphCompareStatRow .creatureGlyphStatIcon {
    width:14px;
    height:14px;
}
.creatureGlyphCompareStatRow strong {
    font-size:10px;
}
.creatureGlyphCompareStatRow em {
    min-width:34px;
    font-size:9px;
}
.creatureGlyphCompareActions {
    gap:5px;
    padding-top:7px;
}
.creatureGlyphCompareActions .creatureGlyphAction {
    min-height:36px;
    aspect-ratio:auto;
}
.creatureGlyphCompareEmpty {
    margin:auto 8px;
    font-size:9px;
    line-height:1.35;
}

@container (max-width:424px) {
    .creatureGlyphEquippedPanel {
        grid-template-columns:minmax(0,1fr) 102px;
        gap:2px 5px;
        padding-inline:6px;
    }
    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:42px;
        max-height:42px;
    }
    .creatureGlyphBonusBlock { padding-left:5px; }

    .creatureGlyphComparePanel { padding-inline:6px; }
    .creatureGlyphCompareCards { gap:5px; }
    .creatureGlyphCompareCard { min-height:228px; padding-inline:5px; }
    .creatureGlyphCompareTop { grid-template-columns:54px minmax(0,1fr); gap:4px; }
    .creatureGlyphCompareVisual,
    .creatureGlyphCompareVisual .glyphVisual { width:54px; height:54px; }
    .creatureGlyphCompareStatRow {
        grid-template-columns:13px minmax(28px,1fr) auto;
        gap:3px;
        min-height:23px;
        padding-inline:4px;
        font-size:8px;
    }
    .creatureGlyphCompareCard--bag .creatureGlyphCompareStatRow {
        grid-template-columns:13px minmax(27px,1fr) auto auto;
    }
    .creatureGlyphCompareStatRow .creatureGlyphStatIcon { width:12px; height:12px; }
    .creatureGlyphCompareStatRow strong { font-size:9px; }
    .creatureGlyphCompareStatRow em { min-width:29px; font-size:8px; }
}

@container (max-width:350px) {
    .creatureGlyphEquippedPanel {
        grid-template-columns:minmax(0,1fr) 86px;
        padding-inline:5px;
    }
    .creatureGlyphEquippedHeader { font-size:8px; gap:4px; }
    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:36px;
        max-height:36px;
    }
    .creatureGlyphBonusTitle { font-size:6px; }
    .creatureGlyphBonusRow { grid-template-columns:12px minmax(0,1fr) auto; font-size:7px; }
    .creatureGlyphBonusRow img { width:11px; height:11px; }
    .creatureGlyphBonusRow em { font-size:8px; }

    .creatureGlyphCompareHeader { font-size:8px; }
    .creatureGlyphCompareHeader small { font-size:7px; }
    .creatureGlyphCompareCard { min-height:218px; padding-inline:4px; }
    .creatureGlyphCompareCardTitle { font-size:8px; }
    .creatureGlyphCompareTop { grid-template-columns:48px minmax(0,1fr); gap:3px; }
    .creatureGlyphCompareVisual,
    .creatureGlyphCompareVisual .glyphVisual { width:48px; height:48px; }
    .creatureGlyphCompareMeta .creatureGlyphRarityBadge,
    .creatureGlyphCompareMeta small { font-size:7px; }
    .creatureGlyphCompareMeta .creatureGlyphUpgradeStars { font-size:8px; }
    .creatureGlyphCompareStatRow {
        grid-template-columns:11px minmax(22px,1fr) auto;
        gap:2px;
        min-height:22px;
        padding-inline:3px;
        font-size:7px;
    }
    .creatureGlyphCompareCard--bag .creatureGlyphCompareStatRow {
        grid-template-columns:11px minmax(21px,1fr) auto auto;
        gap:2px;
    }
    .creatureGlyphCompareStatRow .creatureGlyphStatIcon { width:10px; height:10px; }
    .creatureGlyphCompareStatRow strong { font-size:8px; }
    .creatureGlyphCompareStatRow em { min-width:25px; font-size:7px; }
    .creatureGlyphCompareEmpty { font-size:8px; }
}


/* =========================================================
   Glyphes — layout V2.1 : bonus plus compact, sac resserré,
   icônes équipées plus grandes et comparaison visible sans
   scrollbar globale de la fenêtre.
   ========================================================= */
.creatureGlyphEquippedPanel {
    grid-template-columns:minmax(0,1fr) 96px;
    gap:2px 6px;
    padding:6px 8px 6px;
}
.creatureGlyphSlots { gap:2px; }
.creatureGlyphSlot,
.creatureGlyphSlot .glyphVisual--compact {
    max-width:50px;
    max-height:50px;
}
.creatureGlyphBonusBlock {
    padding:1px 0 1px 6px;
}
.creatureGlyphBonusTitle {
    margin-bottom:1px;
    font-size:6.5px;
}
.creatureGlyphBonusRow {
    grid-template-columns:12px minmax(0,1fr) auto;
    gap:2px;
    min-height:16px;
    font-size:7px;
}
.creatureGlyphBonusRow img { width:11px; height:11px; }
.creatureGlyphBonusRow em { font-size:9px; }
.creatureGlyphBonusEmpty { font-size:6.5px; }

.creatureGlyphBagHeader {
    padding:6px 8px 3px;
}
.creatureGlyphBagTitle { gap:6px; }
.creatureGlyphBagTitle span { font-size:10px; }
.creatureGlyphFilterRow {
    gap:3px;
    padding:0 8px;
}
.creatureGlyphFilterRow--stats,
.creatureGlyphFilterRow--sets,
.creatureGlyphFilterRow--rarities { margin-bottom:3px; }
.creatureGlyphFilter,
.creatureGlyphSetFilter,
.creatureGlyphShapeFilter,
.creatureGlyphRarityFilter {
    min-height:22px;
    padding:2px 6px;
    border-radius:7px;
    font-size:6.5px;
}
.creatureGlyphFilter img { width:11px; height:11px; }
.creatureGlyphSetFilter,
.creatureGlyphShapeFilter,
.creatureGlyphRarityFilter { min-width:28px; }
.creatureGlyphSetFilter img { width:15px; height:15px; }
.creatureGlyphShapeFilter img { width:16px; height:16px; }
.creatureGlyphRaritySwatch { width:10px; height:10px; }
.creatureGlyphFilterGroupGap { flex-basis:2px; }
.creatureGlyphInlineFilterGroup { gap:3px; }

.creatureGlyphBag {
    grid-template-columns:repeat(6, 60px);
    grid-auto-rows:60px;
    justify-content:space-between;
    gap:2px 0;
    max-height:128px;
    padding:2px 8px 6px;
}
.creatureGlyphBagItem {
    width:60px;
    height:60px;
}
.creatureGlyphBagItem .glyphVisual {
    width:60px;
    height:60px;
}
.creatureGlyphLevelBadge {
    right:4px;
    bottom:4px;
}
.creatureGlyphBagItem .creatureGlyphLevelBadge {
    right:4px;
    bottom:4px;
}

/* Formes visuelles V2 : les clés historiques restent stables côté API
   (hex = losange, square = triangle, leaf = rond). */
.creatureGlyphSlot[data-glyph-shape='hex'] .creatureGlyphLevelBadge,
.creatureGlyphBagItem[data-glyph-shape='hex'] .creatureGlyphLevelBadge {
    right:-2px;
    bottom:-1px;
}
.creatureGlyphSlot[data-glyph-shape='square'] .creatureGlyphLevelBadge,
.creatureGlyphBagItem[data-glyph-shape='square'] .creatureGlyphLevelBadge {
    right:1px;
    bottom:-1px;
}
.creatureGlyphSlot[data-glyph-shape='leaf'] .creatureGlyphLevelBadge,
.creatureGlyphBagItem[data-glyph-shape='leaf'] .creatureGlyphLevelBadge {
    right:-1px;
    bottom:0;
}

.creatureGlyphComparePanel {
    padding:6px 8px 8px;
}
.creatureGlyphCompareHeader {
    min-height:17px;
    margin-bottom:4px;
}
.creatureGlyphCompareCards { gap:8px; }
.creatureGlyphCompareCard {
    min-height:232px;
    padding:8px 7px 6px;
}
.creatureGlyphCompareStats {
    gap:3px;
    margin-top:5px;
}
.creatureGlyphCompareStatRow {
    min-height:23px;
}
.creatureGlyphCompareActions {
    gap:4px;
    padding-top:6px;
}
.creatureGlyphCompareActions .creatureGlyphAction {
    min-height:34px;
}

@container (max-width:424px) {
    .creatureGlyphEquippedPanel {
        grid-template-columns:minmax(0,1fr) 88px;
        gap:2px 5px;
        padding-inline:6px;
    }
    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:46px;
        max-height:46px;
    }
    .creatureGlyphFilter,
    .creatureGlyphSetFilter,
    .creatureGlyphShapeFilter,
    .creatureGlyphRarityFilter {
        min-height:21px;
        padding:2px 5px;
    }
    .creatureGlyphBag {
        grid-template-columns:repeat(5,minmax(0,1fr));
        grid-auto-rows:auto;
        justify-content:stretch;
        gap:3px 2px;
        max-height:111px;
        padding:2px 6px 6px;
    }
    .creatureGlyphBagItem {
        width:100%;
        max-width:58px;
        height:auto;
        aspect-ratio:1;
        justify-self:center;
    }
    .creatureGlyphBagItem .glyphVisual {
        width:min(58px,100%);
        height:auto;
        aspect-ratio:1;
    }
    .creatureGlyphCompareCard {
        min-height:226px;
        padding-inline:6px;
    }
}

@container (max-width:350px) {
    .creatureGlyphEquippedPanel {
        grid-template-columns:minmax(0,1fr) 82px;
        padding-inline:5px;
    }
    .creatureGlyphSlot,
    .creatureGlyphSlot .glyphVisual--compact {
        max-width:43px;
        max-height:43px;
    }
    .creatureGlyphBag {
        gap:2px 1px;
        padding-inline:5px;
    }
    .creatureGlyphBagItem { max-width:52px; }
    .creatureGlyphBagItem .glyphVisual { width:min(52px,100%); }
    .creatureGlyphCompareCard { min-height:218px; }
}

/* BEST DPS mono-créature : bouton compact + résultat en popin.
   Le Worker recommande, l'application reste validée par le serveur. */
.creatureGlyphBestDpsButton {
    position:absolute;
    top:50%;
    right:0;
    flex:0 0 auto;
    min-width:70px;
    min-height:22px;
    margin:0;
    transform:translateY(-50%);
    padding:3px 8px;
    border:1px solid rgba(237,189,70,.62);
    border-radius:7px;
    background:linear-gradient(180deg,rgba(8,55,76,.96),rgba(3,34,51,.98));
    color:#ffd771;
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 1px 4px rgba(0,0,0,.28);
    font:900 7.5px/1 "Poppins",sans-serif;
    letter-spacing:.035em;
    white-space:nowrap;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureGlyphBestDpsButton:not(:disabled):hover,
.creatureGlyphBestDpsButton:not(:disabled):focus-visible {
    outline:none;
    border-color:#ffd76f;
    background:linear-gradient(180deg,rgba(12,72,96,.98),rgba(4,43,61,.99));
    filter:brightness(1.06);
}
.creatureGlyphBestDpsButton:not(:disabled):active { transform:translateY(calc(-50% + 1px)); }
.creatureGlyphBestDpsButton:disabled { cursor:default; opacity:.42; }

.creatureGlyphOptimizerModal[hidden] { display:none !important; }
.creatureGlyphOptimizerModal {
    position:fixed;
    inset:0;
    z-index:1450;
    display:grid;
    place-items:center;
    padding:12px;
}
.creatureGlyphOptimizerBackdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    background:rgba(0,8,14,.72);
}
.creatureGlyphOptimizerDialog {
    position:relative;
    z-index:1;
    display:grid;
    gap:8px;
    width:min(390px,calc(100% - 24px));
    max-height:calc(100vh - 24px);
    overflow:auto;
    padding:9px;
    border:1px solid rgba(89,192,228,.56);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(7,46,66,.995),rgba(2,26,41,.995));
    box-shadow:0 16px 38px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.025);
    color:#fff;
    overscroll-behavior:contain;
}
.creatureGlyphOptimizerHeader {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    width:100%;
    justify-self:stretch;
    align-items:center;
    gap:6px;
    min-height:26px;
    padding:0 30px 6px 0;
    border-bottom:1px solid rgba(116,201,232,.16);
}
.creatureGlyphOptimizerHeader > strong {
    color:#dff8ff;
    font:900 11px/1 "Poppins",sans-serif;
    letter-spacing:.04em;
}
.creatureGlyphOptimizerClose {
    position:absolute;
    top:9px;
    right:9px;
    width:24px;
    height:24px;
    margin:0;
    padding:0 0 2px;
    border:1px solid rgba(91,193,229,.42);
    border-radius:7px;
    background:rgba(4,55,76,.72);
    color:#8fe8ff;
    font-size:16px;
    line-height:1;
    cursor:pointer;
}
.creatureGlyphOptimizerMode {
    padding:3px 6px;
    border:1px solid rgba(94,209,142,.48);
    border-radius:999px;
    background:rgba(20,77,52,.28);
    color:#8fe0b0;
    font:900 7px/1 "Poppins",sans-serif;
    white-space:nowrap;
}
.creatureGlyphOptimizerMode[data-mode="optimized"] {
    border-color:rgba(233,177,82,.5);
    background:rgba(91,59,12,.28);
    color:#edc36f;
}
.creatureGlyphOptimizerStatus {
    display:grid;
    gap:6px;
    min-height:54px;
    place-content:center stretch;
    padding:8px 9px;
    border:1px solid rgba(84,174,206,.18);
    border-radius:8px;
    background:rgba(1,22,34,.48);
    color:#c9e9f5;
    font:800 8px/1.2 "Poppins",sans-serif;
    text-align:center;
}
.creatureGlyphOptimizerCombinations {
    display:block;
    color:rgba(201,233,245,.66);
    font:700 7px/1.1 "Poppins",sans-serif;
    letter-spacing:.02em;
}
.creatureGlyphOptimizerProgress {
    display:block;
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}
.creatureGlyphOptimizerProgress > span {
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#2d93bd,#72ddf5);
    box-shadow:0 0 8px rgba(89,211,246,.26);
    transition:width 120ms linear;
}
.creatureGlyphOptimizerOptimal {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:54px;
    padding:10px 12px;
    border:1px solid rgba(95,218,144,.5);
    border-radius:9px;
    background:linear-gradient(180deg,rgba(18,104,63,.42),rgba(7,67,41,.52));
    box-shadow:inset 0 0 0 1px rgba(190,255,215,.035);
    color:#b9f5cf;
    text-align:center;
}
.creatureGlyphOptimizerOptimal[hidden] { display:none !important; }
.creatureGlyphOptimizerOptimalCheck {
    display:grid;
    flex:0 0 24px;
    width:24px;
    height:24px;
    place-items:center;
    border:1px solid rgba(141,239,177,.58);
    border-radius:50%;
    background:rgba(47,163,91,.24);
    color:#bdf8d2;
    font:900 15px/1 "Poppins",sans-serif;
}
.creatureGlyphOptimizerOptimal strong {
    color:#c9f8da;
    font:900 9px/1.2 "Poppins",sans-serif;
    letter-spacing:.025em;
}
.creatureGlyphOptimizerPreview {
    display:grid;
    gap:8px;
}
.creatureGlyphOptimizerMetrics {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
}
.creatureGlyphOptimizerMetrics > span {
    display:grid;
    gap:3px;
    min-width:0;
    padding:6px 5px;
    border:1px solid rgba(91,193,229,.16);
    border-radius:7px;
    background:rgba(1,22,34,.52);
    text-align:center;
}
.creatureGlyphOptimizerMetrics small {
    color:#82bad0;
    font:800 6.5px/1 "Poppins",sans-serif;
    letter-spacing:.055em;
}
.creatureGlyphOptimizerMetrics strong {
    overflow:hidden;
    color:#fff2c2;
    font:900 12px/1 "Poppins",sans-serif;
    text-overflow:ellipsis;
}
.creatureGlyphOptimizerGlyphs {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    padding:5px;
    border:1px solid rgba(91,193,229,.13);
    border-radius:8px;
    background:rgba(1,18,29,.42);
}
.creatureGlyphOptimizerGlyph {
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    aspect-ratio:1;
    margin:0;
    padding:0;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    cursor:pointer;
}
.creatureGlyphOptimizerGlyph:hover,
.creatureGlyphOptimizerGlyph:focus-visible {
    outline:none;
    border-color:rgba(103,218,246,.5);
    background:rgba(8,67,88,.34);
}
.creatureGlyphOptimizerGlyph.is-selected {
    border-color:rgba(255,211,93,.72);
    background:rgba(107,70,12,.28);
    box-shadow:inset 0 0 0 1px rgba(255,231,151,.08),0 0 8px rgba(236,183,45,.12);
}
.creatureGlyphOptimizerGlyph .glyphVisual--compact {
    width:min(48px,100%);
    height:auto;
    aspect-ratio:1;
}
.creatureGlyphOptimizerGlyph .creatureGlyphLevelBadge {
    right:1px;
    bottom:1px;
    transform:scale(.78);
    transform-origin:right bottom;
}
.creatureGlyphOptimizerDetail {
    min-height:92px;
    padding:6px;
    border:1px solid rgba(91,193,229,.18);
    border-radius:8px;
    background:rgba(1,20,31,.48);
}
.creatureGlyphOptimizerDetailEmpty {
    display:grid;
    min-height:78px;
    place-items:center;
    padding:8px;
    color:#7199aa;
    font:700 8px/1.35 "Poppins",sans-serif;
    text-align:center;
}
.creatureGlyphOptimizerDetailContent {
    display:grid;
    grid-template-columns:58px minmax(78px,.7fr) minmax(0,1.3fr);
    align-items:center;
    gap:7px;
    min-width:0;
}
.creatureGlyphOptimizerDetailVisual {
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
}
.creatureGlyphOptimizerDetailVisual .glyphVisual { width:58px; height:58px; }
.creatureGlyphOptimizerDetailVisual .creatureGlyphLevelBadge { right:2px; bottom:2px; }
.creatureGlyphOptimizerDetailMeta {
    display:grid;
    align-content:center;
    gap:2px;
    min-width:0;
}
.creatureGlyphOptimizerDetailMeta > strong {
    overflow:hidden;
    color:#dff8ff;
    font:900 8px/1.15 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureGlyphOptimizerDetailMeta .creatureGlyphRarityBadge {
    justify-self:start;
    font-size:7px;
}
.creatureGlyphOptimizerDetailMeta > small {
    color:#85b8ca;
    font:800 7px/1 "Poppins",sans-serif;
}
.creatureGlyphOptimizerDetailMeta .creatureGlyphUpgradeStars { font-size:8px; }
.creatureGlyphOptimizerDetailStats {
    display:grid;
    gap:2px;
    min-width:0;
}
.creatureGlyphOptimizerDetailStats .creatureGlyphCompareStatRow {
    grid-template-columns:11px minmax(26px,1fr) auto;
    min-height:18px;
    padding:2px 4px;
    border-color:rgba(95,183,216,.13);
    background:rgba(7,49,66,.42);
}
.creatureGlyphOptimizerDetailStats .creatureGlyphCompareStatRow .creatureGlyphStatIcon {
    width:10px;
    height:10px;
}
.creatureGlyphOptimizerDetailStats .creatureGlyphCompareStatRow,
.creatureGlyphOptimizerDetailStats .creatureGlyphCompareStatRow strong { font-size:7px; }
.creatureGlyphOptimizerDetailStats .creatureGlyphCompareStatRow em { display:none; }
.creatureGlyphOptimizerFooter[hidden] { display:none !important; }
.creatureGlyphOptimizerFooter {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
    padding-top:1px;
}
.creatureGlyphOptimizerApply,
.creatureGlyphOptimizerSecondary {
    min-width:92px;
    min-height:30px;
    margin:0;
    padding:5px 10px;
    border-radius:8px;
    font:900 8px/1 "Poppins",sans-serif;
    letter-spacing:.035em;
    cursor:pointer;
    touch-action:manipulation;
}
.creatureGlyphOptimizerSecondary {
    border:1px solid rgba(91,193,229,.42);
    background:linear-gradient(180deg,rgba(10,66,89,.88),rgba(4,39,56,.94));
    color:#dff8ff;
}
.creatureGlyphOptimizerApply {
    border:1px solid rgba(255,222,145,.62);
    background:linear-gradient(180deg,#d69124,#9a5e0f);
    color:#fff8dc;
    box-shadow:inset 0 1px rgba(255,255,255,.14);
}
.creatureGlyphOptimizerApply:not(:disabled):hover,
.creatureGlyphOptimizerSecondary:hover { filter:brightness(1.08); }
.creatureGlyphOptimizerApply:disabled,
.creatureGlyphOptimizerSecondary:disabled { cursor:default; opacity:.42; }

@media (max-width:390px) {
    .creatureGlyphBestDpsButton { min-width:64px; padding-inline:6px; font-size:7px; }
    .creatureGlyphOptimizerModal { padding:8px; }
    .creatureGlyphOptimizerDialog { width:calc(100% - 16px); max-height:calc(100vh - 16px); padding:7px; gap:6px; }
    .creatureGlyphOptimizerHeader > strong { font-size:10px; }
    .creatureGlyphOptimizerMetrics > span { padding:5px 3px; }
    .creatureGlyphOptimizerMetrics strong { font-size:10.5px; }
    .creatureGlyphOptimizerGlyphs { gap:2px; padding:4px 3px; }
    .creatureGlyphOptimizerGlyph .glyphVisual--compact { width:min(43px,100%); }
    .creatureGlyphOptimizerDetailContent { grid-template-columns:50px minmax(68px,.7fr) minmax(0,1.3fr); gap:5px; }
    .creatureGlyphOptimizerDetailVisual,
    .creatureGlyphOptimizerDetailVisual .glyphVisual { width:50px; height:50px; }
    .creatureGlyphOptimizerDetailStats .creatureGlyphCompareStatRow { min-height:16px; padding-inline:2px; }
    .creatureGlyphOptimizerApply,
    .creatureGlyphOptimizerSecondary { min-width:82px; min-height:28px; padding:4px 8px; font-size:7.5px; }
}


/* Glyphes — action compacte de déséquipement complet. */
.creatureGlyphUnequipAllButton {
    width:100%;
    min-height:20px;
    margin-top:4px;
    padding:2px 7px;
    border:1px solid rgba(130,215,241,.34);
    border-radius:5px;
    background:rgba(8,25,34,.72);
    color:#bfefff;
    font-family:inherit;
    font-size:7px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.045em;
    cursor:pointer;
}
.creatureGlyphUnequipAllButton:hover:not(:disabled) {
    background:rgba(18,55,70,.78);
    border-color:rgba(130,215,241,.58);
}
.creatureGlyphUnequipAllButton:disabled {
    opacity:.35;
    cursor:default;
}
@media (max-width:520px) {
    .creatureGlyphUnequipAllButton { min-height:18px; margin-top:3px; }
}

/* v0.56 — aperçu de niveau hors budget + notifications progression */
.creatureUpgradePreviewRow { position:relative; }
.creatureUpgradePreviewRow.is-projected-only {
    border-color:rgba(255,210,92,.28);
    background:linear-gradient(180deg,rgba(82,58,9,.18),rgba(0,0,0,.16));
}
.creatureUpgradePreviewRow.is-projected-only::after {
    content:'APERÇU';
    position:absolute;
    top:3px;
    right:5px;
    padding:2px 4px;
    border:1px solid rgba(255,215,99,.34);
    border-radius:999px;
    background:rgba(79,52,5,.78);
    color:#ffd76a;
    font:800 6px/1 "Poppins",sans-serif;
    letter-spacing:.35px;
    pointer-events:none;
}
.creatureUpgradeTab.has-progress-notice,
.creatureProgressionMode.has-progress-notice { position:relative; }
.creatureUpgradeTab.has-progress-notice::after,
.creatureProgressionMode.has-progress-notice::after {
    content:'';
    position:absolute;
    top:3px;
    right:4px;
    width:7px;
    height:7px;
    border:1px solid rgba(255,255,255,.88);
    border-radius:50%;
    background:#ff3347;
    box-shadow:0 0 0 2px rgba(101,0,12,.35),0 0 7px rgba(255,51,71,.58);
    pointer-events:none;
}
@media (max-width:520px) {
    .creatureUpgradePreviewRow.is-projected-only::after { top:2px; right:3px; font-size:5.5px; }
    .creatureUpgradeTab.has-progress-notice::after,
    .creatureProgressionMode.has-progress-notice::after { width:6px; height:6px; top:2px; right:3px; }
}

/* =========================================================
   Préparation dédiée d'un doublon Rank Up
   ========================================================= */
.creatureRankPrepareContext {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:7px 0 6px;
    padding:9px 10px;
    border:1px solid rgba(104,199,239,.34);
    border-radius:9px;
    background:linear-gradient(180deg,rgba(12,64,91,.48),rgba(4,31,48,.58));
    box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.creatureRankPrepareContext[hidden] { display:none !important; }
.creatureRankPrepareContextText {
    min-width:0;
    display:grid;
    gap:3px;
}
.creatureRankPrepareContextText small {
    color:#82d8ff;
    font:900 10px/1 "Poppins",sans-serif;
    letter-spacing:.06em;
}
.creatureRankPrepareContextText strong {
    overflow:hidden;
    color:#f3fbff;
    font:900 11px/1.2 "Poppins",sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.creatureRankPrepareContextText span {
    color:#b7cbd8;
    font:700 10px/1.25 "Poppins",sans-serif;
}
.creatureRankPrepareContextBack {
    flex:0 0 auto;
    min-height:32px;
    padding:6px 10px;
    border:1px solid rgba(146,210,239,.38);
    border-radius:7px;
    background:rgba(4,24,37,.72);
    color:#e9f8ff;
    font:900 10px/1 "Poppins",sans-serif;
    cursor:pointer;
}
.creatureRankPrepareContextBack:hover,
.creatureRankPrepareContextBack:focus-visible {
    border-color:rgba(180,226,247,.72);
    outline:none;
    filter:brightness(1.08);
}

/* Une food ouverte depuis « À préparer » est une sous-tâche dédiée :
   aucune autre branche de progression ne doit détourner l'intention joueur. */
.creatureUpgradePanel.is-rank-prepare-context .creatureUpgradeTabs,
.creatureUpgradePanel.is-rank-prepare-context .creatureProgressionModes {
    display:none !important;
}
.creatureUpgradePanel.is-rank-prepare-context .creatureRankModeSwitch {
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:7px;
}
.creatureUpgradePanel.is-rank-prepare-context [data-creature-rank-mode="max"] {
    display:none !important;
}
.creatureUpgradePanel.is-rank-prepare-context .creatureRankModeButton {
    min-height:30px;
    font-size:10px;
}

@media (max-width:520px) {
    .creatureRankPrepareContext { align-items:stretch; padding:8px; }
    .creatureRankPrepareContextBack { min-height:34px; }
}

/* =========================================================
   Creature detail — element / role only
   Large icon-only controls with Reward Tray style tooltip.
   ========================================================= */
#creatureUpgradePanel .creatureUpgradeIdentity {
    grid-template-areas:
        "med stats primary"
        "med stats primary"
        "power stats primary";
}

#creatureUpgradePanel .creatureUpgradePrimaryIcons {
    grid-area: primary;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    align-items: center;
    justify-items: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    gap: 6px;
}

#creatureUpgradePanel .creatureUpgradePrimaryIcons .creatureUpgradeTag {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    cursor: help;
}

#creatureUpgradePanel .creatureUpgradePrimaryIcons .creatureUpgradeTag img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

#creatureUpgradePanel .creatureUpgradePrimaryIcons .creatureUpgradeTagLabel,
#creatureUpgradePanel .creatureUpgradeTraitTags {
    display: none !important;
}

/* Reward Tray tooltip is normally below the creature modal in the z-stack. */
.battleRewardTooltip.creatureMetaTooltip {
    z-index: 1800 !important;
}

@container (max-width:424px) {
    #creatureUpgradePanel .creatureUpgradePrimaryIcons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    #creatureUpgradePanel .creatureUpgradePrimaryIcons .creatureUpgradeTag {
        width: 100%;
        max-width: none;
    }
}

.creatureGlyphCompareStatRow.is-legendary { border-color:rgba(255,153,51,.72) !important;background:rgba(139,67,8,.22) !important; }
.creatureGlyphCompareStatRow.is-legendary .creatureGlyphCompareStatName,
.creatureGlyphCompareStatRow.is-legendary strong { color:#ffad4d !important; }
.creatureGlyphCompareStatRow.is-legendary .creatureGlyphCompareStatName small { color:#e69442 !important; }

/* Rune avec affixe légendaire — marqueur compact commun à toutes les formes.
   Top-center reste lisible sur losange / triangle / cercle et évite le halo
   diffus qui se confondait avec les cadres de sélection. */
.glyphVisual.has-legendary-affix::after {
    content:'';
    position:absolute;
    z-index:5;
    top:10%;
    left:50%;
    width:6px;
    height:6px;
    border:1px solid rgba(255,239,213,.92);
    border-radius:50%;
    background:#ff9838;
    box-shadow:
        0 0 0 1px rgba(102,43,0,.58),
        0 0 5px rgba(255,145,48,.72);
    transform:translate(-50%,-18%);
    pointer-events:none;
}

/* A6 reprend le bloc de composants de l’évolution. */
.creatureAscensionStatsPreview.creatureEvolutionCost {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-color:rgba(135,181,207,.34);
    background:rgba(4,25,39,.38);
}
.creatureAscensionFooter:has(#creatureAscensionCost[hidden]) {
    justify-content:flex-end;
}

/* Les erreurs d'aperçu sont des alertes, jamais une cellule de coût. */
.creatureAscensionStatsPreview.creatureEvolutionCost.is-notice{display:block;box-sizing:border-box;width:100%;padding:9px 10px;border:1px solid rgba(100,213,231,.32);border-radius:7px;background:rgba(36,126,166,.14);color:#a2dbff;font-size:11px;line-height:1.5}
.creatureAscensionNotice{display:inline;white-space:normal;overflow-wrap:break-word}
.creatureAscensionNoticeIcon{display:inline-block;width:18px;height:18px;object-fit:contain;vertical-align:middle;margin:0 3px}