/* =========================================================
   STYLES — tokens, menus, HUD, touch controls
   ========================================================= */
:root{
  --yellow:#FFC20E; --green:#008751; --red:#E63B2E; --ink:#141414;
  --paper:#FFF8E6; --asphalt:#23272d; --sky:#3FB6E8;
  --display:Bungee, Impact, 'Arial Black', sans-serif;
  --body:'Baloo 2', 'Trebuchet MS', Arial, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;width:100%;max-width:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--asphalt);color:var(--ink);font-family:var(--body);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit}
.hidden{display:none!important}

/* ---------- screens ---------- */
.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-right,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 18px) calc(env(safe-area-inset-left,0px) + 18px)}
.screen.on{display:block}
#scr-riders,#scr-tracks{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(24,26,30,.94);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 120px);scroll-padding-bottom:120px}
.overlay{background:rgba(24,26,30,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.wrap{max-width:1120px;margin:0 auto}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.head h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,5vw,48px);color:var(--yellow);line-height:1;text-shadow:4px 4px 0 var(--ink)}
.back{font-family:var(--display);background:none;border:3px solid #fff;color:#fff;border-radius:10px;padding:8px 14px;cursor:pointer;font-size:14px}
.back:focus-visible,.btn:focus-visible,.rcard:focus-visible,.tcard:focus-visible{outline:4px solid #fff;outline-offset:3px}

/* ---------- main menu: the danfo panel ---------- */
#scr-menu{display:none}
#scr-menu.on{display:flex;align-items:center}
.menu-panel{position:relative;background:var(--yellow);border:4px solid var(--ink);border-radius:20px;padding:40px 30px 44px;
  width:100%;max-width:430px;box-shadow:12px 12px 0 var(--ink);margin-left:clamp(0px,4vw,60px)}
.menu-panel::before,.menu-panel::after{content:"";position:absolute;left:0;right:0;height:9px;background:var(--ink)}
.menu-panel::before{top:14px}.menu-panel::after{bottom:14px}
.logo{font-family:var(--display);font-weight:400;line-height:.85;margin:4px 0 14px}
.logo .l1{display:block;font-size:clamp(58px,13vw,100px);color:var(--ink)}
.logo .l2{display:inline-block;font-size:clamp(34px,7.5vw,58px);color:#fff;background:var(--green);padding:6px 14px 2px;
  border:4px solid var(--ink);transform:rotate(-3deg);box-shadow:5px 5px 0 var(--ink);margin-top:4px}
.strap{font-weight:800;font-size:17px;margin:4px 0 18px;max-width:30ch}
.menu-btns{display:grid;gap:10px}
.btn{font-family:var(--display);font-size:19px;background:var(--ink);color:var(--yellow);border:3px solid var(--ink);border-radius:12px;
  padding:13px 18px;text-align:left;cursor:pointer;width:100%;transition:transform .08s ease}
@media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateX(4px)} }
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--green);color:#fff}
.btn.small{font-size:15px;padding:10px 16px;width:auto}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.menu-rider{margin-top:16px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;min-height:44px}
.menu-rider svg{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink)}
.sound-toggle{position:absolute;top:26px;right:18px;background:var(--ink);color:var(--yellow);border:0;border-radius:8px;
  font-family:var(--display);font-size:12px;padding:6px 9px;cursor:pointer}

