/* ==========================================================
   MKTS.AR - Juegos para eventos (estilos compartidos)
   Todo se dimensiona con unidades del escenario (cqw / cqh / cqmin),
   así el juego se ve igual en una tablet, un tótem o un televisor.
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* El fondo del juego ocupa toda la pantalla: sin bordes negros aunque la pantalla tenga otra proporción */
    background: radial-gradient(120% 90% at 50% 0%, var(--fondo1, #1a237e) 0%, var(--fondo2, #4a148c) 100%) fixed;
    background-color: var(--fondo2, #4a148c);
    font-family: var(--fuente, 'Poppins'), system-ui, sans-serif;
    color: var(--texto, #fff);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

body {
    display: grid;
    place-items: center;
}

/* Escenario con la proporción elegida (vertical 9:16 u horizontal 16:9), centrado */
.escenario {
    position: relative;
    z-index: 1;
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    overflow: hidden;
    container-type: size;
}

/* Juego con imagen de fondo (Atrapá y esquivá): la imagen llena el área de juego y, oscurecida,
   también el resto de la pantalla, así no quedan bordes aunque la pantalla tenga otra proporción */
.escenario.con-imagen {
    background: var(--fondo-imagen) center / cover no-repeat;
    box-shadow: 0 0 6vmin rgba(0, 0, 0, 0.45);
}

body.con-imagen {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--fondo-imagen) center / cover no-repeat fixed;
    background-color: var(--fondo2, #000);
}

html[data-orientacion="horizontal"] .escenario {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
}

/* Brillos suaves de fondo (en toda la pantalla, no solo en el área del juego) */
body::before {
    content: "";
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(40% 30% at 15% 20%, rgba(255, 255, 255, 0.12), transparent 70%),
        radial-gradient(35% 25% at 85% 75%, rgba(255, 255, 255, 0.10), transparent 70%);
    animation: flotar 18s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes flotar {
    from { transform: translate(-2%, -1%) rotate(0deg); }
    to { transform: translate(2%, 1%) rotate(4deg); }
}

/* ---------- Pantallas ---------- */

.pantalla {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqmin;
    padding: 6cqmin;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.pantalla.activa {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.logo {
    max-width: 55cqw;
    max-height: 16cqh;
    object-fit: contain;
    filter: drop-shadow(0 0.6cqmin 1.2cqmin rgba(0, 0, 0, 0.3));
}

.titulo {
    font-size: 9cqmin;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 0.5cqmin 1.5cqmin rgba(0, 0, 0, 0.35);
}

.subtitulo {
    font-size: 4cqmin;
    font-weight: 500;
    opacity: 0.9;
    max-width: 85cqw;
}

.boton-juego {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 6cqmin;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--texto-boton, #1a1a1a);
    background: var(--acento, #ffca28);
    padding: 2.6cqmin 9cqmin;
    border-radius: 999px;
    box-shadow: 0 1.2cqmin 0 rgba(0, 0, 0, 0.25), 0 2cqmin 4cqmin rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
    animation: latido 1.8s ease-in-out infinite;
}

.boton-juego:active {
    transform: translateY(0.8cqmin);
    box-shadow: 0 0.4cqmin 0 rgba(0, 0, 0, 0.25), 0 1cqmin 2cqmin rgba(0, 0, 0, 0.35);
}

.boton-juego:disabled {
    filter: grayscale(0.8) brightness(0.8);
    animation: none;
    cursor: default;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.aviso-juego {
    font-size: 3.6cqmin;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.3);
    padding: 1.6cqmin 4cqmin;
    border-radius: 999px;
}

/* ---------- Video de inicio / reposo (YouTube) ---------- */

#pVideo {
    padding: 0;
    background: #000;
}

.video-yt {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.video-yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 0;
    transform: translate(-50%, -50%);
    /* "cubrir": llena el escenario recortando los bordes del video 16:9 */
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
}

.video-yt.completo iframe {
    width: 100cqw;
    height: 100cqh;
}

.toque {
    position: absolute;
    left: 50%;
    bottom: 7cqh;
    transform: translateX(-50%);
    font-size: 4.4cqmin;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    padding: 2cqmin 6cqmin;
    border-radius: 999px;
    white-space: nowrap;
    animation: respirar 1.8s ease-in-out infinite;
}

@keyframes respirar {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* ---------- Resultado ---------- */

/* Pantalla de resultado: un solo velo oscurece TODA la pantalla (también las franjas de afuera del área de juego,
   en pantallas con otra proporción) y el contenido del juego se oscurece y desenfoca con un filtro.
   Así el oscurecimiento es parejo y no hay bordes entre capas. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s;
}

body.con-resultado::after {
    opacity: 1;
    visibility: visible;
}

.pantalla {
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s, filter 0.35s ease;
}

body.con-resultado .pantalla {
    filter: blur(4px) brightness(0.45);
}

.resultado {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 6cqmin;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.resultado.activa {
    opacity: 1;
    visibility: visible;
}

.resultado-tarjeta {
    width: min(86cqw, 110cqh);
    padding: 7cqmin 6cqmin;
    border-radius: 5cqmin;
    background: #fff;
    color: #202124;
    text-align: center;
    box-shadow: 0 3cqmin 8cqmin rgba(0, 0, 0, 0.45);
    transform: scale(0.8);
    transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.resultado.activa .resultado-tarjeta {
    transform: none;
}

.resultado-icono {
    font-size: 16cqmin;
    line-height: 1;
    margin-bottom: 2cqmin;
}

.resultado-titulo {
    font-size: 8cqmin;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2cqmin;
}

.resultado-texto {
    font-size: 5cqmin;
    font-weight: 600;
    color: #5f6368;
    margin-bottom: 5cqmin;
}

.resultado.gano .resultado-texto {
    color: var(--fondo2, #4a148c);
    font-size: 6.5cqmin;
    font-weight: 800;
}

.resultado .boton-juego {
    font-size: 4.6cqmin;
    animation: none;
}

/* Confeti */
.confeti {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

/* ---------- Ejemplo y pantalla completa ---------- */

.marca-ejemplo {
    position: absolute;
    top: 2.5cqmin;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    font-size: 3cqmin;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(217, 48, 37, 0.92);
    padding: 1cqmin 3.5cqmin;
    border-radius: 999px;
    box-shadow: 0 0.6cqmin 2cqmin rgba(0, 0, 0, 0.3);
    pointer-events: none;
    white-space: nowrap;
}

.boton-pc {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 100;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    transition: opacity 0.4s ease;
}

.boton-pc.oculto {
    opacity: 0;
    pointer-events: none;
}

.boton-pc svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Página "no disponible" */
.no-disponible {
    font-family: system-ui, sans-serif;
    color: #e8eaed;
    text-align: center;
    padding: 24px;
}

.no-disponible h1 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
}

/* ==========================================================
   RULETA
   ========================================================== */

.pantalla-ruleta {
    justify-content: space-between;
    padding: 6cqh 5cqw 5cqh;
}

.ruleta-cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5cqmin;
}

.ruleta-zona {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 2cqmin 0;
}

.ruleta-zona canvas {
    display: block;
}

.ruleta-pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqmin;
}

.ruleta-pie [hidden] {
    display: none;
}

/* Horizontal: ruleta a la izquierda, textos y botón a la derecha */
html[data-orientacion="horizontal"] .pantalla-ruleta {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "ruleta cabecera" "ruleta pie";
    align-items: center;
    padding: 4cqh 5cqw;
    gap: 2cqh 4cqw;
}

html[data-orientacion="horizontal"] .ruleta-zona { grid-area: ruleta; height: 100%; }
html[data-orientacion="horizontal"] .ruleta-cabecera { grid-area: cabecera; align-self: end; }
html[data-orientacion="horizontal"] .ruleta-pie { grid-area: pie; align-self: start; }

/* ==========================================================
   MEMOTEST
   ========================================================== */

.cuenta {
    font-size: 45cqmin;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2cqmin 5cqmin rgba(0, 0, 0, 0.35);
}

.cuenta.pulso {
    animation: pulsoCuenta 1s ease-out;
}

@keyframes pulsoCuenta {
    from { transform: scale(1.6); opacity: 0; }
    30% { opacity: 1; }
    to { transform: scale(0.9); opacity: 0.6; }
}

.pantalla-tablero {
    justify-content: flex-start;
    padding: 4cqh 4cqw;
    gap: 2cqh;
}

.hud {
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 2cqw;
}

.hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 18cqmin;
    padding: 1.6cqmin 3cqmin;
    border-radius: 3cqmin;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
}

.hud-valor {
    font-size: 7cqmin;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hud-etiqueta {
    font-size: 2.6cqmin;
    font-weight: 600;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.barra-tiempo {
    width: 100%;
    height: 1.4cqmin;
    border-radius: 1cqmin;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.barra-tiempo span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--acento, #ffeb3b);
    transition: width 1s linear, background-color 0.3s ease;
}

.barra-tiempo span.urgente {
    background: #ff5252;
    animation: respirar 0.6s ease-in-out infinite;
}

.tablero {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: grid;
    justify-content: center;
    align-content: center;
}

.carta {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    perspective: 1000px;
}

.carta-interior {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

.carta.dada .carta-interior,
.carta.encontrada .carta-interior {
    transform: rotateY(180deg);
}

.carta-dorso,
.carta-frente {
    position: absolute;
    inset: 0;
    border-radius: 12%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0.8cqmin 2cqmin rgba(0, 0, 0, 0.35);
}

.carta-dorso {
    background-color: var(--dorso, #ffffff);
    border: 0.8cqmin solid rgba(255, 255, 255, 0.85);
}

/* Dorso sin imagen: patrón con el color de acento */
.carta-dorso:not([style]) {
    background-image:
        radial-gradient(circle at 50% 50%, var(--acento, #ffeb3b) 0 18%, transparent 19%),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 8%, transparent 8% 16%);
}

.carta-frente {
    transform: rotateY(180deg);
    background-color: #fff;
}

.carta.encontrada .carta-frente {
    box-shadow: 0 0 0 0.8cqmin var(--acento, #ffeb3b), 0 0.8cqmin 3cqmin rgba(0, 0, 0, 0.35);
    animation: festejo 0.6s ease;
}

@keyframes festejo {
    50% { transform: rotateY(180deg) scale(1.08); }
}

/* Horizontal: marcador en columna a la izquierda, tablero a la derecha */
html[data-orientacion="horizontal"] .pantalla-tablero {
    flex-direction: row;
    align-items: stretch;
}

html[data-orientacion="horizontal"] .pantalla-tablero .hud {
    width: auto;
    flex-direction: column;
    justify-content: center;
}

html[data-orientacion="horizontal"] .pantalla-tablero .barra-tiempo {
    width: 1.4cqmin;
    height: auto;
    display: flex;
    align-items: flex-end;
}

html[data-orientacion="horizontal"] .pantalla-tablero .barra-tiempo span {
    width: 100% !important;
    height: var(--progreso, 100%);
}

/* Abanico de cartas en la pantalla de inicio del memotest */
.abanico {
    position: relative;
    width: 60cqmin;
    height: 34cqmin;
    margin-bottom: 3cqmin;
}

.abanico span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 26cqmin;
    height: 26cqmin;
    margin-left: -13cqmin;
    border-radius: 12%;
    background: #fff center / cover no-repeat;
    border: 0.8cqmin solid #fff;
    box-shadow: 0 1.5cqmin 4cqmin rgba(0, 0, 0, 0.4);
    transform-origin: 50% 120%;
    animation: abanicoFlotar 4s ease-in-out infinite;
}

.abanico span:nth-child(1) { transform: rotate(-18deg); animation-delay: -1s; }
.abanico span:nth-child(2) { transform: rotate(0deg) translateY(-2cqmin); z-index: 1; }
.abanico span:nth-child(3) { transform: rotate(18deg); animation-delay: -2s; }

@keyframes abanicoFlotar {
    50% { margin-top: -1.5cqmin; }
}

/* En el ejemplo se reserva lugar arriba para la marca "Ejemplo de juego" */
.escenario.con-marca .pantalla:not(#pVideo) {
    padding-top: 11cqmin;
}

/* ==========================================================
   TRIVIA
   ========================================================== */

.trivia-signos {
    display: flex;
    gap: 3cqmin;
    font-size: 14cqmin;
    font-weight: 900;
    line-height: 1;
    color: var(--acento, #ffd54f);
    text-shadow: 0 1.2cqmin 3cqmin rgba(0, 0, 0, 0.35);
}

.trivia-signos span {
    display: inline-block;
    animation: signoFlotar 2.4s ease-in-out infinite;
}

.trivia-signos span:nth-child(2) { animation-delay: 0.3s; transform: rotate(8deg); }
.trivia-signos span:nth-child(3) { animation-delay: 0.6s; }

@keyframes signoFlotar {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-2cqmin) rotate(6deg); }
}

.pantalla-trivia {
    justify-content: flex-start;
    padding: 4cqh 4cqw;
    gap: 2cqh;
}

.trivia-cuerpo {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqmin;
    min-height: 0;
}

.trivia-dificultad {
    padding: 0.8cqmin 2.6cqmin;
    border-radius: 999px;
    font-size: 2.8cqmin;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.16);
}

.trivia-dificultad:empty { display: none; }
.trivia-dificultad.facil { background: rgba(105, 240, 174, 0.25); }
.trivia-dificultad.media { background: rgba(255, 213, 79, 0.28); }
.trivia-dificultad.dificil { background: rgba(255, 82, 82, 0.3); }

.trivia-pregunta {
    font-size: 6.2cqmin;
    font-weight: 800;
    line-height: 1.15;
    max-width: 92cqw;
    text-shadow: 0 0.5cqmin 1.5cqmin rgba(0, 0, 0, 0.35);
}

.trivia-pregunta.larga { font-size: 5cqmin; }

.trivia-cuerpo.entrando .trivia-pregunta,
.trivia-cuerpo.entrando .trivia-dificultad {
    animation: entrarPregunta 0.45s ease both;
}

@keyframes entrarPregunta {
    from { opacity: 0; transform: translateY(3cqmin); }
    to { opacity: 1; transform: none; }
}

.trivia-respuestas {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2cqmin;
}

html[data-orientacion="horizontal"] .trivia-respuestas.cuatro {
    grid-template-columns: 1fr 1fr;
}

.trivia-respuesta {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 2.5cqmin;
    width: 100%;
    padding: 2.2cqmin 3cqmin;
    border: none;
    border-radius: 3cqmin;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 0.35cqmin rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    color: var(--texto, #fff);
    font-family: inherit;
    font-size: 4.2cqmin;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    animation: entrarRespuesta 0.4s ease both;
    transition: transform 0.12s ease, background-color 0.2s ease, opacity 0.3s ease;
}

.trivia-respuesta:active:not(:disabled) { transform: scale(0.97); }

.trivia-respuesta .letra {
    flex-shrink: 0;
    width: 7cqmin;
    height: 7cqmin;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--acento, #ffd54f);
    color: var(--texto-boton, #1a1a1a);
    font-size: 3.6cqmin;
    font-weight: 800;
}

@keyframes entrarRespuesta {
    from { opacity: 0; transform: translateX(-4cqmin); }
    to { opacity: 1; transform: none; }
}

.trivia-respuesta:disabled { cursor: default; }
.trivia-respuesta:disabled:not(.bien):not(.mal):not(.era) { opacity: 0.4; animation: none; }

.trivia-respuesta.bien {
    background: #2e7d32;
    box-shadow: inset 0 0 0 0.5cqmin #69f0ae, 0 0 4cqmin rgba(105, 240, 174, 0.5);
    animation: respuestaBien 0.5s ease;
}

.trivia-respuesta.mal {
    background: #c62828;
    box-shadow: inset 0 0 0 0.5cqmin #ff8a80;
    animation: respuestaMal 0.45s ease;
}

.trivia-respuesta.era {
    background: rgba(46, 125, 50, 0.75);
    box-shadow: inset 0 0 0 0.5cqmin #69f0ae;
    animation: respirar 0.8s ease-in-out 2;
}

.trivia-respuesta.bien .letra,
.trivia-respuesta.era .letra { background: #69f0ae; color: #1b5e20; }
.trivia-respuesta.mal .letra { background: #ff8a80; color: #7f0000; }

@keyframes respuestaBien {
    40% { transform: scale(1.04); }
}

@keyframes respuestaMal {
    20%, 60% { transform: translateX(-1.5cqmin); }
    40%, 80% { transform: translateX(1.5cqmin); }
}

/* Se terminó el tiempo sin responder */
.trivia-respuestas.sin-tiempo::before {
    content: "¡Se terminó el tiempo!";
    grid-column: 1 / -1;
    justify-self: center;
    padding: 1cqmin 3cqmin;
    border-radius: 999px;
    background: #ff5252;
    font-size: 3.4cqmin;
    font-weight: 800;
}

/* ==========================================================
   ATRAPÁ Y ESQUIVÁ
   ========================================================== */

.atrapar-personaje {
    width: 26cqmin;
    height: 26cqmin;
    display: grid;
    place-items: center;
    font-size: 20cqmin;
    line-height: 1;
    filter: drop-shadow(0 1.5cqmin 2.5cqmin rgba(0, 0, 0, 0.35));
    animation: signoFlotar 2.4s ease-in-out infinite;
}

.atrapar-personaje img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.atrapar-guia {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5cqmin 3cqmin;
}

.atrapar-guia:empty { display: none; }

.atrapar-guia > div {
    display: flex;
    align-items: center;
    gap: 1.4cqmin;
    padding: 1.2cqmin 2.6cqmin;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    font-size: 3.4cqmin;
    font-weight: 700;
}

.atrapar-guia .iconos { display: flex; gap: 0.8cqmin; font-size: 5cqmin; line-height: 1; }
.atrapar-guia img { width: 6cqmin; height: 6cqmin; object-fit: contain; }

.pantalla-atrapar {
    padding: 0;
    justify-content: flex-start;
}

.pantalla-atrapar canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

.hud-flotante {
    position: relative;
    z-index: 2;
    padding: 3cqmin 4cqmin 0;
    pointer-events: none;
}

.escenario.con-marca .pantalla-atrapar .hud-flotante { padding-top: 11cqmin; }

.hud-vidas { letter-spacing: 0.1em; }

/* ---------- Formulario de inicio ---------- */

.pantalla-form {
    padding: 5cqh 6cqw;
}

.form-caja {
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4cqmin;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 1cqmin;
}

.form-caja .logo {
    max-height: 12cqh;
    flex-shrink: 0;
}

.form-titulo {
    font-size: 7cqmin;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 0.5cqmin 1.5cqmin rgba(0, 0, 0, 0.35);
}

.form-texto {
    font-size: 3.6cqmin;
    opacity: 0.9;
}

#formRegistro {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.2cqmin;
    text-align: left;
}

.form-campo {
    display: flex;
    flex-direction: column;
    gap: 0.8cqmin;
    font-size: 3.2cqmin;
    font-weight: 600;
}

.form-campo input,
.form-campo select {
    width: 100%;
    height: max(44px, 8cqmin);
    padding: 0 2.4cqmin;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 1.6cqmin;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    font-family: inherit;
    font-size: max(16px, 3.6cqmin);
    user-select: text;
    -webkit-user-select: text;
    outline: none;
}

.form-campo input:focus,
.form-campo select:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 0.6cqmin color-mix(in srgb, var(--acento) 45%, transparent);
}

.form-casilla {
    display: flex;
    align-items: center;
    gap: 2cqmin;
    font-size: 3.2cqmin;
    font-weight: 500;
    cursor: pointer;
}

.form-casilla input {
    width: max(24px, 5cqmin);
    height: max(24px, 5cqmin);
    flex-shrink: 0;
    accent-color: var(--acento);
}

#formRegistro .aviso-juego {
    align-self: center;
    text-align: center;
}

#formRegistro .boton-juego {
    align-self: center;
    margin-top: 1cqmin;
}

/* Formulario externo: ocupa casi toda la pantalla y el botón queda abajo */
.form-externo .form-caja {
    max-width: none;
    height: 100%;
    overflow: hidden;
}

.form-iframe {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    border-radius: 2cqmin;
    background: #fff;
    box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, 0.3);
}

.form-externo .boton-juego {
    flex-shrink: 0;
}

/* Pantalla horizontal: campos en dos columnas para que entre todo sin scroll */
html[data-orientacion="horizontal"] .pantalla-form {
    padding: 4cqh 5cqw;
}

html[data-orientacion="horizontal"] .pantalla-form:not(.form-externo) .form-caja {
    max-width: 82cqw;
    gap: 1.6cqmin;
}

html[data-orientacion="horizontal"] .form-titulo {
    font-size: 6cqmin;
}

html[data-orientacion="horizontal"] #formRegistro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8cqmin 3cqw;
}

html[data-orientacion="horizontal"] #formRegistro .form-casilla,
html[data-orientacion="horizontal"] #formRegistro .aviso-juego,
html[data-orientacion="horizontal"] #formRegistro .boton-juego {
    grid-column: 1 / -1;
    justify-self: center;
}

html[data-orientacion="horizontal"] .form-campo input,
html[data-orientacion="horizontal"] .form-campo select {
    height: max(40px, 7cqmin);
}