@supports (padding: max(0px)) {
    .safe-pt { padding-top: max(1rem, env(safe-area-inset-top)); }
    .safe-pb { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .safe-pl { padding-left: max(1rem, env(safe-area-inset-left)); }
    .safe-pr { padding-right: max(1rem, env(safe-area-inset-right)); }
    .safe-pb-action { padding-bottom: max(5rem, calc(5rem + env(safe-area-inset-bottom))); }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

#toast {
    position: fixed; bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 7.5rem));
    opacity: 0; visibility: hidden;
    background: rgba(15, 23, 42, 0.96); color: white;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 60; max-width: 90vw;
    text-align: center; font-size: 0.875rem;
    pointer-events: none;
}
#toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1; visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s;
}

/* Shell del juego: alto de viewport para que las barras inferiores nunca
   queden bajo el pliegue; solo la tarjeta del ítem scrollea. */
.app-viewport {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.pulse-win { animation: pulseWin 0.6s ease-out; }
@keyframes pulseWin {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); box-shadow: 0 0 32px rgba(16, 185, 129, 0.55); }
    100% { transform: scale(1); }
}

.shake { animation: shake 0.4s ease-in-out; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.fade-in { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.btn-tap { touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }

.pop-emote { animation: popEmote 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
@keyframes popEmote {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.4); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pulse-win, .shake, .fade-in, .pop-emote { animation: none !important; }
    #toast { transition: none; }
}