/* --- 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: 1.5rem; padding: 20px 0; }

/* --- FEATURE: Stylish Title --- */
h1 { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: 3.5rem; 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: 400px; 
    height: 400px; 
    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;
    /* Ensure ball is behind controls */
    z-index: 1; 
}
#magic-8-ball.idle { animation: idleGlow 4s infinite ease-in-out; }
#magic-8-ball.shake { animation: progressiveShake 4s ease-in-out; }
#answer-backdrop { position: absolute; width: 170px; height: 170px; background-color: #000; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -52%); opacity: 0; transition: opacity 0.5s ease; }
#answer { position: absolute; width: 155px; top: 50%; left: 50%; transform: translate(-50%, -90%); text-align: center; font-family: 'Cinzel', serif; font-size: 1em; 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{position:relative;width:100%;text-align:center;padding:20px 0;font-size:.9rem;color:#888}footer a{color:#ffd700;text-decoration:none;margin:0 15px;transition:all .3s ease}footer a:hover{color:#fff;text-shadow:0 0 8px #ffd700}

/* --- Button Styling --- */
#answer-controls { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 0.5rem;
    /* FIXED: Restored Z-Index to make buttons clickable over ball overlap */
    position: relative;
    z-index: 10;
}
#answer-options { display: flex; gap: 10px; align-items: center; }
#answer-options button { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; padding: 10px 20px; cursor: pointer; border: 2px solid #ffd700; background-color: transparent; color: #ffd700; transition: all .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); }
#btn-mute { width: 28px; height: 28px; padding: 0; font-size: 0.9rem; border-radius: 50%; border: 2px solid #ffd700; background-color: transparent; color: #ffd700; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; line-height: 1; position: relative; }
#btn-mute.muted::before { content: '❌'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: red; font-weight: bold; display: grid; place-items: center; font-size: 1em; }

/* Gold Install Button */
#btn-install { 
    font-family: 'Cinzel', serif; 
    font-size: 0.9rem; 
    font-weight: bold; 
    padding: 6px 12px; 
    cursor: pointer; 
    border: 2px solid #ffd700; 
    background-color: #ffd700; /* Gold Background */
    color: #000; /* Black Text */
    transition: all 0.3s ease; 
    border-radius: 20px; 
    margin-top: 2px;
    box-shadow: 0 0 10px #f0a500;
}
#btn-install:hover { background-color: rgba(255, 215, 0, 0.8); }