/* ---------- rider cards ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding-bottom:96px}
.rcard{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;overflow:hidden;text-align:left;
  cursor:pointer;box-shadow:0 6px 0 var(--ink);transition:transform .1s ease;display:flex;flex-direction:column}
.rcard:hover{transform:translateY(-3px)}
.rcard.sel{outline:5px solid var(--yellow);outline-offset:0;transform:translateY(-5px)}
.rc-art{position:relative;background:var(--c);height:132px;display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:3px solid var(--ink);overflow:hidden}
.rc-art .portrait{width:132px;height:132px;display:block}
.rc-art .bike{width:118px;height:59px;margin:0 8px 8px 0;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}
.rc-num{position:absolute;top:8px;right:10px;font-family:var(--display);font-size:22px;color:#fff;-webkit-text-stroke:1.5px var(--ink)}
.rc-body{padding:12px 14px 14px}
.rc-name{font-family:var(--display);font-size:24px;line-height:1}
.rc-origin{font-weight:800;font-size:14px;opacity:.7;margin:2px 0 6px}
.rc-bio{font-size:14.5px;line-height:1.3;margin-bottom:6px;min-height:3.9em}
.rc-tag{font-weight:800;font-size:14px;color:var(--green);margin-bottom:8px}
.stats{display:grid;gap:4px}
.stat{display:grid;grid-template-columns:92px 1fr 18px;align-items:center;gap:8px;font-weight:800;font-size:13px}
.stat .bar{height:9px;background:#e6dcc3;border-radius:5px;overflow:hidden}
.stat .bar i{display:block;height:100%;background:var(--ink);border-radius:5px}
.footbar{position:fixed;left:0;right:0;bottom:0;z-index:11;background:var(--ink);border-top:4px solid var(--yellow);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px calc(env(safe-area-inset-right,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 18px)}
.footbar .picked{font-weight:800;font-size:16px;color:#fff}
.footbar .picked b{color:var(--yellow);font-family:var(--display);font-weight:400}
.footbar .btn{width:auto}

/* ---------- track cards ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding-bottom:96px}
.tcard{position:relative;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;overflow:hidden;text-align:left;cursor:pointer;box-shadow:0 6px 0 var(--ink)}
.tcard.sel{outline:5px solid var(--yellow)}
.tcard.locked{cursor:default;filter:grayscale(.85);opacity:.72}
.tc-map{background:var(--c);height:140px;display:grid;place-items:center;border-bottom:3px solid var(--ink)}
.tc-map svg{width:88%;height:120px}
.tc-body{padding:12px 14px 14px}
.tc-name{font-family:var(--display);font-size:22px;line-height:1.05}
.tc-blurb{font-size:14.5px;margin-top:4px;line-height:1.3}
.tc-meta{font-weight:800;font-size:13px;margin-top:8px;color:var(--green)}
.tc-soon{position:absolute;top:14px;right:-38px;transform:rotate(35deg);background:var(--red);color:#fff;font-family:var(--display);
  font-size:12px;padding:5px 44px;border:2px solid var(--ink)}

/* ---------- how to play ---------- */
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.howto section{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:18px}
.howto h3{font-family:var(--display);font-weight:400;font-size:20px;margin-bottom:10px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;font-size:15.5px;font-weight:700}
kbd{font-family:var(--display);font-size:12px;background:var(--ink);color:var(--yellow);border-radius:6px;padding:4px 7px;white-space:nowrap}
.items{display:grid;gap:10px}
.itm{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;font-size:15px;line-height:1.25}
.itm svg{width:44px;height:44px;background:var(--ink);border-radius:10px;padding:3px}
.itm b{font-family:var(--display);font-weight:400;font-size:14px;display:block}
.tips{font-size:15.5px;line-height:1.4;padding-left:18px}

/* ---------- HUD ---------- */
#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;font-family:var(--display)}
.hud-tl{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);
  background:var(--ink);color:#fff;border-radius:12px;padding:8px 14px 6px;border:3px solid var(--yellow)}
.hud-lap{font-size:26px;color:var(--yellow);line-height:1}
.hud-lap small{font-size:16px}
#h-time{font-size:17px;margin-top:3px;font-variant-numeric:tabular-nums}
.hud-board{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);
  list-style:none;background:rgba(20,20,20,.74);border-radius:12px;padding:6px;font-size:13px;min-width:148px}
