*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#061b43;font-family:Arial,Helvetica,sans-serif}
body{touch-action:none}
#game{position:relative;width:100%;height:100%;height:100dvh;max-width:1100px;margin:auto;overflow:hidden;background:#0757c9}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;user-select:none;pointer-events:none}
.hud{position:absolute;z-index:5;top:2.2%;left:2%;right:2%;height:8.2%;display:flex;align-items:center;justify-content:space-around;gap:7px;padding:8px 12px;color:white;background:rgba(4,28,84,.92);border:2px solid #16d9ff;border-radius:18px;box-shadow:0 0 18px #00cfff}
.hud div{min-width:0;text-align:center;border-right:1px solid #35d8ff;padding:0 10px}
.hud div:last-child{border:0}.hud b{display:block;font-size:clamp(11px,2.2vw,21px)}.hud span{display:block;font-size:clamp(12px,2.7vw,25px);font-weight:800}
.speed{position:absolute;z-index:5;top:19%;left:4%;width:clamp(85px,17vw,170px);height:clamp(85px,17vw,170px);border-radius:50%;background:rgba(5,21,55,.9);border:8px solid #19f4a8;box-shadow:0 0 20px #18d9ff;color:white;display:flex;align-items:center;justify-content:center;font-size:clamp(35px,7vw,70px);font-weight:900;flex-direction:column}
.speed small{font-size:clamp(9px,1.8vw,16px);letter-spacing:2px}
.status{position:absolute;z-index:6;right:3%;bottom:22%;width:31%;min-width:210px;color:white;background:rgba(0,45,130,.9);border:2px solid #12e5ff;border-radius:15px;padding:9px 13px;font-weight:800}
.bar{height:10px;border-radius:20px;background:#082d67;margin-top:7px;overflow:hidden;border:1px solid #3eeaff}.bar i{display:block;height:100%;width:23%;background:#12f06b}
#road{position:absolute;z-index:3;left:0;right:0;top:22%;bottom:0;pointer-events:none;perspective:600px;overflow:visible}
#bike{position:absolute;z-index:8;bottom:5%;left:50%;width:84px;height:145px;transform:translateX(-50%);filter:drop-shadow(0 0 10px #16dfff);transition:left .12s ease-out}
.bike-body{position:absolute;left:17px;top:38px;width:50px;height:78px;border-radius:24px 24px 13px 13px;background:linear-gradient(#0879ff,#05358d);border:3px solid #10dcff;color:white;font-size:20px;font-weight:900;text-align:center;padding-top:14px}
.bike-body:before{content:"";position:absolute;left:13px;top:-28px;width:24px;height:31px;border-radius:50%;background:#101b2e;border:3px solid #12dfff}
.wheel{position:absolute;width:27px;height:58px;background:#111;border:5px solid #777;border-radius:50%;bottom:0}.w1{left:8px}.w2{right:8px}
.bike-light{position:absolute;z-index:2;left:34px;top:20px;width:16px;height:10px;background:#fff;border-radius:50%;box-shadow:0 0 18px #fff}
.game-object{position:absolute;z-index:7;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;background:#ffc400;border:3px solid #fff;box-shadow:0 0 14px #ffbd00;color:#fff}
.enemy{background:#e72b2b;border-color:#ff8d8d;border-radius:10px;font-size:16px}
.controls{position:absolute;z-index:10;left:2%;right:2%;bottom:2%;height:18%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr .72fr;gap:8px;align-items:center}
.ctrl{border:3px solid #13dfff;border-radius:50%;background:rgba(3,61,170,.92);color:white;box-shadow:0 0 18px #00cfff;font-weight:900;min-height:60px;cursor:pointer;touch-action:none;font-size:clamp(30px,6vw,58px)}
.ctrl span{display:block;font-size:clamp(11px,2vw,19px);margin-top:-2px}.ctrl:active{transform:scale(.94)}
.run{width:clamp(110px,19vw,190px);height:clamp(80px,13vw,135px);justify-self:center;grid-column:2;grid-row:1}
.side{width:clamp(85px,15vw,150px);height:clamp(70px,11vw,115px);justify-self:center}
#left{grid-column:1;grid-row:1}#right{grid-column:3;grid-row:1}
.stop,.restart{border-radius:25px;font-size:clamp(18px,3vw,30px);height:58px;min-height:50px}
.stop{grid-column:1;grid-row:2;background:#8b0811;border-color:#ff2639}.restart{grid-column:3;grid-row:2;background:#087d3b;border-color:#24ff89}
.audio{position:absolute;z-index:11;right:2%;top:23%;display:flex;flex-direction:column;gap:8px}.audio button{width:52px;height:52px;border-radius:50%;border:2px solid #19e5ff;background:rgba(3,44,116,.9);font-size:25px}
#toast{position:absolute;z-index:20;left:50%;top:45%;transform:translate(-50%,-50%);padding:12px 20px;background:rgba(0,0,0,.78);border:2px solid #19e5ff;color:white;border-radius:15px;font-weight:900;opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1}
.paused #bike{filter:grayscale(.8) brightness(.7)}
@media(max-width:650px){
 .hud{top:1%;height:10%;padding:4px}.hud div{padding:0 4px}
 .speed{top:18%;left:2%;width:90px;height:90px;border-width:5px}
 .status{bottom:20%;right:2%;width:44%;min-width:145px;font-size:11px}
 #road{left:0;right:0;top:22%;bottom:0}
 .controls{height:21%;bottom:1%;grid-template-rows:1fr .72fr;gap:6px}
 .audio{top:20%;right:1%}.audio button{width:43px;height:43px;font-size:20px}
}

#roadSurface{position:absolute;z-index:1;inset:0;overflow:hidden;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);background:linear-gradient(90deg,#1e2933 0 6%,#5a6670 6% 10%,#3f4852 10% 90%,#5a6670 90% 94%,#1e2933 94% 100%),linear-gradient(#4a535c,#252b31);box-shadow:inset 0 0 35px #0008;}
#roadSurface:before{content:"";position:absolute;inset:-35% -10%;background:repeating-linear-gradient(to bottom,transparent 0 55px,rgba(255,255,255,.92) 55px 82px,transparent 82px 145px);transform:perspective(520px) rotateX(55deg);transform-origin:center top;animation:infiniteRoad .42s linear infinite;opacity:.9}
#roadSurface:after{content:"";position:absolute;left:49%;top:0;width:2%;height:100%;background:repeating-linear-gradient(to bottom,#ffd21a 0 34px,transparent 34px 76px);transform:perspective(520px) rotateX(55deg);transform-origin:center top;animation:infiniteRoad .34s linear infinite;opacity:.9}
@keyframes infiniteRoad{from{background-position:0 -150px}to{background-position:0 150px}}
#bike{animation:bikeRide .24s ease-in-out infinite alternate;}
@keyframes bikeRide{from{transform:translateX(-50%) translateY(0) rotate(-.5deg)}to{transform:translateX(-50%) translateY(-4px) rotate(.5deg)}}
#road:after{content:"";position:absolute;z-index:1;left:0;right:0;top:0;bottom:0;background:linear-gradient(to bottom,rgba(6,45,100,.05),rgba(6,45,100,.16));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);pointer-events:none}#road:before{content:"";position:absolute;z-index:2;left:49.5%;top:-10%;height:125%;width:7px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.82) 0 12px,transparent 12px 70px);transform:perspective(420px) rotateX(55deg);animation:roadMove .32s linear infinite;pointer-events:none}@keyframes roadMove{from{transform:translateY(-90px) perspective(420px) rotateX(55deg)}to{transform:translateY(100px) perspective(420px) rotateX(55deg)}}.accel,.brake{grid-row:2;border-radius:25px;font-size:clamp(18px,3vw,30px)}.accel{grid-column:1;background:#066ca7;border-color:#29e7ff}.brake{grid-column:2;background:#9b5b00;border-color:#ffd04a}

/* Game mode: prevent Android long-press copy/share UI */
html,body,#game,.ctrl,.audio button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.art,.game-object,#bike{user-select:none;-webkit-user-drag:none}
.environment{position:absolute;z-index:4;pointer-events:none;font-size:clamp(25px,6vw,70px);filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));transform:translateX(-50%);transition:top .08s linear}
.environment.tree{font-size:clamp(32px,7vw,78px)}
.environment.house{font-size:clamp(28px,6vw,64px)}
.environment.sign{font-size:clamp(22px,5vw,52px)}

.admin-page-tabs{display:flex;gap:8px;margin:10px 0}.admin-page-tabs .btn{margin-top:0}

/* V46 — motorcycle motion polish: bike visibly moves while the road/scenery scrolls. */
#game.running #bike { animation: tmBikeRide .22s ease-in-out infinite alternate; }
#game.running .road-lines { animation: tmRoadScroll .38s linear infinite; }
@keyframes tmBikeRide { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-5px) rotate(1deg); } }
@keyframes tmRoadScroll { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 22%; } }

/* V47 — cartoon playable road: nothing moves until KOURI is pressed. */
#game:not(.running) #bike { animation:none !important; }
#game:not(.running) #roadSurface:before,
#game:not(.running) #roadSurface:after,
#game:not(.running) #road:before { animation:none !important; }

#roadSurface {
  background:linear-gradient(90deg,#26313a 0 7%,#69747c 7% 10%,#3d4852 10% 90%,#69747c 90% 93%,#26313a 93% 100%);
  border-left:4px solid rgba(255,255,255,.55);
  border-right:4px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 45px rgba(0,0,0,.45),0 -12px 25px rgba(17,111,70,.35);
}
#roadSurface:before {
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.92) 0 42px,transparent 42px 118px);
  transform:perspective(520px) rotateX(55deg);
  background-position:0 0;
  animation:none;
}
#roadSurface:after {
  background:repeating-linear-gradient(to bottom,#ffd83d 0 28px,transparent 28px 68px);
  transform:perspective(520px) rotateX(55deg);
  background-position:0 0;
  animation:none;
}
#road:before {
  top:0;
  height:100%;
  width:9px;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.9) 0 18px,transparent 18px 80px);
  transform:perspective(420px) rotateX(55deg);
  animation:none;
}
#road:after { opacity:.08; }
#game.running #roadSurface:before { animation:tmRoadFlow .46s linear infinite; }
#game.running #roadSurface:after { animation:tmRoadFlow .38s linear infinite; }
#game.running #road:before { animation:tmRoadCenter .34s linear infinite; }
#game.running #bike { animation:tmBikeRide .22s ease-in-out infinite alternate; }
@keyframes tmRoadFlow { from { background-position:0 -130px; } to { background-position:0 180px; } }
@keyframes tmRoadCenter { from { background-position:0 -100px; } to { background-position:0 150px; } }
@keyframes tmBikeRide { from { transform:translateX(-50%) translateY(0) rotate(-1deg); } to { transform:translateX(-50%) translateY(-6px) rotate(1deg); } }

/* Cartoon polish */
#game { background:#55cfff; }
.hud,.status { border-radius:22px; box-shadow:0 7px 0 rgba(0,55,110,.28),0 0 18px rgba(0,205,255,.35); }
.ctrl { box-shadow:0 7px 0 rgba(0,35,90,.35),0 0 18px rgba(0,207,255,.45); }
#bike { filter:drop-shadow(0 9px 4px rgba(0,0,0,.35)); }
.bike-body { border-radius:28px 28px 16px 16px; box-shadow:inset 0 -10px 0 rgba(0,0,0,.12); }
.game-object { box-shadow:0 5px 0 rgba(0,0,0,.18),0 0 12px rgba(255,189,0,.45); }
.environment { filter:drop-shadow(0 5px 2px rgba(0,0,0,.25)); }


/* V48 — real playable cartoon road layout */
.game-back{position:absolute;z-index:50;top:max(10px,env(safe-area-inset-top));left:10px;border:3px solid #fff;background:#173a63;color:#fff;border-radius:16px;padding:9px 14px;font-weight:900;font-size:16px;box-shadow:0 5px 0 rgba(0,0,0,.28);touch-action:manipulation}
.game-back:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
#road{top:21%;bottom:0;perspective:none;overflow:hidden}
#roadSurface{clip-path:polygon(31% 0,69% 0,100% 100%,0 100%);background:#4d5964;border-left:0;border-right:0;box-shadow:inset 0 0 35px rgba(0,0,0,.35)}
#roadSurface:before{inset:0;transform:none;background:repeating-linear-gradient(to bottom,transparent 0 55px,rgba(255,255,255,.95) 55px 82px,transparent 82px 150px);opacity:.85}
#roadSurface:after{left:49%;top:0;width:2%;height:100%;transform:none;background:repeating-linear-gradient(to bottom,#ffd83d 0 30px,transparent 30px 78px);opacity:.95}
#road:before{left:49%;top:0;width:2%;height:100%;transform:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.95) 0 18px,transparent 18px 78px);opacity:.9}
#road:after{display:none}
#bike{width:112px;height:168px;bottom:18%;z-index:20;transition:left .12s ease-out,bottom .18s ease-out;filter:drop-shadow(0 11px 5px rgba(0,0,0,.4))}
.bike-body{left:23px;top:42px;width:66px;height:91px;border-radius:30px 30px 18px 18px;background:linear-gradient(180deg,#ffdf32 0%,#ff8b19 45%,#e63232 100%);border:4px solid #18283f;color:#18283f;font-size:22px;padding-top:19px;box-shadow:inset 0 -12px 0 rgba(0,0,0,.12),0 4px 0 #18283f}
.bike-body:before{left:17px;top:-34px;width:30px;height:38px;background:#202b3d;border:4px solid #f4f7fb}
.wheel{width:32px;height:67px;background:#10151c;border:6px solid #596675;bottom:0;box-shadow:inset 0 0 0 4px #202b36}.w1{left:9px}.w2{right:9px}
.bike-light{left:47px;top:18px;width:20px;height:13px;background:#fff9a6;border:2px solid #fff;box-shadow:0 0 22px #fff}
#game:not(.running) #roadSurface:before,#game:not(.running) #roadSurface:after,#game:not(.running) #road:before{animation:none!important}
#game.running #roadSurface:before{animation:tmRoadFlow .48s linear infinite}
#game.running #roadSurface:after{animation:tmRoadFlow .40s linear infinite}
#game.running #road:before{animation:tmRoadCenter .34s linear infinite}
#game.running #bike{animation:tmBikeRide .20s ease-in-out infinite alternate}
@keyframes tmRoadFlow{from{background-position:0 -160px}to{background-position:0 190px}}
@keyframes tmRoadCenter{from{background-position:0 -100px}to{background-position:0 160px}}
@keyframes tmBikeRide{from{transform:translateX(-50%) translateY(0) rotate(-1deg)}to{transform:translateX(-50%) translateY(-5px) rotate(1deg)}}
@media(max-width:650px){
  .game-back{font-size:14px;padding:8px 11px}
  #road{top:20%}
  #bike{width:96px;height:150px;bottom:18%}
  .bike-body{left:20px;top:38px;width:56px;height:82px;font-size:19px}
  .bike-body:before{left:14px;top:-31px;width:26px;height:34px}
  .wheel{width:29px;height:60px}.w1{left:7px}.w2{right:7px}.bike-light{left:40px}
}