/* ============================================
   SOUND PERMISSION SCREEN - STYLE SPLASH
   ============================================ */

/* Conteneur principal - MÊME STRUCTURE QUE SPLASH */
.sound-permission-frame {
    display: flex !important;
    flex-direction: column;
    isolation: isolate;
}

.sound-permission-shell {
    width: min(
        calc(100vw - 20px),
        calc((100vh - 20px) * 4 / 3)
    );
    width: min(
        calc(100dvw - 20px),
        calc((100dvh - 20px) * 4 / 3)
    );
    max-width: none;
}

.sound-permission-frame > .sound-permission-container {
    flex: 1 1 0;
    min-height: 0;
}

.sound-permission-frame::before,
.sound-permission-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sound-permission-frame::before {
    z-index: 10;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.03) 1px,
            rgba(0, 0, 0, 0.16) 2px,
            rgba(0, 0, 0, 0.16) 4px
        ),
        radial-gradient(circle at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.2) 78%, rgba(0, 0, 0, 0.45) 100%);
}

.sound-permission-frame::after {
    z-index: 11;
    opacity: 0.08;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 45% 75%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px);
    background-size: 16px 16px, 22px 22px, 28px 28px;
}

.sound-permission-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    padding: clamp(0.75rem, 1.5vw, 1rem);
    box-sizing: border-box;
    opacity: 1;
    /* GLOW HÉRITÉ DU SPLASH */
    text-shadow: var(--text-glow);
    z-index: 100;
    overflow: hidden;
    font-family: var(--font-ui, "NineByFiveNBP", "Trebuchet MS", Arial, sans-serif);
    color: var(--text, rgba(245, 250, 255, 0.96));
}

/* Texte principal */
.prompt-text {
    font: 700 clamp(14px, 3.5cqw, 28px) / 1 var(--font-ui);
    color: var(--text);
    text-shadow: var(--text-glow-strong);
    white-space: nowrap;
}

/* Curseur clignotant */
.blink-cursor {
    font: 700 clamp(14px, 3.5cqw, 28px) / 1 var(--font-ui);
    color: var(--text);
    text-shadow: var(--text-glow-strong);
    animation: blink 1s infinite;
    white-space: nowrap;
}

@keyframes blink {
    0%, 50% { visibility: visible; }
    51%, 100% { visibility: hidden; }
}

/* Fond bleu identique au splash */
.sound-permission-frame {
    background: var(--screen-blue, #06079d) !important;
}

.sound-permission-shell {
    background: var(--screen-blue, #06079d) !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.crt-shell {
    background: var(--screen-blue, #06079d) !important;
}

/* ============================================
   RESPONSIVE - TABLETTE / MOBILE
   ============================================ */

@media (max-width: 900px), (max-height: 700px) {
    .sound-permission-container {
        justify-content: center;
        gap: 0.9rem;
        padding: calc(24px + env(safe-area-inset-top, 0px)) 0.75rem calc(20px + env(safe-area-inset-bottom, 0px));
        text-shadow: var(--text-glow);
        display: flex !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sound-permission-shell {
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .prompt-text,
    .blink-cursor {
        font: 700 clamp(12px, 4vw, 22px) / 1 var(--font-ui);
    }
}

@media (max-width: 640px) {
    .sound-permission-container {
        gap: 0.75rem;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 0.5rem calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .prompt-text,
    .blink-cursor {
        font: 700 clamp(11px, 4.5vw, 18px) / 1 var(--font-ui);
    }
}

/* Hauteur critique */
@media (max-height: 500px) {
    .sound-permission-container {
        justify-content: center;
        gap: 0.4rem;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .prompt-text,
    .blink-cursor {
        font: 700 clamp(10px, 3vh, 16px) / 1 var(--font-ui);
    }
}