.battleRewardTray {
    position: absolute;
    left: 50%;
    bottom: 161px;
    z-index: 22;
    width: min(475px, calc(100% - 18px));
    margin: 0;
    transform: translateX(-50%);
    padding: 12px 7px 7px;
    border: 1px solid rgba(255, 198, 89, .62);
    border-radius: 15px;
    background: radial-gradient(circle at 50% 0%, rgba(230, 151, 38, .13), transparent 42%), linear-gradient(180deg, rgba(18, 25, 39, .97), rgba(8, 15, 27, .97));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .33), inset 0 1px rgba(255, 255, 255, .06);
    color: #fff;
}
.battleRewardTray[hidden] { display: none; }
.battleRewardTrayHeader {
    position: absolute;
    top: -13px;
    left: 50%;
    display: flex;
    min-width: 150px;
    align-items: center;
    justify-content: center;
    padding: 1px 17px 0px;
    border: 1px solid rgba(255, 195, 70, .8);
    border-radius: 12px 12px 4px 4px;
    background: linear-gradient(180deg, #e5a421, #bd7410);
    box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.34);
    transform: translateX(-50%);
    color: #3a2307;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-shadow: 0 1px rgba(255,255,255,.18);
}
.battleRewardTrayCount {
    margin-left: 6px;
    opacity: .64;
    font-size: 8px;
    font-weight: 900;
}
.battleRewardTrayClose {
    position: absolute;
    top: -17px;
    right: -7px;
    z-index: 2;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(5, 14, 26, .72);
    color: #eaf3fb;
    cursor: pointer;
}
.battleRewardTrayClose:hover,
.battleRewardTrayClose:focus-visible {
    border-color: rgba(255, 210, 119, .8);
    color: #ffd777;
}
.battleRewardTrayItems {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    align-items: stretch;
    gap: 7px;
    /* Le padding haut absorbe les quantités positionnées à top:-7px ;
       le margin négatif conserve exactement leur position visuelle. */
    margin-top: -7px;
    padding: 7px 28px 1px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
}
.battleRewardTrayItems::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
    .battleRewardTrayItems { cursor: grab; user-select: none; }
    .battleRewardTrayItems.is-mouse-dragging { cursor: grabbing; }
}
.battleRewardItem {
    position: relative;
    display: grid;
    flex: 0 0 55px;
    justify-items: center;
    padding: 4px 4px 4px;
    border: 1px solid rgba(197, 219, 236, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.battleRewardItem--rare { border-color: rgba(100, 198, 255, .38); }
.battleRewardItem--epic { border-color: rgba(193, 112, 255, .52); box-shadow: inset 0 0 14px rgba(156,75,233,.08); }
.battleRewardItem--legendary,
.battleRewardItem--supreme { border-color: rgba(255, 199, 66, .66); box-shadow: inset 0 0 16px rgba(255,176,44,.11), 0 0 9px rgba(255,176,44,.08); }
.battleRewardItem.battleRewardItem--stone-small {
    border-color: rgba(85, 227, 127, .72);
    background: radial-gradient(circle at 50% 42%, rgba(85, 227, 127, .17), rgba(18, 73, 44, .12) 58%, rgba(255, 255, 255, .035));
    box-shadow: inset 0 0 14px rgba(85, 227, 127, .10), 0 0 8px rgba(85, 227, 127, .08);
}
.battleRewardItemVisual {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
}
.battleRewardItemVisual img {
    display: block;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.48));
}

.battleRewardItemVisual--glyph {
    width: 42px;
    height: 42px;
}
.battleRewardItemVisual--glyph {
    --glyph-visual-size: 35px;
    --glyph-visual-shift-y: -52%;
}
.battleRewardItemVisual--glyph.battleRewardItemVisual--glyph-square {
    --glyph-visual-size: 35px;
    --glyph-visual-shift-y: -54%;
}
.battleRewardItemVisual--glyph.battleRewardItemVisual--glyph-hex {
    --glyph-visual-size: 35px;
    --glyph-visual-shift-y: -52%;
}
.battleRewardItemVisual--glyph.battleRewardItemVisual--glyph-leaf {
    --glyph-visual-size: 34px;
    --glyph-visual-shift-y: -50%;
}
.battleRewardItemVisual--glyph .battleRewardGlyphBase,
.battleRewardItemVisual--glyph .battleRewardGlyphSet {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--glyph-visual-size);
    height: var(--glyph-visual-size);
    max-width: none;
    max-height: none;
    object-fit: contain;
    pointer-events: none;
    transform: translate(-50%, var(--glyph-visual-shift-y));
}
.battleRewardItemVisual--glyph .battleRewardGlyphBase {
    z-index: 1;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.48));
}
.battleRewardItemVisual--glyph .battleRewardGlyphSet {
    z-index: 2;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.38));
}

