/* Diamond Fill Animation Styles v7.0 - Major Vortex Visual Upgrade */

.diamond-fill-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    --pile-glow: 0;
}

/* Enhanced pile glow with color variation */
.diamond-fill-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background:
        radial-gradient(ellipse 60% 40% at 30% 100%,
            rgba(100, 200, 255, calc(var(--pile-glow) * 0.08)) 0%,
            transparent 50%),
        radial-gradient(ellipse 60% 40% at 70% 100%,
            rgba(150, 255, 255, calc(var(--pile-glow) * 0.08)) 0%,
            transparent 50%),
        radial-gradient(ellipse 90% 50% at 50% 100%,
            rgba(0, 191, 255, calc(var(--pile-glow) * 0.15)) 0%,
            transparent 60%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Diamond Scale Indicator */
.diamond-scale {
    position: absolute;
    left: 16px;
    bottom: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    font-family: 'Courier New', monospace;
}

.scale-display {
    background: linear-gradient(135deg,
        rgba(0, 20, 40, 0.95) 0%,
        rgba(0, 40, 60, 0.9) 100%
    );
    border: 2px solid rgba(0, 191, 255, 0.6);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 80px;
    text-align: center;
    box-shadow:
        0 0 20px rgba(0, 191, 255, 0.3),
        inset 0 0 15px rgba(0, 191, 255, 0.1);
}

.scale-value {
    font-size: 28px;
    font-weight: 700;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    line-height: 1;
}

.scale-unit {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 191, 255, 0.8);
    margin-left: 2px;
}

.scale-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(0, 191, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 6px;
}

.scale-bar {
    width: 6px;
    height: 120px;
    background: rgba(0, 40, 60, 0.8);
    border-radius: 3px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 191, 255, 0.4);
}

.scale-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(to top,
        rgba(0, 255, 255, 1) 0%,
        rgba(0, 191, 255, 0.8) 50%,
        rgba(100, 200, 255, 0.6) 100%
    );
    border-radius: 2px;
    transition: height 0.3s ease-out;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

.scale-marks {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
    margin-left: 4px;
}

.scale-mark {
    font-size: 8px;
    color: rgba(0, 191, 255, 0.5);
    line-height: 1;
}

/* Scale at max - pulsing */
.diamond-scale.at-max .scale-display {
    animation: scaleMaxPulse 0.5s ease-in-out infinite;
    border-color: rgba(0, 255, 255, 1);
}

.diamond-scale.at-max .scale-value {
    color: #fff;
}

@keyframes scaleMaxPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 191, 255, 0.3), inset 0 0 15px rgba(0, 191, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 35px rgba(0, 255, 255, 0.6), inset 0 0 20px rgba(0, 255, 255, 0.2);
    }
}

/* Draining state */
.diamond-scale.draining .scale-value {
    animation: scaleValueDrain 0.3s ease-in-out infinite;
}

@keyframes scaleValueDrain {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   FALLING DIAMOND - GPU Optimized
   ============================================ */

.falling-diamond {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.falling-diamond img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.85;
    /* Subtle chromatic refraction effect */
    filter:
        drop-shadow(0 3px 8px rgba(0, 191, 255, 0.3))
        drop-shadow(1px 0 0 rgba(255, 150, 150, 0.1))
        drop-shadow(-1px 0 0 rgba(150, 150, 255, 0.1));
}

/* Settled diamond */
.falling-diamond.settled {
    will-change: auto;
}

.falling-diamond.settled img {
    filter:
        drop-shadow(0 2px 6px rgba(0, 191, 255, 0.35))
        drop-shadow(1px 0 0 rgba(255, 150, 150, 0.08))
        drop-shadow(-1px 0 0 rgba(150, 150, 255, 0.08));
}

/* Frozen diamond - completely static, max performance */
.falling-diamond.frozen {
    will-change: auto;
    contain: strict;
}

.falling-diamond.frozen img {
    filter: drop-shadow(0 2px 4px rgba(0, 191, 255, 0.25));
}

/* ============================================
   SPARKLE & PARTICLE EFFECTS
   ============================================ */

.diamond-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
}

