/* 知らせの帯（js/notice.js）と、セーブが消える警告（js/save-safety.js）の見た目（10-17）。
   帯は #phone の上から滑り込む。帯の外は押せるまま（下の画面を塞がない）。 */
.notice { position: absolute; left: 0; right: 0; top: 0; z-index: 45; display: flex; justify-content: center;
  padding: calc(8px + var(--sat, 0px)) 8px 0; pointer-events: none; transform: translateY(-110%); transition: transform .32s cubic-bezier(.2, .9, .3, 1.15); }
.notice[hidden] { display: none; }
.notice.in { transform: none; }
.notice > * { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }

.sn-win { width: min(100%, 400px); padding: 10px 10px 8px; font-size: 13px; line-height: 1.5; color: #fff; }
.sn-move .sn-win { border-color: var(--gold); box-shadow: 0 0 0 2px var(--win), 0 0 18px #f2c14e66, 0 6px 14px #000a; }
.sn-fail .sn-win { border-color: #ff7b6b; box-shadow: 0 0 0 2px var(--win), 0 0 18px #ff5a4a66, 0 6px 14px #000a; }
.sn-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.sn-ico { width: 52px; height: 52px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px #0009); }
.sn-move .sn-ico { animation: snHop 1.6s ease-in-out 2; }
@keyframes snHop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .sn-move .sn-ico { animation: none; } }
.sn-ico-wrap { position: relative; flex: none; display: block; }
.sn-bang { position: absolute; right: -2px; top: -2px; width: 20px; height: 20px; border-radius: 50%; background: #e8432f; border: 2px solid #fff;
  color: #fff; font-weight: bold; font-size: 13px; line-height: 16px; font-style: normal; text-align: center; }
.sn-txt { flex: 1; min-width: 0; }
.sn-txt b { display: block; font-size: 15px; color: var(--gold); font-weight: bold; }
.sn-fail .sn-txt b { color: #ffb3a8; }
.sn-txt small { display: block; font-size: 11.5px; color: #cfe4ff; line-height: 1.45; margin-top: 1px; }
.sn-x { flex: none; align-self: flex-start; width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line); background: var(--win2);
  color: #fff; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.sn-btns { display: flex; gap: 6px; margin-top: 8px; }
.sn-btns .btn { flex: 1; min-width: 0; margin: 0; font-size: 13px; padding: 8px 4px; white-space: nowrap; line-height: 1.25; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 3px; }
.sn-ext { width: 12px; height: 12px; flex: none; }
.sn-never { display: block; margin: 6px auto 0; background: none; border: 0; color: #cfe4ffb0; font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; padding: 4px 10px; }
@media (max-width: 340px) { .sn-btns { flex-direction: column; } .sn-ico { width: 44px; height: 44px; } }