/* ============================================
   MINER BUTTON - Maquina de Mineracao v2
   ============================================ */

.miner-btn {
    position: fixed;
    bottom: 100px;
    left: 24px;
    z-index: 9998;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.miner-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.miner-btn:hover {
    transform: translateY(-4px) scale(1.05);
    filter: drop-shadow(0 8px 20px rgba(212, 175, 55, 0.3));
}

.miner-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Label */
.miner-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #D4AF37;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
    font-family: 'Manrope', sans-serif;
    background: rgba(10, 10, 10, 0.85);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.miner-btn:hover .miner-label {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}

/* ============================================
   CENA
   ============================================ */
.miner-scene {
    width: 90px;
    height: 70px;
    position: relative;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(20, 15, 8, 0.3) 50%, 
        rgba(40, 28, 12, 0.5) 100%);
    border-radius: 10px;
    overflow: visible;
}

/* ============================================
   TRILHO / CHAO
   ============================================ */
.miner-track {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.miner-track::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, 
        #666 0px, #666 3px, transparent 3px, transparent 7px);
}

.miner-track::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(180deg, 
        rgba(60, 40, 20, 0.8) 0%, 
        rgba(40, 25, 10, 0.4) 100%);
    border-radius: 0 0 4px 4px;
}

/* ============================================
   MAQUINA PRINCIPAL
   ============================================ */
.miner-machine {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 48px;
    height: 38px;
    animation: minerIdle 4s ease-in-out infinite;
}

@keyframes minerIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

/* Cabine do operador */
.miner-cabin {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
    border-radius: 3px 3px 0 0;
    border: 1px solid #555;
    border-bottom: none;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.miner-window {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #87CEEB 0%, #2E86C1 50%, #1A5276 100%);
    border-radius: 2px;
    border: 1px solid #5DADE2;
    animation: minerWindowGlow 3s ease infinite;
    box-shadow: 0 0 6px rgba(93, 173, 226, 0.4);
}

.miner-window::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

@keyframes minerWindowGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(93, 173, 226, 0.3); }
    50% { box-shadow: 0 0 10px rgba(93, 173, 226, 0.6); }
}

/* Chamine / Exhaust */
.miner-cabin::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 2px;
    width: 4px;
    height: 8px;
    background: linear-gradient(180deg, #555 0%, #333 100%);
    border-radius: 2px 2px 0 0;
    border: 1px solid #666;
    border-bottom: none;
}

/* Fumaca */
.miner-smoke {
    position: absolute;
    top: -14px;
    right: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(150, 150, 150, 0.6);
    animation: smokeRise 2s ease-out infinite;
    pointer-events: none;
}

.miner-smoke::before,
.miner-smoke::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(150, 150, 150, 0.4);
}

.miner-smoke::before {
    width: 3px;
    height: 3px;
    top: -4px;
    left: 2px;
    animation: smokeRise 2s ease-out 0.3s infinite;
}

.miner-smoke::after {
    width: 2px;
    height: 2px;
    top: -2px;
    left: -1px;
    animation: smokeRise 2s ease-out 0.6s infinite;
}

@keyframes smokeRise {
    0% { opacity: 0.6; transform: translateY(0) scale(1); }
    50% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-12px) scale(2); }
}

/* Corpo principal (motor) */
.miner-body {
    position: absolute;
    bottom: 12px;
    left: 16px;
    width: 26px;
    height: 14px;
    background: linear-gradient(180deg, #D4AF37 0%, #B8860B 60%, #8B6914 100%);
    border-radius: 3px;
    border: 1px solid #9C6F06;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Detalhes do motor */
.miner-body::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 2px;
    background: repeating-linear-gradient(90deg, 
        rgba(255, 255, 255, 0.15) 0px, 
        rgba(255, 255, 255, 0.15) 2px, 
        transparent 2px, 
        transparent 4px);
}

.miner-body::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 4px;
    background: #8B6914;
    border-radius: 2px;
    border: 1px solid #6B4F0A;
}

/* Farol */
.miner-light {
    position: absolute;
    bottom: 22px;
    left: 18px;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    animation: minerLightBlink 1.5s ease infinite;
}

