/* Shared layered dragon stage for the private maker and future arena. */

.dragon-composite {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    isolation: isolate;
    overflow: hidden;
    border-radius: 13px;
    container-type: inline-size;
    /* The attachment point sits on the upper crown, safely above and behind the eye. */
    --horn-anchor-x: 32%;
    --horn-anchor-y: 9%;
    --tail-anchor-x: 76.6%;
    --tail-anchor-y: 54%;
}

/* Facing is presentation-only. Mirror complete layers so attachment geometry,
   split foreground horns, and per-image transforms remain intact. */
.dragon-composite[data-facing="right"] > .mixer-layer {
    transform: scaleX(-1);
    transform-origin: 50% 50%;
}

.mixer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 68%, rgba(245, 158, 11, 0.16), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(99, 102, 241, 0.18), transparent 58%),
        linear-gradient(155deg, #11162c 0%, #20254a 48%, #090d1d 100%);
}

.mixer-backdrop::before {
    position: absolute;
    inset: 5%;
    content: "";
    border: 1px solid rgba(251, 191, 36, 0.12);
    border-radius: 50%;
    transform: scaleY(0.78);
}

.mixer-backdrop::after {
    position: absolute;
    right: -8%;
    bottom: 1%;
    left: -8%;
    height: 24%;
    content: "";
    background: linear-gradient(to top, rgba(3, 5, 13, 0.95), rgba(3, 5, 13, 0));
}

.mixer-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mixer-layer-effect-back { z-index: 1; }
.mixer-layer-wings { z-index: 2; }
.mixer-layer-tail { z-index: 3; }
.mixer-layer-horns { z-index: 4; }
.mixer-layer-body { z-index: 5; }
.mixer-layer-horns-front { z-index: 6; }
.mixer-layer-effect-front { z-index: 7; }

.dragon-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2.4cqw 1.5cqw rgba(0, 0, 0, 0.58));
    transition: filter 260ms ease;
}

.part-art {
    position: absolute;
    inset: 0;
}

[data-dragon-part="tail"] {
    transform-origin: 0 0;
}

[data-dragon-part="tail"][data-variant="mace"] {
    transform: translate(37.16%, 9.01%) scale(0.6);
}

[data-dragon-part="tail"][data-variant="flame"] {
    transform: translate(17.22%, 3.55%) scale(0.85);
}

.dragon-composite[data-element="unavailable"] .mixer-layer-effect-back,
.dragon-composite[data-element="unavailable"] .mixer-layer-effect-front {
    display: none;
}

.aura-ring {
    position: absolute;
    top: 13%;
    left: 18%;
    width: 65%;
    height: 67%;
    border: 1.8cqw solid var(--element);
    border-radius: 50%;
    opacity: 0.28;
    filter: blur(1.1cqw);
    transform-origin: center;
    animation: aura-pulse 3.2s ease-in-out infinite;
}

.aura-cloud {
    position: absolute;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.28;
    background: radial-gradient(circle, var(--element) 0 18%, transparent 70%);
    filter: blur(2cqw);
}

.aura-cloud-one { top: 22%; left: 16%; }
.aura-cloud-two { right: 11%; bottom: 20%; }

.dragon-composite[data-element="fire"] {
    --element: #fb6b1d;
    --element-bright: #fde047;
    --element-glow: rgba(249, 83, 17, 0.58);
}

.dragon-composite[data-element="water"] {
    --element: #38bdf8;
    --element-bright: #bae6fd;
    --element-glow: rgba(14, 165, 233, 0.5);
}

.dragon-composite[data-element="lightning"] {
    --element: #c4b5fd;
    --element-bright: #fef08a;
    --element-glow: rgba(167, 139, 250, 0.58);
}

.dragon-composite[data-element="shadow"] {
    --element: #a78bfa;
    --element-bright: #ddd6fe;
    --element-glow: rgba(109, 40, 217, 0.58);
}

.dragon-composite[data-element="galaxy"] {
    --element: #8b5cf6;
    --element-bright: #e0f2fe;
    --element-glow: rgba(34, 211, 238, 0.52);
}

.dragon-composite[data-element="forest"] {
    --element: #22c55e;
    --element-bright: #bbf7d0;
    --element-glow: rgba(34, 197, 94, 0.5);
}

