@import"https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap";body{margin:0;overflow-y:auto;background-color:#2c3e50;color:#ecf0f1;font-family:Kanit,Roboto,sans-serif;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;line-height:1.6;padding:20px 0}.three-background-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}#quiz-container{z-index:1;padding:0 20px;width:100%;max-width:550px;box-sizing:border-box}.card{background-color:#34495e;border-radius:12px;box-shadow:0 8px 16px #0000004d;padding:30px;margin-bottom:25px;text-align:center;border:1px solid rgba(255,255,255,.1);transition:transform .3s ease-in-out}.card:hover{transform:translateY(-5px)}.card.hidden{display:none}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}#secret-card.show-animation{animation:fadeInScale .5s ease-out forwards}h2{background:linear-gradient(45deg,#ff69b4,plum,#00bfff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;margin-top:0;margin-bottom:25px;font-weight:700;font-size:1.8em;text-shadow:2px 2px 10px rgba(0,0,0,.1)}.question-section{margin-bottom:20px;text-align:left}.question-section label{display:block;margin-bottom:12px;font-weight:400;font-size:1.2em;color:#ecf0f1;line-height:1.5}.question-section input[type=text],.question-section input[type=number]{width:calc(100% - 24px);padding:12px;margin-bottom:15px;border:1px solid #555;border-radius:6px;background-color:#2c3e50;color:#ecf0f1;font-size:1.1em;font-family:Roboto,sans-serif;box-shadow:inset 0 1px 3px #0003;transition:border-color .3s ease,box-shadow .3s ease}.question-section input::placeholder{font-family:Kanit,sans-serif;color:#bdc3c7;opacity:.8}.question-section input::-webkit-input-placeholder{font-family:Kanit,sans-serif;color:#bdc3c7;opacity:.8}.question-section input::-moz-placeholder{font-family:Kanit,sans-serif;color:#bdc3c7;opacity:.8}.question-section input:-ms-input-placeholder{font-family:Kanit,sans-serif;color:#bdc3c7;opacity:.8}.question-section input:-moz-placeholder{font-family:Kanit,sans-serif;color:#bdc3c7;opacity:.8}.question-section input[type=text]:focus,.question-section input[type=number]:focus{border-color:#3498db;box-shadow:0 0 8px #3498db80;outline:none}.question-section .options label{display:flex;align-items:center;margin-bottom:12px;font-weight:300;font-size:1.1em;line-height:1.5;cursor:pointer;transition:color .2s ease}.question-section .options{position:relative}.question-section .options input[type=radio]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.question-section .options label{position:relative;padding-left:35px;cursor:pointer;display:flex;align-items:center;margin-bottom:12px;font-weight:300;font-size:1.1em;line-height:1.5;transition:color .2s ease;z-index:1}.question-section .options label:hover{color:#3498db}.question-section .options label:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border:2px solid #3498db;border-radius:50%;background-color:#2c3e50;transition:background-color .2s ease,border-color .2s ease}.question-section .options label:after{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background-color:#3498db;opacity:0;transition:opacity .2s ease}.question-section .options input[type=radio]:checked+label:before{background-color:#3498db;border-color:#3498db}.question-section .options input[type=radio]:checked+label:after{opacity:1}.question-section .options input[type=radio]:focus+label:before{box-shadow:0 0 0 3px #3498db80;outline:none}button{background-color:#3498db;color:#fff;padding:14px 25px;border:none;border-radius:8px;cursor:pointer;font-family:Kanit,sans-serif;font-size:1.1em;width:100%;transition:background-color .3s ease,transform .2s ease;letter-spacing:.5px}button:hover{background-color:#2980b9;transform:translateY(-2px)}button:active{transform:translateY(0)}#feedback-message{background-color:#e74c3c;color:#fff;padding:10px 15px;border-radius:8px;margin-top:20px;font-weight:700;opacity:0;transform:translateY(10px);transition:opacity .3s ease-out,transform .3s ease-out}#feedback-message.show{opacity:1;transform:translateY(0)}#secret-card h2{color:#2ecc71;font-size:2em;margin-bottom:15px}#secret-card p{font-size:1.15em;color:#bdc3c7;margin-bottom:12px;line-height:1.6}#secret-card strong{color:#f1c40f;font-size:1.3em}#secret-card img{border-radius:8px;box-shadow:0 4px 8px #0003}#last-clues{margin-top:20px;text-align:left}.clue-item{display:flex;align-items:center;margin-bottom:5px;opacity:0;transform:translateY(10px);transition:opacity .5s ease-out,transform .5s ease-out}.clue-item.show{opacity:1;transform:translateY(0)}.clue-dot{width:12px;height:12px;background-color:#f1c40f;border-radius:50%;margin-right:10px;flex-shrink:0;opacity:0;transform:scale(0);transition:opacity .3s ease-out,transform .3s ease-out}.clue-dot.show{opacity:1;transform:scale(1)}.clue-text{font-size:1.1em;color:#ecf0f1;opacity:0;transform:translate(-10px);transition:opacity .5s ease-out,transform .5s ease-out}.clue-text.show{opacity:1;transform:translate(0)}@media (max-width: 600px){body{align-items:flex-start;padding-top:20px}#quiz-container{padding:15px}.card{padding:25px;margin-bottom:20px}h2{font-size:1.4em}.question-section label{font-size:1.1em}button{padding:12px;font-size:1em}#secret-card h2{font-size:1.8em}#secret-card p{font-size:1.05em}}
