/* =========================================================================
   maxou-espace.css — /jeux/maxou-espace. Complète morpion.css (en-tête,
   cartes). La scène reste spatiale et sombre dans les deux thèmes.
   ========================================================================= */

.espace-scene {
    width: min(var(--morpion-largeur), 100% - 2 * var(--gutter));
    margin: 2.4rem auto 0;
}
.espace-cadre {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #07031A;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    /* Le doigt pilote Maxou : pas de défilement ni de zoom sur la scène. */
    touch-action: none;
    user-select: none;
}
.espace-canvas { display: block; width: 100%; height: 100%; }

.espace-hud {
    position: absolute;
    top: 12px;
    left: 16px;
    display: flex;
    gap: 18px;
    color: #F4ECFF;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.espace-hud strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; margin-left: 4px; }

.espace-pause {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(7, 3, 26, 0.5);
    color: #F4ECFF;
    font-size: 0.8rem;
    cursor: pointer;
}
.espace-pause:hover,
.espace-pause:focus-visible { border-color: #4CE0D2; }

.espace-ecran {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: #F4ECFF;
    background: radial-gradient(circle at 50% 50%, rgba(7, 3, 26, 0.35), rgba(7, 3, 26, 0.8));
}
.espace-ecran h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; }
.espace-ecran p { max-width: 34em; line-height: 1.6; color: #D9CCF5; }
.espace-ecran .btn { padding: 12px 26px; }
.espace [hidden] { display: none !important; }

.espace-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 640px) {
    .espace-cadre { aspect-ratio: 4 / 5; border-radius: 14px; }
    .espace-ecran p { font-size: 0.92rem; }
}