@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Gloria+Hallelujah&display=swap');

/* =========================================
   1. VARIABLES Y BASE
   ========================================= */
:root {
    --text: #04080f;
    --border: #DAE3E5;
    --accent: #BCCCDC;
    --bg: #f8f9fb;
    scrollbar-width: none; 
}
:root::-webkit-scrollbar { width: 0; background: transparent; }

* { box-sizing: border-box; }

body {
    padding: 20px;
    margin: 0;
    font-family: 'MS PGothic', sans-serif;
    color: var(--text);
    background-color: #bbd1ea;
    background-image: url(https://64.media.tumblr.com/7ce872275ce573405ffde03ba758043d/901d0d11c4e6f7ce-40/s250x400/74e2b14e8c74c89893de6f0aba0be0968b1ff16f.gifv);
}

img { max-width: 100%; height: auto; display: block; }

/* =========================================
   2. CONTENEDOR PRINCIPAL
   ========================================= */
.stitched-container {
    background-color: #f8f9fb;
    border: 5px solid #A1C6EA;
    border-radius: 20px;
    box-shadow: 0 0 0 3px #507DBC, 8px 8px 0px rgba(4, 8, 15, 0.3); 
    position: relative;
    padding: 20px;
    margin: 10px auto;
    width: 99%; 
    max-width: 1500px;
    box-sizing: border-box;
    z-index: 1;
}

.stitched-container::after {
    content: "";
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 2px dashed #04080F;
    border-radius: 15px;
    pointer-events: none; 
    z-index: -1;
}

/* =========================================
   3. HEADER AREA
   ========================================= */
.header-area {
    display: flex;
    gap: 15px;
    align-items: stretch;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    height: 180px;
}

.header-side-box {
    width: 180px;
    min-width: 180px;
    background: none;
    border: transparent;
    border-radius: 1px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.side-img { width: 100%; height: 100%; object-fit: contain; }

header {
    flex-grow: 1;
    background: url(https://i.pinimg.com/originals/ef/7a/dc/ef7adc4f29a4a223ec9fcb55c785b78c.gif);
    background-size: cover;
    background-position: center;
    border: 2px ridge var(--border);
    border-radius: 5px;
    position: relative;
}

header span {
    font-size: 2.5rem;
    position: absolute;
    bottom: -10px;
    right: 15px;
    font-weight: bold;
    text-shadow: 1px 1px var(--text), -1px 1px var(--text), 1px -1px var(--accent), -1px -1px var(--accent);
    color: #deefff;
    font-family: 'The Lovely Script', cursive, sans-serif;
}

/* =========================================
   4. GRID (COLUMNAS)
   ========================================= */
.grid-wrapper {
    display: grid;
    grid-template-columns: 180px 1fr 180px; 
    gap: 20px; 
    align-items: start;
}

.column-left, .column-right {
    display: flex; flex-direction: column; gap: 15px;
}

.column-center {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    margin: 0; width: 100%;
}

/* =========================================
   5. COMPONENTES (NUBES)
   ========================================= */
.whitecloudybox {
    min-height: 100px; height: auto; width: 100%;
    border: 10px solid transparent; box-sizing: border-box;
    border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
    position: relative; background: #fff; background-clip: padding-box;
}

.whitecloudyfull { 
    width: 100%; height: 100%; background: #fff; color: black; padding: 5px; text-align: center; overflow: visible;
}

.scroll-active { height: 350px !important; overflow: hidden; }
.scroll-active .whitecloudyfull { overflow-y: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: #BCCCDC #f0f8ff; }

/* Scrollbar */
.scroll-active .whitecloudyfull::-webkit-scrollbar { width: 8px; }
.scroll-active .whitecloudyfull::-webkit-scrollbar-track { background: #f0f8ff; border-radius: 4px; }
.scroll-active .whitecloudyfull::-webkit-scrollbar-thumb { background-color: #BCCCDC; border-radius: 4px; border: 2px solid #f0f8ff; }

/* --- ARREGLO DE WELCY (Horizontal) --- */
.titulito {
    display: flex;             /* Modo flexible */
    justify-content: center;   /* Centrado */
    align-items: center;
    gap: 2px;                  /* Espacio pequeñito entre letras */
    flex-wrap: nowrap;         /* PROHIBIDO bajar de línea */
    margin-bottom: 10px;
    width: 100%;
}

.titulito img { 
    filter: hue-rotate(245deg); 
    height: auto;
    width: auto;
    max-height: 25px;          /* Altura máxima */
    max-width: 100%;
    flex-shrink: 1;            /* PERMITIR que se encojan si no caben */
    margin: 0;
}

/* =========================================
   6. COMPONENTES (HOJAS/NOTAS)
   ========================================= */
.box20 {
    background: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    padding: 15px; position: relative; width: 100%;
    margin-bottom: 5px; border-radius: 2px;
}
.icon01 {
    background: url(https://foollovers.com/mat/t-frame/frame20-a/icon01.png) no-repeat;
    height: 62px; width: 27px; position: absolute; right: 10px; top: -15px; z-index: 10;
}
.bottom h2 {
    font-family: 'Gloria Hallelujah', cursive; font-size: 1.4rem; color: #507DBC; 
    border-bottom: 2px dashed #bbd1ea; margin-bottom: 10px; padding-bottom: 5px; letter-spacing: 1px;
}
.bottom p, .bottom a {
    font-family: 'Gaegu', sans-serif; font-size: 1.2rem; line-height: 1; color: #04080f;
}
.bottom a { text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.2s; }
.bottom a:hover { color: #507DBC; border-bottom: 1px dotted #507DBC; font-weight: bold; }

/* =========================================
   7. CUARTO (CENTRO) - ESTÁNDAR
   ========================================= */
.room-container-outer {
    width: 100%; border: none; padding: 0; background: none; margin: 0;
    display: flex; justify-content: center; 
}

.room-wrapper {
    position: relative; width: 100%; max-width: 979px; 
    aspect-ratio: 979 / 698; 
    border-radius: 4px; overflow: hidden; background: none;
}

.room-frame { width: 100%; height: 100%; border: none; display: block; }

.marquee-container {
    width: 100%; background: #fff; border: 1px dashed var(--border);
    padding: 5px; font-family: monospace; font-size: 10px;
}

/* =========================================
   8. BORDE DECORATIVO (FRAME 19)
   ========================================= */
.box19 {
    margin: 0 auto; width: 100%; border: none; background: none; padding: 0; overflow: visible; 
}
.box-top {
    height: 32px; background-image: url(https://foollovers.com/mat/t-frame/frame19-e/f-kado1.gif), url(https://foollovers.com/mat/t-frame/frame19-e/f-kado2.gif);
    background-position: top left, top right; background-repeat: no-repeat; position: relative; z-index: 2;
}
.u01 {
    height: 32px; background: url(https://foollovers.com/mat/t-frame/frame19-e/f-ue.gif) repeat-x; margin: 0 32px; 
}
.box-center {
    background-image: url(https://foollovers.com/mat/t-frame/frame19-e/f-migi.gif), url(https://foollovers.com/mat/t-frame/frame19-e/f-hidari.gif);
    background-position: right top, left top; background-repeat: repeat-y; padding: 0;
}
.box-inner {
    background: #fff; margin: 0 32px; padding: 0; position: relative; z-index: 1;
}
.box-bottom {
    height: 32px; background-image: url(https://foollovers.com/mat/t-frame/frame19-e/f-kado3.gif), url(https://foollovers.com/mat/t-frame/frame19-e/f-kado4.gif);
    background-position: top left, top right; background-repeat: no-repeat; position: relative; z-index: 2;
}
.s01 {
    height: 32px; background: url(https://foollovers.com/mat/t-frame/frame19-e/f-sita.gif) repeat-x; margin: 0 32px;
}

/* =========================================
   9. RESPONSIVE (MÓVIL) - CORRECCIÓN DEFINITIVA
   ========================================= */
@media (max-width: 900px) {
    body { padding: 10px; }
    
    .stitched-container {
        width: 100%; margin: 0 auto; padding: 10px;
    }

    .header-area { flex-direction: column; height: auto; margin-bottom: 10px; }
    .header-side-box { display: none !important; }
    
    header { height: 100px; }
    header span { font-size: 2rem; }

    .grid-wrapper { display: flex; flex-direction: column; gap: 15px; }
    .column-left, .column-right, .column-center { width: 100%; }

    /* --- AJUSTES DEL MARCO DECORATIVO --- */
    /* Reducimos un poco los márgenes del marco para ganar espacio, 
       pero manteniéndolo visible */
    .box-inner, .u01, .s01 {
        margin: 0 10px !important; 
    }
    
    /* --- EL TRUCO PARA EL CUARTO (ZOOM OUT) --- */
    .room-wrapper {
        width: 100%;
        /* Mantenemos la proporción original para que la caja tenga la forma correcta */
        aspect-ratio: 979 / 698;
        overflow: hidden;
        position: relative;
    }

    .room-frame {
        /* Paso 1: Forzamos al iframe a tener el tamaño ORIGINAL GIGANTE (979px)
           para que la imagen de adentro no se corte */
        width: 979px !important;
        height: 698px !important;
        
        /* Paso 2: Usamos TRANSFORM para encoger ese iframe gigante hasta que
           quepa en la pantalla del celular. El cálculo es automático. */
        transform-origin: top left;
        transform: scale(calc((100vw - 84px) / 979));
        
        /* (100vw es el ancho de pantalla. -84px es el espacio de los bordes y padding.
           Dividido por 979 nos da el porcentaje exacto de reducción) */
    }
}