/* Layout: full-bleed WebGL street. UI reads like a running app: white rounded cards, a heart-rate ring for the flow,
   distance in km, laps for the areas, a workout record at home. Palette and ornaments from a fitness UI kit (Adobe Stock) */
:root{
  --ink:#0b0e16;
  --paper:#ffffff;
  --paper-dim:rgba(255,255,255,.72);
  --card:rgba(255,255,255,.94);
  --text:#1b2433;
  --text-2:#5b6676;
  --blue:#0695ed;
  --blue-deep:#0473ba;
  --sky:#6ec6f4;
  --ice:#bce5fd;
  --ice-2:#e6f5fe;
  --peach:#fcc2aa;
  --peach-deep:#f08a62;
  --heart:#ff303b;
  --gold:#ffc44b;
  --r-card:20px;
  --f-ui:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-num:"Outfit","Zen Maru Gothic",system-ui,sans-serif;
  --shadow:0 10px 30px rgba(4,30,60,.28);
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--paper)}
body{margin:0;font-family:var(--f-ui);font-weight:500;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none} /* swipes only on the game canvas; the rest keeps the pinch that undoes a zoom (GAME_TOUCH_RULES 4) */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#veil{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(255,60,40,.42) 100%)}
#ui{position:fixed;inset:0;pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:max(12px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-bottom,0px))}
#ui button{pointer-events:auto;touch-action:manipulation;font-family:var(--f-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
#ui button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.screen{position:absolute;inset:0;padding:inherit;display:flex;flex-direction:column;pointer-events:none}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700}
.card{background:var(--card);color:var(--text);border-radius:var(--r-card);box-shadow:var(--shadow)}

/* ---------- shared bits ---------- */
.btn-go{position:relative;border:0;background:linear-gradient(135deg,#ffc24f,#f5862c);color:#3b1606;font-weight:700;font-size:20px;letter-spacing:.24em;padding:14px 34px 14px 46px;border-radius:999px;
  box-shadow:0 10px 26px rgba(245,134,44,.45),0 0 0 3px rgba(255,255,255,.28) inset;transition:transform .12s,filter .12s}
.btn-go::before{content:"";position:absolute;left:20px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#3b1606}
.btn-go::after{content:"";position:absolute;left:26px;top:50%;margin-top:-4px;border-left:6px solid #ffc24f;border-top:4px solid transparent;border-bottom:4px solid transparent}
.btn-go:hover{filter:brightness(1.07)}
.btn-go:active{transform:translateY(1px) scale(.98)}
/* the press that starts a run: a ripple from the finger and a ring going out, shown for a moment before the card goes (2026-10-22) */
.btn-go{overflow:hidden;isolation:isolate}
.btn-go .rip{position:absolute;z-index:-1;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;background:rgba(255,255,255,.62);transform:scale(0);animation:goRip .42s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
.btn-go.launch{animation:goRing .42s ease-out;filter:brightness(1.1)}
@keyframes goRip{to{transform:scale(1);opacity:0}}
@keyframes goRing{0%{box-shadow:0 10px 26px rgba(245,134,44,.45),0 0 0 3px rgba(255,255,255,.28) inset,0 0 0 0 rgba(255,214,120,.75)}100%{box-shadow:0 10px 26px rgba(245,134,44,.45),0 0 0 3px rgba(255,255,255,.28) inset,0 0 0 22px rgba(255,214,120,0)}}
@media (prefers-reduced-motion:reduce){.btn-go .rip,.btn-go.launch{animation-duration:.01s}}
/* the title's 帰る beats like a heart (lub-dub) with a glow going out on each beat: something that wants pressing (2026-10-23).
   Pressed or hovered it holds still; the press ripple and launch ring take over */
#btnStart{animation:goBeat 1.3s ease-in-out infinite}
#btnStart:hover{animation-play-state:paused;filter:brightness(1.08)}
#btnStart:active{animation:none;transform:translateY(1px) scale(.97)}
#btnStart.launch{animation:goRing .42s ease-out}
@keyframes goBeat{
  0%,100%{transform:scale(1);box-shadow:0 10px 26px rgba(245,134,44,.45),0 0 0 3px rgba(255,255,255,.28) inset,0 0 0 0 rgba(255,200,110,.55)}
  10%{transform:scale(1.07)}
  20%{transform:scale(.995)}
  30%{transform:scale(1.045)}
  48%{transform:scale(1)}
  70%{box-shadow:0 10px 26px rgba(245,134,44,.45),0 0 0 3px rgba(255,255,255,.28) inset,0 0 0 16px rgba(255,200,110,0)}
}
@media (prefers-reduced-motion:reduce){#btnStart{animation:none}}
.go-fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;transition:opacity .4s ease}
.go-fx i{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;transform:scale(0)}
.go-fx i:first-child{background:radial-gradient(circle,#ffd27a 0,#f5862c 70%);animation:goWave .5s cubic-bezier(.55,0,.2,1) forwards}
.go-fx i:last-child{border:3px solid rgba(255,255,255,.85);animation:goWave .5s .06s cubic-bezier(.3,.6,.3,1) forwards}
.go-fx.out{opacity:0}
@keyframes goWave{to{transform:scale(1)}}
.btn-ghost{border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;letter-spacing:.06em;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;padding:inherit}
.hud-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px 14px}
.hud-card{background:var(--card);color:var(--text);border-radius:18px;box-shadow:var(--shadow)}
.stats{display:flex;align-items:center;gap:4px;padding:8px 10px 8px 14px}
.stat{display:flex;flex-direction:column;line-height:1}
.stat .lbl{font-family:var(--f-num);font-weight:600;font-size:10px;letter-spacing:.16em;color:var(--text-2)}
.st-time b{font-size:clamp(24px,3.6vw,30px);margin-top:3px;letter-spacing:.01em}
.st-score{padding-left:12px;margin-left:4px;border-left:1.5px solid var(--ice)}
.st-score b{font-size:clamp(18px,2.6vw,22px);margin-top:4px;color:var(--blue)}
.st-score b.up{animation:scup .35s ease-out}
@keyframes scup{0%{transform:scale(1.25);color:var(--peach-deep)}100%{transform:none}}
/* flow shown as a heart-rate ring: the ring fills with the flow, the heart beats at the bpm */
.st-hr{position:relative;width:58px;height:58px;margin:0 6px 0 12px;display:grid;place-items:center;--beat:.62s}
.st-hr .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring .trk{stroke:var(--ice)}
.ring .val{stroke:var(--blue);stroke-dasharray:0 100;transition:stroke-dasharray .4s ease,stroke .3s}
.st-hr.max .ring .val{stroke:var(--heart)}
.st-hr .heart{position:absolute;top:9px;left:50%;width:13px;height:13px;margin-left:-6.5px;fill:var(--heart);animation:beat var(--beat) ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.32)}36%{transform:scale(.96)}}
.hr-v{display:flex;flex-direction:column;align-items:center;margin-top:12px;line-height:.9}
.hr-v b{font-size:17px}
.hr-v small{font-family:var(--f-num);font-weight:600;font-size:8.5px;letter-spacing:.08em;color:var(--text-2)}
.hud-btns{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--blue);display:grid;place-items:center;padding:0;box-shadow:var(--shadow)}
.icon-btn svg{width:19px;height:19px;fill:currentColor}
.icon-btn.off{color:var(--text-2);opacity:.75}

/* distance: km so far, a track with the areas as laps */
#route{padding:9px 16px 6px;min-width:0}
#route .km{display:flex;align-items:baseline;gap:6px;line-height:1}
#route .km .ic{width:14px;height:14px;fill:var(--blue);align-self:center}
#route .km b{font-size:20px}
#route .km span{font-family:var(--f-num);font-weight:600;font-size:12px;color:var(--text-2)}
#route .km i{font-style:normal}
#route .track{position:relative;height:30px;margin-top:4px}
#route .rail{position:absolute;left:6px;right:6px;top:7px;height:6px;border-radius:3px;background:var(--ice)}
#route .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,var(--sky),var(--blue))}
#route ol{list-style:none;margin:0;padding:0;position:absolute;left:6px;right:6px;top:0;height:30px}
#route li{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
#route li i{width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--ice);box-sizing:border-box;margin-top:4px}
#route li.done i{border-color:var(--blue);background:var(--blue)}
#route li span{font-size:10px;font-weight:700;color:var(--text-2);white-space:nowrap}
#route li.now span{color:var(--blue)}
#route li:last-child i{border-radius:3px}
#route .me{position:absolute;top:-6px;left:6px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--peach-deep);display:grid;place-items:center;box-shadow:0 0 0 3px #fff,0 3px 10px rgba(240,138,98,.6)}
#route .me svg{width:15px;height:15px;fill:#fff}

/* lap card: a new area */
#station{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 10px);width:min(420px,calc(100vw - 32px));
  background:var(--card);color:var(--text);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);
  transform:translateX(calc(-100% - 40px));transition:transform .55s cubic-bezier(.2,.9,.2,1)}
