:root{--deep:#3c2e68;--purple:#7651dd;--yellow:#ffd532}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:"Mali",sans-serif;color:var(--deep);background:#56cbe8}main{height:100%;display:flex;flex-direction:column}header{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1180px)/2));background:#fff;border-bottom:5px solid #54c9e6;position:relative;z-index:30}.logo{display:flex;align-items:center;gap:10px}.logo>i{width:43px;height:43px;border-radius:13px;background:#74d53c;display:grid;place-items:center;font-style:normal;font-size:25px;box-shadow:0 5px #4aaa2e}.logo span{display:flex;flex-direction:column}.logo small,.wave small{font-size:10px;color:#786e8c}.wave{width:270px;text-align:center}.wave>div{height:12px;border:2px solid #d7ccea;border-radius:12px;background:#ede7f6;overflow:hidden}.wave i{display:block;width:10%;height:100%;background:linear-gradient(90deg,#7354e3,#ec64ae);transition:.45s}.tools{display:flex;align-items:center;gap:8px}.tools span,.tools button{height:42px;min-width:46px;padding:0 12px;border:2px solid #e4dded;border-radius:14px;background:#faf8ff;color:var(--deep);display:flex;gap:5px;align-items:center;justify-content:center;white-space:nowrap;font-weight:700}.tools button{font-size:18px;cursor:pointer}#stage{height:calc(100vh - 76px);position:relative;overflow:hidden;background:#5acbeb url("assets/tropical-market.png") center/cover no-repeat}#stage:after{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff12,#266e8b24);pointer-events:none}.mission{position:absolute;z-index:15;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(#7554de,#5437b1);border:4px solid #ded1ff;border-radius:17px;color:#fff;padding:10px 20px;box-shadow:0 7px #392282;font-size:12px;font-weight:700}#scaleArea{position:absolute;z-index:5;inset:65px 5% 135px}.scale{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(830px,90vw);height:430px}.pillar{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:80px;height:295px;background:linear-gradient(90deg,#e89b2d,#ffd563 45%,#ca7422);border:7px solid #774529;border-radius:30px 30px 12px 12px;box-shadow:0 10px #683a2d}.pillar:before{content:"";position:absolute;left:-75px;bottom:-5px;width:215px;height:55px;background:linear-gradient(#ffd05b,#e69b2f);border:7px solid #774529;border-radius:50% 50% 15px 15px}.pivot{position:absolute;left:50%;top:-4px;transform:translateX(-50%);width:82px;height:82px;border-radius:50%;background:#ffdc49;border:9px solid #71442f;z-index:6;display:grid;place-items:center;font-size:29px}.beam{--tilt:0deg;position:absolute;z-index:5;left:50%;top:117px;width:720px;height:30px;margin-left:-360px;background:linear-gradient(#ffe26c,#df912a);border:7px solid #70432c;border-radius:18px;transform:rotate(var(--tilt));transition:transform .7s cubic-bezier(.22,1.3,.4,1)}.hanger{position:absolute;top:18px;width:5px;height:165px;background:#6d4939;transform-origin:top}.hanger:after{content:"";position:absolute;left:-4px;top:0;width:13px;height:13px;border-radius:50%;background:#ffdf53;border:4px solid #71442f}.hanger.left{left:75px}.hanger.right{right:75px}.pan{position:absolute;left:-110px;top:140px;width:225px;height:100px;background:linear-gradient(#ffcb49,#ec8b2d);border:7px solid #70432c;border-radius:12px 12px 100px 100px;display:flex;align-items:end;justify-content:center;padding:9px 12px;transition:.5s}.fruit-pile{width:100%;min-height:68px;display:flex;flex-wrap:wrap-reverse;align-content:end;justify-content:center;gap:0}.fruit{font-size:37px;width:39px;height:38px;display:grid;place-items:center;filter:drop-shadow(0 4px 2px #6d3d2855);animation:fruitin .35s backwards}.fruit:nth-child(2n){animation-delay:.05s}.fruit:nth-child(3n){animation-delay:.1s}@keyframes fruitin{from{transform:translateY(-60px) scale(.2);opacity:0}}.empty{font-size:32px;color:#9a6330;font-weight:700;align-self:center}.count-badge{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:55px;height:45px;border-radius:15px;background:#fff;color:var(--purple);border:5px solid #dcd0ff;display:grid;place-items:center;font-size:21px;font-weight:700;box-shadow:0 5px #6449a6}.answers{position:absolute;z-index:15;left:50%;bottom:23px;transform:translateX(-50%);display:flex;gap:15px}.answers button{width:115px;height:86px;border:5px solid #fff;border-radius:21px;background:linear-gradient(#7958e4,#5b39bd);color:#fff;box-shadow:0 8px #3f2786;cursor:pointer;font-family:inherit;transition:.15s}.answers button:hover{transform:translateY(-4px);filter:brightness(1.12)}.answers b,.answers span{display:block}.answers b{font-size:40px;line-height:.8}.answers span{font-size:10px;margin-top:8px}.answers button.wrong{animation:shake .35s;background:#e74f5b}.answers button.correct{background:#4dcf77;box-shadow:0 8px #278b4c}@keyframes shake{25%,75%{transform:translateX(-9px)}50%{transform:translateX(9px)}}#toast{position:fixed;z-index:80;left:50%;top:90px;transform:translate(-50%,-20px);opacity:0;background:#fff;border:4px solid #ff897f;border-radius:15px;padding:10px 20px;font-weight:700;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}.overlay{position:fixed;z-index:100;inset:0;display:none;place-items:center;background:#3a276fb0;backdrop-filter:blur(8px)}.overlay.show{display:grid}.overlay article{width:min(470px,calc(100% - 28px));background:#fffdf3;border:8px solid #eadcff;border-radius:36px;padding:30px;text-align:center;box-shadow:0 18px #2d1b66}.overlay h1{font-size:41px;line-height:1;margin:12px}.overlay h1 em{font-style:normal;color:#f05d63}.overlay p{color:#756a89;line-height:1.7}.overlay button{border:0;border-radius:18px;background:var(--purple);color:#fff;padding:15px 25px;font-weight:700;box-shadow:0 7px #46319b;cursor:pointer}.fruit-logo{font-size:78px;filter:drop-shadow(0 6px #926c2644)}.small{max-width:350px}.check{margin:auto;width:75px;height:75px;display:grid;place-items:center;border-radius:50%;background:#5ad483;color:#fff;font-size:45px;border:7px solid #d4ffe1}.small h2{font-size:34px;color:#40b968}.cup{font-size:75px}.final{background:#eee8ff;padding:10px;border-radius:14px}@media(max-width:720px){header{height:68px;padding:0 9px}.logo small,.wave small,.tools span{display:none}.logo b{font-size:12px}.wave{width:100px}#stage{height:calc(100vh - 68px)}.mission{font-size:10px;max-width:90%;white-space:normal;text-align:center}.scale{transform:translateX(-50%) scale(.68);transform-origin:bottom}.answers{bottom:12px;gap:7px}.answers button{width:88px;height:70px}.answers b{font-size:32px}}