.hx-notif-wrap{position:relative;display:flex;align-items:center}
.hx-notif-btn{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background-color:transparent;border:none;border-radius:8px;cursor:pointer;transition:opacity .15s;padding:0}
.hx-notif-btn:hover{opacity:.75}
.hx-notif-bell-icon{width:18px;height:18px;fill:var(--text-primary)}
.hx-notif-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;background-color:#e0434f;color:#fff;font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;border-radius:8px;display:none;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--bg-panel)}
.hx-notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:90vw;max-height:420px;overflow-y:auto;background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.2);z-index:2500;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
.hx-notif-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.hx-notif-panel-header{padding:14px 16px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--text-heading);border-bottom:1px solid var(--border-color)}
.hx-notif-list{display:flex;flex-direction:column}
.hx-notif-item{position:relative;display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-color);transition:background-color .15s}
.hx-notif-item:last-child{border-bottom:none}
.hx-notif-item:hover{background-color:var(--hover-bg)}
.hx-notif-item.unread{background-color:var(--accent-soft)}
.hx-notif-item-iconwrap{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--hover-bg)}
.hx-notif-item-iconwrap-friend{background-color:rgba(61,120,214,.15)}
.hx-notif-item-iconwrap-message{background-color:rgba(var(--accent-rgb,147,51,234),.15)}
.hx-notif-item-iconwrap-community{background-color:rgba(218,139,81,.15)}
.hx-notif-item-icon{width:16px;height:16px}
.hx-notif-item-iconwrap-friend .hx-notif-item-icon{fill:#3d78d6}
.hx-notif-item-iconwrap-message .hx-notif-item-icon{fill:var(--accent,#9333ea)}
.hx-notif-item-iconwrap-community .hx-notif-item-icon{fill:#da8b51}
.hx-notif-item-body{flex:1;min-width:0}
.hx-notif-item-title{font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--text-heading);margin-bottom:2px}
.hx-notif-item-text{font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--text-muted);line-height:1.4;overflow-wrap:anywhere;margin:0}
.hx-notif-item-time{font-family:'Poppins',sans-serif;font-size:11px;color:var(--text-faint);margin-top:4px}
.hx-notif-item-dot{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background-color:var(--accent)}
.hx-notif-empty{padding:28px 16px;text-align:center;font-family:'Poppins',sans-serif;font-size:13px;color:var(--text-muted)}
@media(max-width:700px){.hx-notif-panel{position:fixed;top:56px;right:8px;left:8px;width:auto;max-width:none}}

/* Header-pill styling for the bell (shared so it looks the same on every page) */
.ns-pill.hx-notif-wrap{height:36px;width:36px;justify-content:center;transition:background .15s}
.ns-pill.hx-notif-wrap:hover{background:var(--pill-hover)}
.ns-pill .hx-notif-btn{width:34px;height:34px;border-radius:9px}
.ns-pill .hx-notif-btn:hover{opacity:1}
.ns-pill .hx-notif-bell-icon{width:17px;height:17px;fill:#fff}
.ns-pill .hx-notif-badge{box-shadow:0 0 0 2px var(--bg-page,#14121c)}
.hx-notif-panel{background:var(--bg-panel,#1d1a28);border:1px solid var(--border-color,#3d3852);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.hx-notif-item:hover{background:var(--input-bg,#2a2638)}
.hx-notif-item.unread{background:rgba(var(--accent-rgb,139,63,224),.18)}
.hx-notif-item-dot{background:var(--accent,#a35cf0)}
@media(max-width:760px){.hx-notif-panel{top:60px}}

/* Theme match: every notification type uses the site's accent colour instead of
   the old blue / orange, and follows whatever theme the player picked. */
.hx-notif-item-iconwrap,
.hx-notif-item-iconwrap-friend,
.hx-notif-item-iconwrap-message,
.hx-notif-item-iconwrap-community{background:rgba(var(--accent-rgb,139,63,224),.18);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb,139,63,224),.35)}
.hx-notif-item-iconwrap-friend .hx-notif-item-icon,
.hx-notif-item-iconwrap-message .hx-notif-item-icon,
.hx-notif-item-iconwrap-community .hx-notif-item-icon{fill:var(--accent,#a35cf0)}
.hx-notif-panel-header{background:rgba(var(--accent-rgb,139,63,224),.08)}
.hx-notif-item.unread{box-shadow:inset 3px 0 0 var(--accent,#a35cf0)}
.hx-notif-item-title{color:var(--text-heading,#fff)}
.hx-notif-panel{scrollbar-width:thin;scrollbar-color:var(--border-color,#3d3852) transparent}