.dragon-composite[data-element="arctic"] {
    --element: #7dd3fc;
    --element-bright: #f8fafc;
    --element-glow: rgba(147, 197, 253, 0.58);
}

.dragon-composite[data-element="metal"] {
    --element: #94a3b8;
    --element-bright: #f8fafc;
    --element-glow: rgba(203, 213, 225, 0.45);
}

.dragon-composite[data-element="rainbow"] {
    --element: #f472b6;
    --element-bright: #fff7ed;
    --element-glow: rgba(244, 114, 182, 0.48);
}

.dragon-composite[data-element="colossal"] {
    --element: #f97316;
    --element-bright: #fde68a;
    --element-glow: rgba(249, 115, 22, 0.54);
}

.effect-orb {
    position: absolute;
    width: 3.2%;
    aspect-ratio: 1;
    --mark-rotation: 0deg;
    --mark-scale: 1;
    border-radius: 50%;
    background: var(--element-bright);
    box-shadow: 0 0 1.5cqw 0.7cqw var(--element-glow);
    animation: magic-float 2.8s ease-in-out infinite;
}

/* Keep foreground magic in the stage gutters so it frames the dragon. */
.effect-orb-one { top: 28%; left: 6%; }
.effect-orb-two { right: 5%; bottom: 8%; animation-delay: -0.9s; }
.effect-orb-three { top: 7%; left: 6%; animation-delay: -1.8s; }

.dragon-composite[data-element="water"] .effect-orb {
    border: 0.35cqw solid var(--element-bright);
    background: rgba(56, 189, 248, 0.16);
    box-shadow: inset 0.4cqw 0.4cqw 0.5cqw rgba(255, 255, 255, 0.5), 0 0 1.3cqw var(--element-glow);
}

.dragon-composite[data-element="shadow"] .effect-orb {
    opacity: 0.58;
    filter: blur(0.4cqw);
}