.hud-board li{display:flex;align-items:center;gap:7px;padding:2px 7px;color:#fff;border-radius:6px;line-height:1.35}
.hud-board li b{width:16px;color:var(--yellow);font-weight:400}
.hud-board li i{width:10px;height:10px;border-radius:50%;background:var(--c);border:1.5px solid #fff;flex:none}
.hud-board li.me{background:var(--yellow);color:var(--ink)}
.hud-board li.me b{color:var(--ink)}
.hud-item{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%);text-align:center;pointer-events:auto}
.item-slot{width:78px;height:78px;border-radius:18px;background:rgba(20,20,20,.78);border:4px solid var(--yellow);display:grid;place-items:center;margin:0 auto}
.item-slot svg{width:56px;height:56px}
.item-slot.rolling{animation:wob .12s linear infinite}
.item-name{font-size:12px;color:#fff;text-shadow:2px 2px 0 var(--ink);margin-top:4px;min-height:15px}
@keyframes wob{0%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}100%{transform:rotate(-4deg)}}
#minimap{position:absolute;left:calc(env(safe-area-inset-left,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  width:170px;height:170px;background:rgba(20,20,20,.6);border-radius:18px;border:3px solid rgba(255,255,255,.85)}
.hud-br{position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  display:flex;align-items:flex-end;gap:10px}
#h-pos{font-size:66px;line-height:.9;color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink)}
#h-pos sup{font-size:26px;vertical-align:top;margin-left:2px}
.speedo{position:relative;width:132px;height:132px}
.speedo svg{position:absolute;top:0;right:0;bottom:0;left:0}
.speedo .num{position:absolute;left:0;right:0;top:40px;text-align:center;font-size:34px;color:#fff;text-shadow:2px 2px 0 var(--ink);font-variant-numeric:tabular-nums}
.speedo .unit{position:absolute;left:0;right:0;top:80px;text-align:center;font-size:12px;color:var(--yellow)}
.boostbar{width:132px;height:13px;background:rgba(20,20,20,.7);border:2px solid #fff;border-radius:8px;overflow:hidden;margin-top:4px}
.boostbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#29b6f6,#b3f0ff)}
.boostbar.full{box-shadow:0 0 12px #6fe3ff}
.boostlbl{font-size:10px;color:#fff;text-align:center;margin-top:2px;text-shadow:1px 1px 0 var(--ink)}
#h-wrong{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);font-size:clamp(28px,6vw,56px);color:var(--red);
  -webkit-text-stroke:2px #fff;text-shadow:4px 4px 0 var(--ink)}
#h-popup{position:absolute;top:24%;left:50%;transform:translate(-50%,-50%);font-size:clamp(22px,4.6vw,44px);color:#fff;
  text-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--ink);white-space:nowrap;opacity:0}
#h-popup.go{animation:pop 1.4s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  22%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.hud-pause{position:absolute;top:calc(env(safe-area-inset-top,0px) + 96px);left:calc(env(safe-area-inset-left,0px) + 12px);
  pointer-events:auto;background:var(--ink);color:var(--yellow);border:3px solid var(--yellow);border-radius:10px;
  font-family:var(--display);font-size:12px;padding:6px 10px;cursor:pointer}
#countdown{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:6;pointer-events:none;font-family:var(--display);
  font-size:clamp(90px,22vw,220px);color:var(--yellow);-webkit-text-stroke:5px var(--ink);text-shadow:10px 10px 0 var(--ink)}
#countdown.go{color:#fff;background:none}
#countdown span{display:inline-block;animation:cd .9s ease-out forwards}
@keyframes cd{0%{transform:scale(1.8);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.0}}
#finishbanner{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:6;pointer-events:none}
#finishbanner div{font-family:var(--display);font-size:clamp(50px,12vw,130px);color:#fff;background:repeating-linear-gradient(45deg,#111 0 30px,#fff 30px 60px);
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:3px var(--ink);color:transparent;animation:cd 2.8s ease-out forwards}

/* ---------- results ---------- */
.results{max-width:640px;margin:0 auto;background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:20px;
  box-shadow:12px 12px 0 var(--ink);padding:24px}
