/* Small physical notices, not website alerts. Existing visibility, reward
   accounting and installation timing remain owned by the game/scene rules. */
:root {--feedback-paper:url('./assets/ui-washi-v21.webp');--feedback-frame:url('./assets/ui-frame-walnut-v21.webp');--feedback-ink:#4c3d29;--feedback-green:#48623d;--feedback-red:#a24f38;}
/* Installation receives a framed paper note; the scene and flying item stay live. */
.placement-banner {
  width:min(calc(100vw - 32px),370px);
  padding:14px 17px 15px;
  border:7px solid #61412b;
  border-image:var(--feedback-frame) 10.2% / 1 / 0 stretch;
  border-radius:0;
  background-color:#f0e0ba;
  background-image:linear-gradient(#fff7dc16,#fff7dc16),var(--feedback-paper);
  background-size:auto,470px;
  background-position:center,center 38%;
  background-clip:padding-box;
  color:var(--feedback-ink);
  box-shadow:0 3px 2px #130c0780,0 9px 22px #0005,inset 0 1px #fff9df,inset 0 -2px 3px #79522c25;
  text-align:center;
  pointer-events:none;
}
.placement-banner b {font:400 15px/1.7 var(--reading-serif,var(--serif));color:#4d5536;word-break:keep-all;overflow-wrap:anywhere;}
.placement-banner span {margin-top:7px;font:400 12px/1.75 var(--reading-serif,var(--serif));color:#7c6241;word-break:keep-all;overflow-wrap:anywhere;}
/* Short gain tags echo pencilled inventory labels, with legible signed values. */
.placement-gain {
  width:max-content;max-width:150px;min-width:82px;
  padding:8px 12px 8px 13px;
  border:1px solid #d3bc8f;
  border-left:3px solid #72815a;
  border-radius:1px 3px 2px 1px;
  background-color:#f4e4bf;
  background-image:var(--feedback-paper);
  background-size:360px;
  background-position:40% 55%;
  color:var(--feedback-green);
  font:700 12px/1.5 var(--reading-serif,var(--serif));
  text-align:center;white-space:normal;
  box-shadow:inset 0 1px #fff9e0,0 2px 0 #ae93632b,0 4px 9px #24170c30;
  text-shadow:none;
}
.placement-gain.loss {color:var(--feedback-red);border-left-color:#a96249;background-color:#f4e4bf;background-image:var(--feedback-paper);}
/* These transient slips remain noninteractive and never steal a cooking gesture. */
#toast,
#kitchen-inline-feedback {
  isolation:isolate;
  color:var(--feedback-ink);
  background:transparent;
  border:0;border-radius:0;
  box-shadow:none;
  text-shadow:none;
  font:400 12px/1.85 var(--reading-serif,var(--serif));
  word-break:keep-all;overflow-wrap:anywhere;
  padding:13px 19px;
  filter:drop-shadow(1px 4px 3px #24150766);
  pointer-events:none;
}
#toast {max-width:min(calc(100vw - 36px),420px);}
#toast::before,
#kitchen-inline-feedback::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:#f4e4c2;
  background-image:linear-gradient(100deg,#b3986421,transparent 5%,transparent 96%,#a58a5c26),var(--feedback-paper);
  background-size:auto,460px;
  background-position:center,38% 63%;
  clip-path:polygon(.2% 2%,14% 0,36% 1.3%,64% .2%,87% 1%,99.7% 0,100% 26%,99.7% 68%,100% 99%,78% 100%,56% 98.6%,28% 100%,9% 99.2%,0 100%,.3% 66%,0 29%);
  box-shadow:inset 0 1px #fff9df,inset 0 -2px 2px #92733c42;
}
#kitchen-inline-feedback {position:relative;margin:0 0 10px;padding:10px 13px;filter:drop-shadow(0 2px 1px #130c0738);}
/* Currency keeps its actual flight path; only the note material changes. */
.cash-flight {
  background-color:#e9ddba;
  background-image:linear-gradient(#b6c49c2b,#b6c49c2b),var(--feedback-paper);
  background-size:auto,260px;
  border:3px double #73805a;
  outline:1px solid #e2cf9f;
  border-radius:1px;
  color:#4d6542;
  font:700 13px/1.4 var(--reading-serif,var(--serif));
  box-shadow:inset 0 0 0 2px #f9efd35e,0 3px 8px #24170c55;
}
/* Small shop benefits are ink stamps on the same paper, never capsule badges. */
.furnish-card .ambience-reward,.replace-delta {
  border-radius:2px;
  color:var(--feedback-green);
  background-color:transparent;
  background-image:linear-gradient(#e4e5c640,#e4e5c640),var(--feedback-paper);
  background-size:auto,400px;
  border:1px solid #94a07780;
  box-shadow:inset 0 1px #fff7dc77;
}
.replace-delta {display:inline-block;padding:5px 7px;font:400 11px/1.6 var(--reading-serif,var(--serif));}
.replace-delta.negative {color:var(--feedback-red);border-color:#b27b5e80;background-image:var(--feedback-paper);}
@media(max-width:359px) {
  .placement-banner {width:calc(100vw - 28px);padding:12px 13px;border-width:6px;}
  .placement-banner b {font-size:14px;}
  .placement-banner span {font-size:11px;}
  .placement-gain {font-size:11px;padding:7px 9px;min-width:76px;}
  #toast {font-size:11px;padding:11px 15px;}
}

/* Glowing red unread indicator; only the dot shimmers. */
.game-dock #story-badge{width:12px;height:12px;right:6px;top:6px;border:2px solid #fff0d2;border-radius:50%;background:#d62f35;box-shadow:0 0 4px 1px #ff594c,0 0 10px 3px #f33a3677;filter:none;animation:unread-glow 1.6s ease-in-out infinite;transform:none;pointer-events:none}
.game-dock #story-badge::before,.game-dock #story-badge::after{content:none;display:none;animation:none}

@keyframes unread-glow{0%,100%{background-color:#d62f35;box-shadow:0 0 3px 1px #ff594c,0 0 7px 2px #f33a3655}50%{background-color:#ff6054;box-shadow:0 0 6px 2px #ffb6a0,0 0 13px 4px #ff4948bb}}
@media(prefers-reduced-motion:reduce){.game-dock #story-badge{animation:none;background:#ed453f;box-shadow:0 0 5px 2px #ff594c99}}