/* ==========================================================
   MOBILE (≤600px)
   ========================================================== */

@media (max-width:600px){

 /* ----------- INTRO ---------- */ 
 /* ---------------------------- */  

.intro-banner{

width:85%;
padding:20px 25px;

border-radius:28px; /* deja de ser óvalo gigante */

font-size:0.9rem;
line-height:1.5;

bottom:6%;

}

.mage-center{

width:260px;
bottom:12%;

}

.magic-card[data-label]:hover::after,
.magic-card.show-tooltip::after{
    opacity:1;
}

.magic-card[data-label]::after{
top:95%;
}


/* ---------- CARD 1 ---------- */
/* ---------------------------- */

/* Overlay permite scroll vertical */

.modal-overlay{
    align-items:flex-start;
   
    padding:20px 0;
}

/* Ventana modal */

.modal-window{
    height:auto;         
    max-height:90vh !important;   
    display:flex;
    flex-direction:column;
    margin-top: 0 !important;
}

/* Botón cerrar */

.modal-close{
    width:34px;
    height:34px;
    top:8px;
    right:8px;
}

/* Títulos */

.modal-title{
    font-size:22px;
    margin-top:20px;
}

.modal-subtitle{
    font-size:15px;
}

.modal-body{
    flex:1;
  
    overflow-y:auto;
     -webkit-overflow-scrolling: touch;
}

/* Wrapper interior */

.kvk-wrapper{
    display:flex;
    flex-direction:column;
    min-height:0;
}
/* Tabs */

.kvk-tabs{
    flex-wrap:wrap;
    gap:6px;
}

.kvk-tab{
    flex:1 1 48%;
    font-size:14px;
    padding:6px 8px;
}

/* Panel interior */

.kvk-tab-panels{
   min-height:0;
   height:auto;
   overflow: hidden;
}

/* Grid Day1 */

.kvk-day1-grid{
    grid-template-columns:1fr;
}

/* Inputs más cómodos */

.kvk-field input{
    width:100%;
}

/* Brave steeds layout */

.kvk-day5-row--single{
    flex-direction:column;
    align-items:stretch;
}

/* Inputs Day5 */

.kvk-input--small{
    width:100% !important;
}

.kvk-select--small{
    width:100% !important;
}

.kvk-select--normal{
    width:100%;
}

/* Resultados */

.kvk-day5-results-top{
    flex-direction:column;
    align-items:flex-start;
}

.kvk-day5-results-final{
    flex-direction:column;
    align-items:flex-start;
}

/* ---------- CARD 3 ---------- */
/* ---------------------------- */


/* MAGO WINDOW */

.mago-window{
    padding:20px;
}

.modal-mago-window{
overflow: visible;
transform: none !important;
}

/* LAYOUT */

.mago-content-wrapper{
    gap:25px;
    padding-top:20px;
}

.mago-left-panel{
    margin-left:-25px;

}

/* TEXTO */

.mago-text-box{
   width:70%;
    height:360px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#mago-typewriter{
    font-size:11.3px;
    line-height:1.45;
}

/* MAGO */

.mago-presenter{
    position:absolute !important;
    right:-55px !important;
    height:440px !important;
    bottom:-10px !important;
}

/* ESFERAS */

.orb.roja{
    left:28%;
    top:49%;
}

.orb.azul{
    left:42%;
    top:49%;
}

.bola-roja,
.bola-azul{
    width:40px;
}

/* TOOLTIP */

.tooltip{
    font-size:12px;
    padding:8px 14px;
    transform: translateX(-30%) translateY(15px) !important;
    bottom: 250%;

   
}

.orb:hover .tooltip{
    opacity:1;
    transform:translateX(-35%) translateY(-10px) scale(1.03);
}

/* FORGE PANEL */

.forge-roja,
.forge-azul{
    justify-content:center;
    padding-left:0;
}

.forge-body{
    width:90% !important;
    min-width:auto !important;
    padding:22px !important;
    position:relative !important;
    z-index:2000 !important;
}

.material-input{
    transform:none !important;
}

.material-input select{
position:relative !important;
z-index:5000 !important;
transform:translateZ(0);
appearance:auto !important;
-webkit-appearance:menulist !important;
}

/* RESULTADOS ROJA */

.forge-popup{
    padding:25px;
}

.carousel-track{
    gap:30px;
}

.forge-result-item{
    flex:0 0 120px;
}

.forge-item-img{
    width:110px;
    height:110px;
}

.forge-qty{
    font-size:20px;
}

.forge-actions{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
width:100%;
}

.btn-forjar{
    padding: 4px 12px;
    min-width:120px;
}

.btn-reset{
    padding: 4px 12px;
    margin-left: 30px;
}

.forge-actions button{
    flex:1;
    height:42px;
} 

/* RESULTADOS AZUL */

.forge-popup-blue{
    width:90%;
    max-width:340px;
    padding:20px;
}

.blue-results-popup{
    gap:16px;
}

.blue-material img{
    width:38px;
}

.blue-material span{
    font-size:16px;
}

.forge-popup-blue .forge-qty{
    font-size:16px;
}

}