#station.show{transform:none}
.st-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px 12px}
.st-num{width:58px;height:58px;border-radius:50%;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 5px var(--ice)}
.st-num small{font-family:var(--f-num);font-weight:600;font-size:10px;letter-spacing:.14em;opacity:.85}
.st-num b{font-family:var(--f-num);font-weight:800;font-size:24px}
.st-name{min-width:0}
.st-kana{font-size:11px;font-weight:700;color:var(--text-2);letter-spacing:.12em}
.st-kanji{font-weight:700;font-size:clamp(24px,5vw,32px);line-height:1.1;letter-spacing:.02em;text-wrap:balance}
.st-en{font-family:var(--f-num);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--blue);margin-top:2px}
.st-band{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--ice-2);color:var(--text-2);padding:8px 16px;font-size:12px;font-weight:700}
.st-band span:last-child{text-align:right}
.st-band em{font-style:normal;color:var(--blue);font-size:11px;letter-spacing:.06em}

#trick{position:absolute;left:0;right:0;top:40%;display:flex;flex-direction:column;align-items:center;gap:6px}
#trick div{font-weight:700;font-size:clamp(15px,2.6vw,19px);letter-spacing:.06em;color:#fff;padding:5px 16px;border-radius:999px;background:var(--blue);
  box-shadow:0 6px 18px rgba(6,149,237,.45);animation:trick .9s ease-out forwards}
#trick div.big{background:linear-gradient(90deg,var(--peach-deep),var(--gold));color:#2a1406;font-size:clamp(18px,3.4vw,25px);box-shadow:0 6px 22px rgba(240,138,98,.55)}
#trick div.warn{font-size:13px;background:var(--heart);box-shadow:0 6px 18px rgba(255,48,59,.45)}
/* comic praise by his head when a trick scores: COOL! / WOW! / SMASH! in Bangers, an inked outline, a pop then a drift up */
#comic{position:absolute;inset:0;overflow:hidden}
#comic div{position:absolute;left:0;top:0;font:400 clamp(19px,2.9vw,31px)/1 Bangers,Impact,var(--f-num);letter-spacing:.03em;white-space:nowrap;color:#ffd23a;
  transform:translate(-50%,-50%) rotate(var(--r,-8deg)) scale(0);animation:comicPop .9s cubic-bezier(.2,1.6,.4,1) forwards;
  text-shadow:2px 0 #17110b,-2px 0 #17110b,0 2px #17110b,0 -2px #17110b,1.5px 1.5px #17110b,-1.5px 1.5px #17110b,1.5px -1.5px #17110b,-1.5px -1.5px #17110b,3px 4px 0 rgba(23,17,11,.5)}
#comic div.big{color:#ff7a2a;font-size:clamp(23px,3.5vw,38px)}
#comic div.cool{color:#5fd2ff}
#comic div.smash{color:#fff}
@keyframes comicPop{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(0);opacity:1}18%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.25)}30%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}75%{opacity:1}100%{transform:translate(-50%,-75%) rotate(var(--r)) scale(1.04);opacity:0}}
@keyframes trick{0%{opacity:0;transform:translateY(10px) scale(.85)}14%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}

#hint{position:absolute;left:0;right:0;bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 20%);display:flex;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
#hint.show{opacity:1;transform:none}
#hint p{margin:0;display:flex;align-items:center;gap:12px;padding:7px 18px 7px 7px;background:var(--card);color:var(--text);border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.04em;box-shadow:var(--shadow)}
#hint b{color:var(--blue)}
#hint .pic{width:38px;height:38px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none}
#hint svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#hint kbd{font-family:var(--f-num);font-weight:600;font-size:13px;background:var(--ice-2);color:var(--blue-deep);padding:2px 8px;border-radius:6px}