.diamond-sparkle.active {
    animation: diamondSparkle 0.35s ease-out forwards;
}

@keyframes diamondSparkle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
        box-shadow:
            0 0 15px rgba(255, 255, 255, 0.9),
            0 0 30px rgba(0, 255, 255, 0.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
        box-shadow:
            0 0 25px transparent,
            0 0 50px transparent;
    }
}

/* Sparkle Particles - pooled and animated */
.sparkle-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
        #fff 0%,
        rgba(0, 255, 255, 0.9) 40%,
        rgba(0, 191, 255, 0.5) 70%,
        transparent 100%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.8);
}

.sparkle-particle.animating {
    animation: sparkleFloat 0.5s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(0.3);
    }
}

/* ============================================
   DRAINING ANIMATION
   ============================================ */

.falling-diamond.draining {
    transition: none;
    will-change: transform, opacity;
}

.falling-diamond.drain-exit {
    animation: drainExit 0.35s ease-in forwards;
    pointer-events: none;
}

@keyframes drainExit {
    0% {
        opacity: 1;
        filter: drop-shadow(0 2px 6px rgba(0, 191, 255, 0.35));
    }
    50% {
        opacity: 0.7;
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.9));
    }
    100% {
        opacity: 0;
        filter: drop-shadow(0 0 25px rgba(0, 255, 255, 1));
    }
}

/* Container draining state with CSS custom properties */
.diamond-fill-container.draining {
    --vortex-speed: 1.5s;
    --vortex-intensity: 1;
    --vortex-scale: 1;
    animation: containerPulse 0.8s ease-in-out infinite;
}

@keyframes containerPulse {
    0%, 100% { background: transparent; }
    50% { background: radial-gradient(ellipse at bottom center, rgba(0, 191, 255, 0.06) 0%, transparent 50%); }
}

/* ============================================
   VORTEX SYSTEM v7.0 - MAJOR VISUAL UPGRADE
   3D Depth, Energy Tendrils, Event Horizon
   ============================================ */

/* Vortex container for layered elements */
.vortex-system {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    pointer-events: none;
    z-index: 10;
    perspective: 400px;
    display: none;
}

.diamond-fill-container.draining .vortex-system {
    display: block;
}

/* ---- LAYER 1: Outer Glow Field ---- */
.vortex-glow-field {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 100px;
    background: radial-gradient(ellipse 100% 80% at 50% 80%,
        rgba(0, 150, 255, 0.15) 0%,
        rgba(0, 100, 200, 0.08) 40%,
        transparent 70%
    );
    filter: blur(20px);
    animation: glowFieldPulse 2s ease-in-out infinite;
}

@keyframes glowFieldPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* ---- LAYER 2: Event Horizon Ring ---- */
.vortex-event-horizon {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotateX(75deg);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            transparent 30%,
            rgba(0, 255, 255, 0.4) 45%,
            rgba(0, 200, 255, 0.6) 48%,
            rgba(100, 220, 255, 0.8) 50%,
            rgba(0, 200, 255, 0.6) 52%,
            rgba(0, 255, 255, 0.4) 55%,
            transparent 70%
        );
    box-shadow:
        0 0 40px rgba(0, 255, 255, 0.5),
        0 0 80px rgba(0, 200, 255, 0.3),
        inset 0 0 60px rgba(0, 0, 0, 0.8);
    animation: eventHorizonPulse 1.5s ease-in-out infinite;
}

@keyframes eventHorizonPulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), 0 0 80px rgba(0, 200, 255, 0.3), inset 0 0 60px rgba(0, 0, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 60px rgba(0, 255, 255, 0.7), 0 0 100px rgba(0, 200, 255, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.8);
    }
}

