/* DiviniGen 4.4.0 — Leonardo Dice visual alignment
 * Main-page living die + protected scroll dissolve.
 * Loading page preserves the proven animation and swaps only the visual asset.
 * Result page gains the matching approved die emblem.
 */

.dg-dice-reading-v42 .dg-dice-shell {
    padding-top: clamp(26px, 4vw, 52px);
}

.dg-dice-hero-v440 {
    position: relative;
    width: clamp(250px, 28vw, 348px);
    height: clamp(210px, 23vw, 288px);
    margin: -4px auto 18px;
    transform: translate3d(0, var(--dg-dice-hero-shift-v440, 0px), 0);
    opacity: var(--dg-dice-hero-opacity-v440, 1);
    will-change: transform, opacity;
    pointer-events: none;
}

.dg-dice-hero-image-v440,
.dg-dice-hero-particles-v440 {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.dg-dice-hero-image-v440 {
    z-index: 2;
    width: 168%;
    height: auto;
    max-width: none;
    transform:
        translate(-50%, -50%)
        rotate(var(--dg-dice-hero-tilt-v440, 0deg))
        scale(var(--dg-dice-hero-breath-v440, 1));
    transform-origin: 50% 52%;
    opacity: var(--dg-dice-hero-metal-opacity-v440, 1);
    filter:
        brightness(.98)
        contrast(1.08)
        drop-shadow(0 0 24px rgba(195, 220, 231, .12));
    will-change: transform, opacity;
}

.dg-dice-hero-particles-v440 {
    z-index: 3;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 13px rgba(214, 232, 240, .11));
    opacity: var(--dg-dice-hero-particle-opacity-v440, .2);
    will-change: opacity;
}

.dg-dice-hero-shadow-v440 {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 7%;
    width: 44%;
    height: 8%;
    transform: translateX(-50%) scale(var(--dg-dice-hero-shadow-scale-v440, 1));
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,.34), rgba(0,0,0,0) 72%);
    filter: blur(7px);
    opacity: calc(var(--dg-dice-hero-metal-opacity-v440, 1) * .72);
}

/* Loading: preserve all proven 4.2 motion/timing; compensate only for the wider Leonardo source canvas. */
.dg-dice-loading .dg-oracle-die-stage {
    overflow: visible;
}

.dg-dice-loading .dg-oracle-die-image {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 154%;
    height: auto;
    max-width: none;
    object-fit: contain;
    transform:
        translate(-50%, -50%)
        rotateZ(var(--dg-loader-tilt, 0deg))
        scale(var(--dg-loader-breath, 1));
    transform-origin: 50% 52%;
}

.dg-dice-loading .dg-oracle-die-particles {
    inset: 8%;
    width: 84%;
    height: 84%;
}

/* Result-page emblem: matching visual identity without changing result logic. */
.dg-dice-result-emblem-v440 {
    position: relative;
    width: clamp(104px, 11vw, 136px);
    height: clamp(86px, 9.2vw, 112px);
    margin: -4px auto 10px;
    overflow: visible;
    pointer-events: none;
}

.dg-dice-result-emblem-v440 img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 176%;
    height: auto;
    max-width: none;
    transform: translate(-50%, -50%);
    filter:
        brightness(.98)
        contrast(1.08)
        drop-shadow(0 0 14px rgba(201, 224, 234, .11));
    animation: dg-v440-result-die-breathe 5.6s ease-in-out infinite;
}

@keyframes dg-v440-result-die-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .94; }
    50% { transform: translate(-50%, -51.5%) scale(1.018); opacity: 1; }
}

@media (max-width: 720px) {
    .dg-dice-reading-v42 .dg-dice-shell {
        padding-top: 24px;
    }

    .dg-dice-hero-v440 {
        width: min(68vw, 288px);
        height: min(56vw, 236px);
        margin-bottom: 12px;
    }

    .dg-dice-loading .dg-oracle-die-image {
        width: 160%;
    }

    .dg-dice-result-emblem-v440 {
        width: 106px;
        height: 88px;
        margin-bottom: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-dice-hero-image-v440,
    .dg-dice-result-emblem-v440 img {
        animation: none !important;
    }
}