/*
 * Overlay couvrant toute la fenêtre du navigateur.
 */
#capsule-web-overlay {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 2147483647;

    flex-direction: column;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background: #111111;
}

/*
 * État visible.
 */
#capsule-web-overlay.is-open {
    display: flex;
}

/*
 * Barre supérieure.
 */
#capsule-web-toolbar {
    display: flex;
    flex: 0 0 auto;

    align-items: center;

    width: 100%;
    min-height: 56px;
    padding: 8px 14px;

    box-sizing: border-box;

    background: #181818;
    border-bottom: 1px solid #333333;
}

/*
 * Bouton permettant de revenir au jeu.
 */
#capsule-web-close-button {
    padding: 10px 18px;

    border: none;
    border-radius: 7px;

    background: #ffffff;
    color: #111111;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}

#capsule-web-close-button:hover {
    background: #dddddd;
}

#capsule-web-close-button:focus-visible {
    outline: 3px solid #75aaff;
    outline-offset: 2px;
}

/*
 * Page web affichée dans l'espace restant.
 */
#capsule-web-frame {
    display: block;
    flex: 1 1 auto;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    border: none;
    background: #ffffff;
}

/*
 * Règles appliquées uniquement lorsque toute la page HTML
 * est réellement placée en plein écran.
 */
html:fullscreen,
html:fullscreen body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

html:fullscreen #unity-container {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;

    transform: none !important;
}

html:fullscreen #unity-canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}