.res-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.res-top svg{width:96px;height:96px;border-radius:50%;border:4px solid var(--ink);flex:none}
.res-pos{font-family:var(--display);font-size:clamp(48px,10vw,76px);line-height:.9}
.res-pos sup{font-size:.4em}
.res-line{font-weight:800;font-size:clamp(17px,3.4vw,22px);color:var(--green)}
.res-list{list-style:none;display:grid;gap:5px;margin:10px 0 18px}
.res-list li{display:grid;grid-template-columns:34px 30px 1fr auto;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:#f0e6cc;font-weight:800}
.res-list li.me{background:var(--yellow);border:2px solid var(--ink)}
.res-list li svg{width:30px;height:30px;border-radius:50%}
.res-list .p{font-family:var(--display);font-weight:400}
.res-list .t{font-variant-numeric:tabular-nums}
.res-btns{display:flex;gap:10px;flex-wrap:wrap}
.res-btns .btn{width:auto;flex:1 1 150px;text-align:center}

/* ---------- pause & loading ---------- */
.pausebox{max-width:360px;margin:12vh auto 0;background:var(--yellow);border:4px solid var(--ink);border-radius:20px;padding:26px;box-shadow:10px 10px 0 var(--ink);display:grid;gap:10px}
.pausebox h2{font-family:var(--display);font-weight:400;font-size:34px;color:var(--ink)}
#loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--yellow);display:grid;place-items:center;font-family:var(--display);font-size:clamp(26px,6vw,48px);color:var(--ink)}
#loading small{display:block;font-family:var(--body);font-weight:800;font-size:16px;text-align:center;margin-top:8px}

/* ---------- touch controls ---------- */
#touch{position:fixed;top:0;right:0;bottom:0;left:0;z-index:7;pointer-events:none}
#touch button{pointer-events:auto;position:absolute;border-radius:50%;border:4px solid var(--ink);font-family:var(--display);color:var(--ink);
  box-shadow:0 5px 0 var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:0}
