@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Pages/Authentication/Index.razor.rz.scp.css */
.auth-page[b-82xibcld6v] {
    min-height: 100dvh;
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* ── Compact branding for short viewports (iPhone SE: ~587px usable) ── */
@media (max-height: 680px) {
    .auth-bear[b-82xibcld6v] {
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }

    .auth-title[b-82xibcld6v] {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
    }

    .auth-subtitle[b-82xibcld6v] {
        font-size: 0.65rem;
        margin-top: 0.125rem;
    }

    .auth-branding[b-82xibcld6v] {
        margin-bottom: 0.75rem;
    }

    .auth-tab[b-82xibcld6v] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .auth-fields[b-82xibcld6v] {
        gap: 0.625rem;
    }

    /* Hide input labels to save vertical space */
    .auth-fields[b-82xibcld6v]  label {
        display: none;
    }
}
/* /Pages/Game/Multiplayer/QuickPlay.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────
   QuickPlay.razor.css — scoped animations for answer feedback.

   All selectors are scoped to this page by Blazor's CSS isolation.
   ───────────────────────────────────────────────────────────────── */

/* ── Correct: green glow flash ──────────────────────────────────── */
@keyframes flash-correct-b-61tnrmygrn {
    0%   { box-shadow: 0 0 0px  rgba(0, 230, 118, 0);    background-color: transparent; }
    30%  { box-shadow: 0 0 20px rgba(0, 230, 118, 0.40); background-color: rgba(0, 230, 118, 0.08); }
    100% { box-shadow: 0 0 0px  rgba(0, 230, 118, 0);    background-color: transparent; }
}

.input-flash-correct[b-61tnrmygrn] {
    animation: flash-correct-b-61tnrmygrn 550ms ease-out forwards;
    border-radius: 0.75rem;
}

/* ── Wrong: red glow + horizontal shake ─────────────────────────── */
@keyframes flash-wrong-b-61tnrmygrn {
    0%   { box-shadow: 0 0 0px  rgba(255, 82, 82, 0);    background-color: transparent; }
    30%  { box-shadow: 0 0 20px rgba(255, 82, 82, 0.40); background-color: rgba(255, 82, 82, 0.08); }
    100% { box-shadow: 0 0 0px  rgba(255, 82, 82, 0);    background-color: transparent; }
}

@keyframes shake-b-61tnrmygrn {
    0%, 100% { transform: translateX(0); }
    18%       { transform: translateX(-7px); }
    36%       { transform: translateX(7px); }
    54%       { transform: translateX(-5px); }
    72%       { transform: translateX(5px); }
    90%       { transform: translateX(-2px); }
}

.input-flash-wrong[b-61tnrmygrn] {
    animation: flash-wrong-b-61tnrmygrn 350ms ease-out forwards,
               shake-b-61tnrmygrn       350ms ease-out;
    border-radius: 0.75rem;
}

/* ── Too slow: amber glow (no shake) ────────────────────────────── */
@keyframes flash-slow-b-61tnrmygrn {
    0%   { box-shadow: 0 0 0px  rgba(255, 171, 64, 0);    background-color: transparent; }
    30%  { box-shadow: 0 0 20px rgba(255, 171, 64, 0.35); background-color: rgba(255, 171, 64, 0.07); }
    100% { box-shadow: 0 0 0px  rgba(255, 171, 64, 0);    background-color: transparent; }
}

.input-flash-slow[b-61tnrmygrn] {
    animation: flash-slow-b-61tnrmygrn 350ms ease-out forwards;
    border-radius: 0.75rem;
}

/* ── Inner content: bottom clearance = bar height + safe area ───── */
/*    Uses the global --bottom-bar-height token defined in app.css  */
.game-content[b-61tnrmygrn] {
    padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    .game-content[b-61tnrmygrn] {
        padding-bottom: 1rem; /* md: restore normal desktop padding */
    }
}

/* ── Score hop: brief elastic scale on the PlayerCard wrapper ────── */
@keyframes score-hop-b-61tnrmygrn {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.20); }
    65%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.score-hop[b-61tnrmygrn] {
    animation: score-hop-b-61tnrmygrn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}