.narration-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    min-height: 38px;
    margin: 6px 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #171a30;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
}

.narration-toggle__icon { font-size: 1rem; line-height: 1; }
.narration-toggle__waves { display: none; align-items: end; gap: 2px; height: 14px; }
.narration-toggle__waves i { width: 3px; height: 5px; border-radius: 3px; background: currentColor; animation: narrationWave .72s ease-in-out infinite alternate; }
.narration-toggle__waves i:nth-child(2) { height: 12px; animation-delay: -.35s; }
.narration-toggle__waves i:nth-child(3) { height: 8px; animation-delay: -.15s; }
.narration-toggle.is-speaking .narration-toggle__waves { display: inline-flex; }
.narration-toggle.is-speaking { border-color: #43e29b; color: #43e29b; box-shadow: 0 0 20px rgba(67,226,155,.35); }
.narration-toggle.is-blocked { border-color: #ffd166; color: #ffd166; background: rgba(255,209,102,.12); }
.narration-toast { display: block; min-height: 1em; margin-top: 4px; color: var(--muted); font-size: .65rem; font-weight: 750; text-align: right; opacity: 0; transition: opacity .2s; }
.narration-toast.is-visible { opacity: 1; }
@keyframes narrationWave { to { height: 14px; } }

.narration-toggle.is-on {
    border-color: var(--cyan);
    background: color-mix(in srgb, var(--cyan) 16%, #171a30);
    color: var(--cyan);
    box-shadow: 0 0 15px color-mix(in srgb, var(--cyan) 18%, transparent);
}

.narration-toggle:not(.is-on):not(.is-blocked) {
    border-color: #ffd166;
    background: linear-gradient(135deg,rgba(255,209,102,.18),rgba(192,18,253,.13));
    color: #fff0b8;
    box-shadow: 0 0 0 0 rgba(255,209,102,.42);
    animation: audioOptInPulse 1.65s ease-out infinite;
}
@keyframes audioOptInPulse {
    55% { border-color: #fff0b8; box-shadow: 0 0 0 8px rgba(255,209,102,0); transform: translateY(-1px); }
    100% { box-shadow: 0 0 0 12px rgba(255,209,102,0); transform: none; }
}

.narration-replay {
    width: auto;
    min-height: 40px;
    margin: 12px auto 0;
    padding: 8px 13px;
    background: var(--panel2);
    border: 1px solid var(--cyan);
    font-size: .8rem;
}

[data-banter-toggle].is-on { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb,var(--cyan) 13%,var(--panel2)); }
[data-banter-toggle][aria-pressed="false"] { opacity: .72; }

.audio-onboarding[hidden] { display: none !important; }
.audio-onboarding { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; max-width: 820px; margin: 0 auto 15px; padding: 14px 16px; border: 2px solid #ffd166; border-radius: 17px; background: linear-gradient(135deg,rgba(255,209,102,.2),rgba(192,18,253,.15)),#171a30; box-shadow: 0 10px 30px rgba(0,0,0,.32),0 0 24px rgba(255,209,102,.16); }
.audio-onboarding__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ffd166; color: #171a30; font-size: 1.35rem; box-shadow: 0 0 0 0 rgba(255,209,102,.55); animation: audioOnboardingPulse 1.8s ease-out infinite; }
.audio-onboarding__copy { display: grid; gap: 2px; text-align: left; }
.audio-onboarding__copy strong { color: #fff; font-size: .95rem; }
.audio-onboarding__copy small { color: #d6d8e7; }
.audio-onboarding__actions { display: flex; gap: 8px; }
.audio-onboarding__actions button { width: auto; min-height: 42px; padding: 8px 14px; white-space: nowrap; }
.audio-onboarding__actions [data-audio-onboarding-enable] { background: linear-gradient(135deg,#ffd166,#e99a23); color: #241600; text-shadow: none; }
.audio-onboarding.is-reminder { max-width: 560px; grid-template-columns: auto minmax(0,1fr) auto; padding-block: 9px; }
.audio-onboarding.is-reminder .audio-onboarding__icon { width: 36px; height: 36px; font-size: 1rem; }
@keyframes audioOnboardingPulse { 70% { box-shadow: 0 0 0 12px rgba(255,209,102,0); } 100% { box-shadow: 0 0 0 0 rgba(255,209,102,0); } }

@media (max-width: 700px) {
    .audio-onboarding { grid-template-columns: auto minmax(0,1fr); gap: 9px; margin: 5px 0 11px; padding: 12px; }
    .audio-onboarding__icon { width: 40px; height: 40px; }
    .audio-onboarding__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
    .audio-onboarding__actions button { width: 100%; }
    .audio-onboarding.is-reminder { position: fixed; z-index: 24; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); grid-template-columns: auto minmax(0,1fr) auto; width: auto; max-width: none; margin: 0; padding: 8px 10px; }
    .audio-onboarding.is-reminder .audio-onboarding__copy small { display: none; }
    .audio-onboarding.is-reminder .audio-onboarding__actions { grid-column: auto; display: block; }
    .audio-onboarding.is-reminder .audio-onboarding__actions button { min-height: 38px; padding: 6px 10px; }
    .player-game .game-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        height: auto;
    }
    .player-game .game-identity { max-width: none; }
    .player-game .player-hud {
        position: relative;
        display: flex;
        align-items: center;
        width: auto;
        max-width: none;
        min-height: 46px;
        height: auto;
        padding: 4px 5px 4px 9px;
        gap: 7px;
    }
    .player-game .player-hud > .hud-label { display: none; }
    .player-game .my-lives { flex: 0 0 auto; }
    .narration-toggle {
        position: relative;
        min-height: 44px;
        padding: 8px 13px;
        border-width: 2px;
        font-size: .72rem;
        letter-spacing: .025em;
    }
    .player-game .narration-toggle {
        display: inline-flex;
        flex: 0 1 auto;
        width: min(126px, 100%);
        min-width: 0;
        max-width: 126px;
        height: 40px;
        min-height: 40px;
        padding: 6px 10px;
        border-radius: 999px;
        overflow: hidden;
        white-space: nowrap;
    }
    .player-game .narration-toggle [data-narration-label] {
        display: inline;
        overflow-wrap: normal;
    }
    .player-game .narration-toggle__waves { display: none !important; }
    .player-game .narration-toast {
        position: fixed;
        z-index: 30;
        top: 118px;
        left: 50%;
        width: max-content;
        max-width: calc(100vw - 28px);
        min-height: 0;
        margin: 0;
        padding: 7px 12px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgba(13,15,34,.96);
        box-shadow: 0 8px 24px rgba(0,0,0,.38);
        color: #f7f7ff;
        text-align: center;
        pointer-events: none;
    }
    .narration-toggle.is-on { background: linear-gradient(135deg,rgba(56,217,242,.24),rgba(67,226,155,.12)); }
}

@media (max-width: 390px) {
    .player-game .narration-toggle { width: min(104px, 100%); min-width: 0; max-width: 104px; padding: 0 7px; font-size: .62rem; }
    .player-game .narration-toggle [data-narration-label] { display: inline; }
    .player-game .narration-toggle__waves { display: none; }
}

@media (prefers-reduced-motion: reduce) { .narration-toggle__waves i,.narration-toggle:not(.is-on):not(.is-blocked) { animation: none; } }