/* ==========================================================
   VERY SMALL MOBILE (≤420px)
   ========================================================== */

@media (max-width:420px){

/* ---------- INTRO ---------- */

.intro-banner{

width:90%;
padding:18px 20px;

font-size:0.85rem;

}

.mage-center{

width:230px;

}


/* ---------- CARD 1 ---------- */


.modal-window{
    width:96%;
    padding:16px 14px 18px;
}

.modal-title{
    font-size:20px;
}

.modal-subtitle{
    font-size:14px;
}

/* Tabs aún más compactas */

.kvk-tab{
    font-size:13px;
    padding:6px 6px;
}

/* Texto interior */

.kvk-day-intro{
    font-size:14px;
}

/* Inputs */

.kvk-field input{
    font-size:13px;
}

/* Day5 */

.kvk-day5-label{
    font-size:14px;
}

/* Tooltip más pequeño */

.info-tooltip{
    min-width:220px;
    max-width:260px;
    font-size:12px;
}

}


/* ---------- CARD 3 ---------- */

}

/* =================================
   MOBILE LANDSCAPE FIX
================================= */

@media (orientation: landscape) {

/* ---------- INTRO ---------- */


html,body{
height:100%;
overflow:hidden;
background:red !important;
}

/* FOOTER */

footer{
display:none;
}

/* CONTENEDOR PRINCIPAL */

.page-container{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.theatre-window{
width:100%;
max-width:none;
margin:0;
padding:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

/* ESCENA */

.theatre-inner{
width:100%;
height:100%;
min-height:0;
border:6px solid #d4af37;
border-radius:22px;

/* ESCALADO DEL ESCENARIO */

transform:scale(0.72);
transform-origin:center center;
}

/* CORTINAS */

.curtain-back{
width:100%;
height:100%;
}

.curtain-back::before,
.curtain-back::after{
background-size:cover;
}

.curtain-static{
background-size:120% 150%;
}

/* MAGA PRINCIPAL */

.mage-center{
width:180px;
bottom:2%;
left:50%;
transform:translateX(-50%);
}


/* CLICK LINK */

.click-here{
font-size:0.8rem;
}
/* MAGA SECUNDARIA */

.mage-two{
height:50%;
bottom:0;
left:50%;
transform:translateX(-50%);
}

.mage-hand{
height:50%;
bottom:0;
left:50%;
transform:translateX(-50%);
}

/* BANNER */

.intro-banner{
width:58%;
padding:12px 18px;
font-size:0.75rem;
line-height:1.35;
bottom:1%;
border-width:2px;
}

.intro-banner a{
font-size:0.75rem;
}


/* TEXTO DEL BANNER */

.intro-banner-text{
font-size:0.8rem;
}

/* VIDEO */

.scene-video{
width:100%;
height:100%;
object-fit:cover;
}

/* CARTAS */

.magic-cards{
width:160px;
height:160px;
bottom:14%;
left:50%;
transform:translateX(-50%);
}

.magic-card{
width:22px;
transform-origin:50% 100%;
}

/* TOOLTIP */

.magic-card[data-label]::after{
font-size:11px;
padding:3px 6px;
margin-top:4px;
}

/* POSICIÓN CARTAS (ligeramente ajustada para escena más baja) */

.card-1{bottom:4%;left:30%;}
.card-2{bottom:28%;left:-8%;}
.card-3{bottom:36%;left:36%;}
.card-4{bottom:82%;left:86%;}
.card-5{bottom:85%;left:8%;}
.card-6{bottom:18%;left:74%;}
.card-7{bottom:48%;left:90%;}

}


/* ---------- CARD 1 ---------- */


/* ---------- CARD 3 ---------- */


.modal-overlay{
    align-items:flex-start;
    overflow-y:auto;
    padding:10px 0;
}

.modal-window{
    min-height:auto;
    max-height:none;
}


.modal-mago-window{
    min-height:420px;
    padding:16px;
}

/* layout horizontal más compacto */
.mago-content-wrapper{
    padding-left:20px;
    padding-top:20px;
}

/* caja texto más pequeña */
.mago-text-box{
    max-width:420px;
    padding:18px 22px;
}






}