/* ==========================================================
   MÍA CON S — TABLERO
   Pensado primero para el celular: el tablero es una hoja
   vertical que ocupa la pantalla de orilla a orilla. En
   pantallas grandes se conserva la misma hoja, centrada.
========================================================== */

:root {
    --fondo: #050404;
    --crema: #eee8df;
    --texto: rgba(255, 247, 236, .94);
    --texto-suave: rgba(255, 247, 236, .52);
    --texto-tenue: rgba(255, 247, 236, .28);
    --rojo: #c9535e;
    --font: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;

    --alto-cabecera: 52px;
    --alto-botonera: 84px;

    --curva-iman: cubic-bezier(.2, 1.35, .35, 1);
}

* { box-sizing: border-box; }

html {
    background: var(--fondo);
    /* Una pieza puede asomarse por la orilla del tablero sin
       provocar scroll horizontal. */
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100svh;
    color: var(--texto);
    background: var(--fondo);
    font-family: var(--font);
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

body.detalle-abierto { overflow: hidden; }

.ambiente {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 30%, rgba(201, 83, 94, .07), transparent 60%),
        radial-gradient(circle at 50% 100%, #0d0708, var(--fondo) 70%);
}


/* ---------- CABECERA ---------- */

.cabecera {
    height: calc(var(--alto-cabecera) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 18px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-style: italic;
    font-size: 1.08rem;
    letter-spacing: .04em;
}

.cabecera .marca {
    color: var(--texto-suave);
    text-decoration: none;
}
.cabecera .marca span { color: var(--rojo); }
.cabecera .barra { color: var(--texto-tenue); }
.cabecera .seccion {
    margin: 0;
    font: inherit;
    color: var(--texto);
}


/* ---------- TABLERO ---------- */

.escenario {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: calc(var(--alto-botonera) + 24px + env(safe-area-inset-bottom, 0px));
}

.tablero {
    position: relative;
    /* Cabe completo en la pantalla: lo limita el ancho o el alto,
       lo que se acabe primero. */
    width: min(
        100vw,
        calc((100svh - var(--alto-cabecera) - var(--alto-botonera) - env(safe-area-inset-top, 0px)) * var(--proporcion))
    );
    aspect-ratio: var(--proporcion);

    background-color: #1a0d0f;
    background-image: var(--fondo-tablero);
    background-size: cover;
    background-position: center;

    /* En el celular el tablero va de orilla a orilla, sin marco. */
    border-radius: 0;

    /* Entre piezas se puede hacer scroll normal; sobre una pieza,
       el dedo la arrastra (ver .pieza). */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;

    isolation: isolate;
}

/* Viñeta y grano encima del fondo, debajo de las piezas */
.tablero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0, 0, 0, .55) 100%);
}

.tablero-piezas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Si el tablero no llena el ancho (pantallas anchas), se le da
   un marco sutil para que se lea como objeto. */
@media (min-aspect-ratio: 3/4), (min-width: 700px) {
    .tablero {
        border-radius: 6px;
        box-shadow:
            0 0 0 1px rgba(255, 247, 236, .05),
            0 30px 80px rgba(0, 0, 0, .7);
    }
}


/* ---------- PIEZAS ----------
   Tres capas por pieza, cada una con un trabajo:
     .pieza          posición + física (la mueve script.js)
     .pieza-entrada  animación de llegada
     .pieza-cuerpo   se "levanta" al agarrarla
*/

.pieza {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
    touch-action: none;
    cursor: grab;
    -webkit-touch-callout: none;
}

/* Mientras no ha llegado, no se puede agarrar. */
.pieza:not(.lista) { pointer-events: none; }

.pieza.arrastrando { cursor: grabbing; will-change: transform; }

.pieza-entrada { opacity: 0; }
.pieza.lista .pieza-entrada { opacity: 1; }

.pieza-cuerpo {
    position: relative;
    transition: transform .35s var(--curva-iman);
}

.pieza-media {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;

    /* drop-shadow respeta la silueta de los PNG/GIF transparentes */
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) drop-shadow(0 10px 16px rgba(0, 0, 0, .25));
    transition: filter .35s ease;
}

.pieza.arrastrando .pieza-cuerpo { transform: scale(1.06); }
.pieza.arrastrando .pieza-media {
    filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .45)) drop-shadow(0 30px 34px rgba(0, 0, 0, .35));
}

