.lobby-notice {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #080005d9;
  backdrop-filter: blur(10px);
  animation: lobbyNoticeFade .18s ease;
}
.lobby-notice.closing { opacity: 0; transition: .16s; }
.lobby-notice > section {
  position: relative;
  width: min(470px, 94vw);
  padding: 30px 26px;
  border: 1px solid #a64261;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0, #711936, #350713 58%, #1a020a);
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 90px #000d, 0 0 38px #ff315a3d;
  animation: lobbyNoticeRise .22s ease;
}
.notice-close { position:absolute; right:15px; top:11px; border:0; background:transparent; color:#dcb8c4; font-size:29px; cursor:pointer; }
.notice-heart { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 11px; border:2px solid #ff7892; border-radius:50%; background:#ff668419; color:#ff8da2; font-size:31px; box-shadow:0 0 23px #ff315a55; }
.lobby-notice small { color:#ffd45c; font-size:10px; font-weight:1000; letter-spacing:2.2px; }
.lobby-notice h2 { margin:8px 0 6px; font-size:28px; }
.lobby-notice p { margin:0; color:#dcb8c4; line-height:1.5; }
.notice-confirm { width:100%; min-height:48px; margin-top:21px; border:1px solid #ffe58b; border-radius:12px; background:linear-gradient(135deg,#ffe06f,#d99a19); color:#431325; font-weight:1000; cursor:pointer; box-shadow:0 0 20px #ffd45c44; }
@keyframes lobbyNoticeFade { from { opacity:0; } }
@keyframes lobbyNoticeRise { from { opacity:0; transform:translateY(12px) scale(.97); } }