body.asuka{background:#000 !important;}
.asuka-bg{display:none;}

.race-wrap{
  max-width:1100px;margin:14px auto;padding:10px;color:#fff;
  font-family:'Courier New','Hiragino Maru Gothic ProN',monospace;
}
.race-h1{
  text-align:center;color:#ffd700;font-size:28px;margin:6px 0;
  text-shadow:2px 2px 0 #b0008b,4px 4px 0 #000;letter-spacing:.15em;
}
.race-stage{
  position:relative;background:#000;border:5px solid #ffd700;
  border-radius:10px;overflow:hidden;
  box-shadow:0 0 30px rgba(255,215,0,.4);
  max-width:1024px;margin:0 auto;
}
#raceCanvas{
  display:block;width:100%;height:auto;
  touch-action:none;
}
/* HUD オーバーレイ */
.race-hud{
  position:absolute;inset:0;pointer-events:none;
  font-family:'Courier New',monospace;
}
.race-hud .splitline{
  position:absolute;left:0;right:0;top:50%;height:3px;
  background:linear-gradient(90deg,transparent,#ffd700,transparent);
  margin-top:-1.5px;
}
.race-hud .info{
  position:absolute;background:rgba(0,0,0,.65);
  border:2px solid currentColor;border-radius:8px;
  padding:8px 12px;font-size:12px;color:#fff;min-width:160px;
}
.race-hud .info.p1{top:10px;left:10px;color:#ff1493;}
.race-hud .info.p2{bottom:10px;left:10px;color:#00bfff;}
.race-hud .info .nm{font-weight:bold;letter-spacing:1px;font-size:13px;color:currentColor;}
.race-hud .info .lap{font-size:18px;font-weight:bold;color:#fff;margin-top:2px;}
.race-hud .info .spdbar{
  background:#222;border-radius:3px;height:6px;margin-top:4px;overflow:hidden;
}
.race-hud .info .spdbar .fill{background:currentColor;height:100%;width:0;transition:width .1s;}
.race-hud .info .place{font-size:11px;color:#ffd700;font-weight:bold;margin-top:3px;}

/* アイテムスロット (各プレイヤー視点の上中央) */
.race-hud .item-slot{
  position:absolute;left:50%;transform:translateX(-50%);
  width:64px;height:64px;border-radius:14px;
  background:rgba(0,0,0,.55);border:3px solid #ffd700;
  display:flex;align-items:center;justify-content:center;
  font-size:38px;line-height:1;pointer-events:none;
  box-shadow:0 0 12px rgba(255,215,0,.5);
}
.race-hud .item-slot.p1{top:10px;left:auto;right:12px;transform:none;}
.race-hud .item-slot.p2{bottom:10px;}
.race-hud .item-slot.p1.spin{animation:itemSpinP1 .15s linear infinite;}
@keyframes itemSpinP1{50%{transform:scale(1.15);}}
.race-hud .item-slot.spin{animation:itemSpin .15s linear infinite;}
.race-hud .item-slot.flash{box-shadow:0 0 30px #ffd700,0 0 60px #fff;}
@keyframes itemSpin{50%{transform:translateX(-50%) scale(1.15);}}
/* 速度線 (高速時) */
.race-hud .speedlines{
  position:absolute;left:0;right:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0,transparent 28px,
    rgba(255,255,255,.4) 28px,rgba(255,255,255,.4) 30px);
  opacity:0;transition:opacity .15s;
}
.race-hud .speedlines.p1{top:0;height:50%;}
.race-hud .speedlines.p2{bottom:0;height:50%;}
.race-hud .speedlines.on{opacity:.55;animation:sl 0.4s linear infinite;}
@keyframes sl{from{background-position:0 0;}to{background-position:-90px 0;}}
/* スピンアウト演出 */
.race-hud .spinout-flash.p1{position:absolute;top:0;left:0;right:0;height:50%;background:radial-gradient(circle,rgba(255,30,30,.6),transparent 70%);pointer-events:none;animation:spnf .9s ease-out;}
.race-hud .spinout-flash.p2{position:absolute;bottom:0;left:0;right:0;height:50%;background:radial-gradient(circle,rgba(255,30,30,.6),transparent 70%);pointer-events:none;animation:spnf .9s ease-out;}
@keyframes spnf{0%{opacity:.9;}100%{opacity:0;}}
/* ターボチャージ表示 */
.race-hud .turbo-indicator{
  position:absolute;font-size:11px;font-weight:900;letter-spacing:2px;
  padding:3px 10px;border-radius:14px;color:#fff;pointer-events:none;
  text-shadow:1px 1px 0 #000;
}
.race-hud .turbo-indicator.p1{top:80px;left:10px;}
.race-hud .turbo-indicator.p2{bottom:80px;left:10px;}
.race-hud .turbo-indicator.lv1{background:#00bfff;}
.race-hud .turbo-indicator.lv2{background:#ff9800;}
.race-hud .turbo-indicator.lv3{background:#e040fb;}

/* ミニマップ (右中央) */
.race-hud .mini-map{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:130px;height:130px;pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
/* 順位表示 (各視点の右下) */
.race-hud .race-pos{
  position:absolute;right:150px;font-size:46px;font-weight:900;
  font-style:italic;letter-spacing:2px;pointer-events:none;
  text-shadow:3px 3px 0 #000,0 0 18px rgba(255,255,255,.35);
}
.race-hud .race-pos.p1{top:calc(50% - 70px);}
.race-hud .race-pos.p2{bottom:14px;}
.race-hud .race-pos.first{color:#ffd700;}
.race-hud .race-pos.second{color:#c9d4e0;}

.race-hud .lap-center{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);border:2px solid #ffd700;border-radius:8px;
  padding:6px 18px;font-size:13px;font-weight:bold;color:#ffd700;letter-spacing:2px;
}
.race-hud .timer{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.7);border:2px solid #ffd700;border-radius:8px;
  padding:8px 24px;font-size:24px;font-weight:bold;color:#ffd700;letter-spacing:3px;
  font-family:'Courier New',monospace;
}
.race-hud .countdown{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-weight:900;letter-spacing:8px;
  font-size:160px;color:#ff1493;pointer-events:none;
  text-shadow:6px 6px 0 #000,0 0 40px rgba(255,20,147,.9),0 0 80px rgba(255,255,255,.5);
  animation:cdPop .35s ease-out;
}
.race-hud .countdown.go{
  color:#ffd700;font-size:200px;letter-spacing:14px;
  text-shadow:8px 8px 0 #000,0 0 50px rgba(255,215,0,1),0 0 100px rgba(255,255,255,.6);
  animation:cdPop .25s ease-out, cdGoPulse .4s ease-out 0.25s;
}
@keyframes cdPop{
  0%{transform:translateY(-50%) scale(2.5);opacity:0;}
  60%{transform:translateY(-50%) scale(.85);opacity:1;}
  100%{transform:translateY(-50%) scale(1);opacity:1;}
}
@keyframes cdGoPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.6) hue-rotate(20deg);}
}
.race-hud .start-flash{
  position:absolute;inset:0;background:#ffd700;pointer-events:none;
  opacity:0;animation:startFlash .6s ease-out;
}
@keyframes startFlash{0%{opacity:0;}10%{opacity:.85;}100%{opacity:0;}}
.race-hud .finish-banner{
  position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);
  font-size:90px;font-weight:900;color:#ffd700;letter-spacing:8px;
  text-shadow:6px 6px 0 #000,0 0 60px rgba(255,215,0,1);
  pointer-events:none;animation:finishBounce 1.2s cubic-bezier(.18,.9,.3,1.2);
}
@keyframes finishBounce{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(-30deg);opacity:0;}
  60%{transform:translate(-50%,-50%) scale(1.15) rotate(5deg);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}
}
/* 紙吹雪 */
.race-hud .confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.race-hud .confetti span{
  position:absolute;top:-20px;width:10px;height:14px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(800px) rotate(720deg);opacity:.8;}
}
.race-hud .ready,.race-hud .result{
  position:absolute;inset:0;background:rgba(0,0,0,.7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.race-hud .ready h2,.race-hud .result h2{
  margin:0;font-size:42px;color:#ffd700;text-shadow:3px 3px 0 #b0008b,5px 5px 0 #000;
  letter-spacing:6px;
}
.race-hud .ready .vs{display:flex;gap:30px;align-items:center;margin:20px 0;}
.race-hud .ready .vs img{width:110px;height:110px;border:4px solid currentColor;border-radius:50%;background:#000;}
.race-hud .ready .vs .p1{color:#ff1493;}
.race-hud .ready .vs .p2{color:#00bfff;}
.race-hud .ready .vs .vstxt{font-size:36px;font-weight:900;color:#ffd700;}
.race-hud .ready .nm{font-size:18px;margin-top:8px;font-weight:bold;color:currentColor;}
.race-hud .ready .modes{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;justify-content:center;}
.race-hud .ready .modes button{
  background:#ff1493;color:#fff;border:4px solid #fff;border-radius:40px;
  padding:14px 30px;font-weight:900;font-size:16px;cursor:pointer;font-family:inherit;
  box-shadow:4px 4px 0 #000;letter-spacing:2px;pointer-events:auto;
}
.race-hud .ready .modes button:hover{background:#ffd700;color:#111;}
.race-hud .ready .modes button.m2{background:#00bfff;}
.race-hud .ready .modes button.m2:hover{background:#ffd700;color:#111;}
.race-hud .ready .vrank{
  margin-top:10px;background:transparent;color:#ffd700;border:2px solid #ffd700;border-radius:30px;
  padding:6px 18px;font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:2px;pointer-events:auto;
}
.race-hud .ready .vrank:hover{background:#ffd700;color:#111;}
@keyframes rcblink{50%{opacity:.3;}}

.race-hud .name-form{
  margin-top:16px;text-align:center;
}
.race-hud .name-form input{
  width:240px;padding:10px;font-size:16px;text-align:center;
  background:#000;color:#ffd700;border:3px solid #ffd700;border-radius:6px;
  font-family:inherit;pointer-events:auto;
}
.race-hud .name-form button{
  margin-left:8px;background:#ff1493;color:#fff;border:3px solid #fff;border-radius:30px;
  padding:10px 22px;font-weight:900;font-size:14px;cursor:pointer;font-family:inherit;
  box-shadow:3px 3px 0 #000;pointer-events:auto;
}
.race-hud .ranking-box{
  width:90%;max-width:560px;margin-top:14px;
  max-height:300px;overflow-y:auto;
  background:#15151f;border:3px solid #ffd700;border-radius:10px;padding:12px;
}
.race-hud .ranking-box .r-row{
  display:flex;gap:10px;align-items:center;
  padding:6px 10px;margin:3px 0;border-radius:5px;
  background:#1c1c1c;font-size:13px;color:#fff;
}
.race-hud .ranking-box .r-row.me{background:#3a1e1e;border:2px solid #ffd700;}
.race-hud .ranking-box .r-row .rk{min-width:44px;font-weight:bold;color:#ffd700;}
.race-hud .ranking-box .r-row .nm{flex:1;font-weight:bold;}
.race-hud .ranking-box .r-row .tm{color:#ffd700;font-weight:bold;font-family:'Courier New',monospace;}
.race-hud .ranking-box .r-row .ch{color:#aaa;font-size:11px;}
.race-hud .result h2.winner1{color:#ff1493;}
.race-hud .result h2.winner2{color:#00bfff;}
.race-hud .result img{width:140px;height:140px;border:5px solid currentColor;border-radius:50%;margin:14px;background:#000;}
.race-hud .result .name{font-size:24px;font-weight:bold;color:#fff;}
.race-hud .result .loser{margin-top:14px;font-size:13px;color:#aaa;}
.race-hud .result .retry{margin-top:18px;font-size:18px;color:#ffd700;font-weight:bold;animation:rcblink 1s infinite;}

.race-controls{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;
}
.race-ctrl{
  background:#15151f;border:3px solid #ff1493;border-radius:10px;
  padding:12px;text-align:center;
}
.race-ctrl.p2{border-color:#00bfff;}
.race-ctrl h3{margin:0 0 8px;font-size:15px;letter-spacing:2px;color:#ff66b3;}
.race-ctrl.p2 h3{color:#00bfff;}
.race-ctrl .keys{font-size:12px;line-height:1.7;color:#ddd;}
.race-ctrl .keys b{color:#ffd700;background:#000;padding:2px 8px;border-radius:4px;margin:0 2px;}

.race-help{
  font-size:12px;color:#aaa;text-align:center;
  margin-top:12px;line-height:1.7;
}
.race-help b{color:#ffd700;}

/* モバイル仮想パッド */
.race-pad{display:none;justify-content:space-between;align-items:flex-end;margin-top:14px;padding:0 6px;gap:10px;}
.race-pad .steer{display:flex;gap:10px;}
.race-pad .act{display:grid;grid-template-columns:auto auto;gap:8px;align-items:end;justify-items:end;}
.race-pad .rp-btn{
  font-family:inherit;font-weight:900;cursor:pointer;color:#fff;
  border:4px solid #fff;border-radius:14px;background:#333;
  touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  box-shadow:0 0 12px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;text-align:center;
}
.race-pad .steer .rp-btn{width:72px;height:72px;font-size:30px;background:#1e3a5f;border-color:#00bfff;}
.race-pad .rp-btn.accel{width:100px;height:82px;font-size:18px;background:#ff1493;border-color:#fff;box-shadow:0 0 18px #ff1493;}
.race-pad .rp-btn.brake{width:82px;height:64px;font-size:14px;background:#555;}
.race-pad .rp-btn.drift{width:82px;height:64px;font-size:13px;background:#e040fb;line-height:1.15;flex-direction:column;}
.race-pad .rp-btn.drift span{font-size:9px;font-weight:normal;opacity:.85;}
.race-pad .rp-btn.item{width:64px;height:58px;font-size:24px;background:#ffd700;color:#111;border-color:#ffd700;}
.race-pad .rp-btn:active{filter:brightness(1.4);}
@media (pointer:coarse), (max-width:760px){
  .race-pad{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    margin:0;padding:10px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 30%);
  }
  .race-controls{margin-bottom:170px;}   /* 固定パッドの下に隠れないよう余白 */
}