/** Signed-in: stack date and account row on narrow screens so labels do not overlap. */
@media (max-width: 639px) {
    .top-bar.top-bar--session {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.75rem;
    }
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f9ff;
    touch-action: manipulation;
}
.font-game {
    font-family: 'Fredoka One', cursive;
}
.card-shadow {
    box-shadow: 0 10px 0px #bae6fd;
}
.bouncy {
    animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}
.correct-flash {
    animation: success 0.5s ease-out;
}
@keyframes success {
    0% { background-color: white; }
    50% { background-color: #dcfce7; }
    100% { background-color: white; }
}
#timer-bar {
    transition: width 1s linear;
}
/** Mythical Pokémon tile / portrait background (matches request). */
.pokemon-tile-mythical {
    background-color: #ff2c2c;
}

/** Legendary Pokémon tile / portrait background (matches request). */
.pokemon-tile-legendary {
    background-color: #ffef00;
}

.digital-clock {
    background: #1e293b;
    color: #fbbf24;
    padding: 8px 16px;
    border-radius: 12px;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    border: 2px solid #334155;
}

/** Pokédex modal panel: soft device-style frame with gradient, dots, and light orbs */
.pokemon-dex-modal-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(
        168deg,
        #f5f3ff 0%,
        #ede9fe 18%,
        #faf5ff 42%,
        #fffbeb 72%,
        #f3e8ff 100%
    );
    box-shadow:
        0 25px 50px -12px rgba(88, 28, 135, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.pokemon-dex-modal-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at center, rgba(124, 58, 237, 0.11) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
.pokemon-dex-modal-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 70% at 100% -15%, rgba(139, 92, 246, 0.32), transparent 52%),
        radial-gradient(ellipse 90% 55% at -5% 100%, rgba(251, 191, 36, 0.2), transparent 48%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(167, 139, 250, 0.12), transparent 55%);
}
.pokemon-dex-modal-panel > * {
    position: relative;
    z-index: 1;
}