
/* Stronger reference pass: stop treating the hero art like a rectangular card.
   This only changes presentation inside the existing Heldenquartier. */
@media(max-width:430px){
  #character.v514-reference-hero{
    margin:-8px -8px 0!important;
    padding:2px 3px 8px!important;
  }
  #character.v514-reference-hero #v510HeroRoot{
    border:2px solid #8b5b2c!important;
    border-radius:6px!important;
    background:#061009!important;
    box-shadow:inset 0 0 0 1px rgba(245,205,122,.18),inset 0 0 36px #000b,0 8px 20px #000b!important;
  }

  /* Header closer to the carved wood sign in the reference. */
  #character.v514-reference-hero .v510-titlebar{
    height:31px!important;
    margin:0 7px!important;
    padding:0 34px!important;
    border-left:1px solid #9b6831!important;
    border-right:1px solid #9b6831!important;
    border-bottom:1px solid #a87438!important;
    background:
      linear-gradient(135deg,transparent 0 8px,#452713 8px 11px,transparent 11px) left center/16px 100% no-repeat,
      linear-gradient(225deg,transparent 0 8px,#452713 8px 11px,transparent 11px) right center/16px 100% no-repeat,
      linear-gradient(180deg,#4a2b15 0%,#2b180c 52%,#150c06 100%)!important;
    color:#f5dba4!important;
    font-size:14px!important;
    letter-spacing:.035em!important;
    text-shadow:0 2px 1px #100803,0 0 8px rgba(229,167,75,.25)!important;
  }
  #character.v514-reference-hero .v510-titlebar::before,
  #character.v514-reference-hero .v510-titlebar::after{
    top:7px!important;
    font-size:10px!important;
    color:#e2b46e!important;
    text-shadow:0 1px #000!important;
  }
  #character.v514-reference-hero .v510-titlebar::before{left:15px!important}
  #character.v514-reference-hero .v510-titlebar::after{right:15px!important}
  #character.v514-reference-hero .v514-kicker{
    height:17px!important;
    font-size:5.25px!important;
    letter-spacing:.045em!important;
    background:linear-gradient(180deg,#0d2415,#07150c)!important;
  }

  /* Main stage: deeper forest and warmer side lighting. */
  #character.v514-reference-hero .v510-stage{
    isolation:isolate!important;
    padding:4px 7px 5px!important;
    background:
      radial-gradient(circle at 5% 18%,rgba(255,126,25,.22),transparent 17%),
      radial-gradient(circle at 95% 18%,rgba(255,126,25,.22),transparent 17%),
      radial-gradient(ellipse at 50% 22%,rgba(104,225,72,.34),transparent 40%),
      linear-gradient(90deg,rgba(4,14,7,.96) 0 11%,transparent 22% 78%,rgba(4,14,7,.96) 89% 100%),
      repeating-linear-gradient(90deg,rgba(111,177,75,.025) 0 18px,rgba(0,0,0,.025) 18px 36px),
      linear-gradient(180deg,#173d22 0%,#0a2413 52%,#06110a 100%)!important;
  }
  #character.v514-reference-hero .v510-stage::before,
  #character.v514-reference-hero .v510-stage::after{
    content:''!important;
    position:absolute!important;
    z-index:0!important;
    top:4px!important;
    bottom:4px!important;
    width:42px!important;
    opacity:.9!important;
    filter:none!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 50% 17%,rgba(255,226,123,.95) 0 3%,rgba(255,121,19,.78) 4% 8%,rgba(255,78,8,.18) 9% 16%,transparent 17%),
      radial-gradient(ellipse at 50% 65%,rgba(54,134,48,.24),transparent 60%)!important;
  }
  #character.v514-reference-hero .v510-stage::before{left:-13px!important;transform:none!important}
  #character.v514-reference-hero .v510-stage::after{right:-13px!important;transform:none!important}

  #character.v514-reference-hero .v510-layout{
    grid-template-columns:57px minmax(0,1fr) 57px!important;
    gap:0!important;
    align-items:start!important;
  }
  #character.v514-reference-hero .v510-col{
    z-index:12!important;
    gap:5px!important;
    padding-top:5px!important;
  }

  /* Equipment cards float over the hero shoulders, like the reference. */
  #character.v514-reference-hero #v510HeroRoot .slot{
    height:62px!important;
    min-height:62px!important;
    padding:3px 2px 13px!important;
    border-width:1.6px!important;
    border-radius:7px!important;
    background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.08),transparent 43%),linear-gradient(180deg,#101611,#040706)!important;
    box-shadow:inset 0 0 14px #000e,0 0 8px color-mix(in srgb,var(--v514-rarity) 58%,transparent),0 4px 7px #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:43px!important;
    height:43px!important;
    max-width:43px!important;
    max-height:43px!important;
    min-height:43px!important;
  }
  #character.v514-reference-hero .v514-slot-level{
    bottom:2px!important;
    font-size:6.4px!important;
  }

  /* The hero now intentionally extends behind the item columns. */
  #character.v514-reference-hero .v510-center{z-index:5!important}
  #character.v514-reference-hero .v510-portrait{
    height:174px!important;
    margin:0 -45px!important;
    overflow:visible!important;
  }
  #character.v514-reference-hero .v510-portrait::before{
    width:250px!important;
    height:177px!important;
    bottom:-8px!important;
    background:radial-gradient(ellipse at 50% 48%,rgba(100,221,76,.30),rgba(40,104,43,.10) 60%,transparent 80%)!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:250px!important;
    height:178px!important;
    min-height:178px!important;
    max-width:none!important;
  }
  #character.v514-reference-hero #v510HeroRoot .avatar-scene{
    overflow:visible!important;
    background:none!important;
  }
  #character.v514-reference-hero #v510HeroRoot .v41-portrait{
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
  }
  #character.v514-reference-hero #v510HeroRoot .v080-class-avatar-img,
  #character.v514-reference-hero #v510HeroRoot .class-avatar-big img{
    border:0!important;
    border-radius:0!important;
    object-fit:cover!important;
    object-position:center 22%!important;
    transform:scale(1.07)!important;
    transform-origin:center 48%!important;
    -webkit-mask-image:radial-gradient(ellipse 73% 78% at 50% 48%,#000 0 53%,rgba(0,0,0,.98) 62%,rgba(0,0,0,.70) 73%,rgba(0,0,0,.25) 86%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 73% 78% at 50% 48%,#000 0 53%,rgba(0,0,0,.98) 62%,rgba(0,0,0,.70) 73%,rgba(0,0,0,.25) 86%,transparent 100%)!important;
    filter:drop-shadow(0 8px 7px #000d) saturate(1.12) contrast(1.04)!important;
  }

  /* Identity sits directly on the hero, not in a detached green gap. */
  #character.v514-reference-hero #v510HeroRoot .center-name{
    width:160%!important;
    margin:-20px -30% 0!important;
    font-size:16.5px!important;
    line-height:1!important;
    text-shadow:0 2px 2px #000,0 0 8px #000!important;
  }
  #character.v514-reference-hero #v510HeroRoot .center-name::before{font-size:9px!important}
  #character.v514-reference-hero #v510HeroRoot .center-class{
    width:158%!important;
    margin:3px -29% 0!important;
    font-size:6.2px!important;
  }
  #character.v514-reference-hero #v510HeroRoot .level-shield{
    min-width:100px!important;
    margin-top:5px!important;
    padding:3px 9px!important;
    border:1.5px solid #ad7434!important;
    background:linear-gradient(180deg,#623719,#321b0d)!important;
    box-shadow:inset 0 0 0 1px rgba(255,217,132,.16),0 3px 6px #000b!important;
  }
  #character.v514-reference-hero #v510HeroRoot .level-shield b{font-size:17px!important}
  #character.v514-reference-hero #v510HeroRoot .center-xp{
    width:min(150px,100%)!important;
    margin-top:4px!important;
    padding:2px 5px 3px!important;
  }
  #character.v514-reference-hero #v510HeroRoot .center-xp-row{font-size:5.8px!important}
  #character.v514-reference-hero #v510HeroRoot .center-xp-track{height:6px!important}

  /* Lower blocks keep the approved compact proportions but get warmer RPG framing. */
  #character.v514-reference-hero .v514-book-host{padding:5px 7px!important}
  #character.v514-reference-hero #v106BookBtn{
    min-height:42px!important;
    border-color:#a46c34!important;
    background:linear-gradient(180deg,#613719,#3a200f)!important;
    box-shadow:inset 0 0 0 1px rgba(244,198,111,.14),0 3px 7px #000b!important;
  }
  #character.v514-reference-hero .v510-footer{padding:5px 7px 6px!important}
  #character.v514-reference-hero .v510-stats{gap:5px!important}
  #character.v514-reference-hero .v510-stats .combat-box{
    min-height:44px!important;
    border-color:#5d5238!important;
    background:linear-gradient(180deg,#101b13,#09110c)!important;
  }
  #character.v514-reference-hero #v459SetSummary{margin-top:4px!important}
  #character.v514-reference-hero .v514-passive-row{margin-top:4px!important}
  #character.v514-reference-hero .v514-nav-host{margin-top:4px!important}
  #character.v514-reference-hero #v514HeroTabs button{min-height:39px!important}
}

@media(max-width:350px){
  #character.v514-reference-hero .v510-layout{grid-template-columns:54px minmax(0,1fr) 54px!important}
  #character.v514-reference-hero #v510HeroRoot .slot{height:59px!important;min-height:59px!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 .v510-portrait{height:166px!important;margin-left:-39px!important;margin-right:-39px!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:232px!important;height:170px!important;min-height:170px!important}
}
