body{font-size:17px!important;}

body{background:linear-gradient(180deg,var(--bg),#071028 60%);color:#e6eef6;}
h2,h3{font-weight:900;line-height:1.3;}
h2{font-size:2.6em;text-align:center;}
h3{font-weight:700;}
h4{font-weight:700;font-size:1.2em;}
a{color:var(--theme-ui-colors-main);}
p{margin:0 0 1.2em 0;letter-spacing:0.02em;line-height:1.4!important;}

body:before,body:after{width:100%;height:100%;position:fixed;top:0;left:0;content:'';}
body:before{background:linear-gradient(115deg, rgb(0 57 125 / 33%) 0%, rgb(0 0 0 / 68%) 50%, rgb(1 66 104 / 55%) 100%);z-index:1;}
body:after{background-image:url(../imgs/20251209-sg-team-sea-games-opening-ceremony-rajamangala-national-stadium-thailand-d.webp?1a);background-repeat:no-repeat;background-position:center;background-size:100% auto;z-index:0;}
header{margin:30% auto!important;line-height:1.2;text-align:center;}
h1{font-size:4em;margin:0.2em auto 0.6em auto;font-weight:900;}
.publish{font-size:0.85em;}

#brand,span.copy-link-icon,.toggle-btn{line-height:1.4;}
#brand,span.copy-link-icon{font-size:0.9em;}
.toggle-btn,span.span.copy-link-icon{top:0.8em;}

#wrapper{min-height:80vh;width:60%;padding-bottom:10%;margin:auto;align-items:center;position:relative;z-index:100;}
.sub{font-size:1.8em;font-weight:500;}
header a{color:#fff;}
.tagline{font-size:1.2em;margin-bottom:1.2em;padding:0.2em 0 0.1em 0;line-height:1.4;width:auto;font-weight:700;color:var(--theme-ui-colors-main);display:inline-flex;align-items:center;position:relative;background:#fff;}
.tagline:before,.tagline:after{width:8px;height:8px;border-radius:50%;margin:0.2em 0.4em;background:var(--theme-ui-colors-main);content:'';display:inline-block;}
.btn-text,.btn-main{padding:0.6em 1.2em;margin:0.6em auto;border-radius:50px;color:#fff;display:table;border:none!important;}
.btn-text{background:var(--theme-ui-colors-secondary);}
.btn-main{margin-top:0!important;font-weight:700;font-size:1.2em;background:var(--theme-ui-colors-main);}

main{position:relative;z-index: 1000;}
.app{max-width:100%;width:100%;backdrop-filter:blur(1em);}
.logo{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#001219;}
.card{padding:1em 3em 2em 3em;border-radius:var(--radius);box-shadow:0 6px 30px rgba(0,0,0,0.2);margin-bottom:2em;border:4px solid rgba(255,255,255,0.2);overflow:hidden;}
#progess-status{padding:0.6em;margin-bottom:1em;position:sticky;top:1em;background:rgba(0,0,0,0.6);z-index:1000;border-radius:0.6em;}
.status-track{display:flex;gap:1em;margin-bottom:0.4em;flex-direction:row;font-size:0.9em;align-items:center;}
#status{font-size:0.9em;}
.progress{height:10px;background:rgba(255,255,255,0.1);border-radius:999px;overflow:hidden;}
.progress>i{height:100%;display:block;width:0%;background:var(--theme-ui-colors-main);transition:width .45s ease;}
#qcount{font-size:0.9em;display:flex;justify-content:center;opacity:0.6;}
#qcount b{opacity:1;margin-right:0.4em;}
#question-container{text-align:center;}
.question-title{font-size:1.4em;margin:1em 0;font-weight:700;}
.qimg{width:100%;height:auto;border-radius:0.8em;box-shadow:0 0.4em 1em rgba(0,0,0,0.2);display:block;}
.options{display:flex;flex-direction:row;gap:10px;justify-content:center;}
.option{background:rgba(255,255,255,0.03);padding:0.8em 1.6em;border-radius:0.6em;cursor:pointer;border:2px solid rgba(255,255,255,0.6);transition:all .12s ease;line-height:1.2;}
.option:hover{transform:translateY(-2px);}
.option.checked{border-color:rgba(255,255,255,0);background:var(--theme-ui-colors-secondary);}
.option.disabled{pointer-events:none;opacity:0.8;}
.option img{width:200px;height:auto;}
button{padding:0.4em 1.2em;font-size:1em;border-radius:50px;border:none;font-weight:500;cursor:pointer;background:var(--theme-ui-colors-main);color:#001219;color:#fff;display:inline-flex;align-items:center;line-height:1.4;}
button.ghost{}
#submitBtn{background:var(--theme-ui-colors-main);}
.controls{display:flex;gap:10px;margin:2em auto 1em auto;justify-content:center;}
.answer-reveal{margin-top:2em;padding:1em 2em;border-radius:10px;background:rgba(0,0,0,0.4);display:none;text-align:center;color:#000;justify-content:center;color:#fff;}
.answer-reveal.show{display:block;}
.answer-correct{font-weight:700;}
.reveal-msg{margin:0.8em auto;padding-top:0.8em;border-top:1px solid var(--theme-ui-colors-main);}
.reveal-msg a{font-size:0.9em;padding:0.4em 0.8em;display:inline-flex;align-items:center;line-height:1.4;color:#fff;border:1px solid #fff;border-radius:0.3em;}
#finalScore{font-size:3em;font-weight:500;}
#finalScore b{font-weight:900;}
#finalMsg{margin-bottom:1em;font-size:1.4em;font-weight:900;}
#retryBtn{margin-bottom:2em;}
.detail a{color:#fff;border-bottom:3px solid #e90144;}

@media (min-width:200px) and (max-width:768px){
body:after{background-image:url(../imgs/20251209-sg-team-sea-games-opening-ceremony-rajamangala-national-stadium-thailand-m.webp);background-size:108% auto;}
#wrapper{width:90%;margin-top:60%;}
h1{font-size:2.2em;}
.sub{font-size:1.4em;}
.card{padding:0 1em 1em 1em;}
.question-title{margin-top:1.4em;font-size:1.4em;text-align:left;line-height:1.3;}
.options{display:block;}
.option{padding:0.8em 1em;margin:0.4em 0;display:block;}
.detail{text-align:left;}
.answer-reveal{padding:1em;}
}