:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #10252b;
    color: #fff9ea;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 0; }

.promesa-page {
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2rem) max(1.5rem, env(safe-area-inset-bottom));
}

.promesa-back {
    align-items: center;
    color: #f8d57a;
    display: inline-flex;
    font-weight: 750;
    margin-bottom: 1rem;
    min-height: 2.75rem;
    padding-block: .35rem;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}

.promesa-shell {
    background: linear-gradient(180deg, #1d3d45 0%, #142d34 100%);
    border: 1px solid rgba(255, 242, 204, .22);
    border-radius: 1.25rem;
    box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, .25);
    overflow: clip;
}

.promesa-heading { padding: clamp(1rem, 3vw, 1.7rem); }
.promesa-kicker { color: #ffd66c; font-size: .75rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 .35rem; text-transform: uppercase; }
.promesa-heading h1 { font-size: clamp(1.35rem, 5vw, 2.25rem); line-height: 1.1; margin: 0; }
.promesa-heading p:last-child { color: #d7e5df; margin: .65rem 0 0; }

.promesa-stage {
    background: #0d1f25;
    border-block: 1px solid rgba(255, 242, 204, .18);
    min-width: 0;
    position: relative;
}

.promesa-game-root {
    aspect-ratio: 16 / 9;
    background: #0d1f25;
    inline-size: 100%;
    min-height: 180px;
    overflow: hidden;
}

.promesa-game-root canvas { display: block; margin: 0 auto; max-inline-size: 100%; }

.promesa-touch {
    align-items: center;
    background: #10282f;
    border-top: 1px solid rgba(255, 242, 204, .18);
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    padding: .55rem max(.7rem, env(safe-area-inset-right)) max(.55rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
}
.promesa-touch[hidden] { display: none !important; }
.promesa-touch__movement, .promesa-touch__actions { display: flex; gap: .4rem; min-width: 0; }
.promesa-touch__button {
    align-items: center;
    background: rgba(255, 249, 234, .09);
    border: 1px solid rgba(255, 231, 160, .55);
    border-radius: .65rem;
    color: #fff9ea;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    gap: .08rem;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 3.2rem;
    padding: .3rem .5rem;
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}
.promesa-touch__button span[aria-hidden="true"] { font-size: 1.05rem; line-height: 1; }
.promesa-touch__button:active { background: rgba(255, 217, 117, .28); transform: translateY(1px); }
.promesa-touch__button:focus-visible { outline: 3px solid #fff1a8; outline-offset: 3px; }

.promesa-hud {
    align-items: center;
    display: flex;
    gap: .5rem;
    left: .65rem;
    max-width: none;
    pointer-events: none;
    position: absolute;
    right: .65rem;
    top: max(.65rem, env(safe-area-inset-top));
    bottom: .65rem;
    z-index: 2;
}

.promesa-hud p, .promesa-restart, .promesa-sound {
    background: rgba(10, 31, 36, .86);
    border: 1px solid rgba(255, 247, 222, .25);
    border-radius: .65rem;
    box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .18);
    margin: 0;
    min-height: 2.75rem;
    padding: .55rem .65rem;
}

.promesa-score { color: #ffe180; }
.promesa-scrolls { color: #dbeee4; }
.promesa-objective {
    color: #fff0b6;
    font-size: clamp(.72rem, 2.55vw, .88rem);
    font-weight: 800;
    left: auto;
    line-height: 1.2;
    margin: 0;
    max-inline-size: 10rem;
    overflow-wrap: anywhere;
    padding: .45rem .7rem;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: none;
}
.promesa-actions { align-items: center; border-top: 1px solid rgba(255, 242, 204, .15); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; min-height: 3.75rem; padding: .5rem clamp(1rem, 3vw, 1.7rem); }
.promesa-restart, .promesa-sound { color: #fff9ea; cursor: pointer; font: inherit; font-weight: 750; min-height: 2.75rem; pointer-events: auto; }
.promesa-restart:disabled, .promesa-sound:disabled { cursor: not-allowed; opacity: .58; }
.promesa-sound.is-on { background: rgba(72, 129, 112, .9); border-color: rgba(182, 238, 203, .8); color: #f0fff4; }
.promesa-sound.is-unavailable { color: #ffded5; }
.promesa-restart:not(:disabled):focus-visible, .promesa-sound:not(:disabled):focus-visible, .promesa-back:focus-visible, .promesa-scripture-link:focus-visible { outline: 3px solid #fff1a8; outline-offset: 3px; }

.promesa-status { color: #d7e5df; margin: 0; min-height: 2.25rem; padding: .55rem .85rem; text-align: center; }
.promesa-status[data-state="ready"] { color: #aee5bd; }
.promesa-status[data-state="error"] { color: #ffb8a5; }
.promesa-feedback { block-size: 1px; clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; }
.promesa-fatal { color: #ffddd2; padding: 1rem; text-align: center; }

/* `hidden` is the one visibility contract. It is deliberately explicit here
   because the stage uses overflow: clip and the dialog must never leak out. */
.promesa-discovery-hint[hidden], .promesa-quiz-hint[hidden], .promesa-discovery-dialog[hidden], .promesa-quiz-dialog[hidden], .promesa-victory-dialog[hidden] { display: none !important; }

.promesa-discovery-hint:not([hidden]), .promesa-quiz-hint:not([hidden]) {
    background: rgba(8, 28, 34, .91);
    border: 1px solid rgba(255, 225, 143, .62);
    border-radius: 999px;
    bottom: .8rem;
    color: #fff2bd;
    font-size: clamp(.75rem, 2.8vw, .92rem);
    font-weight: 800;
    left: 50%;
    margin: 0;
    max-inline-size: calc(100% - 1.5rem);
    padding: .48rem .8rem;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    z-index: 3;
}

.promesa-discovery-dialog:not([hidden]), .promesa-quiz-dialog:not([hidden]), .promesa-victory-dialog:not([hidden]) {
    align-content: start;
    background: linear-gradient(160deg, rgba(25, 62, 67, .985), rgba(11, 33, 39, .99));
    border: 1px solid rgba(255, 225, 143, .72);
    border-radius: .95rem;
    box-shadow: 0 .85rem 2.2rem rgba(0, 0, 0, .48);
    color: #fff9ea;
    display: grid;
    gap: .7rem;
    inset: .5rem .75rem;
    margin: auto;
    max-block-size: calc(100% - 1rem);
    max-inline-size: min(34rem, calc(100% - 1.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(.9rem, 4vw, 1.35rem);
    position: absolute;
    z-index: 4;
}

.promesa-discovery-dialog__eyebrow {
    color: #ffe082;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
    margin: 0;
    text-transform: uppercase;
}

.promesa-discovery-dialog h2 { font-size: clamp(1.1rem, 4.5vw, 1.45rem); line-height: 1.18; margin: 0; }
.promesa-discovery-dialog p:not(.promesa-discovery-dialog__eyebrow) { color: #e4eee9; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.promesa-discovery-dialog__reference { color: #ffe9a8 !important; font-weight: 800; }

.promesa-discovery-dialog__continue {
    background: #f6c95d;
    border: 1px solid #ffe7a0;
    border-radius: .65rem;
    color: #173238;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    justify-self: start;
    min-height: 2.75rem;
    padding: .55rem .95rem;
}

.promesa-discovery-dialog__continue:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.promesa-quiz-dialog__eyebrow {
    color: #bfeff0;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
    margin: 0;
    text-transform: uppercase;
}

.promesa-quiz-dialog h2 { font-size: clamp(1.05rem, 4.2vw, 1.4rem); line-height: 1.22; margin: 0; overflow-wrap: anywhere; }
.promesa-quiz-options { display: grid; gap: .45rem; }
.promesa-quiz-option {
    align-items: center;
    background: rgba(255, 249, 234, .08);
    border: 1px solid rgba(220, 241, 235, .42);
    border-radius: .62rem;
    color: #fff9ea;
    cursor: pointer;
    display: grid;
    font: inherit;
    font-weight: 700;
    gap: .55rem;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    min-height: 2.75rem;
    padding: .5rem .62rem;
    text-align: start;
    width: 100%;
}
.promesa-quiz-option b { align-items: center; background: #f6c95d; border-radius: 50%; color: #173238; display: inline-flex; font-size: .79rem; height: 1.55rem; justify-content: center; width: 1.55rem; }
.promesa-quiz-option span { min-width: 0; overflow-wrap: anywhere; }
.promesa-quiz-option:hover:not(:disabled) { background: rgba(255, 249, 234, .15); }
.promesa-quiz-option.is-incorrect { border-color: #ea937d; color: #ffe0d5; }
.promesa-quiz-option.is-correct { background: rgba(125, 209, 159, .2); border-color: #94e2ae; color: #edfff0; }
.promesa-quiz-option:disabled { cursor: default; opacity: .8; }
.promesa-quiz-option:focus-visible, .promesa-quiz-dialog__continue:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.promesa-quiz-dialog__reference, .promesa-quiz-dialog__feedback { color: #e4eee9; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.promesa-quiz-dialog__reference { color: #cceff0; font-weight: 800; }
.promesa-quiz-dialog__feedback { background: rgba(255, 249, 234, .08); border-radius: .55rem; padding: .55rem .65rem; }
.promesa-quiz-dialog__continue { background: #bde1e3; border: 1px solid #e5ffff; border-radius: .65rem; color: #173238; cursor: pointer; font: inherit; font-weight: 850; justify-self: start; min-height: 2.75rem; padding: .55rem .95rem; }

.promesa-victory-dialog { text-align: center; }
.promesa-victory-dialog__eyebrow { color: #ffe082; font-size: .72rem; font-weight: 850; letter-spacing: .12em; margin: 0; text-transform: uppercase; }
.promesa-victory-dialog h2 { font-size: clamp(1.15rem, 4.8vw, 1.55rem); line-height: 1.17; margin: 0; overflow-wrap: anywhere; }
.promesa-victory-dialog > p:not(.promesa-victory-dialog__eyebrow) { color: #e4eee9; line-height: 1.48; margin: 0; overflow-wrap: anywhere; }
.promesa-victory-dialog__stats { display: grid; gap: .45rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.promesa-victory-dialog__stats div { background: rgba(255, 249, 234, .08); border: 1px solid rgba(255, 225, 143, .3); border-radius: .65rem; min-width: 0; padding: .55rem .35rem; }
.promesa-victory-dialog__stats dt { color: #d2e7df; font-size: .68rem; font-weight: 800; overflow-wrap: anywhere; }
.promesa-victory-dialog__stats dd { color: #ffe38b; font-size: clamp(.95rem, 3.8vw, 1.2rem); font-weight: 900; margin: .18rem 0 0; overflow-wrap: anywhere; }
.promesa-victory-dialog__actions { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promesa-victory-dialog__restart, .promesa-victory-dialog__scripture { align-items: center; border-radius: .65rem; cursor: pointer; display: inline-flex; font: inherit; font-weight: 850; justify-content: center; min-height: 2.75rem; min-width: 0; padding: .55rem .7rem; text-align: center; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.promesa-victory-dialog__restart { background: #f6c95d; border: 1px solid #ffe7a0; color: #173238; }
.promesa-victory-dialog__scripture { background: rgba(189, 225, 227, .17); border: 1px solid #c9f5f5; color: #e5ffff; }
.promesa-victory-dialog__restart:focus-visible, .promesa-victory-dialog__scripture:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.promesa-controls { color: #d7e5df; font-size: .95rem; line-height: 1.45; margin: 0; padding: 1rem clamp(1rem, 3vw, 1.7rem); }

.promesa-context {
    border-top: 1px solid rgba(255, 242, 204, .18);
    display: grid;
    gap: .7rem;
    padding: 1rem clamp(1rem, 3vw, 1.7rem) clamp(1.15rem, 3vw, 1.7rem);
}

.promesa-context__eyebrow {
    color: #ffd66c;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .11em;
    margin: 0;
    text-transform: uppercase;
}

.promesa-context__title {
    font-size: clamp(1rem, 3vw, 1.22rem);
    line-height: 1.3;
    margin: 0;
}

.promesa-scripture-link {
    align-items: center;
    background: rgba(255, 214, 108, .13);
    border: 1px solid rgba(255, 214, 108, .55);
    border-radius: .72rem;
    color: #fff0bf;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 2.75rem;
    padding: .6rem .85rem;
    text-align: center;
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
    width: fit-content;
}

.promesa-scripture-link:hover { background: rgba(255, 214, 108, .22); }

@media (max-width: 700px) {
    /* En móvil el canvas es la experiencia principal. Una altura basada en
       dvh evita la tarjeta 16:9 diminuta y respeta barras dinámicas. */
    .promesa-page { padding-block: max(.65rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom)); }
    .promesa-back { margin-bottom: .45rem; }
    .promesa-heading { padding: .9rem 1rem; }
    .promesa-heading p:last-child { margin-top: .45rem; }
    .promesa-game-root {
        aspect-ratio: auto;
        /* Fallback para navegadores móviles que aún no entienden dvh. */
        block-size: clamp(18rem, 50vh, 28rem);
        min-height: 0;
    }
    /* Phaser ENVELOP conserva proporciones y hace cover del stage alto;
       overflow del root recorta los laterales, nunca deforma sprites. */
    .promesa-game-root canvas {
        block-size: 100%;
        inline-size: auto;
        margin-inline: auto;
        max-inline-size: none;
        max-block-size: none;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 700px) {
        .promesa-game-root { block-size: clamp(18rem, 50dvh, 28rem); }
    }
}

@media (max-width: 380px) {
    .promesa-page { padding-inline: .65rem; }
    .promesa-shell { border-radius: .9rem; }
    .promesa-hud { bottom: .4rem; gap: .35rem; left: .4rem; right: .4rem; }
    .promesa-hud p { border-radius: .5rem; font-size: .83rem; min-height: 2.5rem; padding: .45rem .5rem; }
    .promesa-objective { font-size: .71rem; max-inline-size: 7.8rem; min-height: 0 !important; padding: .4rem .55rem !important; top: 0; }
    .promesa-actions { min-height: 3.65rem; padding-inline: .65rem; }
    .promesa-restart, .promesa-sound { border-radius: .5rem; font-size: .85rem; min-height: 2.75rem; padding: .45rem .65rem; }
    .promesa-touch { gap: .35rem; padding-inline: .45rem; }
    .promesa-touch__movement, .promesa-touch__actions { gap: .28rem; }
    .promesa-touch__button { font-size: .64rem; min-width: 2.85rem; padding-inline: .34rem; }
    .promesa-discovery-dialog:not([hidden]), .promesa-quiz-dialog:not([hidden]), .promesa-victory-dialog:not([hidden]) { inset: .35rem .45rem; max-block-size: calc(100% - .7rem); max-inline-size: calc(100% - .9rem); }
    .promesa-quiz-options { gap: .32rem; }
    .promesa-quiz-option { min-height: 2.5rem; padding-block: .38rem; }
    /* El stage conserva 16:9 incluso en 320px. La victoria prioriza título,
       resumen y dos rutas táctiles sin forzar que el foco baje el diálogo. */
    .promesa-victory-dialog:not([hidden]) { gap: .32rem; padding: .5rem; }
    .promesa-victory-dialog__eyebrow { display: none; }
    /* Mantiene el resumen disponible para aria-describedby sin robar altura al
       diálogo de victoria dentro del stage 16:9 más compacto. */
    .promesa-victory-dialog > p:not(.promesa-victory-dialog__eyebrow) {
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }
    .promesa-victory-dialog h2 { font-size: 1.02rem; line-height: 1.08; }
    .promesa-victory-dialog__stats { gap: .25rem; }
    .promesa-victory-dialog__stats div { padding: .35rem .18rem; }
    .promesa-victory-dialog__stats dt { font-size: .61rem; }
    .promesa-victory-dialog__stats dd { font-size: .9rem; margin-top: .06rem; }
    .promesa-victory-dialog__actions { gap: .3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promesa-victory-dialog__restart, .promesa-victory-dialog__scripture { font-size: .72rem; line-height: 1.12; padding-inline: .34rem; }
}

@media (hover: hover) and (pointer: fine) {
    .promesa-touch { display: none !important; }
}

body[data-promesa-touch-enabled] .promesa-touch { display: flex !important; }