:root{--rat-font:'Meiryo','MS Gothic',monospace;}
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;}
html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:var(--rat-font);}
img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}

/* ── ステージ ─────────────────────────── */
#wrap{position:absolute;width:960px;height:540px;transform-origin:top left;}
#stage{position:relative;width:960px;height:540px;overflow:hidden;background:#37547e;cursor:default;}
canvas{position:absolute;top:0;left:0;width:960px;height:540px;pointer-events:none;}
#startup-splash{position:absolute;inset:0;z-index:200;background:#000;opacity:1;transition:opacity .45s ease,visibility 0s linear .45s;}
#startup-splash.hidden{opacity:0;visibility:hidden;pointer-events:none;}
#startup-logo-crop{position:absolute;left:315px;top:135px;width:330px;height:235px;overflow:hidden;opacity:0;transform:scale(.97);}
#startup-logo-crop img{position:absolute;inset:0;width:330px;height:235px;max-width:none;}
#startup-version{position:absolute;left:0;top:385px;width:960px;text-align:center;color:rgba(255,255,255,.78);font:14px var(--rat-font);opacity:0;}
#startup-splash.ready #startup-logo-crop{animation:startup-logo-in .65s ease-out forwards;}
#startup-splash.ready #startup-version{animation:startup-version-in .45s ease-out .24s forwards;}
@keyframes startup-logo-in{to{opacity:1;transform:scale(1)}}
@keyframes startup-version-in{to{opacity:1}}
#c-bg   {z-index:1;}
#c-far  {z-index:2;}
#c-near {z-index:3;}
#c-eff  {z-index:6;}

/* ── ポートレート・レーサー ───────────── */
#portraits,#racers{position:absolute;top:0;left:0;width:960px;height:540px;z-index:5;pointer-events:none;}
.portrait{position:absolute;bottom:0;pointer-events:none;transition:filter .15s;}
.portrait.dim{filter:brightness(0.55);}
.racer-canvas{position:absolute;image-rendering:pixelated;}

