/* Pokedex Header */
.pokedex-header {
    background: linear-gradient( 180deg, #d53d3d, #b71c1c);
}

/* Pokedex Header Top Row */
.top-panel {
    padding: 10px;
    background: linear-gradient(#d63a3a, #b71c1c);
    box-shadow: 0 2px rgba(255,255,255,.1);
    border-radius: 24px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* LED Row*/
.led-row {
    display: flex;
    gap: 18px;
}

.small-leds {
    display: flex;
    gap: 10px;
    padding-top: 5px;
}

.bigled {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    position: relative;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,.35), inset 2px 2px 3px rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.35);
}
    /* White Shine */
    .bigled::before {
        content: "";
        position: absolute;
        width: 35%;
        height: 35%;
        left: 22%;
        top: 18%;
        border-radius: 50%;
        background: rgba(255,255,255,.9);
        filter: blur(1px);
    }

.led {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,.35), inset 2px 2px 3px rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.35);
}
    /* White Shine */
    .led::before {
        content: "";
        position: absolute;
        width: 35%;
        height: 35%;
        left: 22%;
        top: 18%;
        border-radius: 50%;
        background: rgba(255,255,255,.9);
        filter: blur(1px);
    }

.blue {
    background: radial-gradient( circle at 30% 30%, #9fe8ff, #37b9ff 40%, #0068c9 75%, #003a7d 100%);
    animation: pulse 4s ease-in-out infinite;
}

.red {
    background: radial-gradient( circle at 30% 30%, #ffaaaa, #ff4d4d, #d61b1b, #6f0000);
}

.yellow {
    background: radial-gradient( circle at 30% 30%, #fff9b0, #ffd54f, #ffb300, #b26a00);
}

.green {
    background: radial-gradient( circle at 30% 30%, #b8ffb8 0%, #5de85d 35%, #22b322 70%, #0b5e0b 100%);
}

@keyframes pulse {

    0%,100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}

/* Pokedex Search */

.pokedex-search {
    gap: 16px;
    padding: 16px;
}
    /* Outer frame */
    .pokedex-search .mud-input-root {
        background: linear-gradient(#d83e3e,#b71c1c) !important;
        border-radius: 18px !important;
        border: 3px solid #821010 !important;
        box-shadow: inset 0 2px rgba(255,255,255,.25), inset 0 -3px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.35) !important;
        padding-left: 12px !important;
    }

    .pokedex-search:hover .mud-input-root {
        transform: translateY(-2px) !important;
        box-shadow: inset 0 2px rgba(255,255,255,.25), inset 0 -3px rgba(0,0,0,.25), 0 12px 22px rgba(0,0,0,.4) !important;
    }

    .pokedex-search input {
        padding: 14px 16px !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        letter-spacing: .05em !important;
        color: #222 !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,.12) !important;
        transition: .2s !important;
    }

    .pokedex-search .mud-input-adornment {
        transition: transform .25s ease;
    }

    .pokedex-search:hover .mud-input-adornment {
        transform: rotate(-12deg) scale(1.15);
    }

    .pokedex-search.autocomplete-open .mud-input-adornment {
        transform: rotate(360deg);
    }

.mud-popover {
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid #2c7b94;
    background-color: #b9ffff;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
    .mud-popover .mud-selected-item {
        background: transparent !important;
    }

        .mud-popover .mud-selected-item p {
            color: #1f2937 !important;
        }

.mud-list {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

    .mud-list-item:hover {
        background: #6cf6ff !important;
        border-radius: 18px !important;
    }

.mud-popover {
    animation: pokedexOpen .22s ease !important;
    transform-origin: top !important;
}

@keyframes pokedexOpen {

    from {
        opacity: 0 !important;
        transform: scaleY(.8) scaleX(.96) !important;
    }

    to {
        opacity: 1 !important;
        transform: scaleY(1) scaleX(1) !important;
    }
}

.pokedex-search .mud-input-adornment {
    color: #D32F2F !important;
    background: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
}

/* Remove Mud's Material outline */
.pokedex-search .mud-input-outlined-border {
    border: 0 !important;
}