/* Notices (js/19-notices.js): what the admins tell a player, as a banner at
   the top of the open game. One at a time; the rest wait behind it ("+2 more").
   Under the sheet veil (60) and the tutorial (66) so neither is covered, above
   the tab bar (50) and the top bar (40). */
.noticeBanner{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));z-index:58;transform:translateX(-50%);
  width:min(440px,calc(100% - 20px));max-height:calc(100vh - 100px);overflow:auto;box-sizing:border-box;padding:12px 14px 13px;
  border:2px solid #454b7b;border-radius:14px;background:linear-gradient(180deg,#232a52,#151831);color:#eef0ff;
  box-shadow:0 10px 28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);text-align:left}
.noticeBanner[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.noticeBanner{animation:noticeIn .22s ease-out}}
@keyframes noticeIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

.noticeBanner.event{border-color:#c4a6fa}
.noticeBanner.warn{border-color:#d9855a}
.noticeBanner.good{border-color:#59c79f}

.noticeHead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.noticeHead .eyebrow{color:#f4d489;text-align:left;margin:0}
.noticeBanner.warn .eyebrow{color:#f0a37c}
.noticeBanner.good .eyebrow{color:#95dfbc}
.noticeMore{padding:1px 8px;border-radius:99px;background:#10162f;color:#b7bedb;font-size:11px;font-weight:700}
.noticeX{margin-left:auto;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:#b7bedb;font-size:20px;line-height:1;cursor:pointer}
.noticeX:hover,.noticeX:focus-visible{background:#ffffff1a;color:#fff}

.noticeTitle{display:block;font-size:15px;line-height:1.3}
.noticeBody{margin:6px 0 0;font-size:13px;line-height:1.45;color:#d6dbf3;white-space:pre-wrap;overflow-wrap:anywhere}
.noticeFacts{margin-top:8px;color:#b7bedb;font-size:12px}
.noticeTasks{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.noticeTasks li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid #414c78;border-radius:10px;background:#171e3c;font-size:12.5px}
.noticeTasks li>span:first-child{min-width:0;overflow-wrap:anywhere}
.noticeReward{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.noticeRewardItem{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px 7px;border:1px solid #3f8a64;border-radius:12px;
  background:color-mix(in srgb,#59c79f 12%,#171e3c);text-align:center}
.noticeRewardItem b{font-size:17px;font-weight:800;line-height:1.15;color:#fff}
.noticeRewardItem small{font-size:11px;font-weight:600;color:#b9c1e8}
.noticeActs button:disabled{opacity:.6;cursor:default}
.noticeActs{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}
.noticeActs .btn.pri{border-color:#e8d7ff;background:#c4a6fa;color:#1c1744;box-shadow:0 3px #77629b;font-weight:600}