/* ── パネル ──────────────────────────── */
#panels{position:absolute;top:0;left:0;width:960px;height:540px;z-index:7;overflow:hidden;}
.panel{position:absolute;display:flex;align-items:center;overflow:hidden;}
.panel-left{flex:1;padding:0 8px;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.panel-right{flex:1;padding:0 8px;color:#fff;font-size:15px;text-align:right;white-space:nowrap;overflow:hidden;}
.panel.sel{cursor:pointer;border:1px solid rgba(97,114,140,.9);outline:none;}
.panel.sel.no-border{border:none!important;box-shadow:none!important;}
.panel.sel.focus{z-index:1;background:#666!important;border:none!important;filter:none;box-shadow:none;}
@media (hover:hover) and (pointer:fine){
  .panel.sel:hover{z-index:1;background:#666!important;border:none!important;filter:none;box-shadow:none;}
}

/* ── メッセージ ──────────────────────── */
#msgwrap{position:absolute;left:0;bottom:0;width:960px;height:150px;z-index:8;pointer-events:none;
  background:var(--message-window-image,url('Mods/essential/uilayer.png')) 0 0/960px 150px no-repeat;}
#msgbox{position:absolute;left:0;bottom:0;width:960px;height:150px;z-index:9;pointer-events:none;}
#speaker{position:absolute;left:128px;top:23px;width:704px;height:26px;color:#fff;font-size:18px;font-weight:bold;overflow:hidden;white-space:nowrap;}
#message{position:absolute;left:128px;top:49px;width:704px;height:99px;color:#fff;font-size:18px;line-height:1.45;overflow:hidden;white-space:pre-wrap;word-break:break-all;}
#msgbox.no-speaker #speaker{display:none;}
#msgbox.no-speaker #message{top:23px;height:125px;}
#message.msg-pop-active{animation:msg-pop-spread .34s cubic-bezier(.18,.88,.22,1.12) both;transform-origin:left center;}
@keyframes msg-pop-spread{0%{opacity:0;transform:translateX(-18px) scaleX(.35) scaleY(.86)}58%{opacity:1;transform:translateX(5px) scale(1.04)}100%{opacity:1;transform:translateX(0) scale(1)}}
#message.msg-shake-active{animation:msg-shake .36s linear both;}
@keyframes msg-shake{0%{transform:translate(0,0)}12%{transform:translate(-7px,2px)}24%{transform:translate(6px,-2px)}36%{transform:translate(-5px,1px)}48%{transform:translate(4px,-1px)}62%{transform:translate(-3px,1px)}78%{transform:translate(2px,0)}100%{transform:translate(0,0)}}
#message.msg-wave-active{animation:msg-wave .72s ease-out both;}
@keyframes msg-wave{0%{transform:translateY(0)}16%{transform:translateY(-8px)}32%{transform:translateY(6px)}48%{transform:translateY(-5px)}64%{transform:translateY(3px)}100%{transform:translateY(0)}}
#message.msg-pulse-active{animation:msg-pulse .42s ease-out both;transform-origin:left center;}
@keyframes msg-pulse{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
#message.msg-slide-active{animation:msg-slide .34s cubic-bezier(.18,.88,.22,1) both;}
@keyframes msg-slide{0%{opacity:0;transform:translateX(-38px)}100%{opacity:1;transform:translateX(0)}}
#message.msg-fade-active{animation:msg-fade .42s ease-out both;}
@keyframes msg-fade{0%{opacity:0}100%{opacity:1}}
#message.msg-impact-active{animation:msg-impact .28s ease-out both;transform-origin:left center;}
@keyframes msg-impact{0%{transform:translateX(-10px) scale(1.28)}45%{transform:translateX(-4px) scale(.96)}100%{transform:translateX(0) scale(1)}}
#message.msg-glitch-active{animation:msg-glitch .32s steps(2,end) both;}
@keyframes msg-glitch{0%{transform:translate(0,0) scaleX(1)}14%{transform:translate(5px,-2px) scaleX(1.025)}28%{transform:translate(-4px,2px) scaleX(.985)}42%{transform:translate(3px,1px) scaleX(1.02)}58%{transform:translate(-5px,-1px) scaleX(.99)}74%{transform:translate(2px,0) scaleX(1.01)}100%{transform:translate(0,0) scaleX(1)}}
#message.msg-whisper-active{animation:msg-whisper .5s ease-out both;transform-origin:left center;}
@keyframes msg-whisper{0%{opacity:.45;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}

/* ── ユーティリティボタン ────────────── */
#util{position:absolute;right:4px;bottom:4px;z-index:10;display:flex;gap:3px;}
.ubtn{width:30px;height:30px;background:url('Mods/essential/buttonback.png') center/contain no-repeat;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ubtn img{width:20px;height:20px;object-fit:contain;opacity:.75;pointer-events:none;}
.ubtn:hover img{opacity:1;}

/* ── ワイプ ──────────────────────────── */
#clutch-slow-overlay{position:absolute;inset:0;z-index:19;background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .08s linear;}
#clutch-slow-overlay.active{opacity:1;}
#wipe{position:absolute;top:0;left:0;width:960px;height:540px;z-index:20;pointer-events:none;}

/* ── タイトル ────────────────────────── */
#title{position:absolute;top:0;left:0;width:960px;height:540px;z-index:25;background:#000;}
#title-bg{position:absolute;top:0;left:0;width:960px;height:540px;object-fit:cover;}
#title-btns{position:absolute;right:130px;top:355px;display:flex;flex-direction:column;gap:6px;}
.tbtn{width:160px;height:30px;background:#f0f0f0;color:#222;border:none;font-size:20px;font-family:inherit;cursor:pointer;}
.tbtn:hover{background:#ddd;}
.tbtn:disabled{background:#666;color:#aaa;cursor:not-allowed;}
#title-status{position:absolute;left:0;bottom:16px;width:960px;text-align:center;font-size:14px;color:#fff;}
#title-status .folder-pick-link{text-decoration:underline;text-underline-offset:3px;}
#loading-progress{display:none;position:absolute;left:360px;bottom:42px;width:240px;height:4px;overflow:hidden;background:rgba(255,255,255,.22);}
#loading-progress.active{display:block;}
#loading-progress span{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center;animation:loading-fill 1.4s ease-out infinite;}
@keyframes loading-fill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* ── オプション ──────────────────────── */
#opts{display:none;position:absolute;top:0;left:0;width:960px;height:540px;z-index:50;background:#4b4b4b;}
.opt-lbl{position:absolute;color:#fff;font-size:15px;}
.opt-sl{position:absolute;-webkit-appearance:none;height:8px;background:#ddd;border-radius:4px;outline:none;}
.opt-sl::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#f0f0f0;cursor:pointer;}
.opt-value{position:absolute;left:476px;width:52px;height:28px;color:#fff;font-size:16px;line-height:28px;text-align:right;font-variant-numeric:tabular-nums;}
#o-speed-value{top:52px;}#o-bgm-value{top:102px;}#o-sfx-value{top:152px;}
#opts-close{position:absolute;left:400px;top:498px;width:160px;height:29px;background:#787878;color:#fff;border:none;font-size:16px;cursor:pointer;font-family:inherit;}
#opts-close:hover{background:#999;}
#opts-controls{position:absolute;left:56px;top:240px;color:#fff;font-size:14px;line-height:1.9;}
#o-clutch-slow{position:absolute;left:71px;top:440px;width:18px;height:18px;accent-color:#eee;cursor:pointer;}
#o-clutch-slow-label{position:absolute;left:96px;top:435px;height:28px;display:flex;align-items:center;color:#fff;font-size:16px;cursor:pointer;}

/* ── セーブ ──────────────────────────── */
#saves{display:none;position:absolute;top:0;left:0;width:960px;height:540px;z-index:50;background:#4b4b4b;}
.slot-wrap{position:absolute;}
.slot-box{position:absolute;top:0;left:0;background:#616161;}
.slot-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.slot-lbl{position:absolute;bottom:0;left:0;width:100%;background:rgba(0,0,0,.7);color:#fff;font-size:11px;text-align:center;padding:2px 0;}
.slot-savebtn,.slot-loadbtn{position:absolute;height:23px;background:#f0f0f0;color:#333;border:none;font-size:13px;cursor:pointer;font-family:inherit;}
.slot-savebtn:hover,.slot-loadbtn:hover{background:#ddd;}
.slot-savebtn:disabled{background:#888;color:#666;cursor:not-allowed;}
.slot-loadbtn:disabled{background:#888;color:#666;cursor:not-allowed;}
#saves-close{position:absolute;left:400px;top:498px;width:160px;height:29px;background:#787878;color:#fff;border:none;font-size:16px;cursor:pointer;font-family:inherit;}
#saves-close:hover{background:#999;}

/* ── レースHUD ───────────────────────── */
#hud{display:none;position:absolute;top:0;left:0;width:960px;height:540px;z-index:15;pointer-events:none;}
#hud-enemy-name{position:absolute;top:14px;left:18px;background:rgba(0,0,0,.78);border:1px solid rgba(175,190,204,1);padding:3px 8px;color:#fff;font-size:17px;}
#hud-enemy-tel{position:absolute;top:14px;right:18px;background:rgba(0,0,0,.78);border:1px solid rgba(175,190,204,1);padding:3px 8px;color:#fff;font-size:17px;}
#hud-player-name{position:absolute;bottom:54px;left:18px;background:rgba(0,0,0,.78);border:1px solid rgba(175,190,204,1);padding:3px 8px;color:#fff;font-size:17px;}
#hud-gap{position:absolute;top:52px;left:330px;width:170px;text-align:center;background:rgba(0,0,0,.78);border:1px solid rgba(175,190,204,1);padding:2px 4px;color:#fff;font-size:19px;}
#hud-trackbar{position:absolute;top:88px;left:330px;width:300px;height:12px;background:rgba(10,10,15,.86);border:1px solid #fff;}
#hud-needle{position:absolute;top:82px;left:472px;width:8px;height:24px;background:rgba(255,31,20,1);}
#hud-time{position:absolute;left:218px;bottom:153px;color:#fff;font-size:28px;text-shadow:2px -2px #000;}
#hud-dist{position:absolute;left:54px;bottom:91px;color:#fff;font-size:28px;text-shadow:2px -2px #000;}
#hud-speed{position:absolute;right:37px;bottom:97px;color:#fff;font-size:42px;text-shadow:2px -2px #000;text-align:right;}
#hud-tacho{position:absolute;right:220px;bottom:38px;width:162px;height:162px;}
#hud-needle-tacho{position:absolute;right:220px;bottom:38px;width:162px;height:162px;transform-origin:center;}
#hud-gear{position:absolute;right:413px;bottom:38px;width:162px;height:162px;}
#hud-signal{position:absolute;top:0;left:0;display:none;width:960px;height:540px;max-width:none;object-fit:contain;}
#hud-result{position:absolute;top:0;left:0;display:none;width:960px;height:540px;max-width:none;object-fit:contain;z-index:101;}
#hud-flash{position:absolute;inset:0;width:960px;height:540px;background:#fff;display:none;pointer-events:none;z-index:100;}
#hud.race-finished #hud-tacho,#hud.race-finished #hud-needle-tacho,#hud.race-finished #hud-gear{display:none!important;}
#hud-time1{position:absolute;top:50%;left:50%;transform:translate(-50%,-60px);color:#fff;font-size:28px;text-shadow:2px -2px #000;display:none;text-align:center;white-space:nowrap;}
#hud-time2{position:absolute;top:50%;left:50%;transform:translate(-50%,20px);color:#fff;font-size:28px;text-shadow:2px -2px #000;display:none;text-align:center;white-space:nowrap;}
#race-controls{position:absolute;left:0;right:0;bottom:18px;height:118px;display:none;pointer-events:none;}
.race-pad{position:absolute;bottom:0;width:118px;height:118px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),rgba(255,255,255,.06) 36%,rgba(7,12,20,.72));color:#fff;font-family:inherit;font-size:15px;font-weight:bold;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:auto;user-select:none;touch-action:none;}
.race-pad:active,.race-pad.active{transform:translateY(2px) scale(.985);filter:brightness(1.25);}
#pad-clutch{left:28px;}
#pad-accel{right:28px;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),rgba(34,197,94,.22) 38%,rgba(7,12,20,.74));}
#hud-nitro{position:absolute;left:16px;right:auto;bottom:18px;min-width:108px;height:46px;border:1px solid rgba(255,255,255,.34);border-radius:8px;background:linear-gradient(180deg,rgba(30,64,175,.88),rgba(7,12,20,.88));color:#fff;font-family:inherit;font-size:16px;font-weight:bold;letter-spacing:.04em;box-shadow:0 12px 28px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:auto;touch-action:none;z-index:12;}
#hud-nitro.disabled,#hud-nitro[aria-disabled="true"]{opacity:.36;filter:grayscale(.5);}
#hud-nitro.ready{filter:brightness(1.18);box-shadow:0 0 18px rgba(96,165,250,.62),0 12px 28px rgba(0,0,0,.34);}
#hud-nitro-count{display:inline-block;min-width:24px;text-align:center;}
.nitro-cutin{position:absolute;left:0;top:0;width:960px;height:540px;overflow:hidden;z-index:160;pointer-events:none;}
.nitro-cutin-bg{position:absolute;left:640px;top:0;width:320px;height:144px;background-repeat:no-repeat;background-position:right top;image-rendering:pixelated;}
.nitro-cutin-face{position:absolute;left:0;top:0;max-width:none;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));}

#hud-enemy-name,#hud-enemy-tel,#hud-player-name,#hud-gap{
  background:linear-gradient(180deg,rgba(18,24,34,.9),rgba(8,12,18,.84));
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
#hud-trackbar{
  height:10px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(239,68,68,.75),rgba(245,158,11,.75),rgba(59,130,246,.75));
  overflow:visible;
}
#hud-needle{
  top:-7px;
  border-radius:3px;
  box-shadow:0 0 12px rgba(255,40,32,.9);
}
#hud-time,#hud-dist,#hud-speed{
  padding:3px 9px;
  background:rgba(4,8,14,.55);
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  text-shadow:0 2px 8px rgba(0,0,0,.72);
}
#hud-speed{font-size:38px;min-width:190px;}

/* Unity/exe版に合わせたレースHUD */
#hud-enemy-name,#hud-enemy-tel,#hud-player-name,#hud-gap,#hud-trackbar,#hud-needle{display:none!important;}
#hud-time{
  left:145px!important;bottom:74px!important;width:250px!important;
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
  color:#fff!important;font-size:42px!important;font-weight:900!important;text-align:left!important;
  text-shadow:-2px -2px 0 #777,2px -2px 0 #777,-2px 2px 0 #777,2px 2px 0 #777,0 4px 8px rgba(0,0,0,.65)!important;
}
#hud-dist{
  left:226px!important;bottom:29px!important;width:160px!important;
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
  color:#fff!important;font-size:31px!important;font-weight:900!important;text-align:left!important;
  text-shadow:-2px -2px 0 #777,2px -2px 0 #777,-2px 2px 0 #777,2px 2px 0 #777,0 4px 8px rgba(0,0,0,.65)!important;
}
#hud-speed{
  right:26px!important;bottom:25px!important;width:430px!important;min-width:0!important;
  z-index:8!important;
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
  color:#fff!important;font-size:68px!important;font-weight:900!important;text-align:right!important;white-space:nowrap!important;
  text-shadow:-2px -2px 0 #777,2px -2px 0 #777,-2px 2px 0 #777,2px 2px 0 #777,0 5px 10px rgba(0,0,0,.75)!important;
}
#hud-tacho{right:219px!important;bottom:-2px!important;width:162px!important;height:162px!important;opacity:.86;z-index:1;}
#hud-needle-tacho{right:219px!important;bottom:-2px!important;width:162px!important;height:162px!important;z-index:2;}
#hud-gear{right:412px!important;bottom:-2px!important;width:162px!important;height:162px!important;opacity:.9;z-index:1;}
#race-controls{display:none!important;}
#hud-time,#hud-dist,#hud-speed{visibility:hidden!important;}
.sprite-numbers{position:absolute;z-index:2;pointer-events:none;transform-origin:center center;}
#SpeedDisplay{z-index:8;}
.sprite-numbers canvas{position:absolute;image-rendering:pixelated;pointer-events:none;}
#race-controls.visible{display:block!important;position:absolute;left:0;right:0;bottom:18px;height:118px;z-index:120;pointer-events:none;}
#race-controls.visible .race-pad{display:none;}

@media (pointer:coarse){
  #race-controls.visible{display:block!important;position:absolute;inset:0;height:auto;z-index:120;pointer-events:none;}
  #race-controls.visible .race-pad{display:flex;}
  #race-controls .race-pad{top:0;bottom:0;width:50%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;color:transparent;opacity:1;transform:none;touch-action:none;}
  #race-controls #pad-clutch{left:0;right:auto;}
  #race-controls #pad-accel{left:auto;right:0;}
  #race-controls #pad-clutch.active,#race-controls #pad-accel.active{background:transparent;}
  .touch-feedback{position:absolute;width:60px;height:60px;border:2px solid rgba(255,255,255,.78);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:touch-feedback-in .18s ease-out both;}
  .touch-feedback.clutch{background:rgba(80,130,210,.18);box-shadow:0 0 14px rgba(80,130,210,.4);}
  .touch-feedback.accel{width:180px;height:180px;background:rgba(40,190,100,.18);box-shadow:0 0 22px rgba(40,190,100,.4);}
  @keyframes touch-feedback-in{from{opacity:0;transform:translate(-50%,-50%) scale(.65)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  #TimeDisplay{top:442px!important;}
  #DistanceDisplay{top:498px!important;}

  #saves-close{top:458px;width:180px;height:34px;left:390px;font-size:16px;}
  #opts-close{top:468px;width:180px;height:34px;left:390px;font-size:16px;}
  .slot-savebtn,.slot-loadbtn{height:32px;font-size:15px;}

  #o-clutch-slow{top:420px;width:22px;height:22px;}
  #o-clutch-slow-label{top:416px;height:30px;}
  .opt-sl{height:12px;}
  .opt-sl::-webkit-slider-thumb{width:26px;height:26px;}

  #util{right:8px;bottom:8px;gap:5px;}
  .ubtn{width:40px;height:40px;}
  .ubtn img{width:26px;height:26px;}
  .tbtn{height:38px;font-size:21px;}
  #title-btns{gap:8px;}
}

/* Mobile-optimized build only. */
#rotate-device{display:none;}

body.mobile-build{touch-action:none;overscroll-behavior:none;-webkit-text-size-adjust:100%;}
body.mobile-build #stage{overflow:clip;}
body.mobile-build button,body.mobile-build input{touch-action:manipulation;}
body.mobile-build #title-btns{right:64px;top:300px;gap:10px;}
body.mobile-build .tbtn{
  width:330px;height:50px;font-size:24px;font-weight:700;
  background:rgba(244,246,248,.94);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
body.mobile-build .tbtn:active{transform:translateY(2px);filter:brightness(.9);}
body.mobile-build #speaker{left:16px;top:18px;width:864px;font-size:22px;}
body.mobile-build #message{left:16px;top:50px;width:864px;height:98px;font-size:22px;line-height:1.28;}
body.mobile-build #msgbox.no-speaker #message{top:22px;height:126px;}
body.mobile-build #util{right:10px;bottom:8px;gap:7px;}
body.mobile-build .ubtn{width:46px;height:46px;}
body.mobile-build .ubtn img{width:30px;height:30px;opacity:.9;}

body.mobile-build .panel.sel{
  font-size:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.28);touch-action:manipulation;
}
body.mobile-build .panel.sel:active{filter:brightness(1.25);transform:scale(.99);}
body.mobile-build .panel-left,body.mobile-build .panel-right{font-size:21px;font-weight:600;padding:0 12px;}

body.mobile-build #opts{background:#20252b;}
body.mobile-build #opts::before{
  content:"OPTION";position:absolute;left:70px;top:25px;color:#fff;font:700 24px Arial,sans-serif;
}
body.mobile-build #opts .opt-lbl{left:90px!important;font-size:19px;}
body.mobile-build #opts .opt-lbl:nth-of-type(1){top:88px!important;}
body.mobile-build #opts .opt-lbl:nth-of-type(2){top:158px!important;}
body.mobile-build #opts .opt-lbl:nth-of-type(3){top:228px!important;}
body.mobile-build #o-speed{left:300px!important;top:94px!important;width:540px!important;}
body.mobile-build #o-bgm{left:300px!important;top:164px!important;width:540px!important;}
body.mobile-build #o-sfx{left:300px!important;top:234px!important;width:540px!important;}
body.mobile-build .opt-value{left:856px;width:54px;font-size:19px;line-height:32px;}
body.mobile-build #o-speed-value{top:84px;}body.mobile-build #o-bgm-value{top:154px;}body.mobile-build #o-sfx-value{top:224px;}
body.mobile-build .opt-sl{height:14px;border-radius:7px;}
body.mobile-build .opt-sl::-webkit-slider-thumb{width:34px;height:34px;border:4px solid #51d47a;}
body.mobile-build #opts-controls{left:90px;top:292px;font-size:17px;line-height:2;}
body.mobile-build #o-clutch-slow{left:90px;top:425px;width:28px;height:28px;}
body.mobile-build #o-clutch-slow-label{left:132px;top:420px;font-size:18px;height:38px;}
body.mobile-build #opts-close,body.mobile-build #saves-close{
  left:auto;right:24px;top:18px;width:52px;height:52px;border-radius:50%;
  background:#383f47;color:#fff;font:300 32px/1 Arial,sans-serif;z-index:4;
}

body.mobile-build #saves{background:#20252b;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;}
body.mobile-build .saves-heading{
  position:sticky;top:0;height:64px;padding:24px 0 0 70px;z-index:3;background:#20252b;
  color:#fff;font:700 24px Arial,sans-serif;border-bottom:1px solid rgba(255,255,255,.1);
}
body.mobile-build .saves-heading::before{display:none;}
body.mobile-build .save-list{position:relative;width:960px;height:692px;}
body.mobile-build .slot-box{border:1px solid rgba(255,255,255,.18);background:#343b43;box-shadow:0 5px 15px rgba(0,0,0,.28);}
body.mobile-build .slot-lbl{font-size:14px;padding:5px 0;}
body.mobile-build .slot-savebtn,body.mobile-build .slot-loadbtn{height:40px;font-size:17px;font-weight:700;border-radius:3px;}
body.mobile-build #saves-close{position:fixed;}

body.mobile-build #race-controls .race-pad::after{
  content:"";position:absolute;bottom:117px;width:118px;height:118px;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);background:rgba(0,0,0,.05);
  box-shadow:inset 0 0 24px rgba(255,255,255,.04);transition:.12s ease;
}
body.mobile-build #race-controls #pad-clutch::after{left:42px;}
body.mobile-build #race-controls #pad-accel::after{right:72px;}
body.mobile-build #race-controls .race-pad.active::after{border-color:rgba(255,255,255,.55);transform:scale(1.08);}
body.mobile-build .touch-feedback.clutch{width:90px;height:90px;border-width:3px;background:rgba(66,130,220,.12);}
body.mobile-build .touch-feedback.accel{width:161px;height:161px;border-width:3px;background:rgba(50,210,115,.12);}

#mobile-race-input{display:none;position:fixed;inset:0;z-index:9000;pointer-events:none;touch-action:none;}
#mobile-race-input .mobile-race-zone{position:absolute;top:0;bottom:0;width:50%;touch-action:none;pointer-events:auto;}
#mobile-clutch-zone{left:0;}
#mobile-accel-zone{right:0;}
.mobile-touch-feedback{
  position:fixed;width:96px;height:96px;border:3px solid rgba(255,255,255,.75);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;animation:mobile-touch-in .16s ease-out both;
}
.mobile-touch-feedback.clutch{background:rgba(66,130,220,.14);box-shadow:0 0 24px rgba(66,130,220,.35);}
.mobile-touch-feedback.accel{width:161px;height:161px;background:rgba(50,210,115,.13);box-shadow:0 0 30px rgba(50,210,115,.3);}
@keyframes mobile-touch-in{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (pointer:coarse){
  #mobile-race-input.visible{display:block;}
}

@media (orientation:portrait){
  #rotate-device{display:none!important;}
  #mobile-race-input .mobile-race-zone{left:0!important;right:0!important;width:100%!important;height:50%;bottom:auto!important;}
  #mobile-clutch-zone{top:0!important;}
  #mobile-accel-zone{top:50%!important;}
}

@media (pointer:coarse){
  #title-btns{gap:10px;}
  .tbtn{width:280px;height:44px;font-size:18px;}
  .touch-feedback{will-change:transform,opacity;}
}

@media (orientation:portrait) and (max-width:600px){
  #rotate-device{
    display:flex;position:fixed;inset:0;z-index:10000;background:#050607;
    align-items:center;justify-content:center;
  }
  .rotate-device-icon{
    position:relative;width:56px;height:92px;border:4px solid #fff;border-radius:8px;
    animation:rotate-device-turn 1.8s ease-in-out infinite;
  }
  .rotate-device-icon span{
    position:absolute;left:50%;bottom:6px;width:7px;height:7px;margin-left:-3.5px;
    border-radius:50%;background:#fff;
  }
  .rotate-device-icon::after{
    content:"";position:absolute;right:-39px;top:-23px;width:32px;height:32px;
    border-top:3px solid #51d47a;border-right:3px solid #51d47a;border-radius:0 24px 0 0;
  }
  @keyframes rotate-device-turn{
    0%,20%{transform:rotate(0deg)}
    55%,85%{transform:rotate(90deg)}
    100%{transform:rotate(0deg)}
  }
}