:root{font-family:Roboto,system-ui,-apple-system,BlinkMacSystemFont,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}*{margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;padding:0;width:100%;height:100%}#root{width:100%;height:100%}.scene-container{position:fixed;top:0;left:0;width:100%;height:100%}.canvas{width:100%;height:100%;outline:none}.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:20px;padding:10px 20px;font-size:16px;font-family:Roboto,sans-serif;cursor:pointer;width:100%;max-width:320px;transition:background-color .3s ease,width .3s ease,padding .3s ease,font-size .3s ease}.primary-button{background-color:#609;color:#fff}.primary-button:hover{background-color:#8e4eae}.secondary-button{background-color:#e6e6e6;color:#283943}.secondary-button:hover{background-color:#d1d1d1}.button-icon{width:20px;height:20px;margin-right:8px}.button-text{white-space:nowrap}.button-disabled{pointer-events:none;cursor:default}@media screen and (max-height: 380px){.primary-button,.secondary-button{font-size:clamp(12px,3vh,14px);padding:clamp(8px,2.5vh,10px) 20px}}@media screen and (max-width: 320px){.primary-button,.secondary-button{font-size:clamp(12px,5vw,14px);padding:clamp(8px,4vw,10px) 20px}}.preloaded-image-container{position:relative;width:100%;height:100%;overflow:hidden}.image-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:shimmer 1.5s infinite}.preloaded-image{display:block;width:100%;height:100%;object-fit:cover}@keyframes shimmer{0%{background-position:-100% 0}to{background-position:100% 0}}.card{display:flex;flex-direction:column;align-items:center;max-width:368px;width:96%;height:auto;max-height:96vh;border-radius:20px;box-shadow:0 4px 6px #0000001a;background-color:#fff;margin:0 auto;position:absolute;left:50%;z-index:10}.card.card-position-center{top:50%;transform:translate(-50%,-50%)}.card.card-position-top{top:5%;transform:translate(-50%)}.card.card-position-bottom{bottom:5%;transform:translate(-50%)}.card-image-wrapper{border-top-left-radius:20px;border-top-right-radius:20px;overflow:hidden;width:100%;height:208px;background-size:cover;background-position:top}.card-content{width:100%;padding:24px;text-align:center;box-sizing:border-box}.card-title{font-size:20px;font-weight:700;margin:12px 0;color:#283943;font-family:Roboto,sans-serif;white-space:pre-line}.card-description{font-size:17px;line-height:20px;color:#283943;margin-bottom:24px;font-family:Roboto,sans-serif}.card-buttons{display:flex;flex-direction:column;align-items:center;gap:8px}.purple-title{color:#609!important;margin-top:-2px}.card-check-icon{position:absolute;height:45px;width:auto;right:-8px;top:-20px;z-index:3}@media screen and (max-height: 460px){.card-image-wrapper{height:180px}.card-content{padding:20px}}@media screen and (max-height: 420px){.card-image-wrapper{height:160px}.card-content{padding-top:10px;padding-bottom:16px}}@media screen and (max-height: 380px){.card-title{font-size:clamp(16px,5vh,20px);margin:clamp(6px,3vh,12px) 0}.card-description{font-size:clamp(13px,4vh,15px);line-height:clamp(16px,5vh,20px);margin-bottom:clamp(10px,6vh,24px)}}@media screen and (max-width: 320px){.card-title{font-size:clamp(16px,6vw,20px);margin-top:0;margin-bottom:6px}.card-description{font-size:clamp(13px,4vw,15px);line-height:clamp(16px,7vw,20px);margin-bottom:clamp(10px,6vw,24px)}}@keyframes cardScaleInCenter{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}70%{transform:translate(-50%,-50%) scale(1.05);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes cardScaleOutCenter{0%{transform:translate(-50%,-50%) scale(1);opacity:1}30%{transform:translate(-50%,-50%) scale(1.05);opacity:.8}to{transform:translate(-50%,-50%) scale(.8);opacity:0}}@keyframes cardScaleInTop{0%{transform:translate(-50%) scale(.8);opacity:0}70%{transform:translate(-50%) scale(1.05);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes cardScaleOutTop{0%{transform:translate(-50%) scale(1);opacity:1}30%{transform:translate(-50%) scale(1.05);opacity:.8}to{transform:translate(-50%) scale(.8);opacity:0}}@keyframes cardScaleInBottom{0%{transform:translate(-50%) scale(.8);opacity:0}70%{transform:translate(-50%) scale(1.05);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes cardScaleOutBottom{0%{transform:translate(-50%) scale(1);opacity:1}30%{transform:translate(-50%) scale(1.05);opacity:.8}to{transform:translate(-50%) scale(.8);opacity:0}}.card.card-position-center.visible{animation:cardScaleInCenter var(--card-scale-in-duration, .5s) ease-out forwards}.card.card-position-center.hiding{animation:cardScaleOutCenter var(--card-scale-out-duration, .3s) ease-in forwards}.card.card-position-center.hidden{transform:translate(-50%,-50%) scale(.8);opacity:0}.card.card-position-top.visible{animation:cardScaleInTop var(--card-scale-in-duration, .5s) ease-out forwards}.card.card-position-top.hiding{animation:cardScaleOutTop var(--card-scale-out-duration, .3s) ease-in forwards}.card.card-position-top.hidden{transform:translate(-50%) scale(.8);opacity:0}.card.card-position-bottom.visible{animation:cardScaleInBottom var(--card-scale-in-duration, .5s) ease-out forwards}.card.card-position-bottom.hiding{animation:cardScaleOutBottom var(--card-scale-out-duration, .3s) ease-in forwards}.card.card-position-bottom.hidden{transform:translate(-50%) scale(.8);opacity:0}.instruction{display:flex;flex-direction:column;align-items:center;max-width:400px;width:95%;border-radius:20px;box-shadow:0 4px 6px #0000001a;overflow:hidden;background-color:#fff;margin:0 auto;position:absolute;top:40px;left:50%;transform:translate(-50%);z-index:10}.instruction.with-extras{z-index:10}.instruction-content{width:100%;padding:16px;text-align:center;box-sizing:border-box}.instruction-title{font-size:20px;font-weight:700;margin:12px 0;padding:0 24px;line-height:24px;color:#283943;font-family:Roboto,sans-serif}.instruction-description{font-size:17px;color:#283943;margin-bottom:8px;font-family:Roboto,sans-serif}.instruction-extra{width:100%;margin-top:8px}@keyframes instructionScaleIn{0%{transform:translate(-50%) scale(.8);opacity:0}70%{transform:translate(-50%) scale(1.05);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes instructionScaleOut{0%{transform:translate(-50%) scale(1);opacity:1}30%{transform:translate(-50%) scale(1.05);opacity:.8}to{transform:translate(-50%) scale(.8);opacity:0}}.instruction.visible{animation:instructionScaleIn var(--instruction-scale-in-duration, .5s) ease-out forwards}.instruction.hidden{transform:translate(-50%) scale(.8);opacity:0}.instruction.hiding{animation:instructionScaleOut var(--instruction-scale-out-duration, .5s) ease-in forwards}@media screen and (max-width: 768px){.instruction{top:30px}.instruction-content{padding:10px 15px}.instruction-title{font-size:17px;margin:10px 0;padding:0 16px;line-height:20px}.instruction-description{font-size:16px;margin-bottom:5px}}@media screen and (max-width: 480px){.instruction{top:20px}.instruction-content{padding:8px 15px}.instruction-title{font-size:15px;margin:8px 0;padding:0 12px;line-height:18px}.instruction-description{font-size:14px}}.timer-section{margin-top:10px;padding:0 4px}.timer-title{font-size:16px;margin-bottom:8px;color:#609;text-align:center}.timer-container{width:100%;height:10px;background-color:#e6e6e6;border-radius:4px;position:relative;overflow:hidden;margin-top:15px;margin-bottom:4px}.timer-progress{height:100%;background-color:#609;border-radius:4px;transition:width 1s linear;will-change:width;transform:translateZ(0)}.timer-text{position:absolute;top:-20px;right:0;font-size:14px;font-weight:700;color:#609}@media screen and (max-width: 768px){.timer-container{margin-bottom:4px}}@media screen and (max-width: 480px){.timer-container{height:8px;margin-bottom:4px}}.slot-ui-container{position:relative;width:25%;height:auto;aspect-ratio:1;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;display:flex;justify-content:center;align-items:center;margin:0 10px}.slot-ui-container:hover{transform:scale(1.1)}.slot-ui-container.active{transform:scale(1.15)}.slot-ui-container .slot-circle{width:100%;height:100%;border-radius:50%;border:3px solid white;background-color:#9600ff8c;position:absolute;animation:slotPulse 1.2s infinite ease-in-out}.slot-ui-container:hover .slot-circle{box-shadow:0 0 15px #fff6;animation:none}.slot-ui-container.active .slot-circle{border-width:3px;box-shadow:0 0 20px #ffffff80;background-color:#9600ff33;animation:none}.slot-ui-container.middle-slot{margin-top:40px}@keyframes slotScaleIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes slotScaleOut{0%{transform:scale(1);opacity:1}30%{transform:scale(1.05);opacity:.8}to{transform:scale(0);opacity:0}}@keyframes slotActiveOut{0%{transform:scale(1);opacity:1}40%{transform:scale(1.4);opacity:.7}to{transform:scale(1.6);opacity:0}}@keyframes slotPulse{0%{transform:scale(1);box-shadow:0 0 5px #fff3}50%{transform:scale(.9);box-shadow:0 0 12px #fff6}to{transform:scale(1);box-shadow:0 0 5px #fff3}}.slot-ui-container.hidden{transform:scale(0);opacity:0}.slot-ui-container.visible{animation:slotScaleIn var(--slot-scale-in-duration, .5s) ease-out forwards}.slot-ui-container.hiding{animation:slotScaleOut var(--slot-scale-out-duration, .5s) ease-in forwards}.slot-ui-container.active.hiding{animation:slotActiveOut var(--slot-scale-out-duration, .5s) ease-in forwards;pointer-events:none}.slots-container{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:100;pointer-events:none;margin-top:min(18vh,150px)}.slots-wrapper{display:flex;justify-content:space-between;align-items:center;max-width:500px;width:90%;pointer-events:auto}.dashboard-card{max-width:720px;width:96%;height:auto;max-height:96vh;background-color:#fff;border-radius:20px;box-shadow:0 4px 6px #0000001a;display:flex;overflow:hidden;margin:0 auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.sidebar-buttons{display:flex;flex-direction:column;padding:24px 0 24px 24px;gap:8px;align-items:center;justify-content:flex-start}.sidebar-button{background-color:#fff;border:0px solid #ccc;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px}.sidebar-button.active{background-color:#ebebeb}.sidebar-button img{width:28px;height:28px}.main-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:24px;flex-grow:1;overflow-y:auto}@keyframes dashboardScaleIn{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}70%{transform:translate(-50%,-50%) scale(1.05);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes dashboardScaleOut{0%{transform:translate(-50%,-50%) scale(1);opacity:1}30%{transform:translate(-50%,-50%) scale(1.05);opacity:.8}to{transform:translate(-50%,-50%) scale(.8);opacity:0}}.dashboard-card.visible{animation:dashboardScaleIn var(--dash-scale-in-duration, .5s) ease-out forwards}.dashboard-card.hidden{transform:translate(-50%,-50%) scale(.8);opacity:0}.dashboard-card.hiding{animation:dashboardScaleOut var(--dash-scale-out-duration, .5s) ease-in forwards}@media screen and (max-height: 440px){.main-buttons{gap:clamp(4px,2vh,8px);padding-top:clamp(6px,4vh,24px);padding-bottom:clamp(6px,4vh,24px)}}@media (max-width: 768px){.main-buttons{gap:clamp(4px,2vw,8px);padding-left:clamp(12px,3vw,24px);padding-right:clamp(12px,3vw,24px)}.sidebar-buttons{padding-left:clamp(12px,3vw,24px)}.sidebar-button{width:clamp(30px,6vw,40px);height:clamp(30px,6vw,40px)}.sidebar-button img{width:clamp(20px,4.6vw,28px);height:clamp(20px,4.6vw,28px)}}@media (max-width: 576px){.dashboard-card{flex-direction:column-reverse;width:90%}.main-buttons{grid-template-columns:1fr;overflow-y:auto;padding-bottom:clamp(0px,2vh,18px)}.sidebar-buttons{flex-direction:row;justify-content:left;padding-top:8px;padding-bottom:16px}}.image-button{position:relative;width:100%;max-width:300px;height:190px;border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .3s ease;display:flex;align-items:flex-end;justify-content:flex-start}.image-button.completed:hover,.image-button.unlocked:hover{transform:scale(1.02)}.image-button.locked .image-container{filter:grayscale(1) brightness(.7) contrast(.4)}.image-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.preloaded-image{height:100%;object-fit:cover}.title{font-size:16px;font-family:Roboto,sans-serif;font-weight:700;padding:8px 12px;color:#fff;width:100%;text-align:left;box-sizing:border-box;position:relative;z-index:3}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;z-index:2;display:flex;justify-content:center;align-items:center}.unlocked-overlay{background-color:#609;animation:pulseOverlay 1.5s ease-in-out infinite;opacity:0}.icon{width:32px;height:32px}.center-icon{position:absolute;z-index:3}.check-icon{position:absolute;top:15px;right:15px;width:30px;height:30px;z-index:3;background:#fff;border-radius:20px}.image-button.button-disabled{pointer-events:none;cursor:default;transform:scale(1)!important}@keyframes pulseOverlay{0%{opacity:0}50%{opacity:.4}to{opacity:0}}@media screen and (max-height: 440px){.image-button{height:42vh}}@media (max-width: 576px){.image-button{height:13vh;max-width:100%}}.loading-screen{position:fixed;font-family:Roboto,sans-serif;top:0;left:0;width:100%;height:100%;background-color:#609;display:flex;align-items:center;justify-content:center;z-index:9999;color:#fff}.loading-status-container{height:100px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:10px}.loading-content{text-align:center;max-width:400px;padding:20px}.loading-logo{width:120px;height:120px;margin-bottom:16px;animation:pulse 1.5s infinite alternate}@keyframes pulse{0%{opacity:.6;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.loading-bar-container{width:100%;height:12px;background-color:#fff3;border-radius:6px;margin:24px 0 12px;overflow:hidden}.loading-bar-progress{height:100%;background-color:#fff;border-radius:6px}.loading-percentage{font-size:16px;margin-top:8px;font-weight:700}h1{font-size:32px;margin-bottom:8px;font-weight:700}p{font-size:16px;opacity:.8}.start-button-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center}.start-button-container button{animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}