/* Destello rojo breve cuando una pieza encaja en su lugar */
.pieza.encaja .pieza-cuerpo { animation: encaja .6s ease-out; }
@keyframes encaja {
    0%   { filter: drop-shadow(0 0 0 rgba(201, 83, 94, 0)); }
    30%  { filter: drop-shadow(0 0 14px rgba(201, 83, 94, .75)); }
    100% { filter: drop-shadow(0 0 0 rgba(201, 83, 94, 0)); }
}

.pieza.oculta { visibility: hidden; }


/* ---------- MARCOS (para fotos sin transparencia) ---------- */

.pieza.marco-foto .pieza-cuerpo,
.pieza.marco-fino .pieza-cuerpo {
    background: #efe8dc;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .4), 0 12px 22px rgba(0, 0, 0, .28);
}
.pieza.marco-foto .pieza-cuerpo { padding: 5% 5% 17%; }
.pieza.marco-fino .pieza-cuerpo { padding: 3%; }
.pieza.marco-foto .pieza-media,
.pieza.marco-fino .pieza-media { filter: none; }
.pieza.marco-foto.arrastrando .pieza-cuerpo,
.pieza.marco-fino.arrastrando .pieza-cuerpo {
    box-shadow: 0 14px 14px rgba(0, 0, 0, .4), 0 30px 40px rgba(0, 0, 0, .35);
}

.pieza.rota { display: none; }


/* ---------- TIRA LARGA ----------
   Cuando el tablero es mucho más alto que la pantalla (muchas
   piezas), se vuelve una tira vertical que se recorre con scroll. */

.tablero-largo .tablero {
    width: min(100vw, 600px);
    /* el fondo se repite hacia abajo en vez de estirarse */
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top center;
}
.tablero-largo .pieza {
    /* el dedo puede hacer scroll encima de las piezas; para
       arrastrar, se sostiene un instante (ver script.js) */
    touch-action: pan-y;
}
.tablero-largo .pieza-media {
    /* una sola sombra: con cientos de piezas, el celular lo agradece */
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}
.tablero-largo .pista {
    position: fixed;
    bottom: calc(var(--alto-botonera) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
}


/* ---------- ADORNOS (cinta y alfiler) ---------- */

.adorno {
    position: absolute;
    left: 50%;
    top: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--giro-adorno, 0deg)) scale(.4);
    transition: opacity .25s ease, transform .45s var(--curva-iman);
}

.pieza.asentada .adorno {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--giro-adorno, 0deg)) scale(1);
}

.adorno-cinta {
    width: clamp(34px, 42%, 110px);
    height: clamp(14px, 3.4vw, 22px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 40%, rgba(0, 0, 0, .06)),
        rgba(236, 226, 206, .62);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    /* orillas mordidas */
    clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%,
                       100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
    backdrop-filter: blur(1px);
}

.adorno-alfiler {
    top: 6%;
    width: clamp(10px, 3vw, 15px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f3a3a9 0 12%, var(--rojo) 38%, #6d1f27 100%);
    box-shadow: 1px 3px 3px rgba(0, 0, 0, .55);
}


/* ---------- HUELLA (el lugar de la pieza que arrastras) ---------- */

.huella {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    border: 1px dashed rgba(238, 232, 223, .22);
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, border-color .25s ease, background-color .25s ease;
}
.huella.visible { opacity: 1; }
.huella.cerca {
    border-color: rgba(201, 83, 94, .75);
    background-color: rgba(201, 83, 94, .07);
}


/* ---------- TEXTOS BAJO EL TABLERO ---------- */

.pista {
    /* Va dentro del tablero, abajo; se desvanece al primer gesto. */
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    text-align: center;
    pointer-events: none;
    font-style: italic;
    font-size: 1rem;
    letter-spacing: .05em;
    color: var(--texto);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8);
    opacity: 0;
    animation: pista-entra 1s ease 3.2s forwards;
    transition: opacity .8s ease;
}
.pista i { color: var(--rojo); font-style: normal; padding: 0 .3em; }
.pista.usada { opacity: 0 !important; animation: none; }
@keyframes pista-entra { to { opacity: .85; } }

.subtitulo {
    margin: 1rem 0 0;
    font-style: italic;
    font-size: .9rem;
    letter-spacing: .12em;
    color: var(--texto-tenue);
}


