/* Dedicated menu actors: independent cloth, hair, eyes, breathing and magical props. */
.dh-premium .dh-roster { clip-path: none; overflow: visible; }
.dh-premium .dh-roster > img { width: auto; height: 100%; top: 0; object-fit: contain; transform: none; mask-image: linear-gradient(#000 0 79%, transparent 100%); }
.dh-premium .dh-roster > .dh-ignis { left: 4%; }
.dh-premium .dh-roster > .dh-sylwan { right: 17%; }
.dh-premium .dh-roster > .dh-morvath { right: 1%; }
.dh-premium .dh-masthead { height: clamp(220px, 15.6vw, 298px); }
.dh-header-actor { position: absolute; height: calc(100% - 12px); top: 8px; pointer-events: none; }
.dh-header-actor > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dh-header-fire { left: 1%; width: 29%; translate: calc(var(--dh-px) * .45) calc(var(--dh-py) * .2); }
.dh-header-nature { right: 14.5%; width: 20%; translate: calc(var(--dh-px) * -.3) calc(var(--dh-py) * .2); }
.dh-header-dark { right: .5%; width: 19%; translate: calc(var(--dh-px) * -.55) calc(var(--dh-py) * .25); }
.dh-header-breath { transform-box: view-box; transform-origin: 50% 92%; animation: dh-header-breathing 5s ease-in-out infinite; }
.dh-header-nature .dh-header-breath { animation-duration: 8.5s; animation-delay: -3s; }
.dh-header-dark .dh-header-breath { animation: dh-spectral-breath 7.5s ease-in-out -2s infinite; }
.dh-ignis-blink { animation: dh-natural-blink 6.8s linear -2s infinite; }
.dh-sylwan-blink { animation: dh-natural-blink 11.4s linear -6s infinite; }
.dh-forge-glow { mix-blend-mode: screen; animation: dh-forge-pulse 2.8s ease-in-out infinite; }
.dh-forge-flames { opacity: .8; }
.dh-forge-flames path { transform-box: fill-box; transform-origin: 50% 100%; animation: dh-forge-flicker 1.8s ease-in-out infinite alternate; }
.dh-forge-flames .dh-flame-two { animation-duration: 1.3s; animation-delay: -.7s; }
.dh-forge-embers > * { transform-box: fill-box; transform-origin: center; animation: dh-forge-ember-rise 3.5s ease-out infinite; }
.dh-forge-embers > :nth-child(2) { animation-delay: -1.7s; }
.dh-forge-embers > :nth-child(3) { animation-delay: -.8s; }
.dh-forge-embers > :nth-child(4) { animation-delay: -2.6s; }
.dh-forest-light { mix-blend-mode: screen; animation: dh-forest-pulse 6s ease-in-out -2s infinite; }
.dh-crown-leaves > path { transform-box: fill-box; transform-origin: 100% 50%; animation: dh-leaf-rustle 4.3s ease-in-out infinite; }
.dh-crown-leaf-b { animation-delay: -1.3s !important; animation-duration: 5.2s !important; transform-origin: 0 100% !important; }
.dh-crown-leaf-c { animation-delay: -2.8s !important; transform-origin: 50% 100% !important; }
.dh-forest-motes > * { animation: dh-forest-mote 6s ease-in-out infinite; }
.dh-forest-motes > :nth-child(even) { animation-delay: -3s; }
.dh-lantern-swing { transform-box: view-box; transform-origin: 774px 480px; animation: dh-soul-pendulum 5.6s ease-in-out infinite; }
.dh-lantern-chain { fill: none; stroke: #b5a087; stroke-width: 3; stroke-dasharray: 5 3; }
.dh-lantern-aura { mix-blend-mode: screen; animation: dh-soul-light 3.3s ease-in-out infinite; }
.dh-lantern-core { animation: dh-soul-light 1.7s ease-in-out -.5s infinite; }
.dh-soul-back { transform-box: view-box; transform-origin: 50% 75%; animation: dh-soul-billow 8s ease-in-out -3s infinite; }
.dh-soul-front { stroke-dasharray: 130 350; animation: dh-soul-flow 7s linear infinite; }
.dh-soul-motes > * { animation: dh-soul-rise 4.7s ease-out infinite; }
.dh-soul-motes > :nth-child(2) { animation-delay: -2.3s; }
.dh-soul-motes > :nth-child(3) { animation-delay: -1s; }
.dh-soul-gaze { mix-blend-mode: screen; animation: dh-soul-light 4.5s ease-in-out -1s infinite; }

@keyframes dh-header-breathing { 0%, 100% { transform: translateY(0) rotate(-.25deg) scaleY(1); } 50% { transform: translateY(-3px) rotate(.3deg) scaleY(1.009); } }
@keyframes dh-spectral-breath { 0%, 100% { transform: translateY(1px) rotate(-.5deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
@keyframes dh-forge-pulse { 0%, 100% { opacity: .28; } 35% { opacity: .65; } 62% { opacity: .4; } 78% { opacity: .85; } }
@keyframes dh-forge-flicker { 0% { transform: scale(.85, .75) skewX(-7deg); opacity: .3; } 100% { transform: scale(1.08, 1.2) skewX(7deg); opacity: .8; } }
@keyframes dh-forge-ember-rise { 0% { transform: translate(0, 15px) scale(.4); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(-22px, -140px) scale(.2); opacity: 0; } }
@keyframes dh-leaf-rustle { 0%, 100% { transform: rotate(-6deg); } 45% { transform: rotate(9deg) skewY(3deg); } 65% { transform: rotate(3deg); } }
@keyframes dh-forest-pulse { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
@keyframes dh-forest-mote { 0%, 100% { transform: translate(0, 5px); opacity: .1; } 50% { transform: translate(-15px, -24px); opacity: .9; } }
@keyframes dh-soul-pendulum { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@keyframes dh-soul-light { 0%, 100% { opacity: .4; } 50% { opacity: .95; } }
@keyframes dh-soul-billow { 0%, 100% { transform: translate(-3px, 5px) rotate(-2deg) scaleX(.97); opacity: .5; } 50% { transform: translate(4px, -9px) rotate(3deg) scaleX(1.025); opacity: .9; } }
@keyframes dh-soul-flow { from { stroke-dashoffset: 480; opacity: .3; } 50% { opacity: .8; } to { stroke-dashoffset: 0; opacity: .3; } }
@keyframes dh-soul-rise { 0% { transform: translate(0, 20px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(16px, -100px); opacity: 0; } }
.dh-actor { overflow: visible; pointer-events: none; }
.dh-actor > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dh-premium .dh-thora.dh-actor, .dh-premium .dh-nerissa.dh-actor { animation: none; z-index: 3; }
.dh-actor-breath { transform-box: view-box; transform-origin: 50% 94%; animation: dh-actor-breathing 5.8s ease-in-out infinite; }
.dh-actor-tide .dh-actor-breath { animation-duration: 7.3s; animation-delay: -2s; }
.dh-scarf-tail { transform-box: view-box; transform-origin: 460px 490px; animation: dh-scarf-wind 4.4s ease-in-out infinite; }
.dh-forelock { transform-box: view-box; transform-origin: 486px 128px; animation: dh-hair-wind 3.6s ease-in-out -1s infinite; }
.dh-eye-blink { opacity: 0; }
.dh-thora-blink { animation: dh-natural-blink 7.8s linear -3s infinite; }
.dh-nerissa-blink { animation: dh-natural-blink 9.7s linear -6s infinite; }
.dh-hand-magic { transform-box: view-box; transform-origin: 837px 535px; }
.dh-hand-magic > circle:first-child { animation: dh-finger-light 3.8s ease-in-out infinite; }
.dh-hand-bolt { fill: none; stroke: #efffff; stroke-width: 4; stroke-linejoin: miter; stroke-dasharray: 350; animation: dh-finger-cast 4.6s ease-out infinite; }
.dh-hand-bolt-glow { stroke: #25b9ff; stroke-width: 15; filter: url('#dh-rig-lightning'); }
.dh-finger-spark { fill: #eaffff; animation: dh-finger-particle 3s ease-out infinite; }
.dh-finger-spark-b { animation-delay: -1.2s; }
.dh-finger-spark-c { animation-delay: -2.1s; }
.dh-compass-hover { transform-box: view-box; transform-origin: 890px 449px; animation: dh-compass-levitation 5.6s ease-in-out infinite; }
.dh-compass-magic > circle { animation: dh-finger-light 5s ease-in-out -1.5s infinite; }
.dh-compass-orbit { fill: none; stroke: #84edff; stroke-width: 3; opacity: .65; stroke-dasharray: 18 10 4 10; transform-box: view-box; transform-origin: 890px 583px; animation: dh-compass-orbit 12s linear infinite; }
.dh-compass-glint { fill: #fff8d7; animation: dh-pearl-light 3.2s ease-in-out infinite; }
.dh-compass-droplets { fill: #b6f8ff; stroke: #258fc6; stroke-width: 1; animation: dh-tide-droplets 4.8s ease-in-out -1s infinite; }
.dh-rig-water { transform-box: view-box; transform-origin: 800px 620px; opacity: .48; animation: dh-rig-tide 6s ease-in-out -2s infinite; }
.dh-premium:has(.dh-actor-tide) .dh-tide-ribbon { display: none; }
.dh-premium .dh-mode { z-index: auto; }
.dh-premium .dh-mode::before { z-index: 0; }
.dh-premium .dh-mode-copy { z-index: 5; }
.dh-premium .dh-mode > .dh-button { z-index: 6; }

@keyframes dh-actor-breathing { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.006) translateY(-2px); } }
@keyframes dh-scarf-wind { 0%, 100% { transform: rotate(-3deg) skewY(1deg) scaleX(.99); } 40% { transform: rotate(4deg) skewY(-2deg) scaleX(1.025); } 75% { transform: rotate(-.5deg) skewY(1.2deg) scaleX(1.005); } }
@keyframes dh-hair-wind { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) skewX(-2deg); } }
@keyframes dh-natural-blink { 0%, 89%, 94%, 100% { opacity: 0; } 90%, 92.5% { opacity: 1; } }
@keyframes dh-finger-light { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes dh-finger-cast { 0%, 54%, 85%, 100% { opacity: 0; stroke-dashoffset: 350; } 60% { opacity: 1; stroke-dashoffset: 0; } 74% { opacity: .75; stroke-dashoffset: -20; } 84% { opacity: 0; stroke-dashoffset: -350; } }
@keyframes dh-finger-particle { 0% { opacity: 0; transform: translate(0, 12px) scale(.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-10px, -35px) scale(.2); } }
@keyframes dh-compass-levitation { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes dh-compass-orbit { to { stroke-dashoffset: -420; transform: rotate(5deg); } }
@keyframes dh-pearl-light { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dh-tide-droplets { 0%, 100% { transform: translateY(3px); opacity: .35; } 50% { transform: translateY(-18px); opacity: .9; } }
@keyframes dh-rig-tide { 0%, 100% { transform: rotate(-3deg) scale(.97); opacity: .4; } 50% { transform: rotate(3deg) scale(1.03); opacity: .7; } }
@media (min-width: 901px) and (max-width: 1200px) {
  .dh-premium .dh-masthead { height: 250px; }
  .dh-header-actor { top: 48px; height: 198px; }
  .dh-header-nature { right: 16%; }
  .dh-header-dark { right: 2%; width: 18%; }
}
@media (max-width: 900px) {
  .dh-premium .dh-masthead { height: 308px; }
  .dh-premium .dh-masthead h1 { font-size: 52px; }
  .dh-header-actor { top: auto; bottom: 2px; height: 148px; }
  .dh-header-fire { left: 4%; width: 28%; }
  .dh-header-nature { right: 36%; width: 28%; }
  .dh-header-dark { right: 4%; width: 28%; }
  .dh-premium .dh-mode { z-index: 8; }
  .dh-premium .dh-thora.dh-actor { left: -5%; width: 52%; height: 63%; }
  .dh-premium .dh-nerissa.dh-actor { right: 0; width: 52%; height: 65%; }
  .dh-premium .dh-chaos .dh-button { background: #ffd036; color: #08172d; }
  .dh-premium .dh-chaos .dh-button:hover { background: #ffe580; color: #08172d; }
}
@media (max-width: 540px) {
  .dh-premium .dh-masthead { height: 250px; }
  .dh-premium .dh-masthead h1 { font-size: clamp(36px, 11vw, 46px); margin-top: 10px; }
  .dh-header-actor { top: auto; bottom: 2px; height: 116px; }
  .dh-header-fire { left: 2%; width: 31%; }
  .dh-header-nature { right: 34%; width: 32%; }
  .dh-header-dark { right: 6%; width: 29%; }
  .dh-premium .dh-nav { padding-inline: 5px 19px; }
  .dh-premium .dh-title-rule { margin-top: 2px; width: 120px; }
  .dh-premium .dh-thora.dh-actor { left: -5%; width: 65%; height: 39%; bottom: 167px; }
  .dh-premium .dh-nerissa.dh-actor { right: 3%; width: 61%; height: 40%; bottom: 167px; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-actor *, .dh-actor, .dh-header-actor * { animation: none !important; }
  .dh-eye-blink { opacity: 0 !important; }
  .dh-hand-bolt { opacity: .3; stroke-dashoffset: 0; }
}