/*
 * Responsive System V2
 * Capa final y deliberadamente pequena: resuelve el marco compartido sin
 * redisenar las pantallas ni competir con su direccion artistica.
 */
:root{
  --dtt-sidebar-expanded:326px;
  --dtt-sidebar-collapsed:82px;
  --dtt-readable-copy:clamp(14px,.88vw,17px);
  --dtt-readable-small:clamp(12px,.72vw,14px);
}

html{
  max-width:100%;
  overflow-x:clip;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

body.ui-reborn{
  max-width:100%;
  overflow-x:clip;
  font-size:var(--dtt-readable-copy);
}

body.ui-reborn *,
body.ui-reborn *::before,
body.ui-reborn *::after{box-sizing:border-box}

body.ui-reborn :where(.game-shell,.game-stage,.game-content,.game-content>*){
  min-width:0;
  max-width:100%;
}

/* Las imagenes conservan siempre su proporcion dentro del espacio asignado. */
body.ui-reborn :where(img,video,canvas){
  max-width:100%;
}
body.ui-reborn img:not(.brand-banner):not(.header-logo__image){
  object-fit:contain;
}

/* Texto funcional ligeramente mayor, sin inflar encabezados cinematograficos. */
body.ui-reborn :where(p,li,dd,dt,label,input,select,textarea,button,.btn){
  line-height:1.4;
}
body.ui-reborn :where(small,.small,.meta,.hint,.caption){
  font-size:var(--dtt-readable-small)!important;
  line-height:1.35!important;
}
body.ui-reborn :where(
  .stat-value,.resource-value,.currency-value,.level-value,.damage-number,
  .heal-number,.timer,.countdown,.amount,.value,.num,output,data,time
){
  font-size:max(1em,14px);
  font-variant-numeric:tabular-nums lining-nums;
}

/* Escritorio y televisores: el menu nunca cubre el contenido. */
@media (min-width:1101px){
  body.ui-reborn .game-shell .game-sidebar{
    position:fixed!important;
    inset:8px auto 8px 8px!important;
    width:var(--dtt-sidebar-expanded)!important;
    height:calc(100dvh - 16px)!important;
    max-height:none!important;
    transform:none!important;
  }
  body.ui-reborn .game-shell>section.game-stage{
    width:calc(100% - var(--dtt-sidebar-expanded))!important;
    max-width:none!important;
    margin-left:var(--dtt-sidebar-expanded)!important;
    transition:width .24s ease,margin-left .24s ease!important;
  }
  body.ui-reborn.sidebar-collapsed .game-shell .game-sidebar,
  body.ui-reborn.sidebar-hidden .game-shell .game-sidebar{
    width:var(--dtt-sidebar-collapsed)!important;
  }
  body.ui-reborn.sidebar-collapsed .game-shell>section.game-stage,
  body.ui-reborn.sidebar-hidden .game-shell>section.game-stage{
    width:calc(100% - var(--dtt-sidebar-collapsed))!important;
    margin-left:var(--dtt-sidebar-collapsed)!important;
  }
  body.ui-reborn .nav-toggle,
  body.ui-reborn .mobile-command-nav{display:none!important}

  /* Las rutas de combate mantienen el mismo origen que el resto del juego. */
  body.ui-reborn:has(.arena-battle) .game-shell>section.game-stage,
  body.ui-reborn:has(.wb-page) .game-shell>section.game-stage{
    margin-left:var(--dtt-sidebar-expanded)!important;
    width:calc(100% - var(--dtt-sidebar-expanded))!important;
  }
  body.ui-reborn.sidebar-collapsed:has(.arena-battle) .game-shell>section.game-stage,
  body.ui-reborn.sidebar-collapsed:has(.wb-page) .game-shell>section.game-stage,
  body.ui-reborn.sidebar-hidden:has(.arena-battle) .game-shell>section.game-stage,
  body.ui-reborn.sidebar-hidden:has(.wb-page) .game-shell>section.game-stage{
    margin-left:var(--dtt-sidebar-collapsed)!important;
    width:calc(100% - var(--dtt-sidebar-collapsed))!important;
  }
}

/* Tablet y movil: menu fuera del flujo, contenido completo y sin hueco lateral. */
@media (max-width:1100px){
  body.ui-reborn .game-shell .game-sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:500!important;
    width:min(326px,88vw)!important;
    height:100dvh!important;
    max-height:none!important;
    transform:translateX(-105%)!important;
  }
  body.ui-reborn .game-shell .game-sidebar.is-open{transform:translateX(0)!important}
  body.ui-reborn .game-shell>section.game-stage,
  body.ui-reborn.sidebar-hidden .game-shell>section.game-stage,
  body.ui-reborn.sidebar-collapsed .game-shell>section.game-stage{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
  }
  body.ui-reborn .game-content{
    max-width:100%!important;
    overflow-x:clip;
  }
  body.ui-reborn .nav-toggle{display:block!important}
}

