.addon-bonus-panel {
    margin: 5px 0;
    padding: 8px 10px 9px;
    border: 1px solid var(--hx-outline, #8d7757);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--hx-panel-3, #f1e3c9), var(--hx-panel, #cdbb98));
    box-shadow: inset 0 0 0 1px var(--hx-inset-hi, #fff5df), 0 2px 3px var(--hx-shadow-soft, #00000030);
    color: var(--hx-text, #42382d);
    text-align: left;
}
.addon-bonus-header {
    padding-bottom: 5px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--hx-hairline, #aa9777);
}
.addon-bonus-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border: 1px solid #287c26;
    border-radius: 4px;
    background: linear-gradient(#27b922, #148d19);
    box-shadow: inset 0 1px 0 #ffffff30;
    color: #fff;
    text-shadow: 0 1px 1px #164c19;
    font-size: 10px;
    line-height: 14px;
    font-weight: bold;
    letter-spacing: .025em;
    text-transform: uppercase;
}
ul.addon-bonuses-effects {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.4;
    font-weight: normal;
}
.addon-bonuses-effects li { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 5px; }
.addon-bonuses-effects img { width: auto; height: auto; max-width: 12px; max-height: 12px; justify-self: center; image-rendering: pixelated; }
.addon-bonus-label img { width: 12px; height: 12px; object-fit: contain; image-rendering: pixelated; }
@media (max-width: 480px) {
    .addon-bonus-panel { padding: 8px; }
}