/* Painel de notificações (PC): lista macia, um card por evento, com cor por tipo e ações. */
html:not(.battlemon-mobile) .reward-notifications {
  width: min(24rem, calc(100vw - 1rem)); max-height: min(30rem, 72dvh); padding: 0; overflow: hidden; display: none; flex-direction: column;
  border: 1px solid #2c4468; border-radius: .9rem; color: #dbeafe;
  background: radial-gradient(120% 60% at 0% 0%, #1a3354aa, transparent 60%), linear-gradient(180deg, #11203a, #0a1424);
  box-shadow: 0 1.2rem 2.6rem #000a, 0 0 1.6rem #38bdf81c, inset 0 1px 0 #ffffff10;
}
html:not(.battlemon-mobile) .reward-notifications:popover-open { display: flex; animation: notifIn .22s cubic-bezier(.3,1.3,.5,1); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-.5rem) scale(.97); } to { opacity: 1; transform: none; } }
html:not(.battlemon-mobile) .reward-notifications header { padding: .75rem .9rem; border-bottom: 1px solid #ffffff0f; background: #ffffff05; }
html:not(.battlemon-mobile) .reward-notifications h2 { display: flex; align-items: center; gap: .5rem; margin: 0; color: #e6f1ff; font: 800 .72rem var(--font-pixel-ui); letter-spacing: .08em; }
.reward-notifications h2 svg { width: 1.05rem; height: 1.05rem; color: #7dd3fc; }
.notif-count { min-width: 1.2rem; padding: .05rem .4rem; border-radius: 1rem; background: #38bdf826; color: #7dd3fc; font: 800 .6rem var(--font-pixel-ui); text-align: center; }
.notif-count:empty { display: none; }
.reward-notifications header > div { display: flex; align-items: center; gap: .4rem; }
html:not(.battlemon-mobile) .reward-notifications header button { padding: 0; border: 1px solid #ffffff18; border-radius: .5rem; background: #ffffff08; color: #9db4d4; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.notif-clear { height: 1.7rem; padding: 0 .7rem !important; font: 800 .58rem var(--font-pixel-ui); letter-spacing: .08em; }
.notif-close { width: 1.7rem; height: 1.7rem; font-size: 1.1rem; line-height: 1; }
html:not(.battlemon-mobile) .reward-notifications header button:hover { background: #ffffff14; color: #fff; border-color: #ffffff33; }
html:not(.battlemon-mobile) .reward-notifications-list { display: grid; gap: .5rem; align-content: start; margin: 0; padding: .7rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2c4468 transparent; }
.notif-card { --nk: #34d399; position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .7rem; padding: .65rem .7rem; border: 1px solid color-mix(in srgb, var(--nk) 22%, #1f3050); border-radius: .75rem; background: linear-gradient(90deg, color-mix(in srgb, var(--nk) 10%, transparent), transparent 55%), #0f1c32; animation: notifCard .3s ease backwards; transition: border-color .2s, box-shadow .2s; }
.notif-card:hover { border-color: color-mix(in srgb, var(--nk) 50%, #1f3050); }
.notif-card.is-glow { box-shadow: 0 0 1rem color-mix(in srgb, var(--nk) 22%, transparent); }
.notif-card.is-new { border-color: color-mix(in srgb, var(--nk) 55%, #1f3050); }
@keyframes notifCard { from { opacity: 0; transform: translateX(.5rem); } to { opacity: 1; transform: none; } }
.notif-dot { position: absolute; top: .55rem; right: .55rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--nk); box-shadow: 0 0 .5rem var(--nk); }
.notif-badge { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .65rem; color: var(--nk); background: color-mix(in srgb, var(--nk) 14%, #0b1527); border: 1px solid color-mix(in srgb, var(--nk) 40%, transparent); box-shadow: 0 0 .7rem color-mix(in srgb, var(--nk) 18%, transparent); }
.notif-badge svg { width: 1.2rem; height: 1.2rem; }
.notif-body { display: grid; gap: .35rem; min-width: 0; }
.notif-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-right: .6rem; }
.notif-top strong { color: var(--nk); font: 800 .66rem var(--font-pixel-ui); letter-spacing: .05em; text-shadow: 0 0 .6rem color-mix(in srgb, var(--nk) 45%, transparent); }
.notif-top time { flex: none; color: #6f86a8; font: 600 .58rem var(--font-pixel-ui); }
.notif-body p { margin: 0; color: #b8c9e2; font: 600 .72rem/1.45 var(--font-pixel-ui); }
.notif-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.notif-chips span { padding: .16rem .55rem; border-radius: 1rem; color: #fff; background: color-mix(in srgb, var(--nk) 20%, #0b1527); border: 1px solid color-mix(in srgb, var(--nk) 38%, transparent); font: 700 .66rem var(--font-pixel-ui); text-shadow: 0 0 .5rem color-mix(in srgb, var(--nk) 55%, transparent); }
.notif-actions { display: flex; gap: .4rem; margin-top: .15rem; }
.notif-btn { min-height: 1.85rem; padding: 0 .9rem; border-radius: .55rem; cursor: pointer; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .06em; border: 1px solid #ffffff22; color: #dbeafe; background: #ffffff0a; transition: transform .15s, box-shadow .2s, filter .2s; }
.notif-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }
.notif-btn:disabled { opacity: .45; cursor: default; }
.notif-btn-accept { color: #04210f; border-color: #86efac; background: linear-gradient(180deg, #6ee7a1, #22c55e); box-shadow: 0 0 .8rem #22c55e44; }
.notif-btn-decline { color: #fecdd3; border-color: #fb718566; background: #fb71851a; }
.notif-empty { display: grid; justify-items: center; gap: .3rem; padding: 2rem 1rem; text-align: center; color: #6f86a8; }
.notif-empty svg { width: 2.2rem; height: 2.2rem; opacity: .6; }
.notif-empty p { margin: .3rem 0 0; color: #b8c9e2; font: 800 .72rem var(--font-pixel-ui); }
.notif-empty small { font: 600 .62rem/1.5 var(--font-pixel-ui); }
.notif-toast { --nk: #f472b6; position: fixed; top: 3.6rem; right: 1rem; z-index: 2000; display: none; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .7rem; align-items: center; max-width: 21rem; padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--nk) 50%, #1f3050); border-radius: .8rem; color: #fff; text-align: left; cursor: pointer; background: linear-gradient(90deg, color-mix(in srgb, var(--nk) 16%, #0f1c32), #0a1424); box-shadow: 0 .8rem 2rem #000a, 0 0 1.2rem color-mix(in srgb, var(--nk) 28%, transparent); }
.notif-toast.is-show { display: grid; animation: notifToast 5.2s ease forwards; }
.notif-toast strong { display: block; color: var(--nk); font: 800 .66rem var(--font-pixel-ui); letter-spacing: .05em; }
.notif-toast small { display: block; margin-top: .15rem; color: #cbd9ee; font: 600 .68rem/1.4 var(--font-pixel-ui); }
@keyframes notifToast { 0% { opacity: 0; transform: translateX(1.5rem); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(1.5rem); } }
@media (prefers-reduced-motion: reduce) { .notif-card, .reward-notifications:popover-open, .notif-toast.is-show { animation: none; } }