*,
*::before,
*::after {
    box-sizing: border-box;
}

:root { /* Déclaration de variables css */
    --white: #fcfcfc;
    --grey: #c4c4c4;
    --black: #161515;
    --green: #139d25;
    --red: #FF3233;
    --blue1: #eef6fd;
    --blue2: #c5daf5;
    --box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
    --box-shadow-inset: inset 2px 2px 12px rgba(0, 0, 0, .5);
    --gradient: linear-gradient(#c5daf5, #eef6fd);
}

body {
    margin: 0;
    padding: 0;
    font: 1em Verdana, sans-serif;
}

/* ----- Pokedex ----- */

body.pokedex {
    background-color: var(--black);
    color: var(--black);
}

.main-pokedex {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: var(--red);
    box-shadow: var(--box-shadow-inset);
}

.container-pokedex .header {
    border-bottom: 3px solid var(--black);
}

.container-pokedex h1 {
    margin: 5px 20px;
}

.mobile-column {
    flex-direction: column;
    align-items: center;
}

.round-box {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 15px;
}

.round-box .left {
    position: relative;
    background: radial-gradient(circle at center, #10FFFF, rgba(30, 185, 185, 0.8));
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    border: 2px solid var(--black); /* Bordure intérieure */
    cursor: pointer;
}

.round-box .left::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    border: 2px solid var(--black); /* Bordure extérieure */
}

.round-box .right {
    max-width: 50px;
    margin-right: 15px;
}

.round-box .right img {
    max-width: 100%; /* Responsive */
    height: auto;
}

.flex {
    display: flex;
}

.line-style .l1 {
    border-bottom: 3px solid var(--black);
}

.line-style .l3 {
    border-top: 3px solid var(--black);
    position: absolute;
    right: 0;
}

.line-style .l1,
.line-style .l3 {
    width: 50%;
    height: 40px;
    z-index: 1;
    position: relative;
}


.line-style .l2 {
    width: 100px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 2;
    background-color: var(--red);
}

.line-style .l2::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 320%;
    background-color: var(--black);
    transform: rotate(67deg);
    top: 0px;
    left: 102%;
    transform-origin: top left;
}

.screen {
    background-color: var(--white);
    border: 2px solid var(--black);
    margin: 30px;
    padding: 20px;
    height: 276px;
    box-shadow: var(--box-shadow-inset);
    overflow-y: auto;
}

.screen .img {
    height: 100px;
    text-align: center;
}

.screen .info  {
    height: 100%;
    overflow-y: auto;
}

.screen .list {
    height: 0;
    overflow-y: hidden;
}

.screen.showlist .info {
    height: 0;
    overflow-y: hidden;
}
.screen.showlist .list {
    height: 100%;
    overflow-y: auto;
}

#captured-pokemon-list {
    list-style-type: none;
    padding: 0;
}

#captured-pokemon-list li {
    display: flex;
    align-items: center;
}

#captured-pokemon-list li img {
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

.pokemon-link {
    cursor: pointer;
}

.showlist p {
    margin-top: 0;
}

.footer {
    display: flex;

    padding-bottom: 20px;
}

.dpad {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 30px;
}

.dpad > div {
    background-color: var(--black);
    border-radius: 5px;
    position: absolute;
    cursor: pointer;
}

.dpad .up {
    width: 30px;
    height: 30px;
    top: 0;
    left: 35px;
}

.dpad .down {
    width: 30px;
    height: 30px;
    bottom: 0;
    left: 35px;
}

.dpad .left {
    width: 30px;
    height: 30px;
    top: 35px;
    left: 0;
}

.dpad .right {
    width: 30px;
    height: 30px;
    top: 35px;
    right: 0;
}

.screen-input {
    background-color: #8BC644;
    box-shadow: var(--box-shadow-inset);
    padding: 38px 12px;
    border: 2px solid var(--black);
    outline: none;
    font: 1em Verdana, sans-serif;
    width: 185px;
}

.pad-buttons {
    margin-top: 25px;
}

