/* The page around the game: the layout, the title, the score, the buttons and the instructions (and GameHub's frame
   view) */

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: lightgray;
}

.game-container {
    text-align: center;
    padding: 10px;
}

h1 {
    color: darkgray;
}

.score-container {
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    max-width: 400px;
    margin: 1em auto 2em auto;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    max-width: 400px;
}

button {
    padding: 0.8em 1em;
    font-size: 1em;
}

button:hover {
    background-color: lightgray;
}

.instructions {
    margin: 20px auto;
    background-color: #fff;
    padding: 1em;
    font-size: 0.8em;
    border: 1px solid darkgray;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    text-align: left;
}

.instructions h2 {
    margin-top: 0;
    font-size: 1.2em;
}

/* Responsive styles */
@media (max-width: 600px) {
    button {
        font-size: 0.9em;
    }
}

/* GameHub's frame view (js/gamehub.js sets data-gamehub-view on <html>): the canvas only, on its own black, in the
   middle of the frame and as big as it allows (in the frame, vw and vh are the frame's), so it fits whatever frame
   GameHub gives it; the frame's sizes in GameHub's games table decide how big. A tap on the canvas pauses, and a swipe
   starts a new game (js/extend-controls.js). */
[data-gamehub-view="frame"] body {
    min-height: 100vh;
    background-color: #000;
}

[data-gamehub-view="frame"] .game-container {
    padding: 0;
}

[data-gamehub-view="frame"] .game-container > :not(canvas) {
    display: none;
}

[data-gamehub-view="frame"] canvas {
    display: block;
    box-sizing: border-box;
    width: min(100vw, 100vh);
    max-width: none;
}