.battleRewardItem--kind-glyph {
    --glyph-accent: 235, 238, 245;
    --glyph-accent-strong: #ffffff;
    border-color: rgba(var(--glyph-accent), .72);
    background: radial-gradient(circle at 50% 35%, rgba(var(--glyph-accent), .15), rgba(255,255,255,.045) 58%, rgba(7, 14, 25, .12));
    box-shadow: inset 0 0 14px rgba(var(--glyph-accent), .14), 0 0 10px rgba(var(--glyph-accent), .05);
}
.battleRewardItem--kind-glyph .battleRewardItemAmount {
    color: var(--glyph-accent-strong);
}
.battleRewardItem--kind-glyph.battleRewardItem--common {
    --glyph-accent: 235, 238, 245;
    --glyph-accent-strong: #ffffff;
}
.battleRewardItem--kind-glyph.battleRewardItem--uncommon {
    --glyph-accent: 84, 151, 255;
    --glyph-accent-strong: #b7d3ff;
}
.battleRewardItem--kind-glyph.battleRewardItem--rare {
    --glyph-accent: 88, 222, 120;
    --glyph-accent-strong: #caffd4;
}
.battleRewardItem--kind-glyph.battleRewardItem--epic {
    --glyph-accent: 255, 211, 89;
    --glyph-accent-strong: #ffefb2;
}
.battleRewardItem--kind-glyph.battleRewardItem--legendary,
.battleRewardItem--kind-glyph.battleRewardItem--supreme {
    --glyph-accent: 191, 116, 255;
    --glyph-accent-strong: #edd2ff;
}
.battleRewardItemVisual--creature {
    overflow: hidden;
    border: 1px solid rgba(255, 206, 92, .55);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 117, 158, .55), rgba(7, 23, 40, .9));
}
.battleRewardItemVisual--creature img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
.battleRewardItemVisual i { color: #d9e7f3; font-size: 18px; }
.battleRewardItemAmount {
    position: absolute;
    top: -7px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    color: #fff5ce;
    font-size: 13px;
    font-weight: 950;
    line-height: 16px;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,.9);
}
.battleRewardItemLabel {
    display: none !important;
}
.battleRewardItem.is-new { animation: battleRewardItemPop .32s cubic-bezier(.16,.8,.25,1); }
@keyframes battleRewardItemPop {
    0% { opacity: .2; transform: translateY(7px) scale(.84); }
    65% { opacity: 1; transform: translateY(-2px) scale(1.06); }
    100% { transform: none; }
}
@media (max-width: 520px) {
    .battleRewardTray {
        width: calc(100% - 16px);
        margin: 0;
        padding: 8px 6px 7px;
        bottom: 150px;
    }
    /*.battleRewardTrayHeader { min-width: 126px; padding: 3px 17px 4px; font-size: 10px; top: -11px; }*/
    .battleRewardTrayItems { min-height: 54px; gap: 5px; }
    .battleRewardItem { flex-basis: 40px; min-width: 41px; grid-template-rows: 0px 0px; padding: 4px 0px 2px; }
    .battleRewardItemVisual { width: 38px; height: 38px; }
    /*.battleRewardItemVisual img { max-width: 36px; max-height: 36px; }*/
    .battleRewardItemAmount { top: -9px; font-size: 11px; line-height: 14px; }
}
.battleRewardTooltip {
    position: fixed;
    z-index: 120;
    display: grid;
    width: max-content;
    max-width: min(250px, calc(100vw - 16px));
    gap: 3px;
    padding: 7px 9px 8px;
    border: 1px solid rgba(112, 202, 255, .46);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(12, 35, 58, .98), rgba(5, 17, 31, .99));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .06);
    color: #d9e8f5;
    pointer-events: none;
    text-align: left;
}
.battleRewardTooltip[hidden] { display: none; }
.battleRewardTooltip::after {
    content: '';
    position: absolute;
    left: clamp(12px, var(--reward-tooltip-anchor-x, 50%), calc(100% - 12px));
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(112, 202, 255, .46);
    border-bottom: 1px solid rgba(112, 202, 255, .46);
    background: #071727;
}
.battleRewardTooltip[data-placement='top']::after {
    bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
}
.battleRewardTooltip[data-placement='bottom']::after {
    top: -5px;
    transform: translateX(-50%) rotate(225deg);
}
.battleRewardTooltipTitle {
    color: #fff2bf;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.15;
}
.battleRewardTooltipDescription {
    color: #c8d9e7;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}
@media (max-width: 520px) {
    .battleRewardTooltip {
        max-width: min(220px, calc(100vw - 16px));
        padding: 7px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .battleRewardItem.is-new { animation: none; }
}


#uiBtnContainer,
#monsterContainer {
    z-index: 23 !important;
}

/* Le drawer appartient au stacking context de #uiLvlContainer.
   Quand il est ouvert, son parent doit lui-même passer au-dessus du Reward Tray (z-index:22). */
.gameContainer.monster-panel-open #uiLvlContainer {
    z-index: 30 !important;
}
.gameContainer.monster-panel-open #monsterContainer {
    z-index: 31 !important;
}

