@media(max-width:430px){
  /* The reference is a framed RPG panel, not a stack of plain rounded cards. */
  #character.v514-reference-hero #v510HeroRoot{
    position:relative!important;
    border:1.5px solid #8d5a2b!important;
    border-radius:4px!important;
    outline:1px solid rgba(235,181,82,.16)!important;
    outline-offset:-5px!important;
    background:
      linear-gradient(90deg,rgba(177,108,43,.12),transparent 7% 93%,rgba(177,108,43,.12)),
      #061009!important;
    box-shadow:
      inset 0 0 0 3px #0a0c08,
      inset 0 0 0 4px rgba(186,116,48,.34),
      inset 0 0 30px #000c,
      0 8px 18px #000a!important;
    overflow:hidden!important;
  }
  #character.v514-reference-hero #v510HeroRoot:before,
  #character.v514-reference-hero #v510HeroRoot:after{
    content:'◆'!important;
    position:absolute!important;
    z-index:40!important;
    top:6px!important;
    color:#d59a4c!important;
    font-size:7px!important;
    text-shadow:0 1px 1px #000,0 0 5px rgba(255,181,73,.35)!important;
    pointer-events:none!important;
  }
  #character.v514-reference-hero #v510HeroRoot:before{left:8px!important}
  #character.v514-reference-hero #v510HeroRoot:after{right:8px!important}

  /* Reference title: a carved central plaque with ornamental arms. */
  #character.v514-reference-hero .v510-titlebar{
    position:relative!important;
    width:74%!important;
    height:29px!important;
    margin:2px auto 0!important;
    padding:0 23px!important;
    border:1px solid #9e6731!important;
    border-radius:0!important;
    clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)!important;
    background:
      linear-gradient(90deg,rgba(255,210,110,.10),transparent 15% 85%,rgba(255,210,110,.10)),
      linear-gradient(180deg,#543017 0%,#34200f 50%,#1d1108 100%)!important;
    box-shadow:inset 0 0 0 1px rgba(243,205,132,.12),0 2px 5px #000b!important;
    font-size:13.2px!important;
    letter-spacing:.02em!important;
  }
  #character.v514-reference-hero .v510-titlebar::before,
  #character.v514-reference-hero .v510-titlebar::after{
    content:'✦'!important;
    top:7px!important;
    color:#d9a760!important;
    font-size:8px!important;
  }
  #character.v514-reference-hero .v510-titlebar::before{left:13px!important}
  #character.v514-reference-hero .v510-titlebar::after{right:13px!important}

  #character.v514-reference-hero .v514-kicker{
    height:16px!important;
    margin-top:1px!important;
    border-top:1px solid rgba(165,108,48,.32)!important;
    border-bottom:1px solid rgba(165,108,48,.40)!important;
    font-size:5px!important;
    background:linear-gradient(180deg,#10311d,#07160d)!important;
  }

  /* Slightly shorter stage and smaller hero: the reference shows more frame around him. */
  #character.v514-reference-hero .v510-stage{
    padding:4px 7px 4px!important;
    border-bottom:1px solid #704522!important;
    background:
      radial-gradient(circle at 4% 17%,rgba(255,132,28,.26),transparent 13%),
      radial-gradient(circle at 96% 17%,rgba(255,132,28,.26),transparent 13%),
      radial-gradient(ellipse at 50% 25%,rgba(86,196,66,.28),transparent 39%),
      linear-gradient(90deg,#07130b 0 8%,rgba(7,19,11,.2) 18% 82%,#07130b 92% 100%),
      linear-gradient(180deg,#184526 0%,#0b2917 50%,#06120b 100%)!important;
  }
  #character.v514-reference-hero .v510-layout{
    grid-template-columns:58px minmax(0,1fr) 58px!important;
    gap:1px!important;
  }
  #character.v514-reference-hero .v510-col{
    gap:4px!important;
    padding-top:4px!important;
  }
  #character.v514-reference-hero #v510HeroRoot .slot{
    height:59px!important;
    min-height:59px!important;
    padding:3px 2px 12px!important;
    border-radius:6px!important;
    box-shadow:inset 0 0 12px #000e,0 0 6px color-mix(in srgb,var(--v514-rarity) 52%,transparent),0 3px 6px #000c!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:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;min-height:40px!important;
  }
  #character.v514-reference-hero .v514-slot-level{font-size:6px!important;bottom:2px!important}

  #character.v514-reference-hero .v510-portrait{
    height:180px!important;
    margin:0 -28px!important;
  }
  #character.v514-reference-hero .v510-portrait::before{
    width:212px!important;height:184px!important;bottom:-5px!important;
    background:radial-gradient(ellipse 78% 84% at 50% 47%,rgba(97,215,74,.24),rgba(31,91,39,.08) 63%,transparent 84%)!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:212px!important;height:184px!important;min-height:184px!important;max-width:none!important;
  }
  #character.v514-reference-hero #v510HeroRoot .v080-class-avatar-img,
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big img{
    object-position:center 31%!important;
    transform:scale(.98)!important;
    -webkit-mask-image:radial-gradient(ellipse 83% 90% at 50% 48%,#000 0 58%,rgba(0,0,0,.98) 67%,rgba(0,0,0,.64) 78%,rgba(0,0,0,.18) 90%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 83% 90% at 50% 48%,#000 0 58%,rgba(0,0,0,.98) 67%,rgba(0,0,0,.64) 78%,rgba(0,0,0,.18) 90%,transparent 100%)!important;
  }
  #character.v514-reference-hero #v510HeroRoot .center-name{
    margin:-23px -29% 0!important;
    font-size:15.5px!important;
  }
  #character.v514-reference-hero #v510HeroRoot .center-class{
    margin-top:2px!important;
    font-size:6px!important;
  }

  /* Notched level badge like the reference instead of a plain rectangle. */
  #character.v514-reference-hero #v510HeroRoot .level-shield{
    position:relative!important;
    min-width:105px!important;
    margin-top:4px!important;
    padding:3px 12px!important;
    border:1px solid #b07834!important;
    border-radius:0!important;
    clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)!important;
    background:linear-gradient(180deg,#603619,#3a200f 55%,#251409)!important;
    box-shadow:inset 0 0 0 1px rgba(255,221,147,.14),0 2px 5px #000c!important;
  }
  #character.v514-reference-hero #v510HeroRoot .level-shield b{font-size:16.5px!important}
  #character.v514-reference-hero #v510HeroRoot .center-xp{margin-top:3px!important}

  /* Book / lower cards: stronger wood + metal separation from the stage. */
  #character.v514-reference-hero .v514-book-host{
    padding:5px 7px 4px!important;
    border-top:1px solid rgba(162,100,43,.35)!important;
    background:linear-gradient(180deg,#09120b,#071009)!important;
  }
  #character.v514-reference-hero #v106BookBtn{
    min-height:40px!important;
    border:1px solid #a16b34!important;
    border-radius:5px!important;
    background:linear-gradient(180deg,#653919,#40230f 55%,#2a170b)!important;
    box-shadow:inset 0 0 0 1px rgba(255,214,134,.13),0 2px 5px #000b!important;
  }
  #character.v514-reference-hero .v510-footer{
    padding:4px 7px 5px!important;
    background:linear-gradient(180deg,#07110a,#050b07)!important;
  }
  #character.v514-reference-hero .v510-stats>.combat-box{
    min-height:41px!important;
    border-radius:6px!important;
    border-color:#514b36!important;
  }
  #character.v514-reference-hero .v510-stats .combat-box::before{
    width:29px!important;height:29px!important;font-size:14px!important;border-radius:6px!important;
  }
  #character.v514-reference-hero .v510-stats .combat-box span{font-size:5.9px!important}
  #character.v514-reference-hero .v510-stats .combat-box b{font-size:16.5px!important}

  #character.v514-reference-hero #v459SetSummary{min-height:26px!important;gap:4px!important;margin-top:4px!important}
  #character.v514-reference-hero #v459SetSummary .v519-set-cell,
  #character.v514-reference-hero #v459SetSummary .v519-talent-cell{min-height:26px!important;padding:3px 6px!important;border-radius:6px!important}
  #character.v514-reference-hero .v514-passive-row{margin-top:4px!important;padding:4px 5px!important;border-radius:6px!important}
  #character.v514-reference-hero .v514-nav-host{margin-top:4px!important;padding-top:4px!important;border-top:1px solid #8d5a2c!important}
  #character.v514-reference-hero #v514HeroTabs{gap:4px!important}
  #character.v514-reference-hero #v514HeroTabs button{min-height:38px!important;border-radius:6px!important}
  #character.v514-reference-hero #v514HeroTabs button span{font-size:15px!important}
  #character.v514-reference-hero #v514HeroTabs button em{font-size:5.8px!important}
}

@media(max-width:350px){
  #character.v514-reference-hero .v510-titlebar{width:78%!important;font-size:12.4px!important}
  #character.v514-reference-hero .v510-layout{grid-template-columns:54px minmax(0,1fr) 54px!important}
  #character.v514-reference-hero #v510HeroRoot .slot{height:56px!important;min-height:56px!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:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;min-height:38px!important}
  #character.v514-reference-hero .v510-portrait{height:171px!important;margin-left:-25px!important;margin-right:-25px!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:202px!important;height:175px!important;min-height:175px!important}
}