/* ---- LAYER 3: Outer Spiral Arms ---- */
.vortex-outer-spiral {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background:
        conic-gradient(from var(--spiral-angle, 0deg) at 50% 50%,
            transparent 0deg,
            rgba(0, 220, 255, 0.35) 15deg,
            rgba(100, 255, 255, 0.5) 30deg,
            transparent 45deg,
            transparent 60deg,
            rgba(0, 200, 255, 0.35) 75deg,
            rgba(150, 255, 255, 0.5) 90deg,
            transparent 105deg,
            transparent 120deg,
            rgba(0, 220, 255, 0.35) 135deg,
            rgba(100, 255, 255, 0.5) 150deg,
            transparent 165deg,
            transparent 180deg,
            rgba(0, 200, 255, 0.35) 195deg,
            rgba(150, 255, 255, 0.5) 210deg,
            transparent 225deg,
            transparent 240deg,
            rgba(0, 220, 255, 0.35) 255deg,
            rgba(100, 255, 255, 0.5) 270deg,
            transparent 285deg,
            transparent 300deg,
            rgba(0, 200, 255, 0.35) 315deg,
            rgba(150, 255, 255, 0.5) 330deg,
            transparent 345deg
        ),
        radial-gradient(circle,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 20, 50, 0.9) 25%,
            rgba(0, 50, 100, 0.5) 50%,
            transparent 75%
        );
    animation: outerSpiralSpin var(--vortex-speed, 1.5s) linear infinite;
}

@keyframes outerSpiralSpin {
    0% { transform: translateX(-50%) rotateX(70deg) rotate(0deg); }
    100% { transform: translateX(-50%) rotateX(70deg) rotate(360deg); }
}

/* ---- LAYER 4: Middle Ring (Counter-rotate) ---- */
.vortex-middle-ring {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background:
        conic-gradient(from 180deg at 50% 50%,
            transparent 0deg,
            rgba(150, 255, 255, 0.6) 20deg,
            rgba(255, 255, 255, 0.4) 40deg,
            transparent 60deg,
            transparent 120deg,
            rgba(150, 255, 255, 0.6) 140deg,
            rgba(255, 255, 255, 0.4) 160deg,
            transparent 180deg,
            transparent 240deg,
            rgba(150, 255, 255, 0.6) 260deg,
            rgba(255, 255, 255, 0.4) 280deg,
            transparent 300deg
        ),
        radial-gradient(circle,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 40, 80, 0.6) 40%,
            transparent 70%
        );
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.4),
        inset 0 0 40px rgba(0, 0, 0, 0.7);
    animation: middleRingSpin calc(var(--vortex-speed, 1.5s) * 0.6) linear infinite reverse;
}

@keyframes middleRingSpin {
    0% { transform: translateX(-50%) rotateX(70deg) rotate(0deg); }
    100% { transform: translateX(-50%) rotateX(70deg) rotate(360deg); }
}

/* ---- LAYER 5: Inner Core (Bright Center) ---- */
.vortex-inner-core {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(200, 255, 255, 0.8) 20%,
            rgba(0, 255, 255, 0.6) 40%,
            rgba(0, 150, 200, 0.4) 60%,
            transparent 80%
        );
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(0, 255, 255, 0.6),
        0 0 60px rgba(0, 200, 255, 0.4);
    animation:
        innerCoreSpin calc(var(--vortex-speed, 1.5s) * 0.4) linear infinite,
        innerCorePulse 0.8s ease-in-out infinite;
}

@keyframes innerCoreSpin {
    0% { transform: translateX(-50%) rotateX(70deg) rotate(0deg); }
    100% { transform: translateX(-50%) rotateX(70deg) rotate(360deg); }
}

@keyframes innerCorePulse {
    0%, 100% {
        opacity: 0.8;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 200, 255, 0.4);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(0, 255, 255, 0.8), 0 0 80px rgba(0, 200, 255, 0.6);
    }
}

/* ---- LAYER 6: Singularity (Black Hole Center) ---- */
.vortex-singularity {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 50%,
        rgba(0, 20, 40, 0.8) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.9),
        0 0 5px rgba(0, 255, 255, 0.3);
}

/* ---- ENERGY TENDRILS ---- */
.vortex-tendril {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 3px;
    height: 80px;
    background: linear-gradient(to top,
        rgba(0, 255, 255, 0.8) 0%,
        rgba(100, 255, 255, 0.5) 30%,
        rgba(150, 255, 255, 0.3) 60%,
        transparent 100%
    );
    transform-origin: bottom center;
    border-radius: 2px;
    filter: blur(1px);
    opacity: 0;
}

