.colors-game-page{background:linear-gradient(#82d6ff,#f5fbff 430px,#fff)}.colors-topbar{background:linear-gradient(180deg,#ffcf3d,#f4a20f);color:#664000}.colors-topbar .round-btn{background:linear-gradient(#fff5b7,#ffd24a);color:#9a5700}.colors-title{text-align:center;min-width:0}.colors-title small{display:block;font-size:.72rem;font-weight:900;margin-top:2px}.colors-score{min-width:58px;height:48px;border-radius:18px;background:#fff;color:#9a5900;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:1000;box-shadow:0 5px 12px rgba(120,78,0,.16)}
.colors-hud{display:grid;grid-template-columns:auto 1fr 42px;gap:10px;align-items:center;padding:10px 12px;background:#fff;border-bottom:1px solid #e4edf5;color:#687990;font-size:.76rem;font-weight:1000}.colors-hud strong{color:#ea9a00}.colors-hud button{width:42px;height:42px;border:0;border-radius:14px;background:#fff6d8;color:#a36700;font-size:1.3rem;font-weight:1000}.colors-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.colors-progress i{height:9px;border-radius:999px;background:#dce5ed}.colors-progress i.done{background:#35c66b}.colors-progress i.current{background:#ffc72e}
.colors-world{position:relative;overflow:hidden;min-height:680px;padding:26px 14px 34px;background:linear-gradient(#9cddff 0 26%,#e9f1f5 26% 100%)}.colors-workshop{position:absolute;left:0;right:0;top:0;height:230px;background:linear-gradient(90deg,#ffd383,#ffc15f);border-bottom:10px solid #c77838}.tool-wall{position:absolute;left:5%;top:30px;padding:10px 18px;border-radius:18px;background:#245b80;color:#fff;font-size:1.8rem;box-shadow:0 8px 0 #17415f}.shelf{position:absolute;right:5%;top:42px;width:105px;height:86px;border:10px solid #9a572e;border-top:12px solid #7c4327;background:repeating-linear-gradient(180deg,#e7a14e 0 21px,#c97731 21px 25px)}
.colors-prompt{position:relative;z-index:4;width:min(94%,430px);margin:0 auto 16px;padding:12px 18px;border-radius:25px;background:#fff;text-align:center;box-shadow:0 10px 24px rgba(55,83,105,.2);border:4px solid #fff}.colors-prompt span{display:block;font-size:.78rem;font-weight:1000;color:#62738a}.colors-prompt strong{font-size:1.75rem;color:#173f71}.colors-prompt i{display:inline-block;width:34px;height:34px;border-radius:50%;vertical-align:middle;margin-left:8px;border:4px solid #fff;box-shadow:0 0 0 2px #ccd9e5}
.paint-booth{position:relative;z-index:3;width:min(92%,470px);height:280px;margin:auto;border:8px solid #536575;border-radius:30px 30px 14px 14px;background:linear-gradient(#dff4ff,#f9fdff 65%,#c7d0d8 65%);overflow:hidden;box-shadow:0 14px 28px rgba(48,74,94,.2)}.paint-booth:before{content:"OFICINA";position:absolute;left:50%;top:10px;transform:translateX(-50%);padding:5px 13px;border-radius:999px;background:#264f70;color:#fff;font-size:.7rem;font-weight:1000;letter-spacing:.08em}.paint-platform{position:absolute;left:12%;right:12%;bottom:20px;height:24px;border-radius:50%;background:#6f7c87;box-shadow:0 10px 0 #4d565e}.paint-car{position:absolute;z-index:3;width:235px;max-width:68%;left:50%;bottom:40px;transform:translateX(-50%);transition:.3s transform}.paint-car svg{width:100%;filter:drop-shadow(0 10px 7px rgba(0,0,0,.24))}.paint-car.pop{animation:colorPop .45s ease}.paint-spray{position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none}.paint-spray.show{animation:spray .55s ease}.paint-spray:before,.paint-spray:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:var(--spray,#2a8ee8);filter:blur(16px);opacity:.32}.paint-spray:before{left:15%;top:28%}.paint-spray:after{right:12%;top:35%}
.paint-cans{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,520px);margin:18px auto 0}.paint-can{min-height:92px;border:0;border-radius:21px;background:#fff;box-shadow:0 8px 0 #b9c9d7,0 12px 20px rgba(48,68,84,.16);position:relative;padding:8px}.paint-can:before{content:"";display:block;width:56px;height:48px;margin:auto;border-radius:8px 8px 14px 14px;background:var(--paint);border:5px solid rgba(0,0,0,.12);box-shadow:inset 0 9px 0 rgba(255,255,255,.25)}.paint-can:after{content:attr(data-name);display:block;margin-top:5px;font-size:.7rem;font-weight:1000;color:#334b67}.paint-can.is-wrong{animation:colorShake .3s}.paint-can.is-correct{outline:5px solid #37c96c;transform:translateY(-3px)}.paint-can.is-disabled{pointer-events:none;opacity:.7}.paint-can.is-correct.is-disabled{opacity:1}
.colors-feedback{min-height:38px;margin-top:12px;text-align:center;font-weight:1000;color:#178b48;opacity:0;transition:.18s}.colors-feedback.show{opacity:1}.colors-feedback.bad{color:#d52d38}
.colors-finish{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:rgba(22,54,77,.72);backdrop-filter:blur(5px)}.colors-finish-card{width:min(94%,410px);padding:28px 20px;border-radius:30px;background:#fff;text-align:center;border:6px solid #ffcb36;box-shadow:0 22px 54px rgba(0,0,0,.3)}.colors-finish-card h2{margin:5px 0;color:#0c326a}.colors-finish-card p{margin:0;color:#697990;font-weight:800}.color-medals{display:flex;justify-content:center;gap:7px;margin:18px 0}.color-medals i{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #dce3e9}.color-medals .red{background:#ef3f46}.color-medals .blue{background:#2689ee}.color-medals .yellow{background:#ffc52d}.color-medals .green{background:#38bd68}.color-medals .orange{background:#ff8d2b}.color-medals .purple{background:#914ee5}.colors-finish-card button{border:0;border-radius:18px;padding:15px 22px;background:linear-gradient(#ffbe32,#f39800);color:#fff;font-weight:1000;box-shadow:0 6px 0 #ba6c00}
@keyframes colorShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes spray{0%{opacity:0}45%{opacity:1}100%{opacity:0}}@keyframes colorPop{50%{transform:translateX(-50%) translateY(-8px) scale(1.04)}}
@media(max-width:430px){.colors-world{min-height:630px;padding-left:9px;padding-right:9px}.paint-booth{height:255px}.paint-car{width:205px}.paint-cans{gap:7px}.paint-can{min-height:84px}.colors-progress{gap:2px}}
@media(prefers-reduced-motion:reduce){.paint-car,.colors-feedback{transition:none}.paint-spray.show,.paint-car.pop,.paint-can.is-wrong{animation:none}}