/* Final ownership pass for the phone layout shown in the approved reference. */
@media(max-width:430px){
  #character.v514-reference-hero{padding:3px 4px 8px!important}
  #character.v514-reference-hero #v510HeroRoot{border-radius:6px!important}

  #character.v514-reference-hero .v510-titlebar{
    height:35px!important;padding:0 30px!important;font-size:15.5px!important;letter-spacing:.035em!important
  }
  #character.v514-reference-hero .v510-titlebar::before,
  #character.v514-reference-hero .v510-titlebar::after{top:9px!important;font-size:12px!important}
  #character.v514-reference-hero .v514-kicker{height:18px!important;font-size:5.5px!important;letter-spacing:.025em!important}

  #character.v514-reference-hero .v510-stage{
    padding:5px 8px 5px!important;
    background:
      radial-gradient(ellipse at 50% 27%,rgba(90,200,65,.33),rgba(32,83,38,.16) 39%,transparent 61%),
      linear-gradient(90deg,rgba(2,11,6,.84),transparent 17%,transparent 83%,rgba(2,11,6,.84)),
      linear-gradient(180deg,#15341e 0%,#0b2113 52%,#061009 100%)!important;
  }
  #character.v514-reference-hero .v510-layout{grid-template-columns:58px minmax(0,1fr) 58px!important;gap:3px!important}
  #character.v514-reference-hero .v510-col{gap:4px!important;padding-top:2px!important}

  #character.v514-reference-hero #v510HeroRoot .slot{
    height:61px!important;min-height:61px!important;padding:3px 2px 12px!important;border-width:1.5px!important;border-radius:7px!important
  }
  #character.v514-reference-hero #v510HeroRoot .slot-icon,
  #character.v514-reference-hero #v510HeroRoot .slot-icon img,
  #character.v514-reference-hero #v510HeroRoot .slot-icon svg,
  #character.v514-reference-hero #v510HeroRoot .slot-icon .v41-badge-art{
    width:41px!important;height:41px!important;max-width:41px!important;max-height:41px!important;min-height:41px!important
  }
  #character.v514-reference-hero .v514-slot-level{bottom:2px!important;font-size:6.4px!important}

  /* The class picture must read as character art, not as a rectangular screenshot. */
  #character.v514-reference-hero .v510-portrait{
    height:148px!important;margin:0 -15px!important;overflow:visible!important
  }
  #character.v514-reference-hero .v510-portrait::before{
    width:188px!important;height:151px!important;bottom:-3px!important;
    background:radial-gradient(ellipse,rgba(113,225,75,.28),rgba(45,108,46,.12) 55%,transparent 75%)!important
  }
  #character.v514-reference-hero #v510HeroRoot .avatar-scene,
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big,
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big img,
  #character.v514-reference-hero #v510HeroRoot .v080-class-avatar-img,
  #character.v514-reference-hero #v510HeroRoot .v41-portrait{
    width:188px!important;height:151px!important;min-height:151px!important;max-width:none!important
  }
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big img,
  #character.v514-reference-hero #v510HeroRoot .v080-class-avatar-img,
  #character.v514-reference-hero #v510HeroRoot .v41-portrait{
    object-fit:cover!important;object-position:center 27%!important;
    -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 47%,#000 62%,rgba(0,0,0,.90) 72%,rgba(0,0,0,.38) 88%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 78% 74% at 50% 47%,#000 62%,rgba(0,0,0,.90) 72%,rgba(0,0,0,.38) 88%,transparent 100%)!important;
    filter:drop-shadow(0 8px 7px rgba(0,0,0,.78)) saturate(1.05)!important
  }

  #character.v514-reference-hero #v510HeroRoot .center-name{
    width:145%!important;margin:-14px -22.5% 0!important;font-size:17px!important;line-height:1!important
  }
  #character.v514-reference-hero #v510HeroRoot .center-name::before{font-size:9px!important;margin-right:3px!important}
  #character.v514-reference-hero #v510HeroRoot .center-class{width:150%!important;margin:3px -25% 0!important;font-size:6.2px!important;line-height:1.05!important}
  #character.v514-reference-hero #v510HeroRoot .level-shield{
    min-width:96px!important;margin:5px auto 0!important;padding:3px 8px!important;font-size:6.2px!important
  }
  #character.v514-reference-hero #v510HeroRoot .level-shield b{font-size:17px!important}
  #character.v514-reference-hero #v510HeroRoot .center-xp{width:min(148px,100%)!important;margin:4px auto 0!important;padding:2px 5px 3px!important}
  #character.v514-reference-hero #v510HeroRoot .center-xp-row{margin-bottom:2px!important;font-size:5.8px!important}
  #character.v514-reference-hero #v510HeroRoot .center-xp-track{height:6px!important}

  #character.v514-reference-hero .v514-book-host{padding:5px 8px!important}
  #character.v514-reference-hero #v106BookBtn{min-height:42px!important;padding:5px 28px 5px 43px!important;font-size:8.3px!important}
  #character.v514-reference-hero #v106BookBtn .book{
    left:11px!important;width:25px!important;height:30px!important;font-size:0!important;
    border:1px solid #6f4a25!important;border-radius:3px!important;
    background:linear-gradient(135deg,#e4d4a5 0%,#b7965f 58%,#74502d 100%)!important;
    box-shadow:inset -4px 0 0 rgba(62,35,18,.28),0 2px 4px #0008!important
  }
  #character.v514-reference-hero #v106BookBtn .book::before{
    content:'🌿'!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;font-size:10px!important
  }
  #character.v514-reference-hero #v106BookBtn .v106-book-info{margin-top:2px!important;font-size:5.9px!important}
  #character.v514-reference-hero #v106BookBtn::after{right:9px!important;font-size:22px!important}

  #character.v514-reference-hero .v510-footer{padding:5px 8px 6px!important}
  #character.v514-reference-hero .v510-stats{gap:5px!important}
  #character.v514-reference-hero .v510-stats .combat-box{
    display:grid!important;grid-template-columns:35px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    column-gap:6px!important;align-items:center!important;min-height:45px!important;padding:5px 6px!important;border-radius:7px!important
  }
  #character.v514-reference-hero .v510-stats .combat-box::before{
    position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
    grid-column:1!important;grid-row:1/3!important;width:30px!important;height:30px!important;
    display:grid!important;place-items:center!important;border:1px solid #465644!important;border-radius:7px!important;
    background:#08100a!important;font-size:14px!important;line-height:1!important;opacity:1!important
  }
  #character.v514-reference-hero .v510-stats .combat-box.hp::before,
  #character.v514-reference-hero .v510-stats .combat-box:first-child::before{content:'❤️'!important}
  #character.v514-reference-hero .v510-stats .combat-box.power::before,
  #character.v514-reference-hero .v510-stats .combat-box:nth-child(2)::before{content:'⚔️'!important}
  #character.v514-reference-hero .v510-stats .combat-box span{
    grid-column:2!important;grid-row:1!important;display:block!important;margin:0!important;padding:0!important;
    font-size:5.9px!important;line-height:1!important;white-space:nowrap!important
  }
  #character.v514-reference-hero .v510-stats .combat-box b{
    grid-column:2!important;grid-row:2!important;display:block!important;margin:1px 0 0!important;padding:0!important;
    font-size:17px!important;line-height:1!important
  }

  #character.v514-reference-hero #v459SetSummary{min-height:27px!important;margin-top:4px!important;gap:4px!important;font-size:6.2px!important}
  #character.v514-reference-hero #v459SetSummary .v514-set-cell,
  #character.v514-reference-hero #v459SetSummary .v514-talent-cell{min-height:27px!important;padding:4px 3px!important;border-radius:7px!important}
  #character.v514-reference-hero #v459SetSummary b{font-size:8px!important}

  #character.v514-reference-hero .v514-passive-row{margin-top:4px!important;padding:5px 6px!important;gap:4px!important;border-radius:7px!important}
  #character.v514-reference-hero #v4156ClassPassive{font-size:5.8px!important;line-height:1.15!important}
  #character.v514-reference-hero #v4156ClassPassive b{font-size:6.4px!important;margin-bottom:1px!important}
  #character.v514-reference-hero .v514-set-btn{min-height:27px!important;padding:4px 7px!important;font-size:5.7px!important}

  #character.v514-reference-hero .v514-nav-host{margin-top:4px!important;padding-top:5px!important}
  #character.v514-reference-hero #v514HeroTabs{gap:4px!important}
  #character.v514-reference-hero #v514HeroTabs button{min-height:40px!important;padding:3px 1px!important;border-radius:7px!important}
  #character.v514-reference-hero #v514HeroTabs button span{font-size:16px!important;margin-bottom:1px!important}
  #character.v514-reference-hero #v514HeroTabs button em{font-size:5.8px!important}
}

@media(max-width:350px){
  #character.v514-reference-hero .v510-layout{grid-template-columns:55px minmax(0,1fr) 55px!important}
  #character.v514-reference-hero #v510HeroRoot .slot{height:58px!important;min-height:58px!important}
  #character.v514-reference-hero #v510HeroRoot .slot-icon,
  #character.v514-reference-hero #v510HeroRoot .slot-icon img,
  #character.v514-reference-hero #v510HeroRoot .slot-icon svg,
  #character.v514-reference-hero #v510HeroRoot .slot-icon .v41-badge-art{width:39px!important;height:39px!important;max-width:39px!important;max-height:39px!important;min-height:39px!important}
  #character.v514-reference-hero .v510-portrait{height:141px!important}
  #character.v514-reference-hero #v510HeroRoot .avatar-scene,
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big,
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big img,
  #character.v514-reference-hero #v510HeroRoot .v080-class-avatar-img,
  #character.v514-reference-hero #v510HeroRoot .v41-portrait{width:180px!important;height:144px!important;min-height:144px!important}
}