/* ---------- ornaments (Adobe Stock, exported as WebP) ---------- */
.deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* the title's shapes sit behind the canvas (the live card covers them, like the screens in the kit) */
.deco-t{position:fixed;display:none}body.t-card .deco-t{display:block}
.deco img{position:absolute;display:block;height:auto;opacity:.92}
/* two big shapes only: one out of the top-right corner, one out of the bottom-left, cropped by the screen (small lone bits look like litter) */
.d-stripe,.d-stripe2{width:clamp(280px,32vw,440px);right:-130px;top:-130px;animation:floaty 9s ease-in-out infinite}
.d-dots{width:clamp(300px,30vw,440px);left:-150px;bottom:-150px;opacity:.6;animation:floaty 11s ease-in-out -4s infinite}
@media (max-width:620px){
  .d-stripe,.d-stripe2{width:250px;right:-130px;top:150px}
  .d-dots{width:280px;left:-140px;bottom:-130px}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Title: an app's landing page ----------
   Brand blue, a peach disc and a white ring behind the live run (the 3D canvas is moved and sized into the framed card),
   floating stat tiles on its corners, the copy and the call to action on the left, the courses as a row of menu cards below */
#title{display:block}
body.t-card{background:
  radial-gradient(circle at calc(100% - max(24px,5vw) - min(46vw,600px) + 2vw) calc(12vh + 1vw), #fcc2aa 0 min(12vw,170px), transparent calc(min(12vw,170px) + 1px)),
  radial-gradient(circle at calc(100% - 3vw) calc(12vh + min(56vh,430px) - 2vh), transparent 0 min(11vw,150px), rgba(255,255,255,.6) calc(min(11vw,150px) + 1px) calc(min(11vw,150px) + 3px), transparent calc(min(11vw,150px) + 4px)),
  linear-gradient(140deg,#0b8fe6 0%,#0675c4 55%,#05549a 100%)}
body.t-card #c{inset:auto;border-radius:24px}
.t-demo{position:absolute;right:max(24px,5vw);top:12vh;width:min(46vw,600px);height:min(56vh,430px);border-radius:24px;pointer-events:none;
  box-shadow:0 0 0 6px #fff,0 26px 60px rgba(2,24,52,.45)}
/* phones: a still of the course instead of the live run (nothing 3D is drawn on the title) */
.t-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px;display:block}
body.t-still #c{visibility:hidden}
body.t-still .t-demo .live{display:none}
.t-demo .live{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--text);font-family:var(--f-num);font-weight:700;font-size:11px;letter-spacing:.16em;padding:5px 11px 5px 9px;border-radius:999px;box-shadow:var(--shadow)}
.t-demo .live i{width:8px;height:8px;border-radius:50%;background:var(--heart);animation:beat 1.1s ease-in-out infinite}
.t-demo .t-demo-c{position:absolute;left:14px;bottom:14px;background:var(--blue);color:#fff;font-weight:700;font-size:12px;letter-spacing:.06em;padding:5px 12px;border-radius:999px}
/* stat tiles that float on the card's corners and follow the demo run */
.w-tile{position:absolute;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:#fff;color:var(--text);border-radius:18px;padding:9px 16px 9px 10px;box-shadow:0 14px 34px rgba(2,24,52,.32);animation:floaty 6s ease-in-out infinite}
.w-tile svg{grid-row:1 / 3;width:38px;height:38px;padding:9px;border-radius:50%;box-sizing:border-box}
.w-tile span{display:flex;align-items:baseline;gap:3px;line-height:1}
.w-tile b{font-size:22px}
.w-tile small{font-family:var(--f-num);font-weight:600;font-size:11px;color:var(--text-2)}
.w-tile em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-2)}
.w-hr{left:-38px;bottom:46px}
.w-hr svg{background:#ffe3d8;fill:var(--heart)}
.w-km{right:-30px;top:58px;animation-delay:-3s}
.w-km svg{background:var(--ice);fill:var(--blue)}
.t-wrap{position:absolute;left:max(24px,5vw);top:10vh;width:min(40vw,480px);display:flex;flex-direction:column;gap:14px}
.eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-num);font-weight:700;font-size:11px;letter-spacing:.28em;color:#3b1606;background:var(--peach);padding:6px 14px;border-radius:999px}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:#3b1606}
.t-copy span{display:block}
.t-copy{margin:0;color:#fff;font-size:16px;font-weight:700;line-height:1.75;letter-spacing:.04em;max-width:28em;text-shadow:0 2px 10px rgba(2,24,52,.35)}
.t-courses{position:absolute;left:max(24px,5vw);right:max(24px,5vw);bottom:max(28px,calc(3vh + 8px));display:flex;flex-direction:column;gap:10px}
.t-courses::before{content:"";position:absolute;z-index:-1;left:calc(-1 * max(24px,5vw));right:calc(-1 * max(24px,5vw));top:-114px;bottom:calc(-1 * max(28px,calc(3vh + 8px)));pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20960%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23073f75%22%20d%3D%22M0%2090V12h34V90zM34%2090V2h22V90zM45%202v-14h2v14zM56%2090V70h46V90zM64%2070v-10h30v10zM102%2090V72h22V90zM113%2072v-14h2v14zM124%2090V36h28V90zM152%2090V53h46V90zM198%2090V30h22V90zM209%2030v-14h2v14zM220%2090V52h22V90zM242%2090V69h58V90zM250%2069v-10h42v10zM300%2090V35h22V90zM311%2035v-14h2v14zM322%2090V9h58V90zM380%2090V47h40V90zM420%2090V30h58V90zM428%2030v-10h42v10zM478%2090V45h34V90zM512%2090V59h22V90zM523%2059v-14h2v14zM534%2090V43h34V90zM568%2090V17h22V90zM590%2090V29h46V90zM598%2029v-10h30v10zM636%2090V9h22V90zM658%2090V63h22V90zM680%2090V15h58V90zM738%2090V58h58V90zM767%2058v-14h2v14zM796%2090V71h46V90zM802%2071v-7h12v7zM842%2090V45h34V90zM876%2090V58h40V90zM884%2058v-10h24v10zM916%2090V11h34V90zM950%2090V43h34V90z%22/%3E%3C/svg%3E") 0 30px/960px 90px repeat-x,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20960%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%230d5fa8%22%20d%3D%22M0%20120V62h34V120zM6%2062v-7h12v7zM34%20120V24h40V120zM42%2024v-10h24v10zM74%20120V48h58V120zM103%2048v-14h2v14zM132%20120V14h28V120zM160%20120V9h22V120zM182%20120V65h34V120zM188%2065v-7h12v7zM216%20120V25h46V120zM262%20120V26h58V120zM320%20120V36h46V120zM366%20120V62h46V120zM412%20120V11h58V120zM470%20120V52h58V120zM476%2052v-7h12v7zM528%20120V31h46V120zM574%20120V58h46V120zM580%2058v-7h12v7zM620%20120V37h22V120zM642%20120V30h46V120zM648%2030v-7h12v7zM688%20120V33h46V120zM734%20120V45h46V120zM757%2045v-14h2v14zM780%20120V57h46V120zM826%20120V30h28V120zM854%20120V51h40V120zM862%2051v-10h24v10zM894%20120V19h22V120zM905%2019v-14h2v14zM916%20120V71h28V120zM944%20120V16h46V120z%22/%3E%3C/svg%3E") 0 0/960px 120px repeat-x,linear-gradient(180deg,transparent 118px,#073f75 118px,#052f5c 100%);
  animation:skyline 160s linear infinite} /* a deeper band with the town behind the course row: two skylines, the far one paler and slower */
@keyframes skyline{to{background-position:-1920px 30px,-960px 0,0 0}}
@media (prefers-reduced-motion:reduce){.t-courses::before{animation:none}}
@media (max-width:620px){.t-courses::before{display:none}}
/* the credit and the related pages, as on the other AMIX games: small, under the course band */
.t-foot{position:absolute;left:0;right:0;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) + 2px)); /* a little room under the line (2026-10-23) */display:flex;justify-content:center;align-items:center;gap:6px 0;flex-wrap:wrap;padding:0 16px;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.72);pointer-events:auto}
.t-foot a{color:#fff;text-decoration:none;opacity:.86}
.t-foot a:hover,.t-foot a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}
.t-foot .bar{margin:0 .4em;opacity:.5}
.t-foot nav{display:flex;align-items:center;gap:0}
.t-foot .sep{margin:0 .75em;opacity:.5}
.t-sec{font-family:var(--f-num);font-weight:700;font-size:12px;letter-spacing:.3em;color:#fff;display:flex;align-items:baseline;gap:12px}
.t-sec small{font-family:var(--f-ui);font-weight:700;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
/* course cards: a workout menu; locked ones open one by one */
.courses{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;pointer-events:auto}
.course{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;align-items:center;min-height:78px;padding:10px 12px 10px 10px;border:2px solid transparent;border-radius:18px;
  background:var(--card);color:var(--text);font-family:var(--f-ui);text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,transform .12s,background .15s}
.course .c-img{display:none}
.course .n{grid-row:1 / 4;width:38px;height:38px;border-radius:50%;background:var(--ice);color:var(--blue-deep);display:grid;place-items:center;font-family:var(--f-num);font-weight:800;font-size:15px}
.course .k{font-weight:700;font-size:15px;letter-spacing:.03em;line-height:1.25}
.course .t{font-family:var(--f-num);font-weight:600;font-size:12px;color:var(--text-2);letter-spacing:.04em;display:flex;align-items:center;gap:4px}
.course .t svg{width:12px;height:12px;fill:currentColor}
.course .x{margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--blue);display:flex;align-items:center;gap:4px}
.course .x svg{width:11px;height:11px;fill:currentColor}
.course.on{border-color:var(--blue);box-shadow:0 0 0 4px rgba(6,149,237,.25),var(--shadow)}
.course.on .n{background:var(--blue);color:#fff}
.course:not(.lock):not(.on):hover{transform:translateY(-2px)}
.course.lock{cursor:default;background:rgba(255,255,255,.62)}
.course.lock .n{background:#dfe4ea;color:#8a95a3}
.course.lock .k,.course.lock .t{color:#7d8896}
.course.lock .x{color:#7d8896}
/* the logo (image/logo.svg, black artwork) is turned white here */
.t-main{margin:0;line-height:0}
.t-main img,.t-main .logo{display:block;width:min(34vw,420px);height:auto;max-height:30vh;object-fit:contain;object-position:left center;overflow:visible}
.t-main img{filter:invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.t-main .logo,.f-main .logo{fill:#fff;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5))}
/* the logo comes in like a workout app warming up: kana tick in, 帰れない bounces up like a rep count,
   the three buildings rise out of the ground and the runner dashes in over them, the English slides in at pace */
.logo *{transform-box:fill-box}
.logo.go .lg-kana .lg-ch{animation:lgUp .42s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * 34ms)}
.logo.go .lg-main .lg-ch{transform-origin:50% 100%;animation:lgRep .6s cubic-bezier(.2,1.7,.35,1) both;animation-delay:calc(.22s + var(--i) * 70ms)}
.logo.go .lg-en1 .lg-ch,.logo.go .lg-en2 .lg-ch{animation:lgPace .5s cubic-bezier(.15,1.15,.3,1) both;animation-delay:calc(.62s + var(--i) * 32ms)}
.logo.go .lg-en2 .lg-ch{animation-delay:calc(.74s + var(--i) * 32ms)}
.logo.go .lg-bar{transform-origin:50% 100%;animation:lgRise .55s cubic-bezier(.2,1.35,.4,1) both;animation-delay:calc(.42s + var(--i) * 90ms)}
.logo.go .lg-run{animation:lgDash .62s cubic-bezier(.12,.9,.3,1.12) .62s both}
@keyframes lgUp{0%{opacity:0;transform:translateY(60%)}100%{opacity:1;transform:none}}
@keyframes lgRep{0%{opacity:0;transform:translateY(18%) scale(.55)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lgPace{0%{opacity:0;transform:translateX(70%) skewX(-14deg)}100%{opacity:1;transform:none}}
@keyframes lgDash{0%{opacity:0;transform:translateX(-90%) skewX(-18deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lgRise{0%{transform:scaleY(0)}100%{transform:none}}
/* the difficulty next to SOUND, in the same row (the title does not grow taller) */
.t-diff{display:inline-flex;gap:2px;padding:3px;background:var(--card);border-radius:999px;box-shadow:var(--shadow)}
.t-diff button{border:0;background:none;color:var(--text-2);font-weight:700;font-size:12px;letter-spacing:.08em;padding:5px 12px;border-radius:999px;transition:background .15s,color .15s}
.t-diff button[aria-checked="true"]{background:var(--blue);color:#fff}
body.tut .t-diff{display:none}
.r-easy{margin-left:6px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--blue);padding:1px 7px;border-radius:999px;vertical-align:1px}
.t-best{align-self:flex-start;font-size:12px;font-weight:700;color:var(--text);letter-spacing:.06em;display:flex;align-items:center;gap:6px;background:var(--card);padding:6px 12px 6px 10px;border-radius:999px;box-shadow:var(--shadow)}
.t-best svg{width:14px;height:14px;fill:var(--blue)}
.t-best b{font-size:17px;color:var(--blue)}
#help{box-sizing:border-box;pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;font-size:13px;line-height:1.55;
  background:var(--card);color:var(--text);padding:0 18px;max-width:480px;max-height:0;overflow:hidden;border-radius:var(--r-card);box-shadow:var(--shadow);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:20% 0;margin-top:-16px;visibility:hidden;
  transition:max-height .42s cubic-bezier(.2,.9,.25,1),padding .42s cubic-bezier(.2,.9,.25,1),margin .42s cubic-bezier(.2,.9,.25,1),opacity .25s,transform .42s cubic-bezier(.2,1.2,.35,1),visibility 0s .42s}
#help.open{max-height:46vh;padding:16px 18px;margin-top:0;opacity:1;transform:none;overflow:auto;visibility:visible;transition-delay:0s}
#help dt,#help dd{transition:opacity .3s .12s,transform .3s .12s}
#help.over{position:fixed;z-index:12;margin:0;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 16px 40px rgba(0,30,70,.35)} /* a short desktop window: over the LIVE card (fitHelp) */
body.help-over .t-demo .w-tile{visibility:hidden} /* (the small tiles sticking out past the card's edges) */
#help dt{font-weight:700;color:var(--blue);white-space:nowrap}
#help dd{margin:0;color:var(--text-2)}
#help .h-links{grid-column:1 / -1;font-size:12px;padding-top:6px;border-top:1px solid var(--ice-2)}
#help .h-links{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
#help .h-links a{color:var(--blue-deep);font-weight:700}
#help .h-cr{margin-left:auto;color:var(--text-2,#5b6676);font-weight:500}
#help .h-cr a{font-weight:700}
#help:not(.open) dt,#help:not(.open) dd{opacity:0;transform:translateY(4px)}
/* while the how-to card is open the logo makes room and the copy steps aside, so everything stays on screen */
.t-main img,.t-main .logo{transition:max-height .42s cubic-bezier(.2,.9,.25,1)}
#title:has(#help.open) .t-main img,#title:has(#help.open) .t-main .logo{max-height:16vh}
#title:has(#help.open) .t-copy,#title:has(#help.open) .t-best{display:none}
@media (min-width:621px){#title #help.open{max-height:calc(74vh - 350px)}} /* the height is set by fitHelp (above the course list with room) */
@media (max-width:620px){#help.open{max-height:34vh}}
/* sound: shown on the title before anything plays (GAME_AUDIO_RULES 2.5); quieter than the start button */
.btn-snd{display:flex;align-items:center;gap:6px;border:0;background:var(--card);color:var(--text);padding:7px 12px 7px 9px;border-radius:999px;box-shadow:var(--shadow);font-family:var(--f-num);font-size:11px;font-weight:600;letter-spacing:.12em}
.btn-snd svg{width:17px;height:17px;fill:var(--blue);stroke:var(--blue);stroke-width:0}
.btn-snd .x{fill:none;stroke-width:2.2;stroke-linecap:round;display:none}
.btn-snd b{font-weight:800;color:var(--blue);min-width:2.2em;text-align:left}
.btn-snd.off svg{fill:var(--text-2);stroke:var(--text-2)}
.btn-snd.off .wv{display:none}.btn-snd.off .x{display:block}
.btn-snd.off b{color:var(--text-2)}
/* the voice alone can be turned off; with the sound off it is off too and cannot be turned on */
.btn-vo .x{stroke:#fff;stroke-width:2;stroke-linecap:round;fill:none;display:none}
.btn-vo.off .sp{fill:var(--text-2)}.btn-vo.off .x{display:block}
.btn-vo:disabled{opacity:.45;cursor:default}
#pause .btn-vo{align-self:center;margin-top:4px}
/* a narrow desktop title: 音 / 声 instead of SOUND / VOICE, so the two and the difficulty stay on one line above the course list */
.btn-snd .ja{display:none;font-family:var(--f-ja,inherit);letter-spacing:.04em;font-size:12px}
@media (min-width:621px) and (max-width:1180px){.t-wrap .btn-snd span:not(.ja){display:none}.t-wrap .btn-snd .ja{display:inline}}

/* ---------- Fail ---------- */
#fail{justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 30% 50%,rgba(3,14,30,.35),rgba(3,14,30,.85))}
.f-wrap{display:flex;flex-direction:column;gap:16px;max-width:560px;width:100%}
.f-main{margin:0;line-height:0}
.f-main img,.f-main .logo{display:block;width:clamp(200px,32vw,400px);height:auto;max-height:34vh;object-fit:contain;object-position:left center;transform-origin:30% 50%;
  animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both}
.f-main img{filter:invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.55))}
@keyframes stamp{0%{transform:scale(1.4) rotate(-3deg);opacity:0}100%{transform:none;opacity:1}}
.f-board{overflow:hidden;animation:cardin .45s .1s cubic-bezier(.2,1.3,.4,1) both}
@keyframes cardin{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.f-head{display:flex;align-items:center;gap:10px;padding:14px 16px 0;font-size:13px;font-weight:700;color:var(--text-2)}
.f-head .tag{display:flex;align-items:center;gap:5px;background:var(--heart);color:#fff;font-weight:700;font-size:12px;padding:4px 11px 4px 9px;border-radius:999px;letter-spacing:.1em}
.f-head .tag svg{width:12px;height:12px;fill:#fff}
.f-msg{padding:8px 16px 16px;font-size:clamp(17px,2.8vw,21px);font-weight:700;line-height:1.5}

/* ---------- Result: the workout record ---------- */
#result{justify-content:flex-end;background:linear-gradient(180deg,rgba(3,14,30,0) 26%,rgba(3,14,30,.5) 60%,rgba(3,14,30,.86))}
.r-wrap{position:relative;display:flex;flex-direction:column;gap:16px;max-width:760px}
.r-main{margin:0;font-family:var(--f-ui);font-weight:700;font-size:clamp(52px,11vw,104px);line-height:1;letter-spacing:.02em;text-shadow:0 4px 0 var(--blue),0 10px 30px rgba(0,0,0,.4)}
.ticket{position:relative;width:min(480px,100%);padding:14px 18px 16px;overflow:hidden;animation:cardin .5s cubic-bezier(.2,1.3,.4,1) both}
.tk-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-num);font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.08em}
.chip{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;background:var(--blue);padding:4px 12px;border-radius:999px}
.tk-route{display:flex;align-items:center;gap:12px;font-weight:700;font-size:clamp(19px,4vw,24px);margin:12px 108px 12px 0}
.tk-route span{display:flex;align-items:center;gap:5px}
.tk-route svg{width:20px;height:20px;fill:var(--blue)}
.tk-route i{flex:1;height:0;border-top:3px dotted var(--sky);position:relative}
.tk-route i::after{content:"";position:absolute;right:-3px;top:-7px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.tk-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tk-rows div{display:flex;flex-direction:column;gap:3px;background:var(--ice-2);border-radius:14px;padding:8px 10px}
.tk-rows span{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-2)}
.tk-rows b{font-size:clamp(20px,3.8vw,26px);line-height:1;color:var(--text)}
.tk-rows b i{font-style:normal}
.tk-rows b small{font-size:11px;font-weight:600;color:var(--text-2);margin-left:2px}
.tk-stamp{position:absolute;right:16px;top:46px;width:84px;height:84px;border-radius:50%;background:var(--peach);color:#7a2c10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px #fff,0 0 0 7px var(--peach),0 6px 18px rgba(240,138,98,.45);transform:rotate(-10deg);font-weight:700;text-align:center;line-height:1.15;font-size:14px;animation:stampin .5s .35s cubic-bezier(.2,1.6,.4,1) both}
.tk-stamp small{font-family:var(--f-num);font-weight:600;font-size:10px;letter-spacing:.04em;margin-top:3px;opacity:.85}
@keyframes stampin{0%{transform:rotate(-10deg) scale(1.6);opacity:0}100%{transform:rotate(-10deg) scale(1);opacity:1}}
.tk-score{margin-top:12px;padding-top:10px;border-top:1.5px solid var(--ice);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tk-score dl{margin:0;display:grid;grid-template-columns:auto auto;gap:2px 14px;font-size:12px;font-weight:700;color:var(--text-2)}
.tk-score dt small{font-family:var(--f-num);font-weight:600;font-size:11px}
.tk-score dd{margin:0;font-family:var(--f-num);font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.tk-total{display:flex;flex-direction:column;align-items:flex-end}
.tk-total span{font-family:var(--f-num);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--text-2)}
.tk-total b{font-size:clamp(34px,7vw,46px);line-height:1;color:var(--blue)}
.r-new{align-self:flex-start;display:flex;align-items:center;gap:6px;color:#2a1406;background:linear-gradient(90deg,var(--peach),var(--gold));font-size:13px;font-weight:700;letter-spacing:.1em;padding:6px 14px 6px 10px;border-radius:999px;box-shadow:0 6px 18px rgba(255,196,75,.4)}
.r-new svg{width:15px;height:15px;fill:#2a1406}

/* ---------- Pause / Loading ---------- */
#pause{justify-content:center;align-items:flex-start;background:rgba(3,14,30,.62)}
#pause h2{margin:0 0 6px;font-family:var(--f-ui);font-weight:700;font-size:28px;color:var(--text)}
.p-col{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding:20px 22px;pointer-events:auto}
.p-col .btn-ghost{border-color:var(--ice);background:var(--ice-2);color:var(--blue-deep)}
/* loading: a warm-up screen (pace ring with the percentage, a heartbeat line), then the gate: tap or Enter to come in */
#loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:auto;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 88% 12%,rgba(252,194,170,.95) 0 15vmax,transparent 15.1vmax),radial-gradient(circle at 88% 12%,transparent 0 19vmax,rgba(255,255,255,.5) 19.1vmax 19.5vmax,transparent 19.6vmax),radial-gradient(circle at 6% 96%,rgba(255,255,255,.12) 0 22vmax,transparent 22.1vmax),linear-gradient(160deg,#0b8fe6 0%,#0675c4 52%,#05549a 100%);
  transition:opacity .5s .25s}
#loading::after{content:"";position:absolute;left:50%;top:var(--goY,62%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--peach,#fcc2aa);transform:scale(0);pointer-events:none}
#loading.go::after{animation:ldWipe .62s cubic-bezier(.6,0,.3,1) forwards}
@keyframes ldWipe{0%{transform:scale(0)}100%{transform:scale(260)}}
#loading.gone{opacity:0}
.ld-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}
.ld-eye{font:800 12px/1 var(--f-num);letter-spacing:.34em;color:#3b1606;background:var(--peach,#fcc2aa);padding:6px 14px 6px 17px;border-radius:999px}
.ld-ring{position:relative;width:min(44vmin,200px);aspect-ratio:1;display:grid;place-items:center}
.ld-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ld-ring circle{fill:none;stroke-linecap:round}
.ld-ring .tick{stroke:rgba(255,255,255,.45);stroke-width:1.6;stroke-dasharray:1.2 5.4;transform-origin:60px 60px;animation:ldSpin 14s linear infinite}
.ld-ring .trk{stroke:rgba(255,255,255,.18);stroke-width:7}
.ld-ring .val{stroke:#fff;stroke-width:7;stroke-dasharray:0 100;transition:stroke-dasharray .35s ease-out;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
@keyframes ldSpin{to{transform:rotate(360deg)}}
.ld-n{position:relative;display:flex;align-items:baseline;gap:2px;font-family:var(--f-num);line-height:1}
.ld-n b{font-weight:800;font-size:min(17vmin,74px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ld-n small{font-weight:700;font-size:min(5vmin,22px);opacity:.85}
.ld-ecg{width:min(70vw,300px);height:auto;overflow:visible}
.ld-ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ld-ecg .base{stroke:rgba(255,255,255,.2);stroke-width:2}
.ld-ecg .beat{stroke:#fff;stroke-width:3;stroke-dasharray:22 100;stroke-dashoffset:100;animation:ldBeat 1.15s linear infinite;filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
@keyframes ldBeat{to{stroke-dashoffset:-22}}
#loading p{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.88);min-height:1.4em}
.ld-go{margin-top:6px;border:0;border-radius:999px;padding:16px 34px;font:800 17px/1 var(--f-ui);letter-spacing:.08em;color:#fff;
  background:linear-gradient(180deg,#ff9a3c,#ff6a1a);box-shadow:0 10px 26px rgba(120,40,0,.35),inset 0 1px 0 rgba(255,255,255,.35);animation:ldPulse 1.4s ease-in-out infinite;cursor:pointer}
.ld-go:focus-visible{outline:3px solid #fff;outline-offset:4px}
.ld-go .t-key{display:none;font-family:var(--f-num);letter-spacing:.18em}
.ld-go kbd{font:inherit;border:2px solid rgba(255,255,255,.85);border-radius:8px;padding:2px 8px;margin-left:4px}
@media (hover:hover) and (pointer:fine){ .ld-go .t-tap{display:none} .ld-go .t-key{display:inline} }
@keyframes ldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#loading.ready .ld-ecg .beat{animation-duration:.62s}
#loading.ready .ld-ring .val{stroke:var(--peach,#fcc2aa);filter:drop-shadow(0 0 10px rgba(252,194,170,.9))}
#loading.ready #loadP{display:none}
.ld-snd{margin-top:2px;font-size:12px} /* the sound setting before coming in: the press below starts the title music when it is ON */
#loading.go .ld-core{transition:transform .5s cubic-bezier(.6,0,.3,1),opacity .4s;transform:scale(1.08);opacity:0}
@media (prefers-reduced-motion:reduce){ .ld-ring .tick,.ld-ecg .beat,.ld-go{animation:none} #loading.go::after{animation:none} }
/* a course change (the page reloads): no gate, no numbers, just a small ring and the course name */
#loading.quick{background:linear-gradient(160deg,#0b8fe6 0%,#0675c4 52%,#05549a 100%);transition-delay:0s}
#loading.quick .ld-eye,#loading.quick .ld-ecg,#loading.quick .ld-n{display:none}
#loading.quick .ld-ring{width:58px}
#loading.quick .ld-ring .tick{display:none}
#loading.quick .ld-ring .trk,#loading.quick .ld-ring .val{stroke-width:9}
#loading.quick p{font-size:14px;letter-spacing:.16em}
@media (max-width:620px){
  .t-courses{top:max(12px,env(safe-area-inset-top,0px));bottom:auto;left:16px;right:16px}
  .t-sec{display:none}
  .t-demo{left:16px;right:16px;width:auto;top:186px;height:min(25vh,226px)}
  .w-hr{left:10px;bottom:44px;padding:6px 12px 6px 7px}.w-km{right:10px;top:10px;padding:6px 12px 6px 7px}
  .w-tile svg{width:30px;height:30px;padding:7px}.w-tile b{font-size:17px}.w-tile em{display:none}
  .t-wrap{left:16px;right:16px;top:auto;bottom:max(30px,calc(env(safe-area-inset-bottom,0px) + 18px));width:auto;gap:10px} /* (room for the links below) */
  .eyebrow{display:none}
  .t-copy{font-size:14px;line-height:1.65}
  .t-main img,.t-main .logo{width:min(64vw,300px);max-height:19vh}
  body.t-card{background:radial-gradient(circle at 24% 190px,#fcc2aa 0 26vw,transparent calc(26vw + 1px)),linear-gradient(160deg,#0b8fe6 0%,#0675c4 55%,#05549a 100%)}
  .hud-top{grid-template-columns:auto minmax(0,1fr) auto}
  #route{grid-column:1 / -1;grid-row:2;padding:7px 14px 4px}
  #route .km b{font-size:17px}
  #route li span{font-size:9.5px}
  #route li:not(.now):not(:last-child) span{opacity:0}
  .stats{padding:6px 8px 6px 12px}
  .st-hr{width:50px;height:50px;margin:0 4px 0 8px}
  .st-hr .heart{top:7px}
  .hr-v{margin-top:10px}
  .hr-v b{font-size:15px}
  .btn-go{font-size:18px;padding:13px 28px 13px 44px}
  .courses{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  .course{min-height:66px;padding:8px 10px 8px 8px;column-gap:8px}
  .course .n{width:32px;height:32px;font-size:13px}
  .course .k{font-size:14px}
  .tk-stamp{width:70px;height:70px;font-size:12px;top:46px}
  .tk-route{margin-right:90px}
  .tk-rows{gap:6px}
  .tk-rows div{padding:7px 8px}
}
@media (orientation:landscape) and (max-height:500px){
  .t-main img,.t-main .logo{max-height:34vh}
  .t-wrap{gap:10px}
  #help{display:none}
  #station{width:min(380px,60vw)}
  .st-kanji{font-size:22px}
}
@media (prefers-reduced-motion:reduce){#comic div{animation-duration:.01s!important;display:none}#help,#help dt,#help dd{transition-duration:.01s!important}.logo *,.deco img,.st-hr .heart,.ld-ring .ic{animation:none!important}#trick div,.f-main img,.f-main .logo,.tk-stamp,.f-board,.ticket{animation-duration:.01s}#ticker p{animation:none;padding-left:0}}
/* ---------- near miss ---------- */
#nm{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 52%,transparent 52%,rgba(110,198,244,.36) 86%,rgba(188,229,253,.58) 100%)}
#nm.big{background:radial-gradient(ellipse at 50% 52%,transparent 50%,rgba(252,194,170,.4) 86%,rgba(255,226,170,.6) 100%)}
#nm.on{animation:nmf .62s ease-out}
@keyframes nmf{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#trick div.nm{background:var(--sky);color:#04304f;font-style:italic;letter-spacing:.14em}
#trick div.nm.big{background:linear-gradient(90deg,var(--peach),var(--gold));color:#2a1406;font-size:clamp(22px,4.4vw,34px)}
/* ---------- homecoming ---------- */
#cine i{position:fixed;left:0;right:0;height:0;background:#030306;transition:height .9s cubic-bezier(.3,.7,.2,1);z-index:1}
#cine i:first-child{top:0} #cine i:last-child{bottom:0}
#cine.on i{height:9vh}
#greet{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(9vh + 7vh);gap:12px;z-index:2}
#greet p{margin:0;font-family:var(--f-ui);font-weight:700;color:#fff7e6;opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1);text-shadow:0 0 30px rgba(255,170,80,.75),0 2px 3px rgba(0,0,0,.55);letter-spacing:.28em;padding-left:.28em}
#greet .me{font-size:clamp(17px,3vw,25px);color:rgba(255,247,230,.88)}
#greet .you{font-size:clamp(42px,8.4vw,86px)}
#greet p.on{opacity:1;transform:none}
#greet .skip{position:fixed;right:18px;bottom:calc(9vh + 12px);font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-shadow:none;color:rgba(255,255,255,.6);transform:none;padding:0}
#greet .skip.on{opacity:1}
@media (prefers-reduced-motion:reduce){#greet p,#cine i{transition-duration:.01s}}
/* ---------- warm-up (course 00) ----------
   the board as 3 × 2 cards on a wide screen (00 first, with its own tag), the STOP / praise card, やめる, the completion card */
.tag0{display:inline-block;vertical-align:2px;margin-left:8px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1;color:#7a2c10;background:var(--peach);padding:3px 8px;border-radius:999px}
@media (min-width:621px){
  .courses{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
  /* two lines: the name, then the time and the record side by side (a third column split the narrow card) */
  .course{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"n k k" "n t x";grid-template-rows:auto auto;row-gap:3px;min-height:60px;padding:9px 14px 9px 10px}
  .course .n{grid-area:n}
  .course .k{grid-area:k;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .course .t{grid-area:t}
  .course .x{grid-area:x;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
  .course .x::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45;margin:0 6px 0 8px;flex:none}
}
@media (min-width:1180px){.courses{grid-template-columns:repeat(3,minmax(0,1fr))}}
}
@media (min-width:621px) and (max-width:1179px){ /* the board takes three rows here: the logo, the copy and the demo give it room */
  .t-wrap{top:6vh;gap:10px}
  .t-main img,.t-main .logo{max-height:21vh}
  .t-copy{font-size:14px;line-height:1.6}
  .t-demo{top:7vh;height:min(44vh,400px)}
}
@media (min-width:621px) and (max-height:700px){ /* a short window: the best time is on the course cards anyway */
  .t-best{display:none}
  .t-main img,.t-main .logo{max-height:17vh}
  .t-wrap{gap:8px}
} /* three across only where a card stays wide enough to read (about 340 px) */
@media (max-width:620px){.tag0{position:absolute;top:-8px;right:10px;margin:0;padding:3px 8px;font-size:10px;box-shadow:0 2px 6px rgba(4,30,60,.2)}} /* a badge on the card's edge: the card keeps the others' height */
body.tut .st-time,body.tut .st-score{display:none} /* no clock and no score in the warm-up: the heart rate and the distance stay */
body.tut .stats{padding:6px}
body.tut .st-hr{margin:0}
.btn-quit{height:44px;border:0;border-radius:999px;background:var(--card);color:var(--text);font-weight:700;font-size:14px;letter-spacing:.08em;padding:0 18px;box-shadow:var(--shadow)}
#tCard{position:absolute;left:0;right:0;top:calc(max(12px,env(safe-area-inset-top,0px)) + 92px);display:flex;justify-content:center;padding:0 16px}
#tCard .tc-box{width:min(440px,100%);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;align-items:center;padding:16px 18px;pointer-events:auto;animation:cardin .35s cubic-bezier(.2,1.3,.4,1) both}
#tCard.nope .tc-box{animation:tcNope .32s ease}
@keyframes tcNope{0%,100%{transform:none}25%{transform:translateX(-7px)}60%{transform:translateX(6px)}}
.tc-pic{grid-row:1 / 3;width:56px;height:56px;border-radius:50%;background:var(--blue);display:grid;place-items:center;box-shadow:0 0 0 5px var(--ice)}
.tc-pic svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tc-head{display:flex;align-items:center;gap:10px;min-width:0}
.tc-tag{font-family:var(--f-num);font-weight:800;font-size:11px;letter-spacing:.2em;color:#fff;background:var(--heart);padding:4px 9px 4px 11px;border-radius:999px;flex:none}
#tCard h3{margin:0;font-weight:700;font-size:22px;letter-spacing:.04em;line-height:1.25;color:var(--text)}
.tc-do{margin:0;font-weight:700;font-size:16px;color:var(--blue-deep);line-height:1.6}
.tc-do kbd,.td-card kbd{font-family:var(--f-num);font-weight:600;font-size:13px;background:var(--ice-2);color:var(--blue-deep);padding:2px 8px;border-radius:6px;border:1px solid var(--ice)}
.tc-sub{grid-column:1 / -1;margin:4px 0 0;font-size:13.5px;line-height:1.65;color:var(--text-2)}
.tc-next{grid-column:1 / -1;justify-self:end;margin-top:6px;font-size:16px;letter-spacing:.16em;padding:10px 22px 10px 40px}
.tc-next::before{left:16px;width:14px;height:14px;margin-top:-7px}.tc-next::after{left:21px;margin-top:-3.5px;border-left-width:5px;border-top-width:3.5px;border-bottom-width:3.5px}
.tc-next kbd{font-family:var(--f-num);font-weight:600;font-size:11px;letter-spacing:.04em;background:rgba(59,22,6,.14);padding:2px 6px;border-radius:5px;margin-left:4px}
.tc-next:disabled{opacity:.45;cursor:default;filter:none}
/* STOP: the move is the only way on, shown big and breathing */
#tCard.stop .tc-do{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:19px;padding:10px 12px;margin-top:4px;border-radius:14px;background:var(--ice-2);color:var(--blue-deep)}
#tCard.stop .tc-do kbd{font-size:18px;padding:5px 12px;border-radius:9px;background:#fff;border:2px solid var(--blue);box-shadow:0 3px 0 var(--blue-deep);animation:tcKey 1.1s ease-in-out infinite}
#tCard.stop .tc-now{font:800 11px/1 var(--f-num),var(--f-ui);letter-spacing:.12em;color:#fff;background:var(--heart,#ff303b);padding:5px 9px;border-radius:999px}
#tCard.stop .tc-go{font-size:13px;font-weight:700;color:var(--text-2,#5b6676)}
@keyframes tcKey{0%,100%{transform:translateY(0);box-shadow:0 3px 0 var(--blue-deep)}50%{transform:translateY(2px);box-shadow:0 1px 0 var(--blue-deep)}}
@media (prefers-reduced-motion:reduce){#tCard.stop .tc-do kbd{animation:none}}
#tCard.ok .tc-pic{background:linear-gradient(135deg,var(--peach-deep),var(--gold));box-shadow:0 0 0 5px #ffe9d8}
#tCard.ok .tc-tag{background:linear-gradient(90deg,var(--peach-deep),var(--gold));color:#2a1406}
#tCard.ok .tc-sub{font-size:15px;font-weight:700;color:var(--text)}
#tdone{justify-content:center;background:linear-gradient(180deg,rgba(3,14,30,.2),rgba(3,14,30,.82))}
.td-wrap{display:flex;flex-direction:column;gap:16px;max-width:560px;width:100%}
.td-main{margin:0;font-weight:700;font-size:clamp(28px,6.4vw,54px);white-space:nowrap;line-height:1.1;letter-spacing:.04em;text-shadow:0 4px 0 var(--blue),0 10px 30px rgba(0,0,0,.4)}
.td-card{padding:16px 18px;animation:cardin .5s cubic-bezier(.2,1.3,.4,1) both}
.td-card p{margin:0;font-size:14px;line-height:1.7;color:var(--text-2)}
.td-card .td-lead{font-weight:700;font-size:15px;color:var(--text)}
.td-list{list-style:none;margin:12px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.td-list li{display:flex;align-items:center;gap:7px;background:var(--ice-2);border-radius:12px;padding:8px 10px;font-weight:700;font-size:14px;color:var(--text)}
.td-list li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2012.5l4%204L18%208%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/14px no-repeat}
#tdone .row{pointer-events:auto}
@media (max-width:620px){
  #tCard{top:calc(max(12px,env(safe-area-inset-top,0px)) + 146px)} /* under the distance bar, which takes a row of its own here */
  #tCard .tc-box{padding:14px 14px;column-gap:12px}
  .tc-pic{width:46px;height:46px}.tc-pic svg{width:26px;height:26px}
  #tCard h3{font-size:19px}
  .tc-do{font-size:15px}
  .td-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn-quit{height:40px;padding:0 14px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){#tCard .tc-box,.td-card{animation-duration:.01s}}

/* ---------- phone title: one scrolling column (2026-10-23, 本人：無理に一画面に収めずスクロールでよい) ----------
   the call to action first, then the run (a still of the course), the courses with a picture each, and the footer */
@media (max-width:620px){
  #title:not([hidden]){display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch;pointer-events:auto;padding-top:max(18px,env(safe-area-inset-top,0px))} /* up and down only: it swayed sideways on a phone (overflow-x was auto) */
  #title .t-wrap{position:relative;order:1;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:0 16px;flex:none}
  #title .t-demo{position:relative;order:2;left:auto;right:auto;top:auto;width:auto;height:auto;aspect-ratio:16 / 10;margin:30px 16px 0;flex:none}
  #title .t-courses{position:relative;order:3;left:auto;right:auto;top:auto;bottom:auto;margin:30px 16px 0;flex:none}
  #title .t-courses::before{display:none}
  #title .t-sec{display:flex}
  #title .t-foot{position:relative;order:4;left:auto;right:auto;bottom:auto;margin:26px 0 0;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 22px);font-size:11px;flex:none;row-gap:4px}
  .t-main img,.t-main .logo{width:min(76vw,330px);max-height:none}
  #help.open{max-height:none}
  body.t-card{background:radial-gradient(circle at 80% calc(120px + var(--sy,0px)),#fcc2aa 0 26vw,transparent calc(26vw + 1px)),linear-gradient(160deg,#0b8fe6 0%,#0675c4 55%,#05549a 100%)}
  /* the course list in one column (本人: 1カラムの方が綺麗): each card a picture on the left with the number on its corner, the words on the right */
  #title .courses{grid-template-columns:1fr;gap:10px}
  .course{display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"img k" "img t" "img x";column-gap:12px;row-gap:2px;align-content:center;overflow:hidden;padding:0 12px 0 0;min-height:0}
  .course .c-img{display:block;grid-area:img;width:100%;height:100%;aspect-ratio:16 / 10;object-fit:cover;margin:0;align-self:stretch}
  .course .n{position:absolute;left:8px;top:8px;width:30px;height:30px;font-size:12px;box-shadow:0 2px 8px rgba(0,30,70,.3)}
  .course .k{grid-area:k;font-size:15px;align-self:end;white-space:normal}
  .course .t{grid-area:t}
  .course .x{grid-area:x;align-self:start;margin:0}
  .course .x::before{display:none}
  .course .tag0{position:absolute;left:44px;top:12px;right:auto;margin:0}
  .course.lock .c-img{filter:grayscale(.7) brightness(.9);opacity:.75}
}

/* ---------- desktop title: a scrolling page too (2026-10-23, 本人：スクロールで余白がある方が綺麗) ----------
   the first screen is the call to action and the live run, with the course heading just showing at its foot; below, the courses as
   picture cards (three across, two on a narrower window) and the footer. The page's background shapes scroll with it */
@media (min-width:621px){
  #title:not([hidden]){overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;pointer-events:auto;--hero:max(560px,calc(100svh - 92px))}
  /* the disc and the ring stay on the body, behind the live run's canvas, and follow the title's scroll by --sy (set from the scroll) */
  body.t-card{background:
    radial-gradient(circle at calc(100% - max(24px,5vw) - min(46vw,600px) + 2vw) calc(12vh + 1vw + var(--sy,0px)), #fcc2aa 0 min(12vw,170px), transparent calc(min(12vw,170px) + 1px)),
    radial-gradient(circle at calc(100% - 3vw) calc(12vh + min(56vh,430px) - 2vh + var(--sy,0px)), transparent 0 min(11vw,150px), rgba(255,255,255,.6) calc(min(11vw,150px) + 1px) calc(min(11vw,150px) + 3px), transparent calc(min(11vw,150px) + 4px)),
    linear-gradient(140deg,#0b8fe6 0%,#0675c4 55%,#05549a 100%)}
  #title .t-courses{position:relative;left:auto;right:auto;bottom:auto;margin:var(--hero) max(24px,5vw) 0;gap:16px}
  #title .t-courses::before{top:-40px;bottom:-140px;left:calc((100% - 100vw) / 2);right:calc((100% - 100vw) / 2)} /* edge to edge of the window (the title's own side padding left a strip on each side) */
  #title .t-sec{font-size:13px}
  #title .t-foot{position:relative;left:auto;right:auto;bottom:auto;margin:48px 0 0;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 22px)}
  /* the course cards: the picture on top with the number on its corner, the name, the time and the record below */
  #title .courses{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #title .course{display:flex;flex-direction:column;align-items:stretch;padding:0 0 14px;min-height:0;overflow:hidden;border-radius:20px}
  #title .course .c-img{display:block;width:100%;aspect-ratio:16 / 9;height:auto;object-fit:cover;margin:0 0 12px}
  #title .course .n{position:absolute;left:12px;top:12px;width:38px;height:38px;font-size:15px;box-shadow:0 2px 8px rgba(0,30,70,.3)}
  #title .course .k,#title .course .t,#title .course .x{padding:0 16px;white-space:normal}
  #title .course .k{font-size:17px}
  #title .course .t{margin-top:4px}
  #title .course .x{margin-top:6px}
  #title .course .x::before{display:none}
  #title .course .tag0{position:absolute;right:12px;top:12px;margin:0}
  #title .course.lock .c-img{filter:grayscale(.7) brightness(.9);opacity:.75}
}
@media (min-width:1180px){#title .courses{grid-template-columns:repeat(3,minmax(0,1fr))}}