/* Telefonos: controles legibles y arte de combate contenido en la pantalla. */
@media (max-width:760px){
  html{font-size:16px}
  body.ui-reborn{font-size:15px}
  body.ui-reborn :where(button,.btn,a[role="button"],input,select){min-height:44px}
  body.ui-reborn :where(input,select,textarea){font-size:16px!important}

  body.ui-reborn .game-content{
    width:calc(100% - 12px)!important;
    margin-inline:6px!important;
  }

  /* Cinturón de seguridad final del HUD móvil. Esta hoja se carga al final,
     por lo que evita que estilos históricos conviertan la navegación en una
     columna o permitan que los SVG hereden tamaños del contenedor. */
  body.ui-reborn[data-hero]:not(.dungeon-active) .mobile-command-nav{
    position:fixed!important;
    inset:auto 0 0 0!important;
    z-index:700!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    height:calc(62px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;
    padding:4px 5px env(safe-area-inset-bottom,0px)!important;
    overflow:hidden!important;
  }
  body.ui-reborn[data-hero] .mobile-command-nav__item{
    display:grid!important;
    grid-template-rows:24px 12px!important;
    place-items:center!important;
    align-content:center!important;
    gap:2px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:54px!important;
    margin:0!important;
    padding:3px!important;
    overflow:hidden!important;
  }
  body.ui-reborn[data-hero] .mobile-command-nav__item>span{
    display:grid!important;
    place-items:center!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    overflow:hidden!important;
  }
  body.ui-reborn[data-hero] .mobile-command-nav__item svg.hud-icon{
    display:block!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    min-height:20px!important;
    max-width:20px!important;
    max-height:20px!important;
  }
  body.ui-reborn[data-hero] .mobile-command-nav__item>b{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    font-size:8px!important;
    line-height:1!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* El retrato conserva protagonismo sin ocupar toda la página ni escapar de
     su escenario en Safari/iOS. */
  body.ui-reborn .char-summary .hero-stage{
    position:relative!important;
    height:clamp(290px,78vw,380px)!important;
    min-height:clamp(290px,78vw,380px)!important;
    max-height:380px!important;
    overflow:hidden!important;
  }
  body.ui-reborn .char-summary .hero-stage>img.hero-png{
    position:absolute!important;
    inset:auto auto 0 50%!important;
    display:block!important;
    width:auto!important;
    height:92%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:96%!important;
    max-height:92%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  body.ui-reborn.combat-screen .game-content,
  body.ui-reborn:has(.wb-page) .game-content,
  body.ui-reborn:has(.arena-battle) .game-content{
    width:100%!important;
    margin:0!important;
    padding-top:0!important;
  }

  body.ui-reborn :where(.combatant-figure,.wb-battlefield,.arena-battle__field){
    overflow:hidden!important;
  }
  body.ui-reborn :where(.combatant-figure img,.wb-player-figure img,.wb-boss img,.arena-battle img){
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  body.ui-reborn .combat-pve-combatants{
    grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)!important;
    gap:4px!important;
    padding-inline:4px!important;
  }
  body.ui-reborn .combatant-card{min-width:0!important}
}

/* Pantallas amplias: limita el crecimiento vertical y mejora lectura a distancia. */
@media (min-width:1800px){
  html{font-size:17px}
  body.ui-reborn{--dtt-readable-copy:17px;--dtt-readable-small:14px}
  body.ui-reborn .game-content{max-width:2200px!important}
}

@media (prefers-reduced-motion:reduce){
  body.ui-reborn .game-sidebar,
  body.ui-reborn .game-stage{transition:none!important}
}