.pad-buttons button {
    display: block;
    background-color: var(--black);
    box-shadow: var(--box-shadow-inset);
    color: var(--white);
    font: .8em sans-serif;
    border-radius: 25px;
    padding: 8px 12px;
    margin: 10px 20px;
    cursor: pointer;
    border: none;
    outline: none; /* Eviter bordure sur chrome */
    transition: 0.2s ease;
}
.pad-buttons button :hover {
    background-color: var(--grey2);
    color: var(--white);
}


/* ----- Capture ----- */

body.capture {
    height: 100vh;
    background: linear-gradient(to bottom, #8BC1F0, #4bb44e);
    overflow: hidden;
}
body.capture::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(90deg, #4CAF50 50%, #45a049 50%);
    background-size: 40px 100%;
    clip-path: polygon(0% 100%, 2.03% 79.27%, 10% 100%, 14.1% 72.98%, 20% 100%, 24.73% 66.18%, 30.45% 95.29%, 34.19% 76.91%, 39.01% 91.36%, 44.19% 72.46%, 50% 100%, 57.79% 70.37%, 61.35% 95.81%, 65.63% 69.59%, 70.09% 91.1%, 76.71% 67.75%, 80.81% 89.53%, 86.89% 71.16%, 90.72% 89.53%, 95.81% 69.84%, 100% 100%);
}

.capture main {
    user-select: none;
    padding: 15px;
}

.capture h1 {
    font: 300 1rem Arial;
    margin-top: 0;
}

#texte {
    font: bold 1.2rem sans-serif;
    text-align: center;
    margin-top: 40px;
}

.pokeballshake {
    animation: pokeballshake 6s;
    animation-iteration-count: 1;
}

@keyframes pokeballshake {
    0% { transform: translate(0, 6px) rotate(0deg); }
    5% { transform: translate(0, -6px) rotate(0deg); }
    10% { transform: translate(0, 6px) rotate(0deg); }
    15% { transform: translate(0, -6px) rotate(0deg); }
    20% { transform: translate(0, 6px) rotate(0deg); }
    25% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(0, 0) rotate(-30deg); }
    60% { transform: translate(0, 0) rotate(0deg); }
    70% { transform: translate(0, 0) rotate(-30deg); }
    80% { transform: translate(0, 0) rotate(0deg); }
    90% { transform: translate(0, 0) rotate(-30deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

#pokeball, #pokemon {
    background-size: cover;
    position: absolute;
}
#pokeball {
    width: 50px;
    height: 50px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s ease-out;
}
#pokemon {
    top: 18%;
    z-index: 0;
}
#pokemon-background {
    position: absolute;
    width: 320px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    top: 166px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

#personnage {
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 2;
    width: 151px;
    height: 172px;
}

@keyframes rotate {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

#pokeball.thrown {
    animation: rotate 0.5s linear infinite;
}

.btn-option {
    position: fixed;
    bottom: 140px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    color: var(--white);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: var(--box-shadow-inset);
    background-color: #047e04;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mini-pokedex {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 100px;
    background-color: var(--red);
    border-radius: 5px;
    box-shadow: var(--box-shadow-inset);
    z-index: 10;
    cursor: pointer;
}

#mini-pokedex::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: thick double var(--black);
    background: radial-gradient(circle at center, #10FFFF, rgba(30, 185, 185, 0.8));
    box-shadow: var(--box-shadow-inset);
}

#mini-pokedex::after {
    content: '';
    position: absolute;
    top: 38px;
    left: 7px;
    width: 56px;
    height: 40px;
    background-color: var(--white);
    border-radius: 2px;
}


/* ######################## Bureau ######################## */

@media screen and (min-width: 601px) {

    .container-pokedex {
        display: flex; /* À faire sur un parent (pour éviter d'appliquer display:flex sur tout le contenu du bloc) */
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
        height: 100vh; /* Pour centrer dans la hauteur totale de la vue */
    }

    .mobile-column {
        flex-direction: row;
        align-items: normal;
    }

    .screen-input {
        width: auto;
    }

    .pad-buttons {
        margin-top: 0;
    }
    

}