:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;padding:0;height:100vh;height:100dvh;overflow:hidden}#loadingIndicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;background-color:#000000b3;color:#fff;padding:20px;border-radius:10px;z-index:1000}.hidden{display:none}.ocean{-webkit-user-select:none;user-select:none;width:100vw;height:100vh;background:linear-gradient(180deg,#1e90ff,#0077be);background-image:url(../img/waterbg2.webp),url(../img/waterbg.jpg);position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;transition:background-position 2s ease-in-out;animation:ocean-move 20s ease-in-out infinite}.boat-path{width:min(350px,80vw);position:relative;flex-grow:1}.boat{width:66px;height:113px;position:absolute;left:45%;bottom:20%;transition:left 1s ease-in-out;background-image:url(../img/ship.png);animation:float 4s ease-in-out infinite}.boat:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../img/ship_wave.png);background-size:cover;animation:boat-wave 4s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0) translateY(0) rotate(0)}50%{transform:translate(-10px) translateY(-5px) rotate(2deg)}}@keyframes ocean-move{0%,to{background-size:100px 100px}50%{background-size:100px 100px,102px 102px}}@keyframes boat-wave{0%,to{opacity:.5}50%{opacity:.2}}.card{color:#343067;width:min(350px,80vw);background:#d8d7d0;background-image:linear-gradient(135deg,#f5f7fa,#c3cfe2);color:#333;padding:30px;border:6px solid #c3cfe2;border-radius:20px;box-shadow:0 20px 40px #0003,#ccdbe8 3px 3px 6px inset,#ffffff80 -3px -3px 6px 1px inset;transform:perspective(700px) rotateX(20deg);transition:transform .5s ease;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin-bottom:10px}.question{font-size:clamp(2rem,14vw,4rem);font-weight:900;color:#333;margin-bottom:20px;line-height:1.4}#question_section:after{width:20px;height:20px;content:"";border-radius:50%;background-color:#ccc;border-bottom:4px solid #aeaeae;position:absolute;transition:background-color .3s,border-bottom .3 s;top:10px;right:10px}#question_section.wrong:after{background-color:#df4848;border-bottom:4px solid #bf3e3e;box-shadow:0 0 10px #df4848b3;animation:indicator-blink .5s ease-in-out infinite}#question_section.correct:after{background-color:#4caf50;border-bottom:4px solid #45a049;box-shadow:0 0 10px #4caf50b3}@keyframes indicator-blink{0%,to{background-color:#fd8e8e;border-bottom:4px solid #d74646}50%{background-color:#df4848;border-bottom:4px solid #bf3e3e}}.button-group{display:flex;flex-direction:row;gap:15px;justify-content:center}.option-btn{font-size:2.5rem;font-weight:900;width:100%;padding:15px;border-radius:10px;position:relative;top:-6px;border:0;transition:all 40ms linear;color:#343067;box-shadow:0 0 0 1px #ebebeb inset,0 0 0 2px #ffffff1a inset,0 8px #e5e5e5,0 8px 8px 1px #0003;background-color:#fff}.option-btn:hover{background-color:#fff}.option-btn.selected{background-color:#2163a9;color:#fff;transform:translateY(6px);box-shadow:0 0 0 1px #ebebeb inset,0 0 0 1px #ffffff26 inset,0 1px 3px 1px #0000001a}.score-board{position:fixed;top:15px;right:15px;color:#ccdbe8;padding:10px 20px;border-radius:10px;font-size:3rem;font-weight:700}.score-board img{width:40px;height:40px;vertical-align:middle;margin-right:10px}.gold{position:absolute;background-image:url(../img/Gold.webp);background-size:contain;background-repeat:no-repeat;animation:pick-item 1s ease-in-out}.splash{position:absolute;background-image:url(../img/splash.webp);background-size:contain;background-repeat:no-repeat;animation:splash-effect 1s ease-in}@keyframes pick-item{0%{bottom:70%;width:10px;height:15px}50%{bottom:60%;width:30px;height:30px;opacity:1}75%{width:30px;height:30px}to{bottom:30%;opacity:0}}@keyframes splash-effect{0%{bottom:55%;width:50px;height:25px}50%{width:100px;height:30px;opacity:1}to{width:70px;height:50px;bottom:30%;opacity:0}}@media screen and (max-width:600px){.score-board{position:fixed;top:5px;right:5px;color:#ccdbe8;padding:4px 8px;font-size:1.7rem;font-weight:700}.score-board img{width:30px;height:30px;vertical-align:middle;margin-right:5px}.card{width:min(300px,90vw);padding:20px;margin-bottom:90px}}