@charset "ISO-8859-1";
/* CSS Document */

body {
    margin: 0;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Conteneur du canvas */
#canvaholder {
    position: relative;            /* 🔑 référence pour #regles */
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Canvas */
canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* ================= RÈGLES ================= */

#regles {
    position: absolute;            /* 🔑 positionnée sur le canvas */
    top: 10px;                     /* distance du haut du canvas */
    left: 50%;
    transform: translateX(-50%);   /* centrage parfait */

    background: linear-gradient(90deg, #111, #222);
    color: white;
    padding: 15px 30px;

    border-bottom: 3px solid gold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);

    text-align: center;
    z-index: 10;                   /* au-dessus du canvas */
    pointer-events: none;          /* n'interfère pas avec le jeu */
}

/* Titre */
#regles h2 {
    margin: 0;
    color: gold;
}

/* Texte */
#regles p {
    margin: 5px 0 0;
    font-size: 14px;
}