/* New cutout heroes share a world, while evolved portraits retain their framing. */
body.va-art { --va-scene: url('battle-art/verdant-arena.webp'); --va-accent: #efcc88; }
body.va-art[data-battle-hero="ranger"] { --va-accent: #93e6c2; }
body.va-art[data-battle-hero="mage"] { --va-accent: #cbb2ff; }
body.va-art:not(.v1958TitleWorld) #sceneBg { filter: saturate(.88) brightness(.69); }
body.va-art:not(.v1958TitleWorld) #sceneShade { background: linear-gradient(180deg,#04111b50,transparent 28%,#03101830 65%,#03080ddd),radial-gradient(ellipse at 50% 43%,transparent 20%,#040b1766 90%); }

/* The world sits behind the transparent character, rather than moving with it. */
body.va-art .va-cutout-art { background-image: linear-gradient(180deg,#08232925,#07121a38),var(--va-scene); background-size: cover; background-position: 34% center; }
body.va-art #heroImage.va-cutout { position: absolute; width: 140%; max-width: none; height: 110%; left: -20%; top: -5%; object-fit: contain !important; object-position: center 44% !important; padding: 10px 0 18px; transform-origin: 50% 85%; animation: vaHeroBreath 4.8s ease-in-out infinite; filter: drop-shadow(0 7px 8px #010913aa); }
body.va-art #heroFighter .va-cutout-art:after { background: linear-gradient(180deg,transparent 63%,#06121b22 73%,#040c18e6 100%); }
body.va-art #game .fighterInfo { left: 16px; right: 14px; bottom: 14px; }
body.va-art #game .fighterName { font-size: clamp(22px,2.4vw,32px) !important; line-height: 1.13; text-wrap: balance; overflow-wrap: normal; }
body.va-art #game .fighterInfo:before { opacity: .7; background: linear-gradient(90deg,var(--va-accent),transparent 85%); }
body.va-art #game .fighter { background-color: #091620; }
body.va-art #game #heroFighter { box-shadow: 0 0 0 1px #030a12,0 0 0 2px #b8923f77,0 14px 40px #0008,inset 0 0 0 1px #fff2c914 !important; }
body.va-art #game .hud { backdrop-filter: blur(10px); }
body.va-art #game .track.hp i { transition: width .28s cubic-bezier(.2,.8,.2,1); }
body.va-art #game .track.xp i { background: linear-gradient(90deg,#9e89ef,#c7b3ff,#ccecff) !important; }
body.va-art #game .ans { transition: border-color .15s,background .15s,box-shadow .15s,transform .15s; }
body.va-art #game .ans.good { box-shadow: 0 0 0 1px #82e5b250,inset 0 0 18px #62d89322,0 0 20px #46c18716 !important; }
body.va-art #game .ans:focus-visible { outline: 2px solid #fff2c0; outline-offset: 3px; }

/* First-screen and selection artwork use the same cutouts as the battlefield. */
body.va-art .gateHeroCard,body.va-art .heroPick .heroArt { background: radial-gradient(ellipse at 50% 30%,#9e874533,transparent 65%),linear-gradient(150deg,#17382e,#09171f 70%); }
body.va-art .gateHeroCard.ranger,body.va-art .heroPick[data-hero="ranger"] .heroArt { background: radial-gradient(ellipse at 50% 35%,#93ec8d27,transparent 65%),linear-gradient(150deg,#143d32,#09191e 70%); }
body.va-art .gateHeroCard.mage,body.va-art .heroPick[data-hero="mage"] .heroArt { background: radial-gradient(ellipse at 50% 35%,#b79aff33,transparent 65%),linear-gradient(150deg,#302a51,#101525 70%); }
body.va-art .gateHeroCard > img.va-cutout,body.va-art .heroPick .heroArt > img.va-cutout { object-fit: contain !important; object-position: center center !important; padding: 5px 0 0; transform-origin: 50% 80%; }
body.va-art .heroPick.selected .heroArt > img.va-cutout { transform: scale(1.025); transition: transform .25s ease; }
body.va-art .gcard img.va-cutout { object-fit: contain; }

@keyframes vaHeroBreath { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.014) translateY(-2px); } }
@media(max-width:800px) {
  body.va-art #game .fighterName { font-size: clamp(17px,5.1vw,23px) !important; line-height: 1.13; letter-spacing: .01em; }
  body.va-art #game .fighterInfo { left: 10px; right: 9px; bottom: 11px; }
  body.va-art #heroImage.va-cutout { padding: 5px 0 10px; }
  body.va-art #game .hudTitle { font-size: 12px; }
  body.va-art #game .question { box-shadow: 0 0 0 1px #030a12,0 0 0 2px #b8923f77,0 -8px 22px #02081570 !important; }
}
@media(prefers-reduced-motion:reduce) {
  body.va-art #heroImage.va-cutout { animation: none; }
  body.va-art .heroPick .heroArt > img.va-cutout,body.va-art #game .ans,body.va-art #game .track i { transition: none !important; }
}