.notification-popover{width:430px;max-width:calc(100vw - 24px);max-height:calc(100dvh - var(--header,70px) - 22px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #3b3e46;border-top:2px solid #a82534;border-radius:14px;background:#121519;box-shadow:0 22px 70px #000a}.notification-popover[hidden]{display:none}.notice-popover-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 14px;background:linear-gradient(110deg,#2b1a20,#171a20 70%);flex-shrink:0}.notice-popover-heading .eyebrow,.notice-page-heading .eyebrow{font-size:8px;letter-spacing:1.7px;color:#ad7d86}.notice-popover-heading h3{font-size:21px;margin:5px 0;letter-spacing:-.4px}.notice-popover-heading p,.notice-page-heading p{font-size:10px;color:#969fae;margin:0}.notice-dismiss{width:28px;height:28px;display:grid;place-items:center;background:#ffffff06;border:1px solid #ffffff15;border-radius:50%;font-size:21px;line-height:1;color:#adb5c1;cursor:pointer}.notice-dismiss:hover{background:#383039;color:#fff}.notice-popover-toolbar{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#191c22;border-block:1px solid #ffffff0a;flex-shrink:0}.notice-filters{display:flex;gap:4px}.notice-filters>button{display:flex;align-items:center;gap:5px;padding:7px 9px;min-height:31px;border:1px solid transparent;border-radius:5px;background:none;color:#939dac;font-family:inherit;font-size:10px;line-height:1.2;font-weight:600;cursor:pointer}.notice-filters>button[aria-pressed=true]{border-color:#4d3740;background:#3b232c;color:#f1c6cd}.notice-filters>button>span{padding:2px 5px;border-radius:4px;background:#10121677;font-size:8px;font-variant-numeric:tabular-nums}.notice-read-all{border:0;background:none;color:#d2b8be;white-space:nowrap;font-size:9px;padding:7px 0;cursor:pointer}.notice-read-all:hover{color:#fff}.notice-read-all:disabled{color:#646d7a;cursor:default}.notification-popover #notification-popover-list{max-height:min(560px,calc(100dvh - var(--header,70px) - 214px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#454a55 transparent;padding:0 10px 10px;min-height:90px}.notice-day{color:#747f90;font-size:8px;text-transform:uppercase;font-weight:700;letter-spacing:1.4px;padding:15px 9px 8px}.notification-item{--notice-accent:#98a6bb;--notice-tint:#202733;display:block;margin:0 0 5px;padding:12px 11px;border:1px solid transparent;border-radius:8px;background:transparent;text-decoration:none;transition:background .18s,border-color .18s;overflow:hidden}.notification-item:hover{background:#1d222b;border-color:#3b4350}.notification-item.unread{background:#1d2129;border-color:#323946}.notification-item.notice-giveaway{--notice-accent:#e26c78;--notice-tint:#351c25}.notification-item.notice-market{--notice-accent:#e5af65;--notice-tint:#33281c}.notification-item.notice-leaderboard{--notice-accent:#e2bf5f;--notice-tint:#302a1c}.notification-item.notice-battle{--notice-accent:#6cbdf2;--notice-tint:#1b2a39}.notification-item.notice-news{--notice-accent:#8fb6d7;--notice-tint:#1e2933}.notification-item.notice-system{--notice-accent:#d9a4aa;--notice-tint:#302126}.notification-item.notice-reward{--notice-accent:#bcb096;--notice-tint:#2c2924}.notification-item.notice-featured{border-color:#ffffff12;border-left:3px solid var(--notice-accent);background:linear-gradient(105deg,var(--notice-tint),#181c23)}.notification-item.notice-featured.unread{box-shadow:inset 0 0 30px #ffffff02;border-top-color:#ffffff22;border-right-color:#ffffff22;border-bottom-color:#ffffff22}.notification-item.notice-featured:hover{border-color:var(--notice-accent);background:var(--notice-tint)}.notice-content{min-width:0}.notice-meta{display:flex;align-items:center;gap:7px;min-height:17px;margin-bottom:7px}.notice-category{color:var(--notice-accent);font-size:8px;letter-spacing:.5px;font-weight:700;text-transform:uppercase;line-height:1.4}.notice-meta time{font-size:9px;color:#778497;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.notice-new{font-size:7px;letter-spacing:.6px;color:#f0d9dd;background:#752632;border-radius:3px;padding:3px 4px;font-weight:800}.notice-content>strong{display:block;color:#e0e5ee;font-size:12px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}.notification-item.unread .notice-content>strong{color:#fff}.notice-content>p{color:#929eaf;font-size:11px;line-height:1.6;margin:5px 0 0;overflow-wrap:anywhere}.notification-popover .notice-content>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notice-action{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:650;color:var(--notice-accent);margin-top:10px}.notice-action>span{margin-left:auto;font-size:14px}.notice-center-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 19px;border-top:1px solid #353a45;background:#1a1d23;flex-shrink:0;color:#e4e8ef;text-decoration:none;font-size:11px;font-weight:700}.notice-center-link small{display:block;font-size:9px;font-weight:400;color:#8390a3;margin-top:4px}.notice-center-link>span:last-child{font-size:20px;color:#d26976}.notice-center-link:hover{background:#22242c}.notice-empty-line{height:2px;width:35px;background:#9c2b39;margin:8px}.notification-empty{padding:40px 22px;color:#bec8d8}.notification-empty strong{font-size:13px}.notification-empty p{max-width:240px;line-height:1.7;color:#7d8a9c}.notice-page-panel{overflow:hidden;border-color:#353b46}.notice-page-heading{padding:23px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:linear-gradient(110deg,#2b1d23,#191d24)}.notice-page-heading h3{font-size:22px;letter-spacing:-.5px;margin:6px 0}.notice-page-heading .notice-read-all{font-size:11px;border:1px solid #56404a;border-radius:5px;padding:9px 12px}.notice-page-panel #notification-page-tools{padding:12px 20px;background:#1a1e25;border-block:1px solid #ffffff09}.notice-page-panel .notice-filters button{font-size:11px;padding:8px 13px}.notice-page-panel #notifications-list{padding:0 16px 16px}.notice-page-panel .notification-item{padding:16px 18px;margin-bottom:8px}.notice-page-panel .notice-content>strong{font-size:14px}.notice-page-panel .notice-content>p{font-size:12px}.notice-page-panel .notice-meta{margin-bottom:8px}.notice-page-panel .notice-category{font-size:9px}.notice-page-panel .notice-action{font-size:10px;justify-content:flex-start}.notice-page-panel .notice-action>span{margin-left:5px}.notice-more{width:100%;border:1px solid #363e4b;background:#202630;color:#e0e7f2;padding:13px;border-radius:7px;cursor:pointer;font-size:11px;font-weight:600;margin-top:12px}.notice-more>span{margin-left:8px;font-size:9px;color:#8d9bb0}.notification-page-grid>#preferences{border-color:#353b46;border-radius:12px;overflow:hidden}.notification-page-grid>#preferences .card-heading{background:#1c2027}.notification-page-grid>#preferences .card-icon{display:none}.notification-page-grid>#preferences .preference-row{padding:14px 0}.notification-popover :focus-visible,.notice-page-panel :focus-visible{outline:2px solid #d67482;outline-offset:-3px}@media(max-width:520px){.notification-popover{left:8px;right:8px;max-width:none;width:auto;top:calc(var(--header,64px) + 5px)!important;max-height:calc(100dvh - var(--header,64px) - 14px);border-radius:11px}.notice-popover-heading{padding:16px 15px 13px}.notice-popover-heading h3{font-size:19px}.notice-popover-toolbar{padding:9px 10px;gap:5px}.notice-filters>button{font-size:9px;padding:7px}.notice-read-all{font-size:8px}.notification-popover #notification-popover-list{max-height:none;flex:1;padding:0 8px 8px}.notification-item{padding:11px}.notice-content>strong{font-size:12px}.notice-category{font-size:7px;letter-spacing:.35px}.notice-meta time{font-size:8px}.notice-center-link{padding:12px 15px}.notice-page-heading{padding:18px}.notice-page-heading h3{font-size:20px}.notice-page-heading .notice-read-all{font-size:9px;padding:8px}.notice-page-panel #notifications-list{padding:0 10px 12px}.notice-page-panel .notification-item{padding:13px}.notice-page-panel .notice-content>strong{font-size:13px}.notice-page-panel .notice-content>p{font-size:11px}}@media(prefers-reduced-motion:reduce){.notification-item{transition:none}}
