@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap";*{font-family:Noto Sans Thai,sans-serif}html,body,#root{height:100%;margin:0}body{background:url(/bg.png) center/cover no-repeat;color:#fff;display:flex;justify-content:center;align-items:center;text-align:center}@media (min-width:768px){body{background:#fff!important;background-image:none!important}#root{max-width:480px;width:100%;border-radius:16px;overflow:hidden;background:url(/bg.png) center/cover no-repeat}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.gap-4{gap:1rem}.min-h-screen{min-height:100vh}.p-4{padding:1rem}.mt-8{margin-top:2rem}.mt-6{margin-top:1.5rem}.mt-10{margin-top:2.5rem}.mt-auto{margin-top:auto}.text-center{text-align:center}.text-white{color:#fff}.text-gray-700{color:#333}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-3xl{font-size:1.75rem}.text-2xl{font-size:1.5rem}.text-4xl{font-size:2rem}.text-lg{font-size:1.125rem}.rounded-lg{border-radius:12px}.btn-gradient{display:inline-block;padding:.75rem 1.5rem;border-radius:12px;background:linear-gradient(90deg,#fb5ba5,#ffb46a);color:#fff;border:none;font-size:1rem;cursor:pointer}.btn-gradient.small{padding:.5rem 1.25rem}.btn-option{display:block;width:100%;padding:.75rem 1rem;border:none;border-radius:12px;font-size:1rem;cursor:pointer;color:#fff}.btn-white{width:100%;background:#fff;color:#2c2c2c;box-shadow:0 0 5px #0000004d;border-radius:25px;border:none;font-size:1.4rem;padding:.75rem 1.5rem;cursor:pointer;font-weight:500;-webkit-tap-highlight-color:transparent}.btn-white:active{background-color:#ff587f;color:#fff;transition:all .3s ease}.stroke-title{color:#fff;text-shadow:-4px -4px 0 #000,4px -4px 0 #000,-4px 4px 0 #000,4px 4px 0 #000}.question{font-size:rem;font-weight:800;margin-top:2rem;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center}.quiz-body{padding:2rem}.options{display:flex;flex-direction:column;gap:1rem;width:100%;margin-top:2rem}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container{background:#fff;color:#333;border-radius:20px;padding:1.75rem;max-width:90%;width:340px;box-shadow:0 10px 25px #0006;text-align:center;margin:2rem}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.modal-title{font-size:1.4rem;font-weight:700;margin:0;color:#333}.modal-close-icon{background:transparent;border:none;color:#888;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .2s}.modal-close-icon:hover{background-color:#f0f0f0;color:#555}.modal-close{background:linear-gradient(90deg,#ff439b,#ff143c);color:#fff;border:none;border-radius:25px;padding:.7rem 2rem;cursor:pointer;font-weight:600;margin-top:1.5rem;box-shadow:0 4px 10px #ff143c4d;transition:transform .2s,box-shadow .2s}.modal-close:hover{box-shadow:0 6px 12px #ff143c66}.share-button{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.25rem 0;font-weight:600;font-size:1.1rem;padding:.8rem 1rem;box-shadow:0 4px 12px #fb5ba54d}.share-icon{stroke:#fff}.modal-about{background:#f8f8f8;border-radius:16px;padding:1.25rem;margin:1.5rem 0;text-align:left}.about-title{font-size:1.1rem;font-weight:600;margin:0 0 .75rem;color:#333}.social-links{display:flex;flex-direction:column;gap:.75rem}.social-link{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#333;padding:.5rem .75rem;border-radius:12px;transition:background-color .2s,transform .2s;font-weight:500}.social-link:hover{background-color:#ececec;transform:translate(3px)}.social-link span{font-size:.95rem}.w-full{width:100%}.progress-bar-container{position:fixed;top:0;left:0;right:0;width:100%;height:6px;background-color:#fff3;z-index:1000}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff439b,#ff143c);width:0;border-radius:0 3px 3px 0;box-shadow:0 0 5px #fb5ba580}.max-w-xs{max-width:20rem}