.session-notice { width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: transparent; color: #e2e8f0; box-shadow: 0 24px 60px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(1.14); -webkit-backdrop-filter: blur(18px) saturate(1.14); font-family: var(--ui-interface-font,'Funnel Display',sans-serif); overflow: auto; }
.session-notice[open] { animation: sessionNoticeIn .28s cubic-bezier(.16,1,.3,1) both; }
.session-notice { scrollbar-width: none; }
.session-notice::-webkit-scrollbar { display: none; width: 0; height: 0; }
.session-notice::backdrop { background: rgba(0,0,0,.6); animation: sessionNoticeBackdrop .24s ease both; }
.session-notice.is-closing { animation: sessionNoticeOut .24s ease both; }
.session-notice.is-closing::backdrop { animation: sessionNoticeBackdrop .24s ease reverse both; }
.session-notice-header { display: flex; align-items: flex-start; gap: 12px; }
.session-notice-icon { display: inline-flex; flex: 0 0 28px; color: #f4aa2b; margin-top: 2px; }
.session-notice-icon svg { width: 28px; height: 28px; }
.session-notice h2 { flex: 1; min-width: 0; margin: 0; color: #e2e8f0; font-size: 21px; line-height: 1.4; font-weight: 650; }
.session-notice > p { margin: 18px 0 24px; color: #cbd5e1; font-size: 14px; line-height: 1.75; }
.session-notice-close { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border: 1px solid rgba(148,163,184,.22); border-radius: 10px; background: rgba(148,163,184,.06); color: #cbd5e1; cursor: pointer; }
.session-notice-close::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url('/assets/img/icons/modal-close.svg') center / contain no-repeat; mask: url('/assets/img/icons/modal-close.svg') center / contain no-repeat; transition: transform .2s ease; }
.session-notice-close:is(:hover,:focus-visible)::before { transform: scale(1.12); }
.session-notice-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.session-notice .session-notice-done { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border: 1px solid rgba(148,163,184,.25); border-radius: 11px; font: inherit; font-size: 13px; font-weight: 550; line-height: 22px; text-decoration: none; cursor: pointer; transition: border-color .2s,transform .2s; }
.session-notice .session-notice-done { background: rgba(148,163,184,.06); color: #dce5ef; }
.session-notice .session-notice-done:hover { transform: scale(1.025); border-color: #60d9b3; }
.session-notice .discord-btn-icon { width: 20px; height: 20px; margin: -1px; }
.session-notice .discord-login-options { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
@keyframes sessionNoticeIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sessionNoticeOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes sessionNoticeBackdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .session-notice { padding: 20px; } .session-notice h2 { font-size: 19px; } .session-notice-header { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .session-notice[open],.session-notice.is-closing,.session-notice::backdrop { animation: none; } .session-notice * { transition: none !important; } }