@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    font-family: 'Orbitron', sans-serif;
    overflow: hidden;
    background: #0a0a0a;
}

.background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at bottom, #1a0a2e 0%, transparent 70%),
                radial-gradient(ellipse at top, #0a1a2e 0%, transparent 70%),
                linear-gradient(180deg, #0a0a0a 0%, #1a0a2e 50%, #0a0a0a 100%);
    z-index: -2;
}

.neon-frame {
    position: fixed;
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff) 1;
    animation: neonPulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff; }
    50% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffff; }
}

.stars {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent),
                     radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
                     radial-gradient(1px 1px at 90px 40px, #fff, transparent),
                     radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
                     radial-gradient(1px 1px at 230px 80px, #fff, transparent),
                     radial-gradient(2px 2px at 300px 200px, rgba(255,255,255,0.7), transparent);
    background-size: 400px 400px;
    animation: twinkle 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes twinkle { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

.container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; gap: 30px; }

.title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    color: #fff;
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff, 0 0 80px #00ffff;
    letter-spacing: 8px;
    animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    from { text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff; }
    to { text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 80px #00ffff; }
}

.dice-container { perspective: 1000px; width: 150px; height: 150px; }

.dice { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.1s ease-out; }
.dice.spinning { animation: spin 1s ease-out; }

@keyframes spin {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    25% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
    50% { transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
    75% { transform: rotateX(1080deg) rotateY(540deg) rotateZ(270deg); }
    100% { transform: rotateX(1440deg) rotateY(720deg) rotateZ(360deg); }
}

.face { position: absolute; width: 150px; height: 150px; background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%); border: 3px solid #00ffff; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 30px rgba(0, 255, 255, 0.1); }
.front { transform: translateZ(75px); color: #ff00ff; }
.back { transform: rotateY(180deg) translateZ(75px); color: #00ffff; }
.right { transform: rotateY(90deg) translateZ(75px); color: #ff00ff; }
.left { transform: rotateY(-90deg) translateZ(75px); color: #00ffff; }
.top { transform: rotateX(90deg) translateZ(75px); color: #ff00ff; }
.bottom { transform: rotateX(-90deg) translateZ(75px); color: #00ffff; }

.spin-btn {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem; padding: 15px 50px;
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    border: none; border-radius: 50px; color: #fff;
    cursor: pointer; letter-spacing: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3);
}

.spin-btn:hover { transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 0, 255, 0.8), 0 0 80px rgba(0, 255, 255, 0.6); }
.spin-btn:active { transform: scale(0.95); }
.spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.question-section { width: 100%; max-width: 500px; }

.question-input {
    width: 100%; padding: 15px 25px;
    font-family: 'Orbitron', sans-serif; font-size: 1.1rem;
    background: rgba(0, 0, 0, 0.5); border: 2px solid #ff00ff;
    border-radius: 15px; color: #fff; text-align: center;
    outline: none; transition: all 0.3s ease;
}

.question-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.question-input:focus { border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }

.result {
    min-height: 80px; padding: 20px 40px;
    background: rgba(0, 0, 0, 0.7); border: 2px solid #00ffff;
    border-radius: 15px; text-align: center;
    opacity: 0; transform: translateY(20px);
    transition: all 0.5s ease;
}

.result.show { opacity: 1; transform: translateY(0); }
.result-text { font-size: 1.5rem; color: #fff; text-shadow: 0 0 10px #00ffff; }

.ad-container { width: 100%; max-width: 728px; margin: 2rem auto; min-height: 90px; display: flex; justify-content: center; align-items: center; }