#options-explainer { font-size: 0.9rem; color: #ffd700; text-shadow: 0 0 5px #f0a500; max-width: 450px; text-align: center; margin-top: 5px; line-height: 1.3; }
.description-section { max-width: 700px; margin: 1rem auto 0 auto; text-align: center; padding: 0 20px; }
.description-section p { font-size: 1.1rem; color: #ccc; line-height: 1.6; margin: 0; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); }
.modal-content { background-color: #111; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; text-align: center; border-radius: 10px; }
.modal-content p { color: #ccc; } .modal-content img { max-width: 80px; margin: 10px; } .modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }

/* --- Language Code Styling --- */
.lang-code { font-family: sans-serif; font-size: 0.8rem; color: #ffd700; font-weight: bold; vertical-align: middle; margin-left: -2px; margin-right: 5px; }
a:visited .lang-code, a:active .lang-code, a:hover .lang-code { color: #ffd700 !important; }

@media (max-width:1023px) {
    .ad-skyscraper, #ad-leaderboard { display: none; }
    #ad-mobile-banner { display: block; width: 320px; height: 50px; margin: 0 auto; }
    #ad-rectangle { display: block; width: 300px; height: 250px; }
    .page-wrapper { grid-template-columns: 1fr; padding: 0 10px; }
    
    /* Mobile Layout */
    .main-content { gap: 0.5rem; padding-top: 5px; padding-bottom: 100px; }
    h1 { white-space: nowrap; font-size: 7.5vw; margin: 0; line-height: 1.2; }
    
    #magic-8-ball { width: 350px; height: 350px; margin-bottom: -35px; }
    #answer-backdrop { width: 150px; height: 150px; }
    #answer { width: 140px; }
    
    #answer-controls { margin-top: -5px; margin-bottom: 5px; }
    #options-explainer { margin-top: 0; margin-bottom: 10px; }
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes grandEntrance{from{opacity:0;transform:translateY(-100px) scale(.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%, 100% { transform: translate(0, 0) rotate(0); } 2% { transform: translate(-2px, 1px) rotate(-1deg); } 4% { transform: translate(3px, -2px) rotate(0.5deg); } 6% { transform: translate(5px, 3px) rotate(2deg); } 8% { transform: translate(-3px, -1px) rotate(-1.5deg); } 10% { transform: translate(8px, 2px) rotate(3deg); } 12% { transform: translate(-5px, -3px) rotate(-2deg); } 14% { transform: translate(2px, 4px) rotate(1deg); } 16% { transform: translate(6px, -1px) rotate(2.5deg); } 18% { transform: translate(-7px, 3px) rotate(-2deg); } 20% { transform: translate(10px, -4px) rotate(4deg); } 22% { transform: translate(-8px, 1px) rotate(-3deg); } 24% { transform: translate(4px, 5px) rotate(2deg); } 26% { transform: translate(-9px, -2px) rotate(-3.5deg); } 28% { transform: translate(11px, 3px) rotate(5deg); } 30% { transform: translate(-12px, -4px) rotate(-4deg); } 32% { transform: translate(9px, 2px) rotate(3deg); } 34% { transform: translate(-10px, -1px) rotate(-4.5deg); } 36% { transform: translate(13px, 4px) rotate(6deg); } 38% { transform: translate(-11px, -3px) rotate(-5deg); } 40% { transform: translate(14px, 1px) rotate(5.5deg); } 42% { transform: translate(-12px, 2px) rotate(-4deg); } 44% { transform: translate(10px, -4px) rotate(3deg); } 46% { transform: translate(-15px, 5px) rotate(-6deg); } 48% { transform: translate(13px, -2px) rotate(5deg); } 50% { transform: translate(-10px, 3px) rotate(-4deg); } 52% { transform: translate(12px, -1px) rotate(3deg); } 54% { transform: translate(-14px, 4px) rotate(-5deg); } 56% { transform: translate(15px, -3px) rotate(6deg); } 58% { transform: translate(-13px, 1px) rotate(-5.5deg); } 60% { transform: translate(16px, 2px) rotate(7deg); } 62% { transform: translate(-14px, -2px) rotate(-6deg); } 64% { transform: translate(12px, 3px) rotate(5deg); } 66% { transform: translate(-17px, -4px) rotate(-7.5deg); } 68% { transform: translate(15px, 1px) rotate(6.5deg); } 70% { transform: translate(-13px, 3px) rotate(-5deg); } 72% { transform: translate(16px, -2px) rotate(7deg); } 74% { transform: translate(-18px, 4px) rotate(-8deg); } 76% { transform: translate(14px, -1px) rotate(6deg); } 78% { transform: translate(-15px, 2px) rotate(-7deg); } 80% { transform: translate(17px, -3px) rotate(8deg); } 82% { transform: translate(-16px, 1px) rotate(-7.5deg); } 84% { transform: translate(14px, 2px) rotate(6deg); } 86% { transform: translate(-18px, -2px) rotate(-8.5deg); } 88% { transform: translate(16px, 3px) rotate(7deg); } 90% { transform: translate(-19px, 0px) rotate(-9deg); } 92% { transform: translate(17px, -1px) rotate(8deg); } 94% { transform: translate(-15px, 2px) rotate(-7deg); } 96% { transform: translate(18px, -3px) rotate(9deg); } 98% { transform: translate(-20px, 1px) rotate(-10deg); } }
@keyframes liquidReveal{0%{opacity:0;transform:translate(-50%,calc(-90% + 20px)) scale(.8)}50%{opacity:.8;transform:translate(-50%,calc(-90% - 5px)) scale(1.05)}100%{opacity:1;transform:translate(-50%,-90%) scale(1)}}