/* ═══ NOTICE ═══ */
  .notice {
    position:fixed;
    left:50%; bottom:34px;
    transform:translateX(-50%);
    z-index:120;
    max-width:min(340px, 88vw);
    background:var(--surface);
    border:0.5px solid rgba(239,123,46,0.3);
    border-radius:14px;
    padding:14px 18px;
    font-size:12px;
    line-height:1.6;
    color:var(--cream-dim);
    text-align:center;
    box-shadow:0 10px 34px rgba(0,0,0,0.5);
    animation:noticeIn 0.35s cubic-bezier(.2,.9,.3,1) both;
  }
  .notice.out { animation:noticeOut 0.45s ease both; }
  @keyframes noticeIn  { from { opacity:0; transform:translate(-50%, 14px); }
                         to   { opacity:1; transform:translate(-50%, 0); } }
  @keyframes noticeOut { from { opacity:1; transform:translate(-50%, 0); }
                         to   { opacity:0; transform:translate(-50%, 10px); } }