.letter-garage-page{background:#d4edff}.letter-garage-app{background:#f4f9ff}.letter-garage-title{text-align:center;line-height:1}.letter-garage-title small{display:block;margin-top:4px;color:#dcefff;font-size:.69rem;font-weight:1000;text-transform:uppercase;letter-spacing:.05em}.letter-garage-score{min-width:58px;height:46px;padding:0 10px;border-radius:16px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.letter-garage-hud{position:relative;z-index:5;display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:10px 12px;background:#fff;border-bottom:1px solid #dceaf7;box-shadow:0 8px 20px rgba(14,80,149,.09)}.letter-garage-round{padding:8px 9px;border-radius:15px;background:#eaf5ff;color:#0a62bb;font-size:.68rem;font-weight:1000;white-space:nowrap}.letter-garage-hud>button{width:43px;height:43px;border:0;border-radius:14px;background:#eef6ff;color:#0a6dd6;font-size:1.35rem;font-weight:1000;box-shadow:inset 0 0 0 2px #d6e9fb}.letter-garage-progress{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.letter-garage-progress i{display:grid;place-items:center;height:28px;border-radius:8px;background:#edf2f6;color:#91a0ad;font-style:normal;font-size:.62rem;font-weight:1000}.letter-garage-progress i.done{background:#dff7e7;color:#168248}.letter-garage-progress i.current{background:#ffdc55;color:#754300;box-shadow:0 3px 0 #dca817}
.letter-garage-world{position:relative;min-height:700px;padding:120px 12px 165px;overflow:hidden;background:linear-gradient(#70ccff 0 27%,#77d06e 27% 34%,#b9b4aa 34% 100%)}.letter-garage-sky{position:absolute;inset:0 0 auto;height:28%}.letter-garage-sky i{position:absolute;width:90px;height:28px;border-radius:999px;background:#fff;opacity:.9}.letter-garage-sky i:before,.letter-garage-sky i:after{content:"";position:absolute;background:#fff;border-radius:50%}.letter-garage-sky i:before{width:38px;height:38px;left:14px;top:-18px}.letter-garage-sky i:after{width:49px;height:49px;right:8px;top:-24px}.letter-garage-sky i:first-child{left:5%;top:38px}.letter-garage-sky i:last-child{right:7%;top:75px;transform:scale(.76)}.letter-target-sign{position:absolute;z-index:4;left:50%;top:38px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:9px 13px 9px 18px;border-radius:19px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);color:#164d85;white-space:nowrap}.letter-target-sign span{font-size:.68rem;font-weight:1000}.letter-target-sign strong{display:grid;place-items:center;width:60px;height:60px;border-radius:17px;background:#ffcf36;color:#733f00;font-size:2.8rem;box-shadow:0 5px 0 #db9c0a}
.letter-garage-bays{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,650px);margin:0 auto}.letter-bay{position:relative;min-width:0;height:355px;border:0;border-radius:24px 24px 12px 12px;background:#dfa04c;padding:53px 8px 13px;box-shadow:0 12px 0 #a9672e,0 19px 30px rgba(0,0,0,.2);cursor:pointer;overflow:hidden}.letter-bay:before{content:"";position:absolute;left:-8%;right:-8%;top:0;height:50px;background:#e94b3c;clip-path:polygon(50% 0,100% 100%,0 100%)}.letter-bay-sign{position:absolute;left:10px;right:10px;top:40px;z-index:3;height:40px;border-radius:13px;background:#174d87;color:#fff;display:grid;place-items:center;font-size:.65rem;font-weight:1000;letter-spacing:.04em}.letter-logo-panel{height:205px;margin-top:24px;border:5px solid #536572;border-radius:17px;background:linear-gradient(#fff,#eaf2f7);display:grid;place-items:center;padding:8px;position:relative;overflow:hidden}.letter-logo-panel svg{width:100%;max-height:150px}.letter-bay-door{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#8d9aa4 0 25px,#64737d 25px 29px);transform:translateY(-103%);transition:.4s;z-index:4}.letter-bay.good .letter-bay-door{transform:translateY(0)}.letter-bay-name{display:block;margin-top:12px;color:#6c3909;font-size:.8rem;font-weight:1000}.letter-bay.bad{animation:letterGarageShake .32s}.letter-bay.locked{pointer-events:none}.letter-garage-feedback{position:absolute;left:50%;bottom:89px;z-index:9;transform:translateX(-50%) translateY(10px);opacity:0;min-width:190px;padding:10px 16px;border-radius:999px;background:#fff;text-align:center;font-weight:1000;box-shadow:0 8px 22px rgba(0,0,0,.2);transition:.18s}.letter-garage-feedback.show{opacity:1;transform:translateX(-50%) translateY(0)}.letter-garage-feedback.good{color:#14864a}.letter-garage-feedback.bad{color:#ce2e3d}
.letter-garage-finish{position:absolute;inset:0;z-index:20;background:rgba(5,35,72,.74);display:grid;place-items:center;padding:22px;backdrop-filter:blur(5px)}.letter-garage-finish-card{width:min(100%,400px);padding:28px 20px;border-radius:30px;background:#fff;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.32)}.letter-garage-finish-card h2{font-size:2rem;margin:5px 0;color:#0b326d}.letter-garage-finish-card p{margin:0;color:#6d7d97;font-weight:800}.finish-stars{font-size:1.15rem;letter-spacing:1px;margin:16px 0}.letter-garage-finish-card button{border:0;border-radius:18px;background:linear-gradient(#35c96b,#1cab52);color:#fff;padding:14px 20px;font-weight:1000;box-shadow:0 6px 0 #107d39}
@keyframes letterGarageShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media(max-width:430px){.letter-garage-world{min-height:645px;padding:105px 7px 155px}.letter-garage-hud{padding-left:6px;padding-right:6px;gap:5px}.letter-garage-round{padding:7px 5px;font-size:.58rem}.letter-garage-progress{gap:2px}.letter-garage-progress i{height:24px;font-size:.54rem}.letter-garage-hud>button{width:38px;height:38px}.letter-target-sign{top:31px}.letter-target-sign span{font-size:.6rem}.letter-target-sign strong{width:52px;height:52px;font-size:2.35rem}.letter-garage-bays{gap:6px}.letter-bay{height:315px;padding-left:5px;padding-right:5px}.letter-bay-sign{left:5px;right:5px;font-size:.55rem}.letter-logo-panel{height:180px;border-width:4px;padding:4px}.letter-bay-name{font-size:.66rem}.letter-garage-feedback{bottom:81px}}@media(prefers-reduced-motion:reduce){.letter-bay,.letter-bay-door,.letter-garage-feedback{animation:none!important;transition:none!important}}