@keyframes minerLightBlink {
    0%, 40%, 100% { opacity: 0.4; box-shadow: none; }
    50%, 90% { opacity: 1; box-shadow: 0 0 8px #FFD700, 0 0 16px rgba(255, 215, 0, 0.5); }
}

/* ============================================
   BRACO MECANICO
   ============================================ */
.miner-arm {
    position: absolute;
    bottom: 22px;
    left: 38px;
    transform-origin: 0% 100%;
    animation: minerArmSweep 4s ease-in-out infinite;
}

@keyframes minerArmSweep {
    0%, 100% { transform: rotate(-25deg); }
    35% { transform: rotate(20deg); }
    50% { transform: rotate(20deg); }
    65% { transform: rotate(15deg); }
}

.miner-arm-segment {
    width: 20px;
    height: 4px;
    background: linear-gradient(180deg, #777 0%, #555 100%);
    border-radius: 2px;
    transform-origin: 0% 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #888;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.miner-arm-joint {
    position: absolute;
    bottom: -3px;
    left: 17px;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, #888 30%, #555 100%);
    border-radius: 50%;
    border: 1px solid #999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.miner-arm-lower {
    transform: rotate(35deg);
    bottom: 1px;
    left: 20px;
    width: 16px;
    height: 3px;
    animation: minerBucketDip 4s ease-in-out infinite;
}

@keyframes minerBucketDip {
    0%, 100% { transform: rotate(35deg); }
    35% { transform: rotate(-15deg); }
    50% { transform: rotate(-15deg); }
    65% { transform: rotate(-5deg); }
}

/* Balde / Garra */
.miner-bucket {
    position: absolute;
    bottom: -4px;
    left: 32px;
    width: 10px;
    height: 8px;
    background: linear-gradient(180deg, #888 0%, #555 100%);
    border-radius: 0 0 3px 3px;
    border: 1px solid #999;
    border-top: 2px solid #777;
    animation: minerBucketFill 4s ease-in-out infinite;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dentes do balde */
.miner-bucket::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1px;
    right: 1px;
    height: 2px;
    background: repeating-linear-gradient(90deg, 
        #999 0px, #999 1px, transparent 1px, transparent 3px);
}

@keyframes minerBucketFill {
    0%, 30% { 
        background: linear-gradient(180deg, #888 0%, #555 100%); 
    }
    40%, 55% { 
        background: linear-gradient(180deg, #D4AF37 30%, #B8860B 100%); 
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
    }
    65%, 100% { 
        background: linear-gradient(180deg, #888 0%, #555 100%); 
    }
}

/* ============================================
   RODAS / ESTEIRAS
   ============================================ */
.miner-wheel {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #555 20%, #333 60%, #222 100%);
    border-radius: 50%;
    border: 1px solid #666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.miner-wheel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #888 30%, #555 100%);
    border-radius: 50%;
    border: 1px solid #999;
}

.miner-wheel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 2px;
    background: #AAA;
    border-radius: 50%;
}

.miner-wheel-front {
    left: 4px;
    animation: minerWheelRoll 1.5s linear infinite;
}

.miner-wheel-back {
    left: 32px;
    animation: minerWheelRoll 1.5s linear infinite;
}

@keyframes minerWheelRoll {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   MINERIO NO CHAO
   ============================================ */
.miner-ore-ground {
    position: absolute;
    bottom: 10px;
    left: 52px;
    width: 32px;
    height: 12px;
}

.miner-ore {
    position: absolute;
    animation: minerOrePulse 3s ease-in-out infinite;
}

.miner-ore::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: inherit;
    filter: brightness(1.2);
}

.o1 { 
    width: 5px; height: 4px; 
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 50%, #B8860B 100%); 
    bottom: 0; left: 0; 
    border-radius: 1px 2px 1px 2px;
    animation-delay: 0s; 
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
}

.o2 { 
    width: 4px; height: 4px; 
    background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%); 
    bottom: 2px; left: 8px; 
    border-radius: 2px;
    animation-delay: 0.3s; 
    box-shadow: 0 0 3px rgba(212, 175, 55, 0.3);
}

.o3 { 
    width: 6px; height: 5px; 
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 50%, #9C6F06 100%); 
    bottom: 0; left: 14px; 
    border-radius: 2px 1px 2px 1px;
    animation-delay: 0.6s; 
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.o4 { 
    width: 3px; height: 3px; 
    background: linear-gradient(135deg, #B8860B 0%, #8B6914 100%); 
    bottom: 3px; left: 22px; 
    border-radius: 50%;
    animation-delay: 0.9s; 
}

.o5 { 
    width: 5px; height: 4px; 
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%); 
    bottom: 0; left: 26px; 
    border-radius: 1px 2px 2px 1px;
    animation-delay: 1.2s; 
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
}

@keyframes minerOrePulse {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-1px) scale(1.05); filter: brightness(1.2); }
}

/* ============================================
   PARTICULAS SENDO COLETADAS
   ============================================ */
.miner-ore-collected {
    position: absolute;
    bottom: 18px;
    left: 42px;
    width: 24px;
    height: 50px;
    pointer-events: none;
}

.ore-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}

.p1 { 
    width: 4px; height: 4px; 
    background: radial-gradient(circle, #FFD700, #D4AF37); 
    left: 0; 
    animation: oreFloat 4s ease-in-out infinite; 
    animation-delay: 0.4s; 
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.p2 { 
    width: 3px; height: 3px; 
    background: radial-gradient(circle, #D4AF37, #B8860B); 
    left: 8px; 
    animation: oreFloat 4s ease-in-out infinite; 
    animation-delay: 0.7s; 
    box-shadow: 0 0 3px rgba(212, 175, 55, 0.5);
}

.p3 { 
    width: 4px; height: 4px; 
    background: radial-gradient(circle, #FFD700, #D4AF37); 
    left: 16px; 
    animation: oreFloat 4s ease-in-out infinite; 
    animation-delay: 1.0s; 
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.p4 { 
    width: 2px; height: 2px; 
    background: #B8860B; 
    left: 4px; 
    animation: oreFloat 4s ease-in-out infinite; 
    animation-delay: 1.3s; 
}

.p5 { 
    width: 3px; height: 3px; 
    background: radial-gradient(circle, #D4AF37, #9C6F06); 
    left: 12px; 
    animation: oreFloat 4s ease-in-out infinite; 
    animation-delay: 1.6s; 
}

@keyframes oreFloat {
    0%, 35% { bottom: 0; opacity: 0; transform: scale(0.5) rotate(0deg); }
    45% { opacity: 1; transform: scale(1) rotate(45deg); }
    70% { bottom: 40px; opacity: 0.8; transform: scale(0.7) rotate(180deg); }
    75%, 100% { bottom: 48px; opacity: 0; transform: scale(0.2) rotate(270deg); }
}

/* ============================================
   BRILHO / SPARK
   ============================================ */
.miner-spark {
    position: absolute;
    bottom: 14px;
    left: 48px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF 0%, #FFD700 50%, transparent 100%);
    opacity: 0;
    animation: minerSpark 4s ease infinite;
    pointer-events: none;
}

@keyframes minerSpark {
    0%, 38% { opacity: 0; transform: scale(0); }
    42% { opacity: 1; transform: scale(1.2); }
    48% { opacity: 0.8; transform: scale(0.8); }
    52% { opacity: 0; transform: scale(0.3); }
}

/* ============================================
   ANIMACAO DE COLETA (CLICK)
   ============================================ */
.miner-btn.mining .miner-machine {
    animation: minerDig 0.8s ease forwards !important;
}

@keyframes minerDig {
    0% { transform: translateY(0); }
    20% { transform: translateY(2px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

.miner-btn.mining .miner-arm {
    animation: minerArmDig 0.8s ease forwards !important;
}

@keyframes minerArmDig {
    0% { transform: rotate(20deg); }
    25% { transform: rotate(35deg); }
    50% { transform: rotate(-20deg); }
    75% { transform: rotate(-25deg); }
    100% { transform: rotate(-25deg); }
}

.miner-btn.mining .miner-bucket {
    animation: bucketDig 0.8s ease forwards !important;
}

@keyframes bucketDig {
    0%, 100% { background: linear-gradient(180deg, #888 0%, #555 100%); }
    40%, 60% { background: linear-gradient(180deg, #FFD700 30%, #D4AF37 100%); box-shadow: 0 2px 12px rgba(255, 215, 0, 0.7); }
}

.miner-btn.mining .ore-particle {
    animation: oreCollectBurst 0.8s ease forwards !important;
}

@keyframes oreCollectBurst {
    0% { bottom: 0; opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
    100% { bottom: 70px; opacity: 0; transform: scale(0.1) rotate(360deg); }
}

.miner-btn.mining .miner-ore {
    animation: oreShrink 0.3s ease forwards !important;
}

@keyframes oreShrink {
    to { opacity: 0; transform: scale(0) rotate(45deg); }
}

.miner-btn.mining .miner-spark {
    animation: sparkBurst 0.8s ease forwards !important;
}

@keyframes sparkBurst {
    0%, 30% { opacity: 0; transform: scale(0); }
    40% { opacity: 1; transform: scale(2); box-shadow: 0 0 20px #FFD700, 0 0 40px rgba(255, 215, 0, 0.6); }
    60% { opacity: 0.5; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* ============================================
   TRILHA DOURADA (SCROLL TO TOP)
   ============================================ */
.miner-trail {
    position: fixed;
    left: 28px;
    bottom: 140px;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.2) 10%,
        #D4AF37 30%, 
        #FFD700 50%,
        #D4AF37 70%,
        rgba(212, 175, 55, 0.2) 90%,
        transparent 100%);
    border-radius: 2px;
    z-index: 9997;
    pointer-events: none;
    opacity: 0;
}

.miner-trail.active {
    animation: trailShoot 1s ease forwards;
}

@keyframes trailShoot {
    0% { height: 0; opacity: 0; bottom: 140px; }
    15% { opacity: 1; }
    85% { opacity: 0.8; }
    100% { height: calc(100vh - 220px); opacity: 0; bottom: calc(100vh - 60px); }
}

/* Particulas na trilha */
.miner-trail.active::before,
.miner-trail.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    animation: trailParticle 1s ease forwards;
}

.miner-trail.active::before {
    width: 6px;
    height: 6px;
    background: #FFD700;
    bottom: 0;
    animation-delay: 0.1s;
    box-shadow: 0 0 10px #FFD700;
}

.miner-trail.active::after {
    width: 4px;
    height: 4px;
    background: #D4AF37;
    bottom: 20px;
    animation-delay: 0.2s;
    box-shadow: 0 0 6px #D4AF37;
}

@keyframes trailParticle {
    0% { bottom: 0; opacity: 1; }
    100% { bottom: calc(100vh - 200px); opacity: 0; }
}

/* ============================================
   HOVER ANIMATIONS
   ============================================ */
.miner-btn:hover .miner-machine {
    animation: minerExcited 0.5s ease infinite !important;
}

@keyframes minerExcited {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(-0.5deg); }
    75% { transform: translateY(-1px) rotate(0.5deg); }
}

.miner-btn:hover .miner-ore {
    animation: oreExcited 0.5s ease infinite !important;
}

@keyframes oreExcited {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.1); }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 480px) {
    .miner-btn {
        left: 14px;
        bottom: 85px;
    }
    
    .miner-scene {
        width: 72px;
        height: 56px;
    }
    
    .miner-machine {
        transform: scale(0.85);
        transform-origin: bottom left;
    }
    
    .miner-label {
        font-size: 7px;
        padding: 3px 8px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .miner-machine,
    .miner-arm,
    .miner-arm-lower,
    .miner-bucket,
    .miner-wheel-front,
    .miner-wheel-back,
    .miner-ore,
    .ore-particle,
    .miner-spark,
    .miner-smoke,
    .miner-smoke::before,
    .miner-smoke::after,
    .miner-light,
    .miner-window {
        animation: none !important;
    }
}