/* ===== V4.02 Character mobile width / clipping fix ===== */

/* Absolute safety: character page may never create horizontal scroll */
html,body,.app,.screen,#character{
  max-width:100%!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
#character *{
  box-sizing:border-box!important;
}

/* The stage must use the real viewport width, never grow beyond it */
#character .character-stage{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding-left:6px!important;
  padding-right:6px!important;
}

/*
  V4.02 used minimum widths that could add up to more than the phone width.
  Side columns now flex down safely while the middle keeps visual priority.
*/
#character .equipment-grid{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:
    minmax(0,.82fr)
    minmax(0,1.48fr)
    minmax(0,.82fr)!important;
  gap:5px!important;
  overflow:hidden!important;
}

#character .equip-col,
#character .center-hero{
  min-width:0!important;
  max-width:100%!important;
}

/* Side cards are allowed to shrink instead of pushing the right side offscreen */
#character .slot{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:7px 6px!important;
}

#character .slot-name,
#character .slot .tiny,
#character .v123-effect,
#character .set-tag{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Keep short values readable but never let long names enlarge the column */
#character .slot-name{
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#character .slot .tiny{
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#character .v123-effect{
  white-space:nowrap!important;
  font-size:6.4px!important;
}

/* Avatar stays visually large, but cannot physically overflow its center column */
#character .avatar-scene{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
#character .v41-portrait{
  width:100%!important;
  max-width:100%!important;
  transform:scale(1.04)!important;
  transform-origin:center bottom!important;
}
#character .v41-portrait svg,
#character .v41-portrait img{
  max-width:100%!important;
  height:auto!important;
}

/* Buttons must never force a slot wider */
#character .slot-actions{
  grid-template-columns:minmax(0,1fr) auto!important;
}
#character .slot-actions .mini-btn{
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
}

/* Hero title / XP / book stay inside center column */
#character .center-name,
#character .center-class,
#character .center-xp,
#character .level-shield,
#character .v123-gear-summary{
  max-width:100%!important;
}

/* Real phone tuning */
@media(max-width:560px){
  #character .character-stage{
    padding:8px 4px 12px!important;
  }

  #character .equipment-grid{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.44fr) minmax(0,.78fr)!important;
    gap:4px!important;
  }

  #character .slot{
    min-height:112px!important;
    padding:6px 5px!important;
    border-radius:12px!important;
  }

  #character .slot-icon{
    width:32px!important;
    height:32px!important;
    font-size:18px!important;
  }

  #character .slot-label{
    font-size:6.5px!important;
  }

  #character .slot-name{
    font-size:7.2px!important;
    line-height:1.12!important;
  }

  #character .slot .tiny{
    font-size:6.5px!important;
  }

  #character .v123-effect{
    font-size:5.8px!important;
    padding:3px!important;
  }

  #character .slot-actions .mini-btn{
    font-size:6px!important;
    padding:5px 3px!important;
  }

  #character .center-hero{
    min-height:410px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }

  #character .avatar-scene{
    height:250px!important;
  }

  #character .v41-portrait{
    transform:scale(1.00)!important;
  }

  #character .center-name{
    font-size:18px!important;
  }

  #character .center-class{
    font-size:8px!important;
  }

  #character .v123-gear-summary{
    gap:3px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }

  #character .v123-gear-chip{
    font-size:5.8px!important;
    padding:3px 4px!important;
  }
}

/* Extra narrow devices */
@media(max-width:390px){
  #character .equipment-grid{
    grid-template-columns:minmax(0,.74fr) minmax(0,1.42fr) minmax(0,.74fr)!important;
    gap:3px!important;
  }

  #character .slot{
    padding:5px 4px!important;
  }

  #character .slot-name{font-size:6.8px!important}
  #character .slot .tiny{font-size:6px!important}
  #character .v123-effect{font-size:5.4px!important}
}