/* Notifications bell + panel (notify.js). The button reuses the header's .spy-btn look. */
.nf{position:relative;display:flex}
.nf-btn{position:relative}
.nf-btn svg{width:19px;height:19px}
.nf-badge{position:absolute;top:-6px;right:-7px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;
  font:700 11.5px/1 "Fredoka",var(--text),sans-serif;color:#fff;background:linear-gradient(#e8574a,#b72d24);border:2px solid #143837;box-shadow:0 2px 4px rgba(0,0,0,.35);pointer-events:none}
.nf-badge[hidden]{display:none}
.nf-badge.pop{animation:nfPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes nfPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
html.no-anim .nf-badge.pop{animation:none}
@media (prefers-reduced-motion:reduce){.nf-badge.pop{animation:none}}
.nf-panel{position:absolute;z-index:80;top:calc(100% + 10px);right:-60px;width:340px;max-width:calc(100vw - 20px);border-radius:16px;overflow:hidden;
  background:#0f2a2c;border:2px solid #c9a24c;box-shadow:0 18px 40px rgba(0,0,0,.55);color:#e9f1ef;text-align:left}
.nf-panel[hidden]{display:none}
.nf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 10px;border-bottom:1px solid rgba(201,162,76,.35);background:linear-gradient(#143a3b,#10302f)}
.nf-head h2{margin:0;font:700 16px/1.2 "Cinzel",Georgia,serif;color:#f1d58a;letter-spacing:.02em}
.nf-all{font:600 13px/1 var(--text,system-ui),sans-serif;color:#f1d58a;background:none;border:0;padding:6px 4px;cursor:pointer;border-radius:6px}
.nf-all:hover{text-decoration:underline}.nf-all:disabled{color:#6f8a88;cursor:default;text-decoration:none}
.nf-list{list-style:none;margin:0;padding:6px;max-height:min(420px,70vh);overflow-y:auto}
.nf-item{display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:11px;color:#cfdedb;text-decoration:none;position:relative}
.nf-item:hover,.nf-item:focus-visible{background:rgba(255,255,255,.06)}
.nf-item.unread{background:rgba(241,213,138,.09);color:#fff}
.nf-item.unread::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#f1d58a}
.nf-item b{color:#f6e3ad;font-weight:700}
.nf-ic{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#1c4a4a;color:#f1d58a;box-shadow:inset 0 0 0 1px rgba(241,213,138,.3)}
.nf-ic svg{width:18px;height:18px}
.nf-ic.nf-game{background:#2a3f5c;color:#bfe0ff}.nf-ic.nf-accepted{background:#24503a;color:#b8f0c8}
.nf-txt{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.35;padding-right:16px;min-width:0}
.nf-txt small{color:#8fb0ac;font-size:12px}
.nf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px 24px;text-align:center}
.nf-empty b{font-size:15px;color:#f6e3ad}.nf-empty small{color:#8fb0ac;font-size:13px}
@media (max-width:639px){.nf-badge{top:-5px;right:-6px}.nf-panel{position:fixed;top:64px;left:10px;right:10px;width:auto;max-width:none}}
@media (max-width:420px){.site-header .hdr-right{gap:4px}.site-header .hdr-right .spy-btn,.site-header .hdr-right .m-home{width:34px!important;height:34px!important}.site-header .hdr-right .spy-btn svg,.site-header .hdr-right .m-home svg{width:16px;height:16px}}
/* Offline note + offline page state + "Available offline" tag */
.off-note{position:fixed;z-index:90;left:50%;bottom:72px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;
  padding:9px 15px;border-radius:999px;background:#0f2a2c;border:1.5px solid rgba(201,162,76,.6);color:#dce9e6;font-size:14px;line-height:1.3;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.off-note[hidden]{display:none}.off-note b{color:#f1d58a}
.off-dot{flex:0 0 8px;height:8px;border-radius:50%;background:#8fb0ac}
.off-page{max-width:560px;margin:40px auto;padding:26px 24px;border-radius:16px;background:#0f2a2c;border:2px solid #c9a24c;color:#dce9e6;text-align:center}
.off-page h1{margin:0 0 10px;font:700 24px/1.2 "Cinzel",Georgia,serif;color:#f1d58a}.off-page p{margin:0 0 10px}
main.is-off > :not(#offPage){display:none!important}
.off-tag{display:inline-flex;align-items:center;gap:5px;margin-left:12px;vertical-align:middle;padding:4px 10px 4px 8px;border-radius:999px;font:600 12px/1 var(--text,system-ui),sans-serif;
  color:#b8f0c8;background:rgba(36,80,58,.75);border:1px solid rgba(184,240,200,.35)}
.off-tag svg{width:13px;height:13px}