.game-shell { position: relative; }
.notice {
  --notice-ink: #fff4d9; --notice-accent: #eec579;
  position: absolute; z-index: 12; left: 50%; bottom: calc(var(--inventory-height) + 20px);
  display: flex; align-items: center; gap: 16px;
  width: min(var(--notice-width, 660px), calc(100% - 28px));
  padding: 20px 48px 20px 20px; min-height: 106px;
  border: 1px solid #b99960; border-radius: 7px;
  background: #0b1927 var(--notice-art, none) center / auto 100% repeat-x;
  color: var(--notice-ink); box-shadow: 0 12px 35px #000c, 0 0 0 4px #07101980;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 10px); transition: opacity .22s, transform .22s, visibility .22s;
}
.notice.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
/* Nine-slice frames preserve artwork corners instead of repeating entire panels. */
.notice[data-art-layout=frame] {
  border: var(--notice-frame-width, 30px) solid transparent;
  border-image: var(--notice-art) var(--notice-slice, 180) fill / var(--notice-frame-width, 30px) / 0 stretch;
  background: transparent; padding: 8px 52px 8px 8px;
  border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 14px #0008);
}
.notice[data-tone=paper] .notice-message { text-shadow: none; }
.notice[data-tone=paper] .notice-close:hover { color: var(--notice-ink); background: #342d2112; }
.notice-icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; font-size: 32px; color: var(--notice-accent); }
.notice-copy { min-width: 0; }
.notice-label { display: block; color: var(--notice-accent); font: bold 10px/1.4 var(--mono); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.notice-message { margin: 0; color: var(--notice-ink); font-size: var(--notice-font, 18px); font-weight: 600; line-height: 1.55; text-shadow: 0 1px 3px #000; overflow-wrap: anywhere; max-height: min(32dvh, 240px); overflow: auto; }
.notice-close { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--notice-accent); font-size: 27px; }
.notice-close:hover { color: #fff5d8; background: #ffffff12; }
.overlay-frame[data-art] .dialog-feedback { padding: 12px 14px; border: 1px solid var(--overlay-accent); border-left-width: 4px; border-radius: 4px; color: var(--overlay-ink) !important; font-size: 16px; font-weight: 600; line-height: 1.55; background: #00000012; }
@media (max-width: 520px), (max-height: 500px) {
  .notice { gap: 10px; min-height: 86px; padding: 14px 38px 14px 12px; bottom: calc(var(--inventory-height) + 10px); }
  .notice-icon { width: 38px; height: 38px; }
  .notice-message { font-size: max(16px, calc(var(--notice-font, 18px) - 2px)); line-height: 1.45; }
  .notice-label { margin-bottom: 4px; }
  .notice-close { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }
.reduced-motion .notice { transition: none; }