:root{--rider-side:0;--rider-left:35%;--approach:0;--arrival-remaining:100%;--ink:#13283a;--paper:#fffaf0;--gold:#f2bd52;--coral:#d65b47;--blue:#315e7c;--green:#4d8763;--muted:#5c6e7d}
*{box-sizing:border-box}
.game-shell{width:min(1180px,calc(100% - 28px));margin:12px auto 36px}
#intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
#intro .hero-stage{margin:18px;align-self:center;aspect-ratio:1200/630}
#intro .hero-stage img{width:100%;height:100%;object-fit:cover}
.intro-copy{display:flex;flex-direction:column;justify-content:center}
.intro-copy h1{font-size:clamp(2rem,5vw,4.6rem);margin:4px 0;line-height:1.05}
.intro-copy .dek{font-weight:850;font-size:1.05rem}
.rule-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.rule-mini span{background:#fff;border:1px solid var(--hg-line);border-radius:7px;padding:7px 8px;text-align:center;font-weight:800;font-size:.82rem}
#start{margin-top:8px}
#play{outline:0;width:min(760px,100%);margin:0 auto;height:calc(var(--hg-visual-viewport-height) - var(--hg-game-header-block));min-height:520px;max-height:780px;padding:6px;display:grid;grid-template-rows:34px 104px minmax(280px,1fr) 40px;gap:5px;background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:0 7px 0 rgba(19,40,58,.22);overflow:hidden;-webkit-user-select:none;user-select:none}
.ride-status{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 7px;background:#fff;border-bottom:1px solid #a8b6c1;font-size:.78rem;line-height:1.1}
.ride-status b{font-size:1rem}
.wallet-wrap{min-height:0;position:relative;padding:4px 6px 6px;background:#e9f0f4;border-left:4px solid var(--coral);border-radius:5px;overflow:hidden}
.wallet-head{height:19px;display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.63rem;font-weight:900}
.perk-wallet{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:73px}
.wallet-coupon{min-width:0;position:relative;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 6px;align-items:center;padding:4px 5px 3px;background:#fffdf7;border:1px solid #b7c1c8;border-radius:3px;box-shadow:2px 2px 0 rgba(19,40,58,.12)}
.wallet-coupon:before,.wallet-coupon:after{content:"";position:absolute;top:27px;width:7px;height:12px;background:#e9f0f4;border:1px solid #b7c1c8;border-radius:50%}
.wallet-coupon:before{left:-4px}.wallet-coupon:after{right:-4px}
.wallet-coupon svg{width:40px;height:32px}
.wallet-coupon span{min-width:0;display:flex;flex-direction:column;line-height:1.1}
.wallet-coupon b{font-size:.67rem;white-space:normal}
.wallet-coupon small{color:var(--muted);font-size:.54rem;font-weight:800}
.wallet-coupon i{grid-column:1/3;height:4px;position:relative;background:#d7e0e5;border-radius:2px;overflow:hidden}
.wallet-coupon i:after{content:"";display:block;width:var(--life);height:100%;background:var(--coral)}
.wallet-coupon em{position:absolute;right:4px;top:3px;color:var(--coral);font-size:.64rem;font-style:normal}
.wallet-coupon.reserve{opacity:.58;background:#f4f5f3}
.ride-stage{min-height:0;position:relative;overflow:hidden;border:1px solid #718695;border-radius:10px;background:#bfe3ec;isolation:isolate}
.ride-world{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:town-drift 3.2s ease-in-out infinite alternate}
.road-flow{position:absolute;z-index:1;left:37%;right:37%;top:39%;bottom:-32%;opacity:.74;background:repeating-linear-gradient(180deg,transparent 0 25px,rgba(255,250,240,.9) 26px 44px,transparent 45px 70px);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);animation:road-flow .5s linear infinite;pointer-events:none}
.stage-guide{position:absolute;z-index:10;top:5px;left:50%;transform:translateX(-50%);margin:0;padding:3px 10px;background:rgba(255,255,255,.94);border-radius:9px;color:var(--ink);font-size:.63rem;font-weight:900;white-space:nowrap;box-shadow:0 1px 2px rgba(19,40,58,.18);pointer-events:none}
.arrival-meter{position:absolute;z-index:9;top:29px;left:23%;right:23%;height:13px;padding:2px;background:rgba(255,255,255,.92);border-radius:2px;color:var(--muted);font-size:.48rem;font-weight:900;pointer-events:none}
.arrival-meter span{position:absolute;inset:auto 0 13px;text-align:center}
.arrival-meter i{display:block;width:var(--arrival-remaining);height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--coral));border-radius:1px}
.shop-choices{position:absolute;z-index:5;left:2.5%;right:2.5%;top:49px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.shop-choice{min-width:0;height:132px;position:relative;display:grid;grid-template-rows:15px 78px 18px 16px;place-items:center;padding:2px 4px 5px;background:rgba(255,255,255,.88);border:1px solid rgba(19,40,58,.42);border-radius:6px;box-shadow:0 4px 0 rgba(19,40,58,.55);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overflow:hidden;transition:transform .12s ease-out,background .12s,border-color .12s,box-shadow .12s}
.shop-choice:hover{background:#fff}
.shop-choice:active,.shop-choice.selected{transform:translateY(3px);background:#fff7d5;border-color:#a76b08;box-shadow:0 1px 0 rgba(19,40,58,.6)}
.shop-choice:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px var(--blue)}
.shop-choice svg{width:100%;height:80px;align-self:end;filter:drop-shadow(2px 2px 0 rgba(19,40,58,.1))}
.shop-side{width:100%;text-align:left;color:var(--muted);font-size:.53rem;font-weight:950;letter-spacing:.04em}
.shop-name{font-size:.72rem;font-weight:950;line-height:1.05}
.shop-action{align-self:end;padding:2px 10px;background:var(--gold);border-radius:2px;font-size:.52rem;font-weight:950}
.shop-expiry{position:absolute;right:4px;top:3px;padding:1px 4px;background:#fff;border-left:2px solid var(--blue);font-size:.49rem;font-weight:900}
.shop-expiry.urgent{border-left-color:var(--coral);color:#9b2d22}
.next-shops{position:absolute;z-index:8;top:184px;left:50%;transform:translateX(-50%);margin:0;padding:2px 7px;background:rgba(255,255,255,.9);border-left:3px solid var(--gold);border-radius:2px;color:var(--muted);font-size:.52rem;font-weight:850;white-space:nowrap;pointer-events:none}
.rider{position:absolute;z-index:7;left:var(--rider-left);bottom:-1px;width:30%;height:37%;overflow:visible;filter:drop-shadow(2px 3px 0 rgba(19,40,58,.13));transition:left .16s ease-out;animation:rider-bob .32s ease-in-out infinite alternate;pointer-events:none}
.rider *{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.rider-shadow{fill:#13283a;opacity:.14;stroke:none}
.wheel{fill:#fffaf0;stroke:#274457;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:wheel-spin .48s linear infinite}
.wheel path{fill:none;stroke:#78909f;stroke-width:.78}
.bike-frame{fill:none;stroke:#b74338;stroke-width:2.5}
.bike-frame circle{fill:#f2bd52;stroke:#274457;stroke-width:1.2}
.crank{transform-box:fill-box;transform-origin:center;animation:crank-spin .48s linear infinite}
.basket{fill:#f2bd52;stroke:#274457;stroke-width:1.4}
.basket path+path{fill:none;stroke-width:.7}
.rider-body .jacket{fill:#315e7c;stroke:#274457;stroke-width:1.6}
.rider-body .shirt{fill:#fffaf0;stroke:#274457;stroke-width:1}
.rider-body .lapel{fill:none;stroke:#9bb0bd;stroke-width:.8}
.rider-body .face{fill:#fff1d5;stroke:#274457;stroke-width:1.3}
.rider-body .hair{fill:#274457;stroke:#274457;stroke-width:.8}
.rider-body .glasses,.rider-body .face-detail{fill:none;stroke:#274457;stroke-width:.8}
.rider-body .eye{fill:none;stroke:#274457;stroke-width:.8}
.rider-body,.arm{transform-box:fill-box;transform-origin:center;animation:body-lean .32s ease-in-out infinite alternate}
.arm,.leg{fill:none;stroke:#274457;stroke-width:2.5}
.arm .hand{fill:#fff1d5;stroke:#274457;stroke-width:1}
.leg .shoe{stroke-width:3.6}
.leg-a{animation:leg-a .48s ease-in-out infinite alternate}
.leg-b{animation:leg-b .48s ease-in-out infinite alternate}
.tie{fill:#d65b47;stroke:#274457;stroke-width:.9;transform-origin:152px 75px;animation:tie-wave .36s ease-in-out infinite alternate}
.ticket-flight{position:absolute;z-index:11;left:calc(50% - 20px);bottom:35%;width:40px;height:24px;display:grid;place-items:center;background:#fff8d9;border:1px dashed #9d6810;border-radius:2px;color:#80520d;font-size:.48rem;font-weight:950;opacity:0;pointer-events:none}
.ticket-flight.fly-left{animation:ticket-left .48s ease-out}.ticket-flight.fly-right{animation:ticket-right .48s ease-out}
.visited-stamps{position:absolute;z-index:8;left:6px;bottom:7px;display:flex;gap:2px;max-width:42%;pointer-events:none}
.visited-stamps span{position:relative;width:25px;height:19px;transform:rotate(calc((var(--i) - 2)*1.5deg));filter:drop-shadow(1px 1px 0 rgba(19,40,58,.15))}
.visited-stamps svg{width:100%;height:100%}
.visited-stamps b{position:absolute;right:-1px;top:-4px;display:grid;place-items:center;width:13px;height:13px;background:#fff;border:1px solid var(--coral);border-radius:50%;color:var(--coral);font-size:.48rem}
.coupon-counter{position:absolute;z-index:8;right:6px;bottom:6px;display:flex;align-items:baseline;gap:3px;padding:3px 6px;background:rgba(255,255,255,.94);border-radius:3px;color:var(--muted);font-size:.56rem;font-weight:850}
.coupon-counter b{color:var(--coral);font-size:.92rem}
.ride-feedback{pointer-events:none;display:flex;align-items:center;gap:8px;margin:0;padding:5px 8px;background:rgba(255,255,255,.94);border:0;border-left:4px solid var(--blue);border-radius:3px;box-shadow:0 1px 2px rgba(19,40,58,.12);font-size:.72rem;font-weight:800;overflow:hidden}
.ride-feedback[data-cue=success]{border-left-color:var(--green)}.ride-feedback[data-cue=foresight]{border-left-color:var(--gold)}.ride-feedback[data-cue=missed]{border-left-color:var(--coral)}
.ride-feedback b{flex:0 0 auto}.ride-feedback span{white-space:normal;overflow:visible}
.ride-stage.arrive-left .rider{animation:rider-enter-left .5s ease-in-out}.ride-stage.arrive-right .rider{animation:rider-enter-right .5s ease-in-out}
.ride-stage.missed .rider{animation:ride-past .38s ease-out}
#result{width:min(920px,100%);margin:0 auto;background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:0 7px 0 rgba(19,40,58,.22);overflow:hidden}
.result-art{height:min(34vh,260px);background:#fff}.result-art img{width:100%;height:100%;object-fit:cover}
.result-copy{padding:20px;text-align:center}
.result-copy h2{margin:0}.score-line{display:flex;justify-content:center;align-items:baseline;gap:4px}.score-line strong{font-size:clamp(3.5rem,12vw,7rem);line-height:1}.score-line span{font-weight:900}
.result-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0}.result-stats span{padding:7px 4px;background:#fff;border:1px solid var(--hg-line);border-radius:7px;font-size:.7rem}.result-stats b{display:block;font-size:1.15rem}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions a{display:flex;align-items:center;justify-content:center;text-decoration:none}
.editorial-info{width:min(920px,calc(100% - 28px));margin:24px auto;padding:20px 24px;background:#fff;border-left:6px solid var(--hg-news);border-radius:9px;line-height:1.75}.editorial-info h2{margin-top:0}.editorial-info a{color:#174f89}
[hidden]{display:none!important}
@keyframes road-flow{to{background-position:0 70px}}
@keyframes town-drift{from{transform:scale(1.015) translateY(-1px)}to{transform:scale(1.035) translateY(3px)}}
@keyframes rider-bob{to{transform:translateY(-2px) rotate(-.4deg)}}
@keyframes wheel-spin{to{transform:rotate(360deg)}}
@keyframes crank-spin{to{transform:rotate(360deg)}}
@keyframes leg-a{to{transform:translate(2px,-2px) rotate(5deg)}}
@keyframes leg-b{to{transform:translate(-2px,1px) rotate(-5deg)}}
@keyframes body-lean{to{transform:translateY(1px) rotate(.6deg)}}
@keyframes tie-wave{to{transform:rotate(6deg)}}
@keyframes ticket-left{0%{opacity:0;transform:translate(0,8px) scale(.7)}28%{opacity:1}100%{opacity:0;transform:translate(-130px,-125px) rotate(-12deg) scale(.9)}}
@keyframes ticket-right{0%{opacity:0;transform:translate(0,8px) scale(.7)}28%{opacity:1}100%{opacity:0;transform:translate(130px,-125px) rotate(12deg) scale(.9)}}
@keyframes rider-enter-left{0%,100%{left:18%}55%{left:7%;bottom:19%;transform:scale(.78) rotate(-4deg)}}
@keyframes rider-enter-right{0%,100%{left:52%}55%{left:65%;bottom:19%;transform:scale(.78) rotate(4deg)}}
@keyframes ride-past{50%{transform:translateY(-3px);opacity:.7}}
@media(max-width:680px){
  .game-shell{width:calc(100% - 12px);margin:7px auto 20px}
  #intro{display:block}.intro-copy h1{font-size:2rem}
  #intro .hero-stage{margin:9px;aspect-ratio:1200/630}.rule-mini{gap:4px}.rule-mini span{padding:5px 3px;font-size:.67rem}
  #play{width:100%;height:calc(100dvh - 64px);min-height:500px;padding:4px;border-width:2px;border-radius:13px;grid-template-rows:31px 94px minmax(294px,1fr) 43px;gap:4px}
  .ride-status{font-size:.64rem}.ride-status b{font-size:.82rem}
  .wallet-wrap{padding:2px 4px 4px}.wallet-head{height:16px;font-size:.53rem}.perk-wallet{height:70px;gap:3px}
  .wallet-coupon{grid-template-columns:32px 1fr;padding:3px 3px 2px}.wallet-coupon svg{width:31px;height:28px}.wallet-coupon b{font-size:.58rem}.wallet-coupon small{font-size:.47rem}
  .stage-guide{font-size:.55rem;padding:2px 7px}.arrival-meter{top:27px;left:28%;right:28%}
  .shop-choices{top:45px;gap:5px}.shop-choice{height:121px;grid-template-rows:12px 71px 17px 15px;padding:1px 2px 4px}.shop-choice svg{height:73px}.shop-name{font-size:.63rem}.shop-side,.shop-action{font-size:.47rem}.shop-expiry{font-size:.43rem}
  .next-shops{top:169px;font-size:.47rem}
  .rider{width:32%;height:35%}.visited-stamps{max-width:47%}.visited-stamps span{width:20px;height:15px}.coupon-counter{font-size:.5rem}
  .ride-feedback{font-size:.64rem;line-height:1.15}
  .result-copy{padding:14px}.result-stats{grid-template-columns:repeat(5,1fr);gap:3px}.result-stats span{padding:5px 2px;font-size:.56rem}.result-stats b{font-size:.9rem}
  .editorial-info{width:calc(100% - 12px);padding:16px}
}
@media(max-width:340px){.site-head .track{display:none!important}.wallet-head span:last-child{display:none}.shop-name{font-size:.58rem}.ride-feedback{font-size:.59rem}}
@media(prefers-reduced-motion:reduce){
  .ride-world,.road-flow,.rider,.wheel,.crank,.rider-body,.arm,.leg-a,.leg-b,.tie{animation:none}
  .rider,.shop-choice{transition:none}
  .ticket-flight.fly-left,.ticket-flight.fly-right{animation:none}
}


/* v4: direct-tap retro shooting-gallery loop */
#play{
  grid-template-rows:34px minmax(0,1fr) 43px;
}
.ride-status{
  position:relative;
  z-index:20;
}
.ride-stage{
  min-height:0;
}
.target-field{
  position:absolute;
  z-index:6;
  inset:24px 0 78px;
  overflow:hidden;
  pointer-events:none;
}
.moving-target{
  --target-width:104px;
  position:absolute;
  top:calc(var(--lane) * 33.333% + 2px);
  left:calc(100% + 12px);
  width:var(--target-width);
  height:min(92px,31%);
  display:block;
  padding:0;
  border:0;
  border-radius:9px;
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 0 rgba(19,40,58,.5);
  color:var(--ink);
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  overflow:visible;
  animation:target-run var(--travel) linear forwards;
  will-change:left;
}
.moving-target:hover{
  filter:brightness(1.04);
}
.moving-target:active{
  box-shadow:0 1px 0 rgba(19,40,58,.6);
  margin-top:3px;
}
.moving-target:focus-visible{
  outline:4px solid #fff;
  box-shadow:0 0 0 7px var(--blue);
}
.moving-target svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(1px 2px 0 rgba(19,40,58,.14));
  pointer-events:none;
}
.moving-target.live{
  border:3px solid var(--green);
}
.moving-target.urgent{
  border-color:#a76b08;
  box-shadow:0 0 0 4px rgba(242,189,82,.5),0 4px 0 rgba(19,40,58,.52);
}
.moving-target.expired{
  border:2px solid #77848d;
  background:rgba(224,229,231,.96);
  filter:grayscale(1);
  opacity:.82;
}
.moving-target.expired svg{
  opacity:.62;
}
.target-mark{
  position:absolute;
  z-index:4;
  right:-8px;
  top:-9px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:1rem;
  font-weight:1000;
  line-height:1;
  pointer-events:none;
}
.expired .target-mark{
  background:#65737c;
}
.target-ticket{
  position:absolute;
  z-index:3;
  left:-13px;
  bottom:-6px;
  width:42px;
  height:29px;
  display:block;
  transform:rotate(-8deg);
  pointer-events:none;
}
.target-ticket svg{
  width:100%;
  height:100%;
  background:#fffaf0;
  border:1px dashed #9d6810;
  border-radius:2px;
}
.target-ticket i{
  position:relative;
  display:block;
  width:38px;
  height:25px;
  background:#d6dade;
  border:1px dashed #65737c;
  border-radius:2px;
}
.target-ticket i:after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:11px;
  height:3px;
  background:#65737c;
  transform:rotate(-18deg);
}
.support-flag{
  position:absolute;
  z-index:4;
  right:5px;
  bottom:5px;
  width:17px;
  height:14px;
  border-left:3px solid var(--ink);
  pointer-events:none;
}
.support-flag:after{
  content:"";
  position:absolute;
  left:1px;
  top:0;
  width:13px;
  height:9px;
  background:var(--coral);
  clip-path:polygon(0 0,100% 18%,78% 55%,100% 100%,0 82%);
}
.moving-target.shogi:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:32px;
  height:38px;
  display:grid;
  place-items:center;
  background:#e1aa54;
  border:1px solid var(--ink);
  clip-path:polygon(50% 0,100% 23%,88% 100%,12% 100%,0 23%);
}
.moving-target.hit{
  animation:target-pop .18s ease-out forwards;
}
.moving-target.wrong{
  animation:target-wrong .18s ease-out forwards;
}
.moving-target.passed{
  pointer-events:none;
}
.hit-burst{
  position:absolute;
  z-index:15;
  width:54px;
  height:54px;
  display:none;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:5px solid var(--green);
  color:var(--green);
  font-size:2rem;
  font-weight:1000;
  pointer-events:none;
}
.hit-burst.show{
  display:grid;
  animation:burst-out .26s ease-out forwards;
}
.hit-burst.wrong{
  border-color:var(--coral);
  color:var(--coral);
}
.rider{
  z-index:5;
  left:35%;
  bottom:-8px;
  width:28%;
  height:30%;
}
.visited-stamps{
  z-index:7;
  left:6px;
  bottom:5px;
  max-width:55%;
}
.coupon-counter{
  z-index:7;
}
.ride-feedback[data-cue=mistake]{
  border-left-color:var(--coral);
}
@keyframes target-run{
  from{left:calc(100% + 12px)}
  to{left:calc(-1 * var(--target-width) - 16px)}
}
@keyframes target-pop{
  to{transform:scale(1.28);opacity:0}
}
@keyframes target-wrong{
  30%{transform:translateX(-8px)}
  60%{transform:translateX(8px)}
  100%{transform:scale(.85);opacity:0}
}
@keyframes burst-out{
  from{transform:translate(-50%,-50%) scale(.55);opacity:1}
  to{transform:translate(-50%,-50%) scale(1.35);opacity:0}
}
@media(max-width:680px){
  #play{
    grid-template-rows:31px minmax(0,1fr) 43px;
  }
  .target-field{
    inset:22px 0 70px;
  }
  .moving-target{
    --target-width:92px;
    height:min(86px,31%);
  }
  .rider{
    left:34%;
    width:32%;
    height:28%;
  }
  .ride-status span:nth-child(3){
    display:none;
  }
}
@media(max-width:340px){
  .moving-target{
    --target-width:84px;
    height:min(80px,31%);
  }
}
@media(prefers-reduced-motion:reduce){
  .moving-target{
    animation-name:target-run;
  }
  .moving-target.hit,.moving-target.wrong,.hit-burst.show{
    animation-duration:.01ms;
  }
}


/* v5: coherent illustrated city, storefront and cyclist package */
.ride-world{object-position:center 56%;filter:saturate(.94) brightness(1.02);animation:town-breathe-v5 3.8s ease-in-out infinite alternate}
.road-flow{left:0;right:0;top:auto;bottom:3%;height:18px;clip-path:none;opacity:.48;background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,250,240,.94) 35px 72px,transparent 73px 104px);animation:road-flow-v5 .55s linear infinite}
.moving-target{--target-width:128px;height:min(104px,31%);padding:5px;border-radius:14px;background:rgba(255,250,240,.94);box-shadow:0 4px 0 rgba(23,50,77,.34)}
.moving-target.live{border:3px solid #4d8763}
.moving-target.urgent{box-shadow:0 0 0 4px rgba(248,195,90,.55),0 4px 0 rgba(23,50,77,.34)}
.moving-target.expired{background:rgba(230,232,230,.94)}
.moving-target .store-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(2px 3px 0 rgba(23,50,77,.14));pointer-events:none}
.moving-target.expired .store-art{filter:grayscale(1) opacity(.62) drop-shadow(2px 3px 0 rgba(23,50,77,.10))}
.moving-target.shogi:after{display:none}
.target-ticket .ticket-paper,.visited-stamps .ticket-paper{fill:#fffaf0;stroke:#17324d;stroke-width:1.5;stroke-linejoin:round}
.target-ticket .ticket-perf,.visited-stamps .ticket-perf{fill:none;stroke:#9aaab5;stroke-width:1;stroke-dasharray:3 3}
.target-ticket .ticket-glyph,.visited-stamps .ticket-glyph{fill:none;stroke:#28527a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rider{left:31%;bottom:-1%;width:38%;height:auto;aspect-ratio:528/480;overflow:visible;background:none;filter:drop-shadow(3px 4px 0 rgba(23,50,77,.14));animation:rider-bob-v5 .34s ease-in-out infinite alternate}
.rider>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rider .wheel-spin{position:absolute;bottom:1.3%;width:34.5%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(23,50,77,0) 0 12deg,rgba(23,50,77,.5) 13deg 14deg);-webkit-mask:radial-gradient(circle,transparent 0 14%,#000 15% 70%,transparent 71%);mask:radial-gradient(circle,transparent 0 14%,#000 15% 70%,transparent 71%);animation:wheel-overlay-v5 .48s linear infinite;pointer-events:none}
.rider .wheel-rear{left:3.8%}.rider .wheel-front{right:2.7%}
.rider .pedal-spin{position:absolute;left:47.4%;bottom:8.7%;width:10%;aspect-ratio:1;border-radius:50%;background:linear-gradient(90deg,transparent 46%,rgba(23,50,77,.72) 47% 53%,transparent 54%);animation:wheel-overlay-v5 .48s linear infinite;pointer-events:none}
@keyframes road-flow-v5{to{background-position:-104px 0}}
@keyframes town-breathe-v5{from{transform:scale(1.008) translateY(-1px)}to{transform:scale(1.018) translateY(2px)}}
@keyframes rider-bob-v5{to{transform:translateY(-2px) rotate(-.25deg)}}
@keyframes wheel-overlay-v5{to{transform:rotate(360deg)}}
@media(max-width:680px){.moving-target{--target-width:116px;height:min(98px,31%)}.rider{left:29%;width:43%}}
@media(max-width:340px){.moving-target{--target-width:104px;height:min(92px,31%)}}
@media(prefers-reduced-motion:reduce){.ride-world,.road-flow,.rider,.rider .wheel-spin,.rider .pedal-spin{animation:none}}

/* v6: approved flat house style */
:root{--ink:#24334c;--paper:#fdf8ef;--gold:#ffc644;--coral:#bb5033;--blue:#70b0cc;--green:#4d8763;--muted:#5d6878}
#intro .hero-stage{background:var(--paper);border-radius:0;box-shadow:none}
#intro .hero-stage img{object-fit:contain}
.rule-mini span{border-radius:0;box-shadow:none}
#play{border:3px solid var(--ink);border-radius:4px;box-shadow:none;background:var(--paper)}
.ride-stage{border:3px solid var(--ink);border-radius:0;background:var(--paper)}
.ride-world{object-position:center center;filter:none;animation:none}
.road-flow{bottom:2%;height:14px;opacity:1;background:repeating-linear-gradient(90deg,transparent 0 40px,var(--gold) 41px 79px,transparent 80px 118px);animation:road-flow-v6 .58s linear infinite}
.moving-target{--target-width:124px;height:min(100px,31%);padding:3px;border-radius:0;background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.moving-target:hover{filter:none}
.moving-target:active{box-shadow:1px 1px 0 var(--ink)}
.moving-target.live{border:3px solid var(--green)}
.moving-target.urgent{box-shadow:0 0 0 4px var(--gold),4px 4px 0 var(--ink)}
.moving-target.expired{background:#e0ded7;border-color:#65707c;opacity:.78}
.moving-target .store-art{filter:none}
.moving-target.expired .store-art{filter:grayscale(1);opacity:.58}
.pair-mark{position:absolute;z-index:5;left:4px;top:3px;width:31px;height:23px;pointer-events:none}
.pair-mark i{position:absolute;width:20px;height:14px;background:var(--gold);border:2px solid var(--ink)}
.pair-mark i:first-child{left:0;top:0;transform:rotate(-7deg)}
.pair-mark i:last-child{left:8px;top:6px;transform:rotate(5deg)}
.target-mark{border-radius:50%;box-shadow:none}
.target-ticket svg,.target-ticket i{border-radius:0}
.rider{left:31%;bottom:-1%;width:36%;filter:none;animation:rider-bob-v6 .32s steps(2,end) infinite alternate}
.rider .wheel-spin{bottom:7.7%;width:29.55%}
.rider .wheel-rear{left:9.85%}
.rider .wheel-front{right:10.6%}
.rider .pedal-spin{left:42.3%;bottom:18.5%;width:10%}
.visited-stamps>span{border-radius:0}
.visited-stamps>span.paired b{background:var(--gold);border-color:var(--ink);color:var(--ink)}
.ride-feedback{border-radius:0;box-shadow:none}
.ride-feedback[data-cue=pair]{border-left-color:var(--gold);background:#fff7d8}
#result{border:3px solid var(--ink);border-radius:4px;box-shadow:none;background:var(--paper)}
.result-art{background:var(--paper)}
.result-art img{object-fit:contain}
@keyframes road-flow-v6{to{background-position:-118px 0}}
@keyframes rider-bob-v6{to{transform:translateY(-3px) rotate(-.35deg)}}
@media(max-width:680px){
  .moving-target{--target-width:112px;height:min(94px,31%)}
  .rider{left:28%;width:42%}
}
@media(max-width:340px){.moving-target{--target-width:102px;height:min(88px,31%)}}
@media(prefers-reduced-motion:reduce){.road-flow,.rider,.rider .wheel-spin,.rider .pedal-spin{animation:none}}

/* v8: color-wish shooting loop */
.target-field{
  inset:20px 0 74px;
}
.moving-target{
  --target-width:76px;
  width:var(--target-width);
  height:58px;
  padding:0;
  border:2px solid var(--ink);
  background:transparent;
  box-shadow:3px 3px 0 var(--ink);
  opacity:1;
}
.moving-target:hover{
  filter:brightness(1.02);
}
.moving-target:active{
  margin-top:2px;
  box-shadow:1px 1px 0 var(--ink);
}
.moving-target .item-coupon{
  width:100%;
  height:100%;
  overflow:visible;
  filter:none;
}
.item-paper{
  fill:var(--item-color);
  stroke:var(--ink);
  stroke-width:3;
  stroke-linejoin:miter;
}
.item-stub{
  fill:var(--paper);
  fill-opacity:.42;
  stroke:none;
}
.item-perf{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.7;
  stroke-dasharray:3 3;
  opacity:.72;
}
.item-punch{
  fill:var(--paper);
  stroke:var(--ink);
  stroke-width:1.2;
}
.item-panel{
  fill:var(--paper);
  stroke:var(--ink);
  stroke-width:2.2;
  stroke-linejoin:miter;
}
.item-detail{
  fill:none;
  stroke:var(--ink);
  stroke-width:2.25;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.item-solid{
  fill:var(--ink);
  stroke:var(--ink);
  stroke-width:1.2;
  stroke-linejoin:miter;
}
.item-ticks{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.55;
  stroke-linecap:square;
}
.item-color-blue{--item-color:#70b0cc}
.item-color-red{--item-color:#d86a50}
.item-color-yellow{--item-color:#ffc644}
.wish-bubble{
  --item-color:#70b0cc;
  position:absolute;
  z-index:9;
  left:48%;
  bottom:30%;
  width:94px;
  min-height:66px;
  display:grid;
  grid-template-columns:1fr 42px;
  grid-template-rows:auto 1fr;
  align-items:center;
  gap:1px 4px;
  padding:5px 6px 6px;
  background:var(--paper);
  border:3px solid var(--ink);
  color:var(--ink);
  pointer-events:none;
}
.wish-bubble:after{
  content:"";
  position:absolute;
  left:-12px;
  bottom:5px;
  width:17px;
  height:17px;
  background:var(--paper);
  border-left:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  transform:skew(-20deg) rotate(17deg);
}
.wish-bubble[data-color=blue]{--item-color:#70b0cc}
.wish-bubble[data-color=red]{--item-color:#d86a50}
.wish-bubble[data-color=yellow]{--item-color:#ffc644}
.wish-bubble>span:first-child{
  grid-column:1/3;
  font-size:.54rem;
  font-weight:950;
  letter-spacing:.04em;
  line-height:1;
}
.wish-item{
  width:42px;
  height:29px;
}
.wish-item svg{
  display:block;
  width:100%;
  height:100%;
}
.wish-bubble b{
  font-size:.78rem;
  font-weight:1000;
}
.wish-bubble.changed{
  animation:wish-change .28s steps(2,end);
}
.visited-stamps span{
  width:27px;
  height:19px;
}
.visited-stamps .item-coupon{
  width:100%;
  height:100%;
}
.visited-stamps .item-paper{
  stroke-width:2.5;
}
.visited-stamps .item-glyph{
  stroke-width:2.5;
}
.ride-feedback[data-cue=wish]{
  border-left-color:var(--gold);
  background:#fff7d8;
}
@keyframes wish-change{
  50%{transform:translateY(-5px) rotate(-2deg)}
}
@media(max-width:680px){
  .target-field{
    inset:18px 0 72px;
  }
  .moving-target{
    --target-width:68px;
    height:52px;
  }
  .wish-bubble{
    left:47%;
    bottom:29%;
    width:88px;
    min-height:62px;
  }
}
@media(max-width:340px){
  .moving-target{
    --target-width:64px;
    height:49px;
  }
  .wish-bubble{
    left:46%;
    width:84px;
  }
}
@media(prefers-reduced-motion:reduce){
  .wish-bubble.changed{
    animation:none;
  }
}

/* v9: four-lane stream above a separate rider-and-wish zone */
.ride-stage{
  background:var(--paper);
}
.ride-world{
  display:none;
}
.target-field{
  inset:0 0 35%;
  background:
    linear-gradient(to bottom,
      #fffdf7 0 25%,
      #f2eee5 25% 50%,
      #fffdf7 50% 75%,
      #f2eee5 75% 100%);
  border-bottom:3px solid var(--ink);
}
.target-field:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 calc(25% - 2px),
    rgba(36,51,76,.24) calc(25% - 2px) 25%
  );
  pointer-events:none;
}
.moving-target{
  --target-width:62px;
  z-index:1;
  top:calc(var(--lane) * 25% + 9px);
  height:46px;
  box-shadow:2px 2px 0 var(--ink);
}
.rider-zone{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:35%;
  overflow:hidden;
  background:
    linear-gradient(to bottom,
      #70b0cc 0 54%,
      #ffc644 54% 60%,
      #fdf8ef 60% 100%);
  pointer-events:none;
}
.rider-zone:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:17%;
  height:3px;
  background:var(--ink);
}
.road-flow{
  z-index:2;
  left:0;
  right:0;
  bottom:3%;
  height:10px;
}
.rider{
  z-index:5;
  left:21%;
  bottom:-1%;
  width:25%;
}
.wish-bubble{
  z-index:9;
  left:43%;
  bottom:6%;
  width:100px;
  min-height:68px;
}
.visited-stamps,
.coupon-counter{
  display:none;
}
@media(max-width:680px){
  .moving-target{
    --target-width:54px;
    height:40px;
  }
  .rider{
    left:18%;
    width:31%;
  }
  .wish-bubble{
    left:46%;
    bottom:6%;
    width:88px;
    min-height:62px;
  }
}
@media(max-width:340px){
  .moving-target{
    --target-width:50px;
    height:38px;
  }
  .rider{
    left:16%;
    width:32%;
  }
  .wish-bubble{
    left:44%;
    width:84px;
  }
}

/* v10: restore tappable density and the approved illustrated street */
.target-field{
  inset:0 0 38%;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.target-field:before{
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 calc(25% - 3px),
    rgba(36,51,76,.3) calc(25% - 3px) 25%
  );
}
.moving-target{
  --target-width:82px;
  top:calc(var(--lane) * 25% + 7px + var(--lane-nudge, 0px));
  height:60px;
  border-width:3px;
  box-shadow:3px 3px 0 var(--ink);
}
.rider-zone{
  height:38%;
  background-color:var(--paper);
  background-image:url("/games/2026-07-28-kiritani-support-ride/art/city-ride-world-v6.svg?v=10");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
}
.rider-zone:before{
  bottom:9%;
  height:4px;
}
.road-flow{
  left:3%;
  right:auto;
  bottom:3%;
  width:38px;
  height:8px;
  background:var(--gold);
  box-shadow:86px 0 var(--gold),172px 0 var(--gold),258px 0 var(--gold),344px 0 var(--gold),430px 0 var(--gold),516px 0 var(--gold),602px 0 var(--gold);
  animation:road-flow-v10 .58s steps(6,end) infinite;
}
.rider{
  left:9%;
  bottom:-1%;
  width:34%;
}
.wish-bubble{
  left:48%;
  bottom:8%;
  width:112px;
  min-height:74px;
  padding:6px 7px 7px;
}
.wish-item{
  width:48px;
  height:33px;
}
@keyframes road-flow-v10{
  to{transform:translateX(-86px)}
}
@media(max-width:680px){
  .moving-target{
    --target-width:76px;
    top:calc(var(--lane) * 25% + 6px + var(--lane-nudge, 0px));
    height:56px;
  }
  .rider{
    left:7%;
    width:38%;
  }
  .wish-bubble{
    left:50%;
    bottom:7%;
    width:106px;
    min-height:72px;
  }
}
@media(max-width:340px){
  .moving-target{
    --target-width:72px;
    height:54px;
  }
  .rider{
    left:6%;
    width:39%;
  }
  .wish-bubble{
    left:49%;
    width:102px;
  }
}
@media(prefers-reduced-motion:reduce){
  .road-flow{
    animation:none;
  }
}

/* v11: detailed real-world perk art and immediate moving-target input */
.moving-target{
  isolation:isolate;
}
.moving-target .item-coupon{
  shape-rendering:geometricPrecision;
}
.moving-target.hit{
  pointer-events:none;
}