/* ---------- Toasts / banners / floating text ---------- */
#toasts { position: fixed; z-index: 40; top: calc(var(--hud) + 76px); right: calc(var(--panel) + 12px); display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
.toast { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 14px 12px; border-radius: 16px; background: rgba(12,16,30,.94); border: 1px solid var(--line); box-shadow: 0 16px 40px -12px rgba(0,0,0,.8); overflow: hidden; animation: tin .55s cubic-bezier(.2,1.4,.4,1) both; }
.toast.out { animation: tout .4s ease-in forwards; }
@keyframes tin { from { opacity: 0; transform: translateX(70px) scale(.9); } }
@keyframes tout { to { opacity: 0; transform: translateX(70px); } }
.toast .ti { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255,255,255,.08); }
.toast.ach { border-color: rgba(255,212,59,.5); }
.toast.ach .ti { background: radial-gradient(circle at 35% 30%, #fff6c8, var(--gold) 50%, #c99700); box-shadow: 0 0 22px rgba(255,212,59,.65); animation: trophy .8s cubic-bezier(.2,1.6,.4,1) .1s both; }
@keyframes trophy { from { transform: scale(0) rotate(-200deg); } }
.toast small { display: block; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.toast.ach small { color: var(--gold); }
.toast b { display: block; font-size: .88rem; line-height: 1.3; }
.toast .tbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; animation: tbar linear forwards; }
@keyframes tbar { to { transform: scaleX(0); } }

#banner { position: fixed; z-index: 35; left: 0; right: var(--panel); top: 34%; text-align: center; pointer-events: none; opacity: 0; padding: 0 12px; }
#banner.go { animation: banner 3s cubic-bezier(.2,1,.3,1) forwards; }
#banner b { display: block; font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(2.4rem, 8vw, 5.6rem); letter-spacing: .04em; line-height: 1; background: linear-gradient(180deg, #fffbe0, var(--gold) 45%, #e08a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #6b3d00) drop-shadow(0 12px 30px rgba(0,0,0,.7)); }
#banner span { display: inline-block; margin-top: 10px; padding: 7px 18px; border-radius: 99px; background: rgba(0,0,0,.65); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(.75rem, 2vw, 1.05rem); }
@keyframes banner {
	0% { opacity: 0; transform: scale(3) rotate(-5deg); }
	10% { opacity: 1; transform: scale(.94); }
	16% { transform: scale(1.04); }
	22%, 80% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.08) translateY(-30px); }
}

.pop { position: fixed; z-index: 20; left: 0; top: 0; pointer-events: none; font-family: "Anton", sans-serif; font-size: 1.5rem; color: #fff; -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255,212,59,.7); white-space: nowrap; animation: popup 1s ease-out forwards; }
.pop.hot { color: var(--gold); font-size: 2rem; }
.pop.big { color: var(--gold); font-size: 2.8rem; animation-duration: 1.6s; }
.pop.spend { color: #ff8fa3; }
.pop.nope { color: #ff6b6b; font-size: 1.1rem; }
@keyframes popup {
	0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); }
	15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
	100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}
.flycoin { position: fixed; z-index: 21; left: 0; top: 0; font-size: 22px; line-height: 1; pointer-events: none; }

.bug { position: fixed; z-index: 22; pointer-events: none; transform: translate(-50%, -100%); padding: 12px 16px; border-radius: 14px; background: #fffbea; color: #3a2a00; font-weight: 800; font-size: .86rem; width: max-content; max-width: 240px; text-align: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); animation: bugin .35s cubic-bezier(.2,1.6,.4,1) both; transition: opacity .4s; }
.bug small { display: block; font-size: .6rem; letter-spacing: .14em; color: #a0782c; margin-bottom: 3px; }
.bug .stamp { position: absolute; left: 50%; top: 52%; padding: 3px 10px; border: 3px solid #e03131; color: #e03131; font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .06em; white-space: nowrap; border-radius: 6px; background: rgba(255,251,234,.7); transform: translate(-50%, -50%) rotate(-12deg); animation: stamp .3s cubic-bezier(.2,1.6,.4,1) .55s both; }
.bug.out { opacity: 0; }
@keyframes stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(3); } }
@keyframes bugin { from { opacity: 0; transform: translate(-50%, -70%) scale(.4); } }