.vortex-tendril.active {
    animation: tendrilReach 0.8s ease-out forwards;
}

.vortex-tendril:nth-child(1) { --tendril-angle: -35deg; --tendril-curve: 15deg; }
.vortex-tendril:nth-child(2) { --tendril-angle: -15deg; --tendril-curve: -10deg; }
.vortex-tendril:nth-child(3) { --tendril-angle: 15deg; --tendril-curve: 10deg; }
.vortex-tendril:nth-child(4) { --tendril-angle: 35deg; --tendril-curve: -15deg; }

@keyframes tendrilReach {
    0% {
        opacity: 0;
        height: 20px;
        transform: translateX(-50%) rotate(var(--tendril-angle, 0deg)) scaleY(0.3);
    }
    30% {
        opacity: 0.9;
        height: 100px;
        transform: translateX(-50%) rotate(calc(var(--tendril-angle, 0deg) + var(--tendril-curve, 0deg))) scaleY(1);
    }
    100% {
        opacity: 0;
        height: 60px;
        transform: translateX(-50%) rotate(var(--tendril-angle, 0deg)) scaleY(0.5);
    }
}

/* ---- ELECTRIC ARCS ---- */
.vortex-arc {
    position: absolute;
    bottom: 25px;
    left: 50%;
    width: 100px;
    height: 40px;
    pointer-events: none;
    opacity: 0;
}

.vortex-arc svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vortex-arc path {
    fill: none;
    stroke: url(#arcGradient);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.8));
}

.vortex-arc.active {
    animation: arcFlash 0.15s ease-out forwards;
}

@keyframes arcFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- DEPTH RINGS (3D Tunnel Effect) ---- */
.vortex-depth-ring {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    animation: depthRingPulse 2s ease-in-out infinite;
}

.vortex-depth-ring:nth-child(1) {
    bottom: -2px;
    width: 220px;
    height: 220px;
    border-color: rgba(0, 150, 200, 0.2);
    animation-delay: 0s;
}

.vortex-depth-ring:nth-child(2) {
    bottom: 2px;
    width: 180px;
    height: 180px;
    border-color: rgba(0, 180, 220, 0.25);
    animation-delay: 0.15s;
}

.vortex-depth-ring:nth-child(3) {
    bottom: 5px;
    width: 140px;
    height: 140px;
    border-color: rgba(0, 200, 240, 0.3);
    animation-delay: 0.3s;
}

.vortex-depth-ring:nth-child(4) {
    bottom: 8px;
    width: 100px;
    height: 100px;
    border-color: rgba(0, 220, 255, 0.35);
    animation-delay: 0.45s;
}

@keyframes depthRingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ---- SUCTION PARTICLES ---- */
.vortex-suction-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(0, 255, 255, 0.7) 50%,
        transparent 100%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.vortex-suction-particle.active {
    animation: suctionSpiral 0.7s ease-in forwards;
}

@keyframes suctionSpiral {
    0% {
        opacity: 1;
        transform: translate(var(--start-x, 0), var(--start-y, -50px)) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, 20px) scale(0.2) rotate(720deg);
    }
}

/* ---- CONSUMING STATE ENHANCEMENTS ---- */
.diamond-fill-container.draining.consuming .vortex-outer-spiral {
    animation-duration: calc(var(--vortex-speed, 1.5s) * 0.6);
}

.diamond-fill-container.draining.consuming .vortex-middle-ring {
    animation-duration: calc(var(--vortex-speed, 1.5s) * 0.4);
}

.diamond-fill-container.draining.consuming .vortex-inner-core {
    box-shadow:
        0 0 30px rgba(255, 255, 255, 1),
        0 0 60px rgba(0, 255, 255, 0.9),
        0 0 100px rgba(0, 200, 255, 0.7);
}

.diamond-fill-container.draining.consuming .vortex-event-horizon {
    box-shadow:
        0 0 60px rgba(0, 255, 255, 0.8),
        0 0 100px rgba(0, 200, 255, 0.6),
        0 0 140px rgba(0, 150, 200, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.8);
}

/* Legacy pseudo-elements - hide when new system active */
.diamond-fill-container.draining::after,
.diamond-fill-container.draining::before {
    display: none;
}