/* ---------- BOTONERA ---------- */

.botonera {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(18, 10, 11, .72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 0 0 1px rgba(255, 247, 236, .08), 0 12px 30px rgba(0, 0, 0, .5);
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;           /* tamaño cómodo para el dedo */
    padding: 0 1.05rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    font: italic 500 1.02rem/1 var(--font);
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}
.boton[hidden] { display: none; }
.boton svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.boton:active { background: rgba(255, 247, 236, .08); }
@media (hover: hover) {
    .boton:hover { background: rgba(255, 247, 236, .07); }
}
#btn-ordenar { color: #f1b9be; }

/* Música: tres barritas que bailan mientras suena */
.ecualizador {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    width: 14px;
    height: 14px;
}
.ecualizador i {
    width: 3px;
    height: 4px;
    border-radius: 1px;
    background: currentColor;
    transition: height .3s ease;
}
.boton-musica.sonando { color: #f1b9be; }
.boton-musica.sonando .ecualizador i { animation: ecualizador .8s ease-in-out infinite alternate; }
.boton-musica.sonando .ecualizador i:nth-child(2) { animation-delay: -.35s; }
.boton-musica.sonando .ecualizador i:nth-child(3) { animation-delay: -.6s; }
/* En pantallas angostas la música queda solo con sus barritas,
   para que quepan los tres botones. */
@media (max-width: 440px) {
    .boton { padding: 0 .85rem; }
    .boton-musica .etiqueta { display: none; }
    .boton-musica { padding: 0 .95rem; }
}
@keyframes ecualizador {
    from { height: 3px; }
    to   { height: 14px; }
}
/* Antes de sonar, las barras quedan en escalera, quietas */
.boton-musica:not(.sonando) .ecualizador i:nth-child(1) { height: 6px; }
.boton-musica:not(.sonando) .ecualizador i:nth-child(2) { height: 11px; }
.boton-musica:not(.sonando) .ecualizador i:nth-child(3) { height: 8px; }
#btn-ordenar:not([hidden]) { animation: aparecer .4s var(--curva-iman); }
@keyframes aparecer { from { opacity: 0; transform: scale(.8); } }


/* ---------- VISTA DE CERCA ---------- */

.detalle {
    position: fixed;
    inset: 0;
    z-index: 100;
    touch-action: none;
}
.detalle[hidden] { display: none; }

.detalle-velo {
    position: absolute;
    inset: 0;
    background: rgba(5, 4, 4, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .4s ease;
}
.detalle.abierto .detalle-velo { opacity: 1; }

.detalle-escena {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.detalle-media {
    position: absolute;
    left: 50%;
    top: 44%;
    display: block;
    max-width: none;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6));
    will-change: transform;
    transform-origin: center;
}

.detalle-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    padding: 0 28px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease .15s, transform .5s var(--curva-iman) .15s;
}
.detalle.abierto .detalle-pie { opacity: 1; transform: none; }

.detalle-nota {
    margin: 0 auto;
    max-width: 30ch;
    font-style: italic;
    font-size: 1.28rem;
    line-height: 1.35;
    color: var(--texto);
}
.detalle-enlace {
    display: inline-block;
    margin-top: .8rem;
    color: var(--rojo);
    font-style: italic;
    font-size: 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 83, 94, .4);
}
.detalle-enlace[hidden] { display: none; }
.detalle-contador {
    margin: .9rem 0 0;
    font-size: .82rem;
    letter-spacing: .2em;
    color: var(--texto-tenue);
}

.detalle-cerrar,
.detalle-flecha {
    position: absolute;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 247, 236, .06);
    color: var(--texto);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease .1s, background-color .2s ease;
}
.detalle.abierto .detalle-cerrar,
.detalle.abierto .detalle-flecha { opacity: 1; }
.detalle-cerrar svg,
.detalle-flecha svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.detalle-cerrar {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
}
.detalle-flecha { top: 44%; margin-top: -23px; }
.detalle-flecha.anterior { left: 8px; }
.detalle-flecha.siguiente { right: 8px; }

/* En el celular las flechas estorban: se cambia de pieza
   deslizando el dedo. Solo se muestran con mouse. */
@media (hover: none) {
    .detalle-flecha { display: none; }
}


