/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Spil: Fang prikken
 * Fil: css/fang-prikken.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-09-30T15:08:53+02:00
 * Observeret seneste filændring før registrering: 2026-10-01T17:45:38+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
/* Kun Fang-prikkens egen styling hører hjemme her.
   Den fælles side, navigation, footer og game-shell ligger i style.css. */

.fang-prikken-game { position: relative; display: grid; justify-items: center; gap: 18px; }
.game-info, .game-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.game-info div { min-width: 100px; padding: 9px 12px; border: 1px solid rgb(255 99 218 / 35%); border-radius: 999px; background: rgb(8 12 24 / 75%); font-size: .76rem; font-weight: 900; letter-spacing: .07em; text-align: center; }
.game-play-area { position: relative; width: 100%; min-height: 260px; overflow: hidden; border: 2px solid rgb(255 99 218 / 72%); border-radius: 18px; background: #101522; }
.game-play-area canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }

/* Startsiden er kompakt. Spillefladen åbnes først sammen med spiltilstanden. */
.game-section:not(.is-playing) .game-play-area { display: none; }
.game-section.is-playing .game-play-area { display: block; }
.game-section.is-playing .text-button { display: none; }
.game-section.is-playing .game-actions { min-height: 44px; }
.game-section.is-playing #startGame:disabled { display: none; }

/* Aktivt spil skal altid blive inden for den fælles spilramme. */
body.game-mode-active .fang-prikken-game {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(8px, 1.6vmin, 16px);
}
body.game-mode-active .game-play-area {
    height: 100%;
    min-height: 0;
}
body.game-mode-active .game-info { z-index: 1; }

/* Start-rækken har ingen funktion midt i en omgang. Dens plads går til banen. */
body.game-mode-active .game-section.is-running .fang-prikken-game {
    grid-template-rows: auto minmax(0, 1fr);
}
body.game-mode-active .game-section.is-running .game-actions { display: none; }

@media (min-width: 768px) {
    .game-play-area { min-height: 420px; }
}