/* Errors (js/errors.js): a card at the top centre, cream with a thick dark-red outline and a hard
   shadow — the same cartoon look as the rest of the site, in either theme (fixed colours on purpose). */
#errLayer {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(32rem, calc(100vw - 24px));
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.err-toast {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 44px 18px 14px;
  background: #fff4e6;
  color: #2a1216;
  border: 3px solid #7a1022;
  border-radius: 16px;
  box-shadow: 0 4px 0 #7a1022, 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 6px rgba(224, 52, 72, .28);
  overflow: hidden;
  font: 600 1.02rem/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  animation: errIn .42s cubic-bezier(.2, 1.4, .4, 1) both, errShake .5s .35s both;
}
.err-toast.shake { animation: errShake .5s both; }
.err-toast.out { animation: errOut .22s ease-in both; }
.err-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: #ffe0e4; border: 2.5px solid #7a1022; border-radius: 50%; }
.err-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.err-title { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #b3182f; }
.err-text { font-size: 1.08rem; font-weight: 700; overflow-wrap: anywhere; }
.err-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 2px solid #7a1022; border-radius: 50%; background: #fff; color: #7a1022; font: 700 .85rem/1 system-ui, sans-serif; cursor: pointer; padding: 0; }
.err-bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: #e03448; transform-origin: left; }
@keyframes errBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes errIn { from { opacity: 0; transform: translateY(-28px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes errOut { to { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes errShake { 0%, 100% { translate: 0; } 20% { translate: -9px; } 40% { translate: 8px; } 60% { translate: -5px; } 80% { translate: 3px; } }
@media (prefers-reduced-motion: reduce) { .err-toast, .err-toast.shake { animation: none; } .err-toast.out { animation: errOut .01s both; } }
@media (max-width: 520px) { .err-ico { width: 40px; height: 40px; } .err-text { font-size: 1rem; } }
/* an event in the game log that used to borrow the error colour (a player gave up / went bankrupt) */
.toast.bad { background: #a4142c; color: #fff; }