/* --- Basic Setup --- */
html { background-color: #000000; }
body { background-color: #000000; font-family: 'Cinzel', serif; margin: 0; color: #fff; overflow-x: hidden; }

/* --- Page Layout Structure --- */
.page-wrapper { display: grid; grid-template-columns: 160px 1fr 160px; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; padding: 20px 0; }

/* --- FEATURE: Stylish Title --- */
h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: 3rem; color: #ffd700; text-shadow: 0 0 5px #ffd700, 0 0 15px #f0a500; margin: 0; text-align: center; }

/* --- The 8-Ball Styling --- */
#magic-8-ball { width: 350px; height: 350px; background-image: url('/magic-ball.png'); background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease-out; animation: grandEntrance 1.5s 0.5s ease-out forwards; }
#magic-8-ball.idle { animation: idleGlow 4s infinite ease-in-out; }
#magic-8-ball.shake { animation: progressiveShake 2s ease-in-out; }

/* --- The black circle overlay that hides the '8' --- */
#answer-backdrop { position: absolute; width: 150px; height: 150px; background-color: #000; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -52%); opacity: 0; transition: opacity 0.5s ease; }

/* --- The Answer Text Styling --- */
#answer { position: absolute; width: 140px; top: 50%; left: 50%; transform: translate(-50%, -90%); text-align: center; font-family: 'Cinzel', serif; font-size: 0.9em; font-weight: bold; color: #ffd700; text-shadow: 0 0 5px #ffd700, 0 0 10px #f0a500; line-height: 1.2; opacity: 0; }
#answer.reveal { opacity: 1; animation: liquidReveal 1s ease-out forwards; }

/* --- Ad Space Styling --- */
.ad-space { margin-left: auto; margin-right: auto; }
#ad-leaderboard { width: 728px; height: 90px; margin-top: 20px; margin-bottom: 20px; }
.ad-skyscraper { width: 160px; height: 600px; }
#ad-mobile-banner, #ad-rectangle { display: none; }

/* --- Footer Styling --- */
footer { position: relative; width: 100%; text-align: center; padding: 20px 0; font-size: 0.9rem; color: #888; }
footer a { color: #ffd700; text-decoration: none; margin: 0 15px; transition: all 0.3s ease; }
footer a:hover { color: #ffffff; text-shadow: 0 0 8px #ffd700; }

/* --- Button Styling --- */
#answer-options { display: flex; gap: 20px; margin-top: 1rem; }
#answer-options button { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: bold; padding: 10px 20px; cursor: pointer; border: 2px solid #ffd700; background-color: transparent; color: #ffd700; transition: all 0.3s ease; border-radius: 25px; }
#answer-options button.active { background-color: #ffd700; color: #000; box-shadow: 0 0 15px #f0a500; }
#answer-options button:hover:not(.active) { background-color: rgba(255, 215, 0, 0.1); }
#options-explainer { font-size: 0.9rem; color: #888; max-width: 450px; text-align: center; margin-top: -1rem; line-height: 1.4; }


/* --- Responsive Design for Mobile (UPDATED) --- */
@media (max-width: 1023px) {
    .ad-skyscraper, #ad-leaderboard { display: none; }
    #ad-mobile-banner { display: block; width: 320px; height: 50px; }
    #ad-rectangle { display: block; width: 300px; height: 250px; }
    .page-wrapper { grid-template-columns: 1fr; padding: 0 10px; }

    /* THIS IS THE DIAGNOSTIC STYLE */
    h1 {
        white-space: nowrap; 
        font-size: 5.5vw;     
        margin-top: 15px; 
        background-color: red; /* THIS IS THE UGLY TEST */
    }

    #magic-8-ball { width: 300px; height: 300px; }
}


/* --- KEYFRAME ANIMATIONS --- */
@keyframes grandEntrance { from { opacity: 0; transform: translateY(-100px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes idleGlow { 0%, 100% { filter: drop-shadow(0 0 10px #f0a500); } 50% { filter: drop-shadow(0 0 25px #ffd700); } }
@keyframes progressiveShake { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 10% { transform: translate(-2px, -1px) rotate(-1deg) scale(1.02); } 20% { transform: translate(2px, 1px) rotate(1deg) scale(1.02); } 30% { transform: translate(-4px, -2px) rotate(-2deg) scale(1.04); } 40% { transform: translate(4px, 2px) rotate(2deg) scale(1.04); } 50% { transform: translate(-6px, -3px) rotate(-3deg) scale(1.06); } 60% { transform: translate(6px, 3px) rotate(3deg) scale(1.06); } 70% { transform: translate(-8px, -4px) rotate(-4deg) scale(1.08); } 80% { transform: translate(8px, 4px) rotate(4deg) scale(1.08); } 90% { transform: translate(0, 0) rotate(0deg) scale(1.1); filter: drop-shadow(0 0 15px #ffffff); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } }
@keyframes liquidReveal { 0% { opacity: 0; transform: translate(-50%, calc(-90% + 20px)) scale(0.8); } 50% { opacity: 0.8; transform: translate(-50%, calc(-90% - 5px)) scale(1.05); } 100% { opacity: 1; transform: translate(-50%, -90%) scale(1); } }