/* Small custom layer on top of Tailwind. */

@keyframes pop-in { from { transform: scale(.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.pop-in { animation: pop-in .18s ease-out both; }

@keyframes flicker { 0%,100% { opacity: .85; transform: translateY(0) scale(1) } 50% { opacity: 1; transform: translateY(-4px) scale(1.08) } }
@keyframes rise { 0% { transform: translateY(10px); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(-14px); opacity: .9 } }

/* Heat check: glowing border + dancing flames around the screen. */
.heat-on { box-shadow: inset 0 0 0 4px rgba(249,115,22,.9), inset 0 0 60px rgba(249,115,22,.45); }
.flame { position: fixed; font-size: 34px; pointer-events: none; z-index: 45; animation: flicker .5s ease-in-out infinite; }
.flame.b { bottom: -2px; } .flame.t { top: -2px; } .flame.l { left: 2px; } .flame.r { right: 2px; }

@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }
.shake { animation: shake .3s ease-in-out; }

.tile-flip { transition: background-color .15s ease; }