#touch button.on{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.t-l,.t-r{width:84px;height:84px;background:rgba(255,255,255,.88);font-size:30px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
.t-l{left:calc(env(safe-area-inset-left,0px) + 16px)}
.t-r{left:calc(env(safe-area-inset-left,0px) + 112px)}
.t-boost{width:88px;height:88px;background:#4fc3f7;font-size:13px;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
.t-item{width:66px;height:66px;background:var(--yellow);font-size:11px;right:calc(env(safe-area-inset-right,0px) + 114px);bottom:calc(env(safe-area-inset-bottom,0px) + 70px)}
.t-brake{width:66px;height:66px;background:#ff8a80;font-size:11px;right:calc(env(safe-area-inset-right,0px) + 114px);bottom:calc(env(safe-area-inset-bottom,0px) + 0px)}
body.controls #minimap{width:112px;height:112px;left:calc(env(safe-area-inset-left,0px) + 12px);bottom:auto;top:calc(env(safe-area-inset-top,0px) + 132px);border-radius:14px}
body.controls .hud-pause{top:calc(env(safe-area-inset-top,0px) + 92px)}
body.controls .hud-board{font-size:11px;min-width:122px;padding:4px}
body.controls .hud-board li{padding:1px 5px;line-height:1.25}
body.controls .hud-br{right:50%;transform:translateX(50%) scale(.78);transform-origin:bottom center;bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
body.controls .item-slot{width:64px;height:64px}
body.controls .item-slot svg{width:46px;height:46px}
@media (orientation:portrait){
  body.controls .hud-br{bottom:calc(env(safe-area-inset-bottom,0px) + 130px)}
}
.rotate-hint{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:8;background:var(--ink);color:var(--yellow);
  font-family:var(--display);font-size:14px;padding:10px 14px;border-radius:10px;pointer-events:none;display:none;text-align:center}
@media (orientation:portrait){ body.touch.racing .rotate-hint{display:block;animation:fadeout 4s forwards} }
@keyframes fadeout{0%,70%{opacity:1}100%{opacity:0}}

@media (max-width:640px){
  .menu-panel{margin:0 auto;padding:36px 22px 40px}
  .hud-board{font-size:11px;min-width:120px}
  #minimap{width:120px;height:120px}
  #h-pos{font-size:48px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition:none!important}
}

/* =========================================================
   v1.1.0 — Six-City Expansion
   ========================================================= */
#scr-garage,#scr-stats{background:rgba(24,26,30,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
.coins{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--yellow);font-family:var(--display);font-size:15px;border-radius:10px;padding:6px 12px 6px 8px}
.coins i{width:17px;height:17px;border-radius:50%;background:#F5B700;border:2px solid #B8860B;display:inline-block}
.menu-coinrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.btn.daily{background:var(--red);color:#fff;border-color:var(--ink)}
.menu-btns .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-ver{font-weight:800;font-size:11px;opacity:.6;margin-top:8px}
.mc-box{background:var(--ink);color:#fff;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-weight:700;font-size:14px;line-height:1.35;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mc-box b{color:var(--yellow)}
.mc-box .btn{width:auto}
.tc-map{position:relative}
.tc-level{position:absolute;top:10px;left:-2px;background:var(--ink);color:var(--yellow);font-family:var(--display);font-size:12px;padding:4px 8px;border-radius:0 8px 8px 0}
.tc-feat{font-weight:800;font-size:13px;margin-top:6px}
.tc-lock{font-weight:800;font-size:13px;margin-top:8px;color:var(--red)}
.tcard.locked{cursor:pointer}
.tcard.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#h-city{font-size:11px;color:#fff;opacity:.85;margin-bottom:2px}
/* garage */
.head #garage-coins{margin-left:auto}
.gpreview{display:flex;align-items:center;gap:14px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.gpreview .gp-face{width:84px;height:84px;border-radius:50%;border:3px solid var(--ink)}
.gpreview .bike{width:150px;height:75px}
.gp-info{flex:1;min-width:200px}
.gp-name{font-family:var(--display);font-size:20px}
.gp-name small{font-family:var(--body);font-size:12px}
.gp-stats{font-weight:800;font-size:14px}
.gp-fair{font-size:12.5px;opacity:.75;margin-top:3px}
.gtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.gtabs .btn{width:auto;border-color:#fff}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding-bottom:20px}
.gcard{position:relative;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.gcard.eq{border-color:var(--yellow);box-shadow:0 0 0 3px var(--ink) inset;background:#fff3c4}
.gcard .sw{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;border:2px solid var(--ink)}
.g-name{font-family:var(--display);font-size:16px;padding-right:36px}
.g-desc{font-size:14px;line-height:1.25}
.g-stat{font-weight:800;font-size:13px;color:var(--green)}
.gcard .btn{width:auto;align-self:flex-start;margin-top:4px}
.btn:disabled{opacity:.5}
/* stats */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.scard{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:12px 14px}
.scard span{display:block;font-weight:800;font-size:12px}
.scard b{font-family:var(--display);font-weight:400;font-size:26px}
.sbest{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.sbest h3{font-family:var(--display);font-weight:400;font-size:18px;margin-bottom:8px}
.srow{display:flex;justify-content:space-between;font-weight:800;font-size:15px;padding:3px 0}
.srow b{font-family:var(--display);font-weight:400}
.srow b.done{color:var(--green)}
.srow.off{opacity:.45}
.srec{font-size:12px;opacity:.75;margin:-2px 0 4px}
.btn.danger{background:#5a1d1d;color:#fff;width:auto}
/* daily modal + unlock banner */
.modal,.share-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:rgba(24,26,30,.75);display:grid;place-items:center;padding:16px;overflow:auto}
.m-box,.ss-box{background:var(--yellow);border:4px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--ink);padding:20px 22px;max-width:560px;width:100%;text-align:center;animation:pop2 .3s ease-out}
.m-box h2{font-family:var(--display);font-weight:400;font-size:28px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.day{background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:6px 2px;font-weight:800;font-size:14px}
.day b{display:block;font-family:var(--display);font-weight:400;font-size:9px}
.day.got{background:var(--green);color:#fff}
.day.past{background:#e6dcc3}
.m-big{font-family:var(--display);font-size:30px;color:var(--green)}
.m-box p{font-weight:800;font-size:13px;margin:6px 0 12px}
.unlock{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;display:grid;place-items:center;pointer-events:auto;background:rgba(0,0,0,.25)}
.u-box{background:var(--yellow);border:4px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--ink);padding:22px 30px 28px;text-align:center;animation:pop2 .45s cubic-bezier(.2,1.6,.4,1)}
.u-t{font-family:var(--display);font-size:clamp(22px,5vw,32px)}
.u-name{display:inline-block;margin:12px 0 6px;font-family:var(--display);font-size:clamp(28px,6.5vw,44px);color:#fff;background:var(--c);border:4px solid var(--ink);padding:4px 16px;transform:rotate(-3deg);box-shadow:5px 5px 0 var(--ink);-webkit-text-stroke:1.5px var(--ink)}
.u-sub{font-weight:800;font-size:15px}
.unlock.out{opacity:0;transition:opacity .4s}
@keyframes pop2{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
/* results v1.1 */
.res-meta{font-weight:800}
.res-meta .pb{color:var(--red)}
.res-challenge{margin:8px 0 0;padding:8px 12px;border-radius:10px;font-weight:800;border:2px solid var(--ink)}
.res-challenge.won{background:var(--green);color:#fff}
.res-challenge.lost{background:#ffe0d6}
.res-coins{background:#fff3c4;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.rc-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:16px;margin-bottom:4px}
.rc-head .coin{background:var(--ink);color:var(--yellow);border-radius:8px;padding:3px 10px}
.rc-line{display:flex;justify-content:space-between;font-weight:800;font-size:14px}
.rc-line b{color:var(--green)}
.rc-hint{font-weight:800;font-size:13px;color:var(--red);margin-top:6px}
.res-records{font-size:13px;font-weight:700;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px 12px}
.res-records b{width:100%}
.res-btns.small{margin-top:10px}
.res-btns.small .btn{font-size:14px;padding:10px 14px}
.btn.share{background:#25D366;color:#0b2e17}
.btn.share2{background:var(--yellow);color:var(--ink)}
.ss-title{font-family:var(--display);font-size:24px;margin-bottom:8px}
.ss-text{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:8px;font-weight:700;font-size:13px;text-align:left;margin-bottom:10px;word-break:break-word}
.ss-box .btn{display:block;text-align:center;text-decoration:none;margin:8px 0}
.ss-wa{background:#25D366!important;color:#0b2e17!important}
.ss-note{font-size:12px;font-weight:700;margin:6px 0}
@media (max-height:500px){ .results{padding:16px} .res-top svg{width:72px;height:72px} }
/* short landscape phones: keep the whole menu on screen (and scrollable as a last resort) */
#scr-menu.on{align-items:flex-start}
.menu-panel{margin-top:auto;margin-bottom:auto}
@media (max-height:620px){
  .menu-panel{padding:26px 22px 30px;max-width:400px}
  .menu-panel::before{top:9px}.menu-panel::after{bottom:9px}
  .logo .l1{font-size:58px}.logo .l2{font-size:32px}
  .logo{margin:0 0 8px}
  .strap{font-size:14px;margin:2px 0 10px}
  .menu-btns{gap:7px}.menu-btns .two{gap:7px}
  .menu-btns .btn{font-size:16px;padding:9px 14px}
  .menu-coinrow{margin-bottom:8px}
  .menu-rider{margin-top:8px;min-height:0}
  .menu-rider svg{width:34px;height:34px}
}
@media (max-height:430px){
  .strap{display:none}
  .logo .l1{font-size:46px}.logo .l2{font-size:26px}
  .menu-btns .btn{font-size:14px;padding:7px 12px}
  .menu-panel{padding:20px 18px 22px}
  .menu-ver{display:none}
}
/* landscape phones: two columns (logo + coins | buttons) so everything fits without scrolling */
@media (max-height:500px) and (orientation:landscape){
  .menu-panel{max-width:720px;display:grid;grid-template-columns:1fr 1.05fr;column-gap:18px;align-items:start;padding:24px 20px 26px}
  .menu-panel > *{grid-column:1}
  .menu-panel .menu-btns{grid-column:2;grid-row:1 / span 6;margin-top:8px}
  .sound-toggle{top:auto;bottom:20px;right:auto;left:20px}
  .logo .l1{font-size:52px}.logo .l2{font-size:30px}
  .strap{display:block;font-size:13px;max-width:26ch}
  .menu-btns .btn{font-size:15px;padding:8px 12px}
  .menu-ver{display:block;margin-bottom:28px}
}
.res-left .res-btns{margin:12px 0}
@media (max-height:500px) and (orientation:landscape){
  .results{max-width:920px;padding:14px 16px}
  .res-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .res-top{margin-bottom:6px}.res-pos{font-size:48px}
  .res-list{margin-top:0;gap:3px}.res-list li{padding:3px 8px}
  .res-left .res-btns .btn{flex:1 1 100%;padding:9px 12px;font-size:15px}
}

/* v1.1.1 on-screen controls: sizes for every screen */
#touch button{display:flex;align-items:center;justify-content:center;line-height:1}
@media (min-width:1000px) and (min-height:640px){
  .t-l,.t-r{width:96px;height:96px;font-size:34px}
  .t-r{left:calc(env(safe-area-inset-left,0px) + 124px)}
  .t-boost{width:100px;height:100px;font-size:15px}
  .t-item,.t-brake{width:74px;height:74px;font-size:12px;right:calc(env(safe-area-inset-right,0px) + 126px)}
  .t-item{bottom:calc(env(safe-area-inset-bottom,0px) + 82px)}
}
/* very short landscape phones (e.g. 568x320): smaller pad and minimap so nothing overlaps */
@media (max-height:360px){
  .t-l,.t-r{width:70px;height:70px;font-size:26px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .t-l{left:calc(env(safe-area-inset-left,0px) + 12px)}
  .t-r{left:calc(env(safe-area-inset-left,0px) + 92px)}
  .t-boost{width:74px;height:74px;font-size:12px;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .t-item,.t-brake{width:56px;height:56px;font-size:10px;right:calc(env(safe-area-inset-right,0px) + 94px)}
  .t-item{bottom:calc(env(safe-area-inset-bottom,0px) + 60px)}
  .t-brake{bottom:calc(env(safe-area-inset-bottom,0px) + 2px)}
  body.controls #minimap{width:86px;height:86px;top:calc(env(safe-area-inset-top,0px) + 118px)}
  body.controls .hud-br{transform:translateX(50%) scale(.64)}
}

/* =========================================================
   v1.1.4 mobile viewport fix: nothing may ever be wider than the screen.
   iPhone Safari zooms the whole page out when any element (even a fixed or animated one)
   sticks out past the edge, and it does not zoom back afterwards. The overlays below used
   to do exactly that: "OYA GO!", race pop-ups such as FINAL LAP / OGA POLICE SAY PARK!
   (no line wrap, scaled up while animating) and the FINISH! banner.
   ========================================================= */
#hud,#countdown,#finishbanner,#touch{overflow:hidden;max-width:100vw}
#game{max-width:100vw}
#h-popup{white-space:normal;width:max-content;max-width:92vw;text-align:center;line-height:1.05}
#countdown span{white-space:nowrap}
#countdown.go{font-size:clamp(48px,12.5vw,150px)}
#finishbanner div{font-size:clamp(46px,11vw,130px);white-space:nowrap}
/* results: every part shrinks to the screen width instead of pushing past it */
.screen{overflow-x:hidden}
.results{box-sizing:border-box;width:auto;max-width:min(640px,calc(100vw - 24px))}
.res-cols,.res-left,.res-right{min-width:0}
.res-cols > *{min-width:0}
.res-list li{grid-template-columns:34px 30px minmax(0,1fr) auto}
.res-list li > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-list li .t{overflow:visible}
.res-btns .btn{min-width:0;white-space:normal;overflow-wrap:anywhere}
.res-coins,.res-records,.res-meta,.res-challenge{min-width:0;overflow-wrap:anywhere}
.rc-line span{min-width:0;padding-right:8px}
@media (max-height:500px) and (orientation:landscape){ .results{max-width:min(920px,calc(100vw - 24px))} }