:root{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#142b62;background:#fff4c7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(150deg,#fff0b1,#c6f0ff)}.wrap{width:min(980px,calc(100% - 28px));margin:auto;padding:18px 0 28px}header{height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}header>a{font-weight:900;color:#142b62;text-decoration:none;font-size:13px}header>div:nth-child(2){text-align:center}header span,.score{font-size:10px;font-weight:900;letter-spacing:.16em;color:#ef5b7f}.score{justify-self:end;text-align:center;padding:8px 10px;border:2px solid #142b62;border-radius:13px;background:#fffdf4;box-shadow:3px 3px 0 #142b6230;color:#142b62}.score b{display:block;color:#ef5b7f;font-size:25px;letter-spacing:0}h1{margin:1px 0;font-size:clamp(24px,5vw,38px);letter-spacing:-.06em}.stage{position:relative;overflow:hidden;height:min(70vh,610px);min-height:450px;border:4px solid #142b62;border-radius:28px;background:#8edfff;box-shadow:8px 10px 0 #142b6225}canvas{display:block;width:100%;height:100%;touch-action:none}.panel{position:absolute;inset:0;margin:auto;width:min(390px,calc(100% - 32px));height:max-content;padding:26px 22px 23px;text-align:center;border:3px solid #142b62;border-radius:25px;background:#fffdf4;box-shadow:8px 9px 0 #142b6230}.hidden{display:none}.parcel{font-size:48px}.panel h2{margin:0 0 8px;font-size:37px;letter-spacing:-.07em}.panel p{margin:0 0 17px;line-height:1.4}.trucks{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:15px 0}.trucks button{padding:8px 2px;border:2px solid #142b62;border-radius:13px;background:#fff;font:inherit;cursor:pointer;font-size:29px}.trucks button small{display:block;font-size:8px;font-weight:900;color:#142b62}.trucks button.selected{background:#ffd84d;transform:translateY(-3px);box-shadow:0 3px 0 #142b62}.start{margin:5px 0 12px;padding:13px 20px;border:3px solid #142b62;border-radius:14px;background:#ffd84d;color:#142b62;font:900 15px inherit;box-shadow:0 4px 0 #142b62;cursor:pointer}.start:active{transform:translateY(3px);box-shadow:0 1px 0 #142b62}.panel small{font-size:11px;color:#55709c}.final b{color:#ef5b7f}.controls{text-align:center;font-size:12px;font-weight:800;color:#315986}.controls i{padding:0 8px;color:#ef5b7f;font-style:normal}@media(max-width:600px){.wrap{width:calc(100% - 18px);padding-top:8px}header{height:58px}header>a{font-size:11px}.score{font-size:8px}.stage{min-height:510px}.panel h2{font-size:32px}}