/* Exit flash particle effect */
.vortex-flash {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(0, 255, 255, 0.6) 30%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

.vortex-flash.active {
    animation: vortexFlash 0.15s ease-out forwards;
}

@keyframes vortexFlash {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(2);
    }
}

/* Rim particles */
.vortex-rim-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        #fff 0%,
        rgba(0, 255, 255, 0.8) 50%,
        transparent 100%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
}

.vortex-rim-particle.animating {
    animation: rimParticleSpiral 0.6s ease-in forwards;
}

@keyframes rimParticleSpiral {
    0% {
        opacity: 1;
        transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 30px) scale(0.3);
    }
}

/* Scale bar pulse during drain */
.diamond-fill-container.draining .scale-fill {
    animation: scaleFillPulse 0.4s ease-in-out infinite;
}

@keyframes scaleFillPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 255, 1); }
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {
    .diamond-scale { left: 8px; bottom: 12%; }
    .scale-display { padding: 8px 12px; min-width: 65px; }
    .scale-value { font-size: 22px; }
    .scale-unit { font-size: 12px; }
    .scale-bar { height: 90px; width: 5px; }
    .scale-label { font-size: 8px; }

    .falling-diamond img {
        filter: drop-shadow(0 2px 5px rgba(0, 191, 255, 0.25));
    }

    /* Scaled vortex system for tablet */
    .vortex-system {
        width: 240px;
        height: 120px;
        transform: translateX(-50%) scale(0.8);
    }

    .vortex-flash {
        width: 30px;
        height: 30px;
    }

    .vortex-tendril {
        height: 60px;
    }
}

@media (max-width: 480px) {
    .diamond-scale { left: 6px; }
    .scale-display { padding: 6px 10px; min-width: 55px; }
    .scale-value { font-size: 18px; }
    .scale-unit { font-size: 10px; }
    .scale-bar { height: 70px; }

    /* Scaled vortex system for mobile */
    .vortex-system {
        width: 200px;
        height: 100px;
        transform: translateX(-50%) scale(0.65);
    }

    .vortex-flash {
        width: 25px;
        height: 25px;
    }

    .vortex-tendril {
        height: 50px;
    }

    .vortex-depth-ring {
        display: none;
    }

    .vortex-suction-particle {
        width: 4px;
        height: 4px;
    }
}

/* ============================================
   REDUCED MOTION & PERFORMANCE MODE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .diamond-fill-container.draining,
    .diamond-scale.at-max .scale-display,
    .diamond-scale.draining .scale-value,
    .vortex-outer-spiral,
    .vortex-middle-ring,
    .vortex-inner-core,
    .vortex-event-horizon,
    .vortex-glow-field,
    .vortex-depth-ring,
    .vortex-flash,
    .vortex-tendril,
    .vortex-suction-particle {
        animation: none;
    }

    .falling-diamond.drain-exit {
        animation: simpleFade 0.2s ease-out forwards;
    }

    @keyframes simpleFade {
        to { opacity: 0; }
    }

    .vortex-flash,
    .vortex-tendril,
    .vortex-arc,
    .vortex-suction-particle,
    .vortex-depth-ring {
        display: none;
    }
}

/* Performance mode - minimal effects */
.performance-mode .falling-diamond img {
    filter: drop-shadow(0 2px 4px rgba(0, 191, 255, 0.2));
}

.performance-mode .diamond-sparkle,
.performance-mode .sparkle-particle {
    display: none;
}

.performance-mode .diamond-fill-container::before {
    display: none;
}

/* Performance mode vortex - simplified */
.performance-mode .vortex-glow-field,
.performance-mode .vortex-depth-ring,
.performance-mode .vortex-tendril,
.performance-mode .vortex-arc,
.performance-mode .vortex-suction-particle,
.performance-mode .vortex-flash {
    display: none;
}

.performance-mode .vortex-outer-spiral,
.performance-mode .vortex-middle-ring {
    animation: none;
}

.performance-mode .vortex-event-horizon {
    animation: none;
    box-shadow: 0 0 30px rgba(0, 200, 255, 0.4);
}

.performance-mode .vortex-inner-core {
    animation: none;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}