/* crédit : chatgpt */
/* ===================== RESET / BASE ===================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #1b1b1b;
}

body {
    min-height: 100vh;
    font-family: "Press Start 2P", monospace;
    color: #00ff88;
    image-rendering: pixelated;
}

/* ===================== SCORE ===================== */
h1 {
    text-align: center;
    margin: 16px 0;
    font-size: clamp(12px, 2vw, 16px);
    letter-spacing: 2px;
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
}

h2 {
    text-align: center;
    margin: 16px 0;
    font-size: clamp(12px, 1.8vw, 14px);
    letter-spacing: 2px;
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
}

/* ===================== GAME MAP ===================== */
#map {
    display: grid;
    grid-template-rows: repeat(20, 1fr);
    grid-template-columns: repeat(20, 1fr);

    margin: auto;
    width: min(94vw, 60vh);
    height: min(94vw, 60vh);

    border: 4px solid #00ff88;
    background-color: #202020;

    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
}

/* ===================== GRID CELLS ===================== */
.case {
    border: 1px solid #2a2a2a;
    background-color: #303030;

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

/* ===================== SNAKE ===================== */
.case-snake {
    width: 90%;
    height: 90%;
    background-color: #00ff88;

    box-shadow:
        inset 0 0 4px #00cc6e,
        0 0 6px rgba(0, 255, 136, 0.8);
}

/* ===================== APPLE ===================== */
.case-apple {
    width: 60%;
    height: 60%;
    background-color: #ff3b3b;
    border-radius: 2px;

    box-shadow:
        inset 0 0 4px #aa0000,
        0 0 6px rgba(255, 59, 59, 0.8);
}

/* ===================== MODAL WINDOW ===================== */
.modale-window {
    position: fixed;
    inset: 0;

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

    z-index: 9999;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 1px,
            rgba(0, 0, 0, 0.03) 1px,
            rgba(0, 0, 0, 0.03) 2px
        ),
        rgba(0, 0, 0, 0.85);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ===================== MODAL TEXT ===================== */
.modale-window p {
    font-size: clamp(12px, 2.5vw, 16px);
    margin-bottom: 24px;
    text-align: center;
    max-width: 90%;
    line-height: 1.6;

    color: #00ff88;
    text-shadow:
        0 0 4px rgba(0, 255, 136, 0.8),
        0 0 12px rgba(0, 255, 136, 0.4);
}

/* ===================== MODAL BUTTON ===================== */
.modale-window button {
    background: #00ff88;
    color: #000;
    border: none;
    padding: 14px 28px;
    font-size: clamp(12px, 2.5vw, 14px);
    border-radius: 4px;
    cursor: pointer;

    letter-spacing: 2px;
    text-transform: uppercase;

    box-shadow:
        0 4px 0 #00aa5a,
        0 0 10px rgba(0, 255, 136, 0.6);

    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.modale-window button:hover {
  transform: translateY(-2px);
}

.modale-window button:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 #00cc6e;
}

/* ===================== MOBILE OPTIMIZATION ===================== */
@media (max-width: 600px) {
    h1 {
        margin: 10px 0;
    }

    #map {
        width: 92vw;
        height: 92vw;
    }

    .modale-window p {
        margin-bottom: 16px;
    }
}
/* ===================== BEST SCORE STATS ===================== */
#stats {
    margin: 20px auto;
    padding: 16px 20px;
    width: min(90vw, 420px);

    border: 2px solid #00ff88;
    background-color: #181818;

    text-align: center;

    box-shadow:
        0 0 12px rgba(0, 255, 136, 0.35),
        inset 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Title (Score / Apple / Time) */
#stats h2 {
    margin-bottom: 12px;
    font-size: clamp(12px, 2vw, 14px);
    letter-spacing: 2px;

    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
}

/* Stats content */
#stats p {
    font-size: clamp(10px, 2vw, 12px);
    line-height: 1.8;

    color: #00ff88;
    text-shadow:
        0 0 4px rgba(0, 255, 136, 0.6);
}

/* ===================== BEST SCORE BUTTONS ===================== */

/* Container for Score / Apple / Time buttons */
#stats > div {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: wrap;
}

/* Category buttons */
#stats > div > button {
    background: #202020;
    color: #00ff88;

    border: 2px solid #00ff88;
    padding: 8px 12px;

    font-family: "Press Start 2P", monospace;
    font-size: clamp(8px, 1.8vw, 10px);
    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 0 6px rgba(0, 255, 136, 0.4),
        inset 0 0 6px rgba(0, 0, 0, 0.8);

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

/* Hover effect */
#stats > button:hover {
    background-color: #00ff88;
    color: #000;

    box-shadow:
        0 0 12px rgba(0, 255, 136, 0.8),
        inset 0 0 6px rgba(255, 255, 255, 0.3);

    transform: translateY(-1px);
}

/* Active (pressed) */
#stats > button:active {
    transform: translateY(0);
    box-shadow:
        0 0 6px rgba(0, 255, 136, 0.6),
        inset 0 0 10px rgba(0, 0, 0, 0.9);
}

/* ===================== RESET BUTTON ===================== */

/* Reset button stands out */
#stats > button {
    margin-top: 12px;
    width: 100%;

    background: #ff3b3b;
    color: #000;
    border-color: #ff3b3b;

    box-shadow:
        0 0 10px rgba(255, 59, 59, 0.7),
        inset 0 0 6px rgba(0, 0, 0, 0.8);
}

/* Reset hover */
#stats > button:hover {
    background: #ff5f5f;
    box-shadow:
        0 0 16px rgba(255, 59, 59, 0.9);
}