/* ---------- VISTA DE CERCA CON TEXTO ----------
   Celular: imagen arriba, texto debajo (se hace scroll dentro).
   Pantalla ancha: imagen a la izquierda, texto a la derecha. */

.detalle.con-texto .detalle-pie { display: none; }

.detalle-texto {
    position: absolute;
    left: 0;
    right: 0;
    top: 46svh;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 1.4rem 26px calc(2.5rem + env(safe-area-inset-bottom, 0px));

    /* el texto se desvanece suave al subir por debajo de la imagen */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.4rem);
            mask-image: linear-gradient(to bottom, transparent 0, #000 1.4rem);

    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease .15s, transform .6s var(--curva-iman) .15s;
}
.detalle-texto[hidden] { display: none; }
.detalle.abierto .detalle-texto { opacity: 1; transform: none; }

.detalle-titulo {
    margin: 0 0 .9rem;
    font: italic 500 1.5rem/1.2 var(--font);
    color: var(--texto);
}
.detalle-titulo[hidden] { display: none; }
.detalle-titulo::after {
    content: "";
    display: block;
    width: 2.2rem;
    height: 1px;
    margin-top: .8rem;
    background: var(--rojo);
    opacity: .7;
}

.detalle-cuerpo {
    font-size: 1.14rem;
    line-height: 1.6;
    color: rgba(255, 247, 236, .84);
}
.detalle-cuerpo p { margin: 0 0 .85em; }
.detalle-cuerpo em { color: #f1c6ca; }
.detalle-cuerpo strong { font-weight: 600; color: var(--texto); }

.detalle-texto .detalle-contador { text-align: left; }

@media (min-width: 760px) and (orientation: landscape) {
    .detalle-texto {
        left: 62vw;
        right: 6vw;
        top: 12vh;
        bottom: 12vh;
        padding: 1.2rem 1rem 2rem 0;
        display: flex;
        flex-direction: column;
        justify-content: safe center;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%);
    }
    .detalle-titulo { font-size: 1.9rem; }
    .detalle-cuerpo { font-size: 1.2rem; max-width: 34rem; }
    .detalle.con-texto .detalle-flecha.anterior { left: 12px; }
    .detalle.con-texto .detalle-flecha.siguiente { right: 12px; top: auto; bottom: 22px; margin-top: 0; }
}

/* ---------- MODO EDICIÓN (?editar) ---------- */

body.editando .pieza { outline: 1px dashed rgba(238, 232, 223, .18); outline-offset: 2px; }
body.editando .pieza.elegida { outline: 1.5px solid var(--rojo); }
body.editando .pieza.rota {
    display: block;
    width: 22% !important;
    padding: .6rem;
    font-size: .8rem;
    color: #fff;
    background: rgba(201, 83, 94, .5);
}
body.editando .pista,
body.editando .botonera { display: none; }

.editor {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 8, 9, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 247, 236, .1);
    font: 15px/1.3 system-ui, sans-serif;
    color: var(--texto);
}
.editor-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.editor-titulo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-titulo small { color: var(--texto-suave); white-space: nowrap; }
.editor-rejilla {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px 10px;
    align-items: center;
}
.editor-rejilla label { color: var(--texto-suave); font-size: 13px; }
.editor-rejilla output { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; font-size: 13px; }
.editor-rejilla input[type="range"] { width: 100%; accent-color: var(--rojo); }
.editor-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.editor textarea {
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 247, 236, .16);
    border-radius: 8px;
    background: rgba(255, 247, 236, .05);
    color: var(--texto);
    font: 14px/1.4 system-ui, sans-serif;
    resize: vertical;
}
.editor select,
.editor button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 247, 236, .16);
    border-radius: 8px;
    background: rgba(255, 247, 236, .05);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
}
.editor button.principal { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.editor .vacio { color: var(--texto-suave); margin: 4px 0 8px; }
/* En edición el tablero se encoge para caber completo arriba
   del panel (script.js mide el panel y ajusta la variable). */
body.editando { --alto-botonera: var(--alto-editor, 240px); }
body.editando .escenario { padding-bottom: calc(var(--alto-editor, 240px) + 12px); }


/* ---------- MOVIMIENTO REDUCIDO ---------- */

@media (prefers-reduced-motion: reduce) {
    .pieza-cuerpo,
    .adorno,
    .detalle-pie { transition: none; }
}