/* ===================================================== */ /* FONS PÀGINA BOTO */ /* ===================================================== */ body.boto { line-height: 1.7; } /* Si tens el sistema de fons fixe */ body.boto #fons-fixe { background: url("../img/FonsTirada.jpg") center/cover no-repeat fixed; } /* ===================================================== */ /* ESTRUCTURA GENERAL */ /* ===================================================== */ body.boto #main { width: 100%; display: flex; justify-content: center; overflow-x: hidden; } body.boto .contenidor-centre { display: flex; justify-content: center; width: 100%; padding: 0; box-sizing: border-box; } body.boto .CapsaTirada { position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 30px 30px; background: rgba(2, 10, 34, 0.8); border-radius: 20px; box-shadow: 0 0 25px rgba(0,0,0,0.35); box-sizing: border-box; /* 🌟 CLAU DEL CENTRAT ABSOLUT */ display: flex; flex-direction: column; align-items: center; text-align: center; } /* ===================================================== */ /* TEXTOS */ /* ===================================================== */ body.boto .CapsaTirada h2, body.boto .CapsaTirada h3 { color: #fff; font-weight: 600; text-align: center; margin: 0px 0 10px; opacity: 0.7; } body.boto .CapsaTirada p { color: #e6e6e6; font-size: 1em; margin-bottom: 18px; text-align: center; line-height: 20px; letter-spacing: 1.9px; opacity: 0.7; } /* ===================================================== */ /* IMATGE CENTRAL */ /* ===================================================== */ body.boto .img-centre { width: 100%; border-radius: 10px; display: block; margin: 20px auto; object-fit: cover; } /* ===================================================== */ /* SEPARADORS */ /* ===================================================== */ body.boto hr { width: 100%; border: 0; border-top: 1px solid rgba(71, 74, 126, 0.92); margin: 18px 0; } /* ===================================================== */ /* BOTÓ DAURAT */ /* ===================================================== */ #tirarBtn, #tirarBtn1, button[id^="tirarBtn"] { position: relative; z-index: 10 !important; } body.boto button { width: 120px; height: 120px; background: linear-gradient(145deg, #d4af37, #f9e79f); color: #402f00; border: none; border-radius: 50%; font-size: 14px; font-weight: bold; cursor: pointer; box-shadow: 0 8px 16px rgba(0,0,0,0.35), 0 0 12px rgba(255,215,0,0.6); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } body.boto button:hover { transform: translateY(-4px); box-shadow: 0 14px 24px rgba(0,0,0,0.45), 0 0 22px rgba(255,215,0,0.8); background: linear-gradient(145deg, #f9e79f, #d4af37); } body.boto button:active { transform: translateY(1px); box-shadow: 0 4px 8px rgba(0,0,0,0.25); } body.boto button:disabled { background: #c8c8c8; cursor: not-allowed; box-shadow: none; color: #eee; } /* ===================================================== */ /* DRAC GIRANT */ /* ===================================================== */ /* DEFINICIÓ ÚNICA DEL DRAC */ body.boto .loader-drac { position: absolute; width: 140px; height: 140px; animation: girar 1.3s linear infinite; z-index: 100 !important; /* VISUALMENT superior */ pointer-events: none !important; /* no intercepta clics */ } @keyframes girar { to { transform: rotate(360deg); } } /* ✅ FORCEM EL BOTÓ AL CENTRE ABSOLUT */ body.boto .CapsaTirada button { margin: 24px auto 40px auto; /* ↑ baixa el botó + espai sota */ position: relative; } body.boto .zona-boto { position: relative; /* 🔑 CLAU */ width: 100%; } /* ===================================================== FIX DEFINITIU — DRAC ANCORAT AL BOTÓ ===================================================== */ body.boto .drac-wrapper { position: absolute; top: 0; /* sempre mateix punt */ left: 50%; width: 120px; /* igual que el botó */ height: 120px; transform: translateX(-50%); pointer-events: none; z-index: 90; } /* El drac real + estrelles */ body.boto .drac-wrapper .loader-drac-container { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; /* 👇 ajust fi visual (el que TU ja has trobat) */ transform: translate(-50%, -40%); display: flex; align-items: center; justify-content: center; pointer-events: none; } /* ===================================================== */ /* ESTRELLES DAURADES */ /* ===================================================== */ body.boto .loader-drac-container::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; animation: sparkle 2s infinite ease-in-out; z-index: 110 !important; pointer-events: none !important; background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, transparent 70%) 20px 10px, radial-gradient(circle, rgba(255,215,0,0.7) 0%, transparent 70%) 60px 30px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 100px 20px, radial-gradient(circle, rgba(255,215,0,0.6) 0%, transparent 70%) 150px 40px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 200px 30px, radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%) 250px 60px, radial-gradient(circle, rgba(255,215,0,0.9) 0%, transparent 70%) 30px 120px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 80px 140px, radial-gradient(circle, rgba(255,215,0,0.7) 0%, transparent 70%) 130px 110px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 180px 140px, radial-gradient(circle, rgba(255,215,0,0.6) 0%, transparent 70%) 230px 130px, radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%) 40px 200px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 100px 230px, radial-gradient(circle, rgba(255,215,0,0.7) 0%, transparent 70%) 160px 210px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 220px 230px, radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%) 280px 180px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 260px 110px, /* Estrelles petites extra */ radial-gradient(circle, rgba(255,215,0,0.6) 0%, transparent 70%) 140px 60px, radial-gradient(circle, rgba(255,215,0,0.5) 0%, transparent 70%) 200px 90px, radial-gradient(circle, rgba(255,215,0,0.7) 0%, transparent 70%) 90px 180px, radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%) 170px 170px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 60px 250px, radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%) 200px 260px, radial-gradient(circle, rgba(255,215,0,1) 0%, transparent 70%) 120px 280px ; background-repeat: no-repeat; background-size: 6px 6px, 8px 8px, 10px 10px, 12px 12px; } @keyframes sparkle { 0% { opacity: 0.25; } 50% { opacity: 1; } 100% { opacity: 0.25; } } /* Missatge just sobre el botó */ body.boto #missatge1 { margin-top: 20px; margin-bottom: 10px; text-align: center; text-decoration-color: white; transform: translateY(20px); } /* ❌ Treure negreta del text Preparant la tirada */ body.boto #missatge1, body.boto #missatge1 strong { font-weight: normal !important; color: #e6e6e6 !important; opacity: 0.8; } #btnNovaTirada { display: block !important; } /* ===================================================== */ /* RESPONSIVE */ /* ===================================================== */ @media (max-width: 400px) { body.boto .CapsaTirada { transform: scale(0.96); } } #historial-tirades { margin-top: 30px; text-align: center; opacity: 0.85; } #historial-tirades h4 { font-size: 0.9em; margin-bottom: 10px; letter-spacing: 0.05em; } #llista-historial { list-style: none; padding: 0; margin: 0; } #llista-historial li { font-size: 0.8em; margin: 6px 0; opacity: 0.8; }