.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);
}
@media (min-width: 521px) {
    .battleRewardTooltip { max-width:min(320px, calc(100vw - 16px)); padding:10px 12px; }
    .battleRewardTooltip .battleRewardTooltipTitle { font-size:14px; line-height:1.25; }
    .battleRewardTooltip .battleRewardTooltipDescription { font-size:13px; line-height:1.4; }
}
.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;
    }
}


.battleRewardTooltip { z-index: 2147483000; max-height: calc(100dvh - 16px); overflow-wrap: anywhere; }
.battleRewardTooltipDescription { white-space: pre-line; }