.shapes-game-page{background:linear-gradient(#8fd9ff,#f3fbff 430px,#fff)}.shapes-topbar{background:linear-gradient(180deg,#43d66d,#18a94d)}.shapes-title{text-align:center;min-width:0}.shapes-title small{display:block;font-size:.72rem;font-weight:900;margin-top:2px}.shapes-score{min-width:58px;height:48px;border-radius:18px;background:#fff6c9;color:#915400;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:1000}.shapes-hud{display:grid;grid-template-columns:auto 1fr 42px;gap:10px;align-items:center;padding:10px 12px;background:#fff;border-bottom:1px solid #e2ecf3;font-size:.76rem;font-weight:1000;color:#657890}.shapes-hud strong{color:#1baa50}.shapes-hud button{width:42px;height:42px;border:0;border-radius:14px;background:#eaf8ef;color:#168c43;font-size:1.3rem;font-weight:1000}.shapes-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.shapes-progress i{height:9px;border-radius:999px;background:#dce6ec}.shapes-progress i.done{background:#35c96b}.shapes-progress i.current{background:#ffc72e}
.shapes-world{position:relative;overflow:hidden;min-height:690px;padding:25px 12px 34px;background:linear-gradient(#8fdcff 0 31%,#69b95e 31% 39%,#5f6870 39% 100%)}.shapes-sky{position:absolute;inset:0 0 auto;height:245px}.shape-cloud{position:absolute;width:80px;height:28px;border-radius:999px;background:#fff;box-shadow:28px -14px 0 4px #fff,54px 0 0 #fff}.shape-cloud.a{left:7%;top:35px}.shape-cloud.b{right:17%;top:75px;transform:scale(.72)}.shape-sun{position:absolute;right:7%;top:24px;width:60px;height:60px;border-radius:50%;background:#ffd84d;box-shadow:0 0 0 10px rgba(255,216,77,.18)}
.shapes-prompt{position:relative;z-index:4;width:min(95%,470px);margin:0 auto 22px;padding:11px 16px;border-radius:25px;background:#fff;text-align:center;border:4px solid #ffcb39;box-shadow:0 10px 24px rgba(15,71,119,.18)}.shapes-prompt span{display:block;color:#67788f;font-size:.75rem;font-weight:1000}.shapes-prompt strong{font-size:1.55rem;color:#123f72}.shapes-prompt i{display:inline-block;vertical-align:middle;margin-left:9px;width:34px;height:34px;background:#31b45d}
.shape-track{position:relative;z-index:2;width:min(100%,590px);min-height:480px;margin:auto;border-radius:34px 34px 14px 14px;background:#59626a;border:8px solid #eef1f3;box-shadow:0 16px 36px rgba(0,0,0,.24),inset 0 0 0 4px #343b41;overflow:hidden}.shape-track:before,.shape-track:after{content:"";position:absolute;top:0;bottom:0;width:15px;background:repeating-linear-gradient(#fff 0 15px,#ed4248 15px 30px)}.shape-track:before{left:0}.shape-track:after{right:0}.shape-tunnels{position:absolute;z-index:5;left:25px;right:25px;top:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.shape-tunnel{min-height:150px;border:0;border-radius:24px 24px 8px 8px;background:linear-gradient(#eceff1,#b7c0c7);box-shadow:0 9px 0 #7c858d,0 14px 20px rgba(0,0,0,.2);position:relative;padding:14px 8px 22px}.shape-tunnel:before{content:"";position:absolute;left:20%;right:20%;bottom:0;height:84px;border-radius:70px 70px 0 0;background:#26323c;box-shadow:inset 0 0 0 5px #1c252d}.shape-tunnel i{position:relative;z-index:2;display:block;width:62px;height:62px;margin:auto;background:var(--shape-color);filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}.shape-tunnel span{position:relative;z-index:3;display:block;margin-top:6px;font-size:.68rem;font-weight:1000;color:#344b5f}.shape-tunnel.is-wrong{animation:shapeShake .3s}.shape-tunnel.is-correct{outline:6px solid #ffdc42;box-shadow:0 0 0 6px #36c96a,0 12px 24px rgba(0,0,0,.2)}.shape-tunnel.is-disabled{pointer-events:none;opacity:.72}.shape-tunnel.is-correct.is-disabled{opacity:1}
.shape-circle{border-radius:50%}.shape-square{border-radius:7px}.shape-rectangle{width:76px!important;height:48px!important;margin-top:7px!important}.shape-triangle{clip-path:polygon(50% 4%,96% 94%,4% 94%)}
.shape-road-lines{position:absolute;left:15%;right:15%;top:220px;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20%}.shape-road-lines i{width:6px;height:100%;margin:auto;background:repeating-linear-gradient(#f7dc45 0 24px,transparent 24px 50px)}.shape-car{position:absolute;z-index:6;width:140px;left:50%;bottom:28px;transform:translateX(-50%);transition:left .65s,bottom .65s,transform .65s}.shape-car svg{width:100%;filter:drop-shadow(0 8px 5px rgba(0,0,0,.34))}.shape-car.is-driving{transform:translateX(-50%) scale(.7)}
.shapes-feedback{position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%) translateY(6px);opacity:0;min-width:190px;padding:10px 18px;border-radius:999px;background:#fff;text-align:center;font-weight:1000;box-shadow:0 10px 24px rgba(0,0,0,.22);transition:.18s}.shapes-feedback.show{opacity:1;transform:translateX(-50%)}.shapes-feedback.good{color:#178a48}.shapes-feedback.bad{color:#d62d38}
.shapes-finish{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:rgba(7,42,76,.72);backdrop-filter:blur(5px)}.shapes-finish-card{width:min(94%,410px);padding:28px 20px;border-radius:30px;background:#fff;text-align:center;border:6px solid #ffcd3b;box-shadow:0 22px 54px rgba(0,0,0,.3)}.shapes-finish-card h2{margin:5px 0;color:#0b326d}.shapes-finish-card p{margin:0;color:#687990;font-weight:800}.shape-medals{display:flex;gap:12px;justify-content:center;align-items:center;margin:18px 0}.shape-medals i{display:block;width:34px;height:34px;background:#38bd68}.shape-medals .circle{border-radius:50%;background:#ef3f46}.shape-medals .triangle{clip-path:polygon(50% 0,100% 100%,0 100%);background:#ffc52d}.shape-medals .square{background:#2689ee}.shape-medals .rectangle{width:48px;height:28px;background:#914ee5}.shapes-finish-card button{border:0;border-radius:18px;padding:15px 22px;background:linear-gradient(#42d873,#1cab50);color:#fff;font-weight:1000;box-shadow:0 6px 0 #117b39}
@keyframes shapeShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media(max-width:430px){.shapes-world{min-height:640px;padding-left:7px;padding-right:7px}.shape-track{min-height:455px}.shape-tunnels{left:18px;right:18px;gap:7px}.shape-tunnel{min-height:137px}.shape-tunnel i{width:52px;height:52px}.shape-car{width:125px}.shapes-progress{gap:2px}}
@media(prefers-reduced-motion:reduce){.shape-car,.shapes-feedback{transition:none}.shape-tunnel.is-wrong{animation:none}}