*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;touch-action:manipulation}
body{font-family:'Chalkboard SE','Comic Sans MS','Comic Neue',ui-rounded,'Segoe UI',system-ui,sans-serif}

#game{position:fixed;inset:0;overflow:hidden;
  background:linear-gradient(#6ec6ff 0%,#a8dcff 45%,#cdeefd 58%,#a2d98b 58.5%,#8fce77 100%)}
#game.shake{animation:shakeA .4s}
@keyframes shakeA{
  0%,100%{transform:none}
  20%{transform:translate(1.2vmin,-.8vmin)}
  40%{transform:translate(-1.4vmin,.9vmin)}
  60%{transform:translate(1vmin,.6vmin)}
  80%{transform:translate(-.8vmin,-.5vmin)}
}

/* ---------- scenery ---------- */
.sun{position:absolute;top:5%;left:6%;width:11vmin;height:11vmin;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff59d,#ffd93b 60%,#ffc107);
  box-shadow:0 0 8vmin 2vmin rgba(255,217,59,.55);
  animation:sunPulse 3s ease-in-out infinite alternate}
@keyframes sunPulse{to{transform:scale(1.08)}}

.cloud{position:absolute;width:16vmin;height:6vmin;background:#fff;border-radius:6vmin;
  opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:8vmin;height:8vmin;left:2.5vmin;top:-3.5vmin}
.cloud::after{width:6vmin;height:6vmin;right:2.5vmin;top:-2.2vmin}
.c1{top:8%;animation-duration:52s}
.c2{top:18%;animation-duration:70s;animation-delay:-30s;scale:.7}
.c3{top:4%;animation-duration:60s;animation-delay:-15s;scale:1.2}
@keyframes drift{from{left:-25%}to{left:110%}}

.hill{position:absolute;border-radius:50%;background:linear-gradient(#8ed07f,#6fbf5e)}
.h1{width:70vmin;height:22vmin;bottom:16%;left:-12vmin}
.h2{width:90vmin;height:26vmin;bottom:15%;right:-20vmin;background:linear-gradient(#7cc46d,#5fae4f)}
.tree{position:absolute;bottom:23%;font-size:8vmin;z-index:2}
.t1{left:12%}
.t2{left:80%}

#road{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:3;
  background:linear-gradient(#6b7280,#4b5563);box-shadow:0 -.6vmin 0 #94a3b8}
#road::before{content:'';position:absolute;left:0;right:0;top:46%;height:1.4vmin;
  background:repeating-linear-gradient(90deg,#ffe066 0 6vmin,transparent 6vmin 12vmin)}

/* ---------- HUD ---------- */
#progress{position:absolute;top:1.5vmin;left:50%;transform:translateX(-50%);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7vmin;max-width:94%;
  background:rgba(255,255,255,.75);padding:.9vmin 2vmin;border-radius:3vmin;z-index:70}
.slot{font-size:4vmin;line-height:1;font-weight:900;color:#555;
  filter:grayscale(1);opacity:.35;transition:all .3s}
.slot.done{filter:none;opacity:1;color:#ff4fa3;animation:pop .45s cubic-bezier(.34,1.8,.5,1)}
@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.5)}100%{transform:scale(1)}}

#banner{position:absolute;top:12.5vmin;left:50%;transform:translateX(-50%) scale(.8);opacity:0;
  background:rgba(255,255,255,.92);color:#7c3aed;font-size:min(4.6vmin,3.4vw);font-weight:900;
  padding:1.2vmin 3.5vmin;border-radius:999px;white-space:nowrap;z-index:70;max-width:96%;
  transition:all .25s;box-shadow:0 .6vmin 2vmin rgba(0,0,0,.15)}
#banner.show{opacity:1;transform:translateX(-50%) scale(1)}

#hint{position:absolute;bottom:2.5%;left:50%;transform:translateX(-50%);
  background:#7c3aed;color:#fff;font-size:4vmin;font-weight:900;
  padding:1.4vmin 4vmin;border-radius:999px;z-index:70;opacity:0;
  pointer-events:none;transition:opacity .25s}
#hint.show{opacity:1;animation:pulse .55s ease-in-out infinite alternate}
@keyframes pulse{to{transform:translateX(-50%) scale(1.09)}}

#transformBtn{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:none;
  border:1vmin solid #fff;border-radius:999px;cursor:pointer;
  background:linear-gradient(#ffd93b,#ff9800);color:#7a2e00;
  font-size:6vmin;font-weight:900;font-family:inherit;padding:2.4vmin 6vmin;z-index:80;
  box-shadow:0 1vmin 4vmin rgba(255,152,0,.6)}
#transformBtn.show{display:block;animation:btnPulse .5s ease-in-out infinite alternate}
@keyframes btnPulse{to{transform:translate(-50%,-50%) scale(1.09)}}

/* ---------- vehicle ---------- */
.veh{position:absolute;left:0;bottom:8.5%;width:34vmin;height:30vmin;z-index:10;
  will-change:transform;transform-origin:0% 100%;
  --wh:7.5vmin;--bounce:cubic-bezier(.34,1.9,.5,1)}
.veh.monster{--wh:12.5vmin}

.veh .tbody{position:absolute;left:2%;right:2%;bottom:calc(var(--wh)*.55);height:8vmin;z-index:2;
  background:linear-gradient(#ff6b6b,#d32f2f);
  border-radius:1.5vmin 3.5vmin 1.5vmin 1.5vmin;
  box-shadow:inset 0 -1.4vmin rgba(0,0,0,.18);
  transition:bottom .8s var(--bounce),height .8s var(--bounce)}
.veh.monster .tbody{height:9vmin}

.veh .cab{position:absolute;right:12%;bottom:99%;width:46%;height:6vmin;
  background:linear-gradient(#ef5350,#c62828);border-radius:2vmin 3.5vmin 0 0}
.veh .win{position:absolute;right:8%;top:18%;width:42%;height:64%;
  background:linear-gradient(#e3f6ff,#90caf9);border-radius:.8vmin 2vmin .4vmin .4vmin}
.veh .light{position:absolute;right:-1%;top:30%;width:2.4vmin;height:2.4vmin;
  background:#fff59d;border-radius:50%;box-shadow:0 0 1.5vmin #ffd93b}
.veh .bolt{position:absolute;left:14%;top:50%;transform:translateY(-50%) scale(0);
  font-size:5vmin;transition:transform .5s var(--bounce) .35s}
.veh.monster .bolt{transform:translateY(-50%) scale(1)}

.veh .pipe{position:absolute;left:8%;bottom:calc(var(--wh)*.55 + 7.5vmin);z-index:1;
  width:1.8vmin;height:0;background:linear-gradient(#cfd8dc,#78909c);
  border-radius:.9vmin .9vmin 0 0;
  transition:height .7s var(--bounce) .25s,bottom .8s var(--bounce)}
.veh .pipe.p2{left:16%}
.veh.monster .pipe{height:5.5vmin}

.veh .wheel{position:absolute;bottom:0;width:var(--wh);height:var(--wh);z-index:3;
  background:radial-gradient(circle at 50% 40%,#3a3a3a,#151515 70%);border-radius:50%;
  box-shadow:inset 0 0 0 .8vmin #000;
  transition:width .8s var(--bounce),height .8s var(--bounce)}
.veh .w1{left:5%}
.veh .w2{right:5%}
.veh .hub{position:absolute;inset:28%;background:radial-gradient(#f5f5f5,#bdbdbd);border-radius:50%}
.veh .hub::after{content:'';position:absolute;left:44%;top:6%;width:12%;height:40%;
  background:#757575;border-radius:1vmin}
.veh.rolling .hub{animation:spin .22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- target ---------- */
#target{position:absolute;bottom:10%;left:70%;transform:translateX(-50%);z-index:8;opacity:0}
#target .tg{display:inline-block;font-size:17vmin;line-height:1;transform-origin:50% 100%;
  filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.25))}
#target .tg.num{font-weight:900;font-size:18vmin;color:#ff4fa3;
  text-shadow:.5vmin .5vmin 0 #fff,-.5vmin .5vmin 0 #fff,.5vmin -.5vmin 0 #fff,-.5vmin -.5vmin 0 #fff,0 1.2vmin 2vmin rgba(0,0,0,.25)}
#target.drop .tg{animation:dropIn .7s cubic-bezier(.25,1.25,.4,1) both}
@keyframes dropIn{
  0%{transform:translateY(-95vh)}
  62%{transform:translateY(0)}
  78%{transform:translateY(-4vmin)}
  100%{transform:translateY(0)}
}
#target.smashed .tg{animation:none;
  transition:transform .16s ease-in,opacity .8s ease .3s;
  transform:scaleY(.07) scaleX(1.5);opacity:0}

/* ---------- effects ---------- */
.pt{position:absolute;left:0;top:0;z-index:50;pointer-events:none;line-height:1;
  font-weight:900;color:#ff4fa3;text-shadow:0 0 .6vmin #fff;will-change:transform,opacity}
.boom{position:absolute;font-size:16vmin;z-index:55;pointer-events:none;
  transform:translate(-50%,-50%) scale(.3);animation:boomA .6s ease-out forwards}
@keyframes boomA{
  40%{transform:translate(-50%,-50%) scale(1.5);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}
}
.flash{position:absolute;inset:0;background:#fff;z-index:90;pointer-events:none;
  animation:flashA .55s ease-out forwards}
@keyframes flashA{from{opacity:.95}to{opacity:0}}

/* ---------- overlay ---------- */
#overlay{position:absolute;inset:0;z-index:100;padding:4vmin;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vmin;
  background:radial-gradient(circle at 50% 35%,#9d6bff,#6d28d9 70%);transition:opacity .4s}
#overlay.hidden{opacity:0;pointer-events:none}
#overlay h1{color:#fff;font-size:9vmin;line-height:1.1;text-shadow:0 .8vmin 0 rgba(0,0,0,.25)}
#overlay .big-emoji{font-size:13vmin;line-height:1}
#overlay .btn{border:1vmin solid #fff;border-radius:999px;cursor:pointer;
  background:linear-gradient(#8be78b,#2e9e44);color:#fff;
  font-family:inherit;font-weight:900;font-size:7vmin;padding:2.5vmin 8vmin;
  box-shadow:0 1.2vmin 0 #1b6b2d,0 2vmin 5vmin rgba(0,0,0,.3);
  animation:btnPulse2 .6s ease-in-out infinite alternate}
@keyframes btnPulse2{to{transform:scale(1.07)}}
#overlay p{color:#e9d5ff;font-size:3.6vmin;font-weight:700}