/* Higher or Lower game styles.
 * Most layout is Tailwind classes inline in the templates; this file only
 * holds the reveal animation + a couple of hover/focus refinements that
 * Tailwind can't express cleanly. */

.hl-shell { transition: border-color 200ms ease-out; }

.hl-card { transition: transform 200ms ease-out, border-color 200ms ease-out; }

/* Mystery-card flash on reveal: green for correct, amber for wrong.
 * Brief scale-up draws the eye to the number that just appeared. */
@keyframes hlFlashCorrect {
    0%   { transform: scale(0.85); color: rgb(167, 243, 208); text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
    35%  { transform: scale(1.12); color: rgb(110, 231, 183); text-shadow: 0 0 18px rgba(16, 185, 129, 0.55); }
    100% { transform: scale(1.00); color: rgb(167, 243, 208); text-shadow: 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes hlFlashWrong {
    0%   { transform: scale(0.85); color: rgb(252, 211, 77); text-shadow: 0 0 0 rgba(245, 158, 11, 0); }
    35%  { transform: scale(1.12); color: rgb(253, 186, 116); text-shadow: 0 0 18px rgba(245, 158, 11, 0.6); }
    100% { transform: scale(1.00); color: rgb(252, 211, 77); text-shadow: 0 0 0 rgba(245, 158, 11, 0); }
}
.hl-mystery-value.hl-flash-correct { animation: hlFlashCorrect 600ms ease-out forwards; }
.hl-mystery-value.hl-flash-wrong   { animation: hlFlashWrong   600ms ease-out forwards; }

/* Disabled guess buttons during the brief reveal window. */
.hl-guess-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Respect prefers-reduced-motion: skip the scale + shadow, keep the color swap. */
@media (prefers-reduced-motion: reduce) {
    .hl-mystery-value.hl-flash-correct,
    .hl-mystery-value.hl-flash-wrong {
        animation: none;
    }
}

/* Floating "+N pts" indicator that rises from the mystery card on a correct
 * guess. Positioned absolutely so it doesn't shift card layout. Fades out as
 * it rises so it leaves the eye gracefully. */
.hl-card { position: relative; }
.hl-points-float {
    position: absolute;
    top: 12px;
    right: 16px;
    font-weight: 700;
    font-size: 1.05rem;
    color: rgb(110, 231, 183);
    pointer-events: none;
    opacity: 0;
    animation: hlPointsFloat 1100ms ease-out forwards;
    text-shadow: 0 1px 6px rgba(16, 185, 129, 0.45);
}
@keyframes hlPointsFloat {
    0%   { transform: translateY(8px);  opacity: 0; }
    20%  { transform: translateY(0);    opacity: 1; }
    80%  { transform: translateY(-22px); opacity: 1; }
    100% { transform: translateY(-32px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hl-points-float {
        animation: none;
        opacity: 1;
    }
}