.element-mark {
    display: none;
    position: absolute;
    width: 5.5%;
    height: 12%;
    --mark-rotation: 0deg;
    --mark-scale: 1;
    background: linear-gradient(#fffbd1, var(--element));
    filter: drop-shadow(0 0 0.7cqw var(--element-glow));
    transform: rotate(var(--mark-rotation)) scale(var(--mark-scale));
    transform-origin: center;
    animation: element-drift 3.2s ease-in-out infinite;
}

.dragon-composite:not([data-element="unavailable"]) .element-mark {
    display: block;
}

.element-mark-one {
    top: 4%;
    right: 5%;
    --mark-rotation: 15deg;
}

.element-mark-two {
    bottom: 9%;
    left: 3%;
    --mark-rotation: -18deg;
    --mark-scale: 0.72;
    animation-delay: -1.2s;
}

.dragon-composite[data-element="fire"] .element-mark {
    width: 4.8%;
    height: 10%;
    background: linear-gradient(115deg, #fff7ad 4%, #facc15 32%, #fb6b1d 68%, #dc2626 100%);
    clip-path: polygon(48% 0, 68% 24%, 66% 43%, 87% 31%, 96% 65%, 74% 94%, 48% 100%, 18% 91%, 4% 62%, 20% 31%, 33% 50%);
}

.dragon-composite[data-element="water"] .aura-ring {
    border-width: 1.1cqw;
    border-style: double;
    filter: blur(0.45cqw);
}

.dragon-composite[data-element="water"] .element-mark {
    width: 4.4%;
    height: 7.5%;
    background: linear-gradient(145deg, #f0f9ff 3%, #7dd3fc 42%, #2563eb 100%);
    clip-path: polygon(50% 0, 84% 42%, 91% 64%, 79% 87%, 50% 100%, 21% 87%, 9% 64%, 16% 42%);
}

.dragon-composite[data-element="lightning"] .aura-ring {
    border-width: 0.9cqw;
    border-style: dashed;
    filter: blur(0.45cqw);
}

.dragon-composite[data-element="lightning"] .element-mark {
    width: 5.5%;
    height: 15%;
    background: linear-gradient(#fffbd1, var(--element));
    clip-path: polygon(45% 0, 100% 0, 61% 39%, 91% 39%, 21% 100%, 40% 53%, 9% 53%);
    animation: lightning-flash 2.4s steps(1) infinite;
}

.dragon-composite[data-element="lightning"] .element-mark-one { height: 9%; }
.dragon-composite[data-element="lightning"] .element-mark-two { animation-delay: -1.2s; }

.dragon-composite[data-element="lightning"] .effect-orb {
    opacity: 0.45;
}

.dragon-composite[data-element="shadow"] .aura-ring {
    border-width: 2.4cqw;
    border-color: rgba(109, 40, 217, 0.46);
    opacity: 0.17;
    filter: blur(1.8cqw);
}

.dragon-composite[data-element="shadow"] .aura-cloud {
    background: radial-gradient(circle, rgba(30, 27, 75, 0.94) 0 24%, transparent 72%);
}

.dragon-composite[data-element="shadow"] .element-mark {
    width: 4.8%;
    height: 4.8%;
    border-radius: 50%;
    background: transparent;
    box-shadow: 1.35cqw 0.15cqw 0 0.12cqw var(--element-bright);
    filter: drop-shadow(0 0 0.9cqw var(--element-glow));
}

.dragon-composite[data-element="galaxy"] .aura-ring {
    border: 0.55cqw dashed rgba(224, 242, 254, 0.8);
    opacity: 0.44;
    filter: none;
    box-shadow: 0 0 2.2cqw var(--element-glow), inset 0 0 2cqw rgba(139, 92, 246, 0.38);
    animation: galaxy-orbit 9s linear infinite;
}

.dragon-composite[data-element="galaxy"] .aura-cloud-one {
    background:
        radial-gradient(circle at 35% 35%, rgba(224, 242, 254, 0.68) 0 2%, transparent 3%),
        radial-gradient(circle at 68% 58%, rgba(34, 211, 238, 0.54) 0 3%, transparent 4%),
        radial-gradient(circle, rgba(88, 28, 135, 0.78), transparent 68%);
}

.dragon-composite[data-element="galaxy"] .aura-cloud-two {
    background:
        radial-gradient(circle at 28% 62%, rgba(255, 255, 255, 0.65) 0 2%, transparent 3%),
        radial-gradient(circle at 72% 31%, rgba(196, 181, 253, 0.6) 0 3%, transparent 4%),
        radial-gradient(circle, rgba(30, 64, 175, 0.68), transparent 70%);
}

.dragon-composite[data-element="galaxy"] .effect-orb,
.dragon-composite[data-element="galaxy"] .element-mark {
    width: 4.4%;
    height: 4.4%;
    border-radius: 0;
    background: radial-gradient(circle, #fff 0 13%, #bae6fd 14% 24%, #a78bfa 25% 40%, transparent 42%);
    clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 61%, 50% 100%, 41% 61%, 0 50%, 41% 39%);
    filter: drop-shadow(0 0 0.75cqw var(--element-glow));
}

.dragon-composite[data-element="forest"] .aura-ring {
    border: 0.72cqw dashed rgba(74, 222, 128, 0.74);
    opacity: 0.42;
    filter: none;
    box-shadow: 0 0 1.4cqw rgba(34, 197, 94, 0.28), inset 0 0 1.6cqw rgba(21, 128, 61, 0.26);
}

.dragon-composite[data-element="forest"] .aura-cloud {
    background:
        radial-gradient(circle at 30% 30%, rgba(250, 204, 21, 0.6) 0 3%, transparent 4%),
        radial-gradient(circle at 65% 52%, rgba(187, 247, 208, 0.45) 0 4%, transparent 5%),
        radial-gradient(circle, rgba(21, 128, 61, 0.72), transparent 70%);
}

.dragon-composite[data-element="forest"] .effect-orb {
    width: 2.5%;
    background: #fde68a;
    box-shadow: 0 0 1cqw 0.45cqw rgba(250, 204, 21, 0.4);
}

.dragon-composite[data-element="forest"] .element-mark {
    width: 4.6%;
    height: 7.5%;
    border-radius: 100% 0 100% 0;
    background: linear-gradient(135deg, #dcfce7 0%, #4ade80 40%, #15803d 100%);
    filter: drop-shadow(0 0 0.65cqw var(--element-glow));
}

.dragon-composite[data-element="forest"] .element-mark::after {
    position: absolute;
    top: 12%;
    left: 49%;
    width: 6%;
    height: 76%;
    content: "";
    border-radius: 999px;
    background: rgba(240, 253, 244, 0.86);
    transform: rotate(-38deg);
    transform-origin: center;
}

.dragon-composite[data-element="arctic"] .aura-ring {
    border: 0.7cqw double rgba(248, 250, 252, 0.9);
    opacity: 0.4;
    filter: blur(0.2cqw);
    box-shadow: 0 0 1.8cqw rgba(125, 211, 252, 0.4);
}

.dragon-composite[data-element="arctic"] .aura-cloud {
    width: 31%;
    opacity: 0.22;
    background: radial-gradient(ellipse, rgba(224, 242, 254, 0.88), transparent 68%);
    filter: blur(2.6cqw);
}

.dragon-composite[data-element="arctic"] .effect-orb {
    width: 3.8%;
    border: 0.22cqw solid rgba(255, 255, 255, 0.84);
    border-radius: 16%;
    background: linear-gradient(135deg, #fff, #bae6fd 54%, #a5b4fc);
    box-shadow: 0 0 1cqw 0.35cqw rgba(147, 197, 253, 0.46);
    clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%);
}

.dragon-composite[data-element="arctic"] .element-mark {
    width: 0.65%;
    height: 8.5%;
    border-radius: 999px;
    background: var(--element-bright);
    filter: drop-shadow(0 0 0.65cqw var(--element-glow));
}

.dragon-composite[data-element="arctic"] .element-mark::before,
.dragon-composite[data-element="arctic"] .element-mark::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background: inherit;
}

.dragon-composite[data-element="arctic"] .element-mark::before { transform: rotate(60deg); }
.dragon-composite[data-element="arctic"] .element-mark::after { transform: rotate(-60deg); }

.dragon-composite[data-element="metal"] .aura-ring {
    border: 1cqw dashed rgba(226, 232, 240, 0.7);
    opacity: 0.32;
    filter: none;
    box-shadow: 0 0 0 0.35cqw rgba(71, 85, 105, 0.42), inset 0 0 1.4cqw rgba(226, 232, 240, 0.24);
    animation: metal-pulse 3.8s ease-in-out infinite;
}

.dragon-composite[data-element="metal"] .aura-cloud {
    width: 18%;
    opacity: 0.16;
    background: radial-gradient(circle, rgba(248, 250, 252, 0.72), rgba(71, 85, 105, 0.32) 38%, transparent 68%);
    filter: blur(1.2cqw);
}

.dragon-composite[data-element="metal"] .effect-orb,
.dragon-composite[data-element="metal"] .element-mark {
    width: 5%;
    height: 5%;
    border-radius: 0;
    background: linear-gradient(135deg, #f8fafc 0 18%, #64748b 40%, #cbd5e1 65%, #334155 100%);
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
    filter: drop-shadow(0 0.35cqw 0.2cqw rgba(15, 23, 42, 0.66));
    animation: metal-pulse 3.8s ease-in-out infinite;
}

.dragon-composite[data-element="metal"] .element-mark::after {
    position: absolute;
    inset: 34%;
    content: "";
    border-radius: 50%;
    background: #1e293b;
    box-shadow: inset 0.12cqw 0.12cqw 0.12cqw rgba(255, 255, 255, 0.5);
}

.dragon-composite[data-element="rainbow"] .aura-ring {
    border-width: 1.05cqw;
    border-style: solid;
    border-color: #fb7185 #facc15 #4ade80 #38bdf8;
    opacity: 0.46;
    filter: blur(0.32cqw);
    box-shadow: 0 0 1.6cqw rgba(192, 132, 252, 0.34);
}

.dragon-composite[data-element="rainbow"] .aura-cloud-one {
    background: radial-gradient(circle, rgba(244, 114, 182, 0.64), transparent 70%);
}

.dragon-composite[data-element="rainbow"] .aura-cloud-two {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.62), transparent 70%);
}

.dragon-composite[data-element="rainbow"] .effect-orb,
.dragon-composite[data-element="rainbow"] .element-mark {
    width: 4.4%;
    height: 4.4%;
    border-radius: 0;
    background: conic-gradient(from 45deg, #fb7185, #facc15, #4ade80, #38bdf8, #a78bfa, #fb7185);
    clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%);
    filter: drop-shadow(0 0 0.75cqw rgba(255, 255, 255, 0.48));
}

.dragon-composite[data-element="rainbow"] .effect-orb-one { background: linear-gradient(135deg, #fb7185, #facc15); }
.dragon-composite[data-element="rainbow"] .effect-orb-two { background: linear-gradient(135deg, #4ade80, #38bdf8); }
.dragon-composite[data-element="rainbow"] .effect-orb-three { background: linear-gradient(135deg, #a78bfa, #f472b6); }

.dragon-composite[data-element="colossal"] .aura-ring {
    top: 69%;
    left: 13%;
    width: 74%;
    height: 18%;
    border: 1.2cqw solid rgba(249, 115, 22, 0.72);
    border-top-color: rgba(253, 230, 138, 0.88);
    opacity: 0.42;
    filter: blur(0.55cqw);
    animation: colossal-shockwave 2.8s ease-out infinite;
}

.dragon-composite[data-element="colossal"] .aura-cloud {
    top: auto;
    bottom: 9%;
    width: 30%;
    height: 11%;
    aspect-ratio: auto;
    border-radius: 50%;
    opacity: 0.34;
    background: radial-gradient(ellipse, rgba(251, 191, 36, 0.62), rgba(124, 45, 18, 0.4) 42%, transparent 72%);
    filter: blur(1.4cqw);
}

.dragon-composite[data-element="colossal"] .aura-cloud-one { left: 8%; }
.dragon-composite[data-element="colossal"] .aura-cloud-two { right: 7%; }

.dragon-composite[data-element="colossal"] .effect-orb,
.dragon-composite[data-element="colossal"] .element-mark {
    width: 5.6%;
    height: 5.2%;
    border-radius: 0;
    background: linear-gradient(145deg, #fde68a 0 12%, #b45309 30%, #7c2d12 70%, #431407 100%);
    clip-path: polygon(18% 8%, 74% 0, 100% 35%, 83% 92%, 29% 100%, 0 61%);
    filter: drop-shadow(0 0.45cqw 0.22cqw rgba(67, 20, 7, 0.72));
    animation: colossal-heave 2.8s ease-in-out infinite;
}

.dragon-composite[data-element="colossal"] .element-mark-two {
    width: 6.8%;
    height: 9.5%;
    background: linear-gradient(#fde68a, #f97316 45%, #7c2d12);
    clip-path: polygon(46% 0, 75% 0, 58% 36%, 88% 36%, 40% 100%, 48% 55%, 14% 55%);
}
@keyframes aura-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.96); }
    50% { opacity: 0.38; transform: scale(1.02); }
}

@keyframes magic-float {
    0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.5; }
    50% { transform: translateY(-1.4cqw) scale(1.12); opacity: 0.95; }
}

@keyframes lightning-flash {
    0%, 7%, 12%, 100% { opacity: 0.18; }
    8%, 11% { opacity: 1; }
}

@keyframes element-drift {
    0%, 100% {
        opacity: 0.52;
        transform: translateY(0) rotate(var(--mark-rotation)) scale(var(--mark-scale));
    }
    50% {
        opacity: 0.96;
        transform: translateY(-0.9cqw) rotate(var(--mark-rotation)) scale(var(--mark-scale));
    }
}

@keyframes galaxy-orbit {
    0% { opacity: 0.3; transform: rotate(0deg) scale(0.98); }
    50% { opacity: 0.5; transform: rotate(180deg) scale(1.02); }
    100% { opacity: 0.3; transform: rotate(360deg) scale(0.98); }
}

@keyframes metal-pulse {
    0%, 100% { opacity: 0.38; }
    50% { opacity: 0.78; }
}

@keyframes colossal-shockwave {
    0% { opacity: 0.48; transform: scale(0.78); }
    76%, 100% { opacity: 0; transform: scale(1.08); }
}

@keyframes colossal-heave {
    0%, 100% {
        opacity: 0.58;
        transform: translateY(0) rotate(var(--mark-rotation)) scale(var(--mark-scale));
    }
    45% {
        opacity: 0.92;
        transform: translateY(-0.45cqw) rotate(var(--mark-rotation)) scale(var(--mark-scale));
    }
    55% {
        transform: translateY(0.2cqw) rotate(var(--mark-rotation)) scale(var(--mark-scale));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dragon-composite,
    .dragon-composite *,
    .dragon-composite::before,
    .dragon-composite::after,
    .dragon-composite *::before,
    .dragon-composite *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}