* {
    box-sizing: border-box;
}

:root {
    --background: #101114;
    --panel: #191b21;
    --panel-light: #242731;
    --text: #ffffff;
    --muted: #9da2ad;
    --accent: #795cff;
    --danger: #ff4963;
}

body {
    margin: 0;

    min-height: 100vh;

background:
    radial-gradient(
        circle at top,
        #ff3f8e 0%,
        #b52b72 35%,
        #24121f 75%,
        #101114 100%
    );

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
}


.game {
    width: min(94vw, 650px);
    min-height: 600px;

    display: flex;
    justify-content: center;
    align-items: center;
}


.screen {
    display: none;

    width: 100%;

    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.screen.active {
    display: flex;
}


/* =========================
   ACCUEIL
========================= */

#startScreen h1 {
    margin: 0;

    text-align: center;

    font-size: clamp(55px, 13vw, 100px);

    line-height: 0.8;

    font-weight: 900;

    letter-spacing: -6px;

    transform: rotate(-2deg);
	
	text-shadow : 5px 5px 5px black;
}


#startScreen h1 span {
    display: block;

    font-size: 0.48em;

    letter-spacing: -2px;

    margin-top: 15px;
}


.intro {
	font-size: 50px;
	
    color: var(--muted);

    text-align: center;

    /*max-width: 400px;

    line-height: 1.5;*/


    margin-top: 40px;
	
	text-shadow : 2px 2px 0px black ;
}


button {
    border:none;

    border-radius: 14px;

    /* background: var(--accent); */
	background : mediumorchid;

    color: white;

    font-size: 18px;

    font-weight: bold;

    padding: 16px 45px;

    cursor: pointer;

    transition:
        transform 0.1s,
        filter 0.1s;

    box-shadow:
        0 8px 30px rgba(121, 92, 255, 0.3);
}


button:hover {
    filter: brightness(1.15);

    transform: translateY(-3px);
}


button:active {
    transform: scale(0.96);
}


.hint {
    /* color: #6f737d; */
	color: white;

    font-size: 15px;
	
	text-shadow : 1px 1px 0px black ;
}


/* =========================
   HUD
========================= */

.hud {
    width: 100%;

    display: grid;

    grid-template-columns: 80px 1fr 80px;

    gap: 12px;

    align-items: center;

    margin-bottom: 18px;
}


.stat {
    text-align: center;
}


.stat span {
    display: block;

    /*color: var(--muted);*/
	color: white;
	
	text-shadow : 1px 1px 0px black;

    font-size: 10px;

    font-weight: bold;

    margin-bottom: 4px;
}


.stat strong {
    font-size: 22px;
}


#rule {
    min-height: 52px;

    display: flex;

    justify-content: center;
    align-items: center;

    text-align: center;

    background: var(--panel);

    border: 1px solid #2d3038;

    border-radius: 14px;

    padding: 10px;

    font-size: 18px;

    font-weight: bold;
}


#timer {
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

#timer.danger {
    color: var(--danger);

    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white,
         0 0 6px white;
}


/* =========================
   GRILLE
========================= */

#grid {
    width: min(92vw, 72vh, 760px);
    aspect-ratio: 1 / 1;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin: 0 auto;
}


/* =========================
   CASE
========================= */

.card {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    border: 3px solid #ff4f9a;
    border-radius: 20px;

    background: #242731;

    overflow: hidden;

    cursor: pointer;

    box-shadow:
        0 0 12px rgba(255, 79, 154, 0.25),
        0 8px 25px rgba(0, 0, 0, 0.2);

    transition:
        transform 0.1s,
        filter 0.1s;
}


/* =========================
   PHOTO
========================= */

.card img {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;

    display: block;

    object-fit: cover !important;
    object-position: center center;

    margin: 0;
    padding: 0;

    border: 0;
}


/* =========================
   EFFETS
========================= */

.card:hover {
    filter: brightness(1.1);
    transform: scale(0.98);
}

.card:active {
    transform: scale(0.93);
}

.card.error {
    animation: shake 0.3s;
}

.card.success {
    filter: brightness(1.15);
}

/* SURVOL */

.card:hover {
    background: #2d313c;
    transform: scale(0.98);
}


.card:active {
    transform: scale(0.93);
}


.card.error {
    background: #4a2029;
    animation: shake 0.3s;
}


.card.success {
    background: #1c3c2d;
}

/* =========================
   FIN
========================= */

.dead {
    font-size: 70px;

    margin-bottom: 10px;
}


#endScreen h2 {
    font-size: 48px;

    margin: 0;
}


#endReason {
    color: var(--muted);
}


.finalScore {
    background: var(--panel);

    border: 1px solid #2d3038;

    border-radius: 18px;

    padding: 20px 60px;

    text-align: center;

    margin: 20px 0 30px;
}


.finalScore span {
    display: block;

    color: var(--muted);

    font-size: 11px;

    font-weight: bold;
}


.finalScore strong {
    display: block;

    font-size: 60px;

    margin-top: 5px;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 500px) {

    .game {
        min-height: 100vh;
    }

    .hud {
        grid-template-columns: 60px 1fr 60px;
    }

    #rule {
        font-size: 15px;
    }

    #grid {
        gap: 8px;
    }

    .card {
        border-radius: 15px;
    }

}

.successIcon {
    font-size: 70px;
    margin-bottom: 10px;
}

#successScreen h2 {
    font-size: 42px;
    margin: 0;
    text-align: center;
}

#successMessage {
    color: var(--muted);
    text-align: center;
    max-width: 400px;
    line-height: 1.5;
	font-size: 30px;
}