/* =============================================
   BASE — Variables, Reset, Typographie, Layout
   ============================================= */

:root {
    --color-black: #000;
    --color-white: #fff;
    --color-primary: #1baaff;
    --color-light-grey: #ddd;
    --color-dark-grey: #555;
    --color-grey: #c0c0c0;
    --color-yellow: #ff0;
    --color-red: #be0000;
    --color-transparent-black: rgba(0, 0, 0, 0.9);
    --color-border-grey: #ccc;
}

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

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    line-height: 1.4;
    font-family: Arial, sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../img/bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

article, aside, details, figcaption, figure, footer, header,
hgroup, main, menu, nav, section, summary {
    display: block;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }

/* --- Liens --- */
a {
    background-color: transparent;
    color: var(--color-primary);
    text-decoration: none;
}

a:active, a:hover { outline: 0; }
a:hover { text-decoration: underline; }

/* --- Typographie --- */
b, strong { font-weight: bold; }
abbr[title] { border-bottom: 0; text-decoration: none; }
dfn { font-style: italic; }
mark { background: var(--color-yellow); color: var(--color-black); }
small { font-size: 80%; }

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
pre { overflow: auto; }
optgroup { font-weight: bold; }

/* --- Titres --- */
h1 { margin-bottom: 20px; font-size: 24px; }

/* --- Images --- */
img { border: 0; }
svg:not(:root) { overflow: hidden; }

/* --- Focus --- */
:focus { outline: none; }
::-moz-focus-inner { border: 0; }

/* --- Layout principal --- */
.game-container {
    width: 500px;
    padding: 40px 20px;
    background-color: var(--color-transparent-black);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    overflow: auto;
}

.game-container h1 { padding: 0 0 15px 0; margin: 0; }
.game-container h2 { padding: 0 0 15px 0; margin: 0; }
.game-container p  { padding: 0; margin: 0;padding: 10px; }

.logo {
    margin-bottom: 15px;
    width: 160px;
}

@media only screen and (max-width: 600px) {
    .logo { width: 100px; }
}

/* --- Couleurs utilitaires --- */
.fg-p     { color: var(--color-primary); }
.fg-alert { color: var(--color-red); }
.big      { font-size: 1.2em; }

/* --- Pied de page --- */
.sign p {
    margin: 0;
    padding: 30px 0 0 0;
    font-size: 0.8em;
}