/* Auto-destruction de runes : on conserve le visuel de la glyphe avec un badge Cristaux runiques. */
.battleRewardItem--kind-glyph_auto_destroy {
    --glyph-accent: 235, 238, 245;
    --glyph-accent-strong: #ffffff;
    border-color: rgba(var(--glyph-accent), .72);
    background: radial-gradient(circle at 50% 35%, rgba(var(--glyph-accent), .15), rgba(255,255,255,.045) 58%, rgba(7, 14, 25, .12));
    box-shadow: inset 0 0 14px rgba(var(--glyph-accent), .14), 0 0 10px rgba(var(--glyph-accent), .05);
}
.battleRewardItem--kind-glyph_auto_destroy .battleRewardItemAmount {
    color: var(--glyph-accent-strong);
}
.battleRewardItem--kind-glyph_auto_destroy.battleRewardItem--common {
    --glyph-accent: 235, 238, 245;
    --glyph-accent-strong: #ffffff;
}
.battleRewardItem--kind-glyph_auto_destroy.battleRewardItem--uncommon {
    --glyph-accent: 84, 151, 255;
    --glyph-accent-strong: #b7d3ff;
}
.battleRewardItem--kind-glyph_auto_destroy.battleRewardItem--rare {
    --glyph-accent: 88, 222, 120;
    --glyph-accent-strong: #caffd4;
}
.battleRewardItem--kind-glyph_auto_destroy.battleRewardItem--epic {
    --glyph-accent: 255, 211, 89;
    --glyph-accent-strong: #ffefb2;
}
.battleRewardItem--kind-glyph_auto_destroy.battleRewardItem--legendary,
.battleRewardItem--kind-glyph_auto_destroy.battleRewardItem--supreme {
    --glyph-accent: 191, 116, 255;
    --glyph-accent-strong: #edd2ff;
}
.battleRewardItemSaleBadge {
    position: absolute;
    right: -3px;
    bottom: -2px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 14px;
    padding: 1px 4px 1px 3px;
    border: 1px solid rgba(111, 250, 193, .52);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(4, 61, 56, .96), rgba(3, 41, 38, .98));
    box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06);
    pointer-events: none;
}
.battleRewardItemSaleBadge img {
    width: 10px;
    height: 10px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.battleRewardItemSaleBadge strong {
    color: #7af0bd;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@media (max-width: 520px) {
    .battleRewardItemSaleBadge {
        right: -2px;
        min-height: 13px;
        padding: 1px 4px 1px 3px;
    }
    .battleRewardItemSaleBadge strong { font-size: 6px; }
}