body{font-family:Arial,sans-serif;background-color:#f0f4ff;color:#333;margin:0 auto;padding:0}body,header{text-align:center}header{background:linear-gradient(90deg,#1e3a8a,#002b5c);padding:20px;color:#ffc300}.header-title{color:#ffc300;font-size:36px;margin-left:20px}button,h1,h2{color:#002b5c}button{background-color:gold;border:none;padding:5px 10px;margin:5px;cursor:pointer;border-radius:5px;font-size:14px;transition:background-color .3s}button:hover{background-color:#ffc300}.playbody{display:grid;place-items:center;margin:50px auto;align-items:center}.app,.playbody{text-align:center}.app{font-family:Arial,sans-serif;padding:10px;width:50%;border:1px solid #ccc;box-shadow:0 4px 8px rgba(0,0,0,.1)}.question-header{display:flex;justify-content:space-between;align-items:center}.question-section{margin-bottom:10px;overflow-y:auto}.question-count{font-size:18px;color:#91843e}.question-text{font-size:20px;margin-bottom:10px;color:#002b5c}.answer-section{width:70%;height:100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between}.answer-section button{width:70%;margin:5px 0;border:2px solid transparent;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.1)}.answer-section button.correct{border-color:#0f0}.answer-section button.incorrect{border-color:red;animation:shake .5s}@keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}.score-section{font-size:20px;color:#002b5c}.info-section{margin-top:10px}h2{margin-top:20px}label{display:block;margin:5px 0}input[type=checkbox]{margin-right:10px}.timer-wrapper{position:relative;margin-top:10px}.timer-circle-wrapper{position:relative;width:40px;height:40px;margin:0 auto}.timer-circle{width:100%;height:100%;transform:rotate(-90deg)}.circle-gray{fill:none;stroke:#ddd;stroke-width:2}.circle.green{stroke:#0f0;stroke-width:2}.circle.amber,.circle.green{fill:none;transition:stroke-dashoffset 1s linear}.circle.amber{stroke:#ffbf00;stroke-width:2}.circle.red{fill:none;stroke:red;stroke-width:2;transition:stroke-dashoffset 1s linear}.timer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:#333}.time-up{font-size:14px;color:red;margin-top:5px}.option-button{position:relative;display:inline-block;border-radius:2px;margin:2px;font-size:16px}.option-marker{position:absolute;right:5px;top:50%;transform:translateY(-50%)}