body:before{width:100%;height:100vh;position:fixed;top:0;content:'';background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;background-attachment:fixed!important;}
body:after{width:100%;height:100vh;position:fixed;content:'';box-shadow:inset 0 10em 30em rgba(30,30,0,1);}
body#Quiz1:before{background-image:url(../imgs/bg-soccer-field-landscape.webp);}

#theme-logo{width:220px;height:auto;aspect-ratio:4/1;background-image:url(../imgs/world-cup-2026-logo.png);background-position:center;background-repeat:no-repeat;background-size:80% auto;}

.gradient-bg{background:radial-gradient(circle at 50% 50%, #1e3a2f 0%, #0d1f18 100%);}
.ball{width:20px;height:20px;background-image:url(../imgs/soccer-ball.webp);background-position:center;background-repeat:no-repeat;background-size:100%;border-radius:50%;position:relative;}
.soccer-roll-spin{animation:soccerRollSpin 4.5s ease-in-out infinite;}

#intro-screen{backdrop-filter:blur(0.2em);background:rgba(0,70,40,0.5);border:1px solid rgba(255,255,255,0.3);}
#intro-screen h1{line-height:1.2;}
#btn-start,#btn-restart{background:#1b4d3e;background:linear-gradient(40deg,rgba(27, 77, 62, 1) 0%, rgba(0, 148, 103, 1) 100%);}
#btn-start:hover,#btn-restart:hover{background:#FF5722;}

.ans-correct:after,.ans-wrong:after{width:20px;height:20px;position:absolute;right:0.6em;top:0.6em;display:block;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:100%;content:'';border:1px solid var(--theme-ui-colors-white);}
.ans-wrong:after{background-image:url(https://interactive.zaobao.com/lib/imgs/icon-close-white.svg);}
.ans-correct:after{background-image:url(https://interactive.zaobao.com/lib/imgs/icon-tick.svg);border:1px solid var(--theme-ui-colors-black);}

#breakdown-container .ans-correct:after{background-image:url(https://interactive.zaobao.com/lib/imgs/icon-tick-white.svg);border:1px solid var(--theme-ui-colors-white);}
#breakdown-container .ans-correct:after,#breakdown-container .ans-wrong:after{position:initial;}
.enclosure:after{width:100%;height:40px;bottom:40px;left:0;content:'';position:fixed;background:linear-gradient(0deg, rgba(27,79,24,1) 0%, rgba(27,79,24,0) 100%);}
button{position:relative;display:flex;align-items:center;}

.modal-container{background:linear-gradient(200deg,rgba(0,93,70,1) 0%, rgba(0,30,20,1) 100%);}

#fieldCanvas{width:100%;height:100%;position:absolute;}
footer{position:relative;z-index:10000000000;background:#fff;padding:3em 0;color:#999;}
footer #copyright{font-size:0.9em;}

@keyframes soccerRollSpin{
0%{transform:translateX(-2px) rotate(-360deg) translateY(0);}
25%{transform:translateX(0) rotate(0deg) translateY(-2px);}
50%{transform:translateX(2px) rotate(360deg) translateY(0);}
75%{transform:translateX(0) rotate(0deg) translateY(-2px);}
100%{transform:translateX(-2px) rotate(-360deg) translateY(0);}}

.bounce-custom{animation:bounce 2s infinite;}

@keyframes bounce{
0%,100%{transform:translateY(-5%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1);}
50%{transform:none;animation-timing-function:cubic-bezier(0, 0, 0.2, 1);}
}

.fade-in{animation:fadeIn 0.4s ease-out forwards;}

@keyframes fadeIn{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}

.animate-scale-up{animation:scaleUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}

@keyframes scaleUp{
from{transform:scale(0.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}

.custom-scrollbar::-webkit-scrollbar{width:4px;}
.custom-scrollbar::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.1);}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#14532d;border-radius:9999px;}



@media (orientation:portrait){
body:after{box-shadow:inset 0 0 20em rgba(0,40,20,0.9);}
body#Quiz1:before{background-image:url(../imgs/bg-soccer-field-portrait.webp);}
#theme-logo{width:150px;}
}

@media (max-width:768px){
}