/* =========================================================
   WANGAN 333  ―  arcade-style UI (3DX inspired)
   ステージは 1024x768 (4:3) 固定で、JS が画面に合わせて拡大縮小する
   ========================================================= */
:root{
  --jp:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;
  --en:'Exo 2','Arial Black','Noto Sans JP',sans-serif;
  --brush:'Yuji Boku','Noto Serif JP','Hiragino Mincho ProN',serif;
  --glow:#2b8cff;
  --red:#e3001b;
  --gold:#ffcc1a;
  --navy:#0d1748;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:var(--jp);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
body{background:#030303 radial-gradient(ellipse at center,#15171b 0%,#030303 75%)}
#stage{position:absolute;left:50%;top:50%;width:1024px;height:768px;transform-origin:50% 50%;
  transform:translate(-50%,-50%);overflow:hidden;background:#000;box-shadow:0 0 60px rgba(0,0,0,.9)}
#bgl{position:absolute;inset:0}
#gl,#hud{position:absolute;left:0;top:0;width:1024px;height:768px;display:block}
#hud{pointer-events:none}
#ui{position:absolute;inset:0}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .22s linear;z-index:90}
#fade.on{opacity:1}
#boot{position:absolute;inset:0;background:#000;z-index:99;display:grid;place-items:center;transition:opacity .4s}
#boot.hide{opacity:0;pointer-events:none}
.boot-in{font:italic 800 28px var(--en);letter-spacing:6px;color:#9aa}
.boot-in span{animation:blink 1s steps(2) infinite}

/* ---------- 汎用 ---------- */
.scr{position:absolute;inset:0;overflow:hidden}
.ol{ /* 黒フチ文字 */
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 -2px 0 #000,0 2px 0 #000,-2px 0 0 #000,2px 0 0 #000,0 0 6px rgba(0,0,0,.6)}
.ol-w{text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 -2px 0 #fff,0 2px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff}
.skew{display:inline-block;transform:skewX(-12deg)}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes slideL{from{transform:translateX(-80px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(80px);opacity:0}to{transform:none;opacity:1}}
@keyframes popIn{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-10px,6px)}40%{transform:translate(9px,-7px)}60%{transform:translate(-7px,-4px)}80%{transform:translate(6px,5px)}}
@keyframes flash{from{opacity:1}to{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- メニュー背景 (明るいグレー + 光の筋) ---------- */
.menu-bg{background:
  linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.75) 46%,transparent 56%),
  linear-gradient(115deg,transparent 0 62%,rgba(255,255,255,.45) 66%,transparent 72%),
  repeating-linear-gradient(115deg,rgba(0,0,0,.025) 0 2px,transparent 2px 9px),
  radial-gradient(ellipse at 50% 42%,#ffffff 0%,#ececec 40%,#c9cbce 100%)}
.menu-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.18),transparent 70%);pointer-events:none}

/* ---------- ヘッダー ---------- */
.hdr{position:absolute;left:0;top:0;width:100%;height:60px;z-index:20;
  background:linear-gradient(180deg,#9a9a9a 0%,#4a4a4a 6%,#232323 40%,#050505 100%);
  box-shadow:0 2px 0 #d8d8d8,0 4px 0 #6a6a6a,0 8px 14px rgba(0,0,0,.35)}
.hdr::before{content:"";position:absolute;left:0;top:0;width:62%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.hdr::after{content:"";position:absolute;right:120px;top:0;width:300px;height:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 70%,transparent);transform:skewX(-30deg)}
.hdr-text{position:absolute;left:26px;top:9px;font:900 28px/40px var(--jp);letter-spacing:2px;color:#fff;
  transform:skewX(-14deg);transform-origin:left;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,3px 3px 0 #a3001a,0 0 8px rgba(0,0,0,.8)}
.tbadge{position:absolute;right:14px;top:-4px;width:120px;height:100px;z-index:21;
  border-radius:0 0 60px 60px/0 0 50px 50px;
  background:radial-gradient(ellipse at 50% 15%,#5d5d5d 0%,#1d1d1d 45%,#000 100%);
  border:3px solid #b9b9b9;border-top:none;
  box-shadow:0 0 0 2px #262626,0 6px 12px rgba(0,0,0,.55),inset 0 -3px 0 #3c3c3c}
.tbadge .lbl{position:absolute;top:9px;width:100%;text-align:center;font:italic 900 17px/1 var(--en);
  letter-spacing:1px;color:#ff2b2b;text-shadow:0 0 3px #000,0 0 6px rgba(255,40,40,.6)}
.tbadge .num{position:absolute;top:26px;width:100%;text-align:center;font:italic 900 58px/1 var(--en);
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 45%,#ffb3b3 55%,#ff4a4a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.5px #7a0010;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(255,0,0,.45))}
.tbadge.hurry .num{animation:pulse .5s infinite}

/* ---------- 下部の操作バー ---------- */
.bbar{position:absolute;left:28px;right:28px;bottom:16px;height:48px;border-radius:24px;z-index:15;
  background:linear-gradient(180deg,#7a7a7a 0%,#3a3a3a 30%,#1b1b1b 60%,#0a0a0a 100%);
  border:2px solid #a8a8a8;box-shadow:0 0 0 2px #2b2b2b,0 4px 10px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.18);
  display:flex;align-items:center;padding:0 24px;gap:28px}
.hint{display:flex;align-items:center;gap:8px}
.hint .ico{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#777,#1a1a1a 70%);border:2px solid #c9c9c9;box-shadow:0 0 0 1px #000}
.hint .ico svg{width:24px;height:24px}
.hint .tag{background:linear-gradient(#fff,#d6d6d6);color:#111;border-radius:12px;padding:2px 12px;font:900 14px/18px var(--jp);
  box-shadow:inset 0 -1px 0 #999}
.hint .hk{font:700 12px var(--en);color:#bbb;margin-left:2px}
.bbar .right{margin-left:auto;font:italic 800 14px var(--en);color:#ccc;letter-spacing:1px}

/* ---------- 丸ボタン (クローム) ---------- */
.crow{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px}
.cbtn{position:relative;width:116px;height:116px;border-radius:50%;flex:none;cursor:pointer;
  border:5px solid transparent;
  background:radial-gradient(circle at 50% 28%,#555 0%,#1d1d1d 52%,#000 100%) padding-box,
    linear-gradient(150deg,#ffffff 0%,#8a8a8a 30%,#f5f5f5 52%,#555 78%,#d4d4d4 100%) border-box;
  box-shadow:0 0 0 2px #252525,0 6px 12px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#d9d9d9;transition:width .18s ease,height .18s ease,box-shadow .18s,border-width .18s}
.cbtn .cl{font:900 16px/1.15 var(--jp);transform:skewX(-8deg);text-shadow:0 2px 0 #000}
.cbtn .cs{font:700 11px/1 var(--jp);color:#aaa;margin-top:2px}
.cbtn .ci{width:46px;height:34px;margin-top:6px;border-radius:6px;background:#eee;display:grid;place-items:center;transition:all .18s}
.cbtn .ci svg{width:90%;height:90%}
.cbtn.sel{width:232px;height:232px;border-width:8px;color:#fff;z-index:2;
  box-shadow:0 0 0 3px #1a1a1a,0 0 24px 8px rgba(43,140,255,.95),0 0 70px 20px rgba(43,140,255,.35)}
.cbtn.sel .cl{font-size:34px;letter-spacing:0}
.cbtn.sel .cs{font-size:15px;color:#ddd;margin-top:4px}
.cbtn.sel .ci{width:96px;height:66px;margin-top:10px;border-radius:10px}
.cbtn.locked{filter:grayscale(1) brightness(.62)}
.cbtn.locked::after{content:"LOCK";position:absolute;bottom:5%;font:italic 900 12px var(--en);color:#ff5050;letter-spacing:1px}
.cbtn.sel.locked::after{content:"準備中";font:900 16px var(--jp);bottom:7%}
.cbtn.dimmed{opacity:.55}
.chev{position:absolute;top:50%;width:46px;height:44px;margin-top:-22px;pointer-events:none;z-index:3}
.chev.r{right:-58px}
.chev.l{left:-58px;transform:scaleX(-1)}
.chev svg{width:100%;height:100%;animation:chevmove .6s ease-in-out infinite alternate}
@keyframes chevmove{from{transform:translateX(-3px)}to{transform:translateX(4px)}}

/* レベル用の色タグ */
.ltag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);padding:2px 16px;border-radius:7px;white-space:nowrap;
  font:900 16px/22px var(--jp);color:#fff;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.4);
  text-shadow:-1px -1px 0 #0006,1px 1px 0 #0006}
.ltag::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-7px;border:7px solid transparent;border-top-color:inherit;border-bottom:0}
.cbtn.sel .ltag{font-size:22px;line-height:30px;top:-40px;padding:2px 26px}
.lv-1 .ltag{background:linear-gradient(#5aa0ff,#1f5fd9)}
.lv-2 .ltag{background:linear-gradient(#7fd77f,#2e9a3c)}
.lv-3 .ltag{background:linear-gradient(#f5b26b,#c56a1c)}
.lv-4 .ltag{background:linear-gradient(#ff7b7b,#c2202d)}
.lv-2{background:radial-gradient(circle at 50% 28%,#2f6a3c 0%,#123a1d 55%,#061a0c 100%) padding-box,linear-gradient(150deg,#fff 0%,#8a8a8a 30%,#f5f5f5 52%,#555 78%,#d4d4d4 100%) border-box}
.lv-3{background:radial-gradient(circle at 50% 28%,#7b4c28 0%,#4a2a12 55%,#1d0f05 100%) padding-box,linear-gradient(150deg,#fff 0%,#8a8a8a 30%,#f5f5f5 52%,#555 78%,#d4d4d4 100%) border-box}
.lv-4{background:radial-gradient(circle at 50% 28%,#7a2a32 0%,#4a1218 55%,#1d0508 100%) padding-box,linear-gradient(150deg,#fff 0%,#8a8a8a 30%,#f5f5f5 52%,#555 78%,#d4d4d4 100%) border-box}

/* 説明テキスト */
.desc{position:absolute;left:60px;right:60px;bottom:84px;height:92px;display:flex;align-items:center;gap:18px;z-index:4}
.desc .box{flex:1;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,235,235,.92));border:2px solid #9a9a9a;border-radius:10px;
  padding:12px 20px;color:#222;font:700 17px/1.55 var(--jp);box-shadow:0 3px 8px rgba(0,0,0,.18);position:relative}
.desc .box::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:6px;border-radius:3px;background:linear-gradient(#2b8cff,#1849b8)}
.desc .box b{color:#c8001a}

/* 顔アイコン列 */
.prow{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:12px}
.pface{width:86px;height:86px;border:4px solid #1d4fd8;border-radius:4px;background:#cfd8ff;overflow:hidden;position:relative;cursor:pointer;
  box-shadow:0 0 0 2px #fff,0 0 0 4px #0b2a8a,0 4px 8px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.pface svg{width:100%;height:100%;display:block}
.pface.q{background:linear-gradient(#2a5cff,#0b2a9a);display:grid;place-items:center;font:italic 900 52px var(--en);color:#fff;
  text-shadow:0 3px 0 #001060}
.pface.sel{transform:scale(1.14);box-shadow:0 0 0 2px #fff,0 0 0 4px #0b2a8a,0 0 18px 6px rgba(43,140,255,.9)}
.pface .nm{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);font:700 11px/16px var(--jp);text-align:center}

/* はい/いいえ等の小さな選択肢 */
.pills{display:flex;gap:24px;justify-content:center}
.pill{min-width:200px;padding:12px 26px;border-radius:30px;text-align:center;cursor:pointer;font:900 20px var(--jp);color:#fff;
  background:linear-gradient(180deg,#5a5a5a,#1a1a1a 60%,#000);border:3px solid #bdbdbd;box-shadow:0 0 0 2px #222,0 4px 8px rgba(0,0,0,.4);
  transition:box-shadow .15s,transform .15s}
.pill.sel{box-shadow:0 0 0 2px #222,0 0 18px 6px rgba(43,140,255,.95);transform:scale(1.06)}
.pill.dis{opacity:.4}

/* ---------- タイトル ---------- */
.title-scr{background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.8) 100%)}
.logo{position:absolute;left:0;right:0;top:120px;text-align:center;animation:popIn .8s ease-out both}
.logo .l1{display:inline-flex;align-items:flex-end;gap:14px;transform:skewX(-10deg)}
.logo .kanji{font:900 92px/1 var(--jp);color:#fff;letter-spacing:-4px;
  text-shadow:0 0 1px #000,4px 4px 0 #000,0 0 20px rgba(0,120,255,.6)}
.logo .sub{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:6px}
.logo .sub .a{font:italic 900 34px/1 var(--en);letter-spacing:2px;color:#fff;text-shadow:3px 3px 0 #000}
.logo .sub .b{font:italic 800 18px/1.2 var(--en);letter-spacing:6px;color:#9fc8ff;text-shadow:2px 2px 0 #000}
.logo .num{font:italic 900 168px/0.9 var(--en);letter-spacing:-6px;margin-left:4px;
  background:linear-gradient(180deg,#ffffff 0%,#dfe6ee 30%,#8e98a4 48%,#2b3138 52%,#a9b4c0 70%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #000;
  filter:drop-shadow(5px 5px 0 #b3001a) drop-shadow(0 0 18px rgba(255,40,40,.45))}
.logo .tag{margin-top:6px;font:900 22px var(--jp);letter-spacing:12px;color:#fff;text-shadow:2px 2px 0 #000}
.logo .tag em{font-style:normal;color:#ffcc1a}
.press{position:absolute;left:0;right:0;top:520px;text-align:center;font:italic 900 34px var(--en);letter-spacing:4px;color:#ffcc1a;
  text-shadow:3px 3px 0 #000;animation:blink 1.1s steps(2) infinite}
.press small{display:block;font:700 15px var(--jp);letter-spacing:2px;color:#fff;margin-top:6px;animation:none}
.credit{position:absolute;right:26px;bottom:20px;font:italic 800 20px var(--en);letter-spacing:2px;color:#fff;text-shadow:2px 2px 0 #000}
.coinbtn{position:absolute;left:26px;bottom:16px;display:flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:30px;cursor:pointer;
  background:linear-gradient(#3a3a3a,#000);border:2px solid #aaa;font:900 16px var(--jp)}
.coinbtn .coin{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9ccd2 40%,#7d828b);border:2px solid #555;
  display:grid;place-items:center;font:900 11px var(--en);color:#333}
.disclaimer{position:absolute;left:0;right:0;bottom:74px;text-align:center;font:500 11px/1.6 var(--jp);color:rgba(255,255,255,.62);text-shadow:1px 1px 0 #000}
.controls-help{position:absolute;left:0;right:0;top:620px;text-align:center;font:700 13px var(--jp);color:#ddd;text-shadow:1px 1px 0 #000}
.controls-help kbd{display:inline-block;min-width:22px;padding:0 6px;margin:0 2px;border-radius:4px;background:#eee;color:#111;font:800 12px/20px var(--en)}

/* ---------- 名前入力 ---------- */
.ne-field{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:560px;height:84px;border-radius:12px;
  background:linear-gradient(#1b2a6b,#0a1440);border:4px solid #c9c9c9;box-shadow:0 0 0 2px #222,0 6px 14px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;gap:10px}
.ne-field .ch{width:64px;height:62px;border-bottom:4px solid #6f8cff;font:900 46px/62px var(--jp);text-align:center;color:#fff;text-shadow:0 0 10px #4a7bff}
.ne-field .ch.cur{border-bottom-color:#ffcc1a;animation:blink .8s steps(2) infinite}
.ne-grid{position:absolute;left:50%;top:206px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(10,64px);gap:8px}
.key{height:56px;border-radius:10px;display:grid;place-items:center;cursor:pointer;font:900 26px var(--jp);color:#fff;
  background:radial-gradient(circle at 50% 25%,#555,#1a1a1a 60%,#000);border:3px solid #b5b5b5;box-shadow:0 0 0 1px #222,0 3px 6px rgba(0,0,0,.35);transition:box-shadow .1s,transform .1s}
.key.wide{grid-column:span 2;font-size:19px}
.key.sel{box-shadow:0 0 0 1px #222,0 0 14px 5px rgba(43,140,255,.95);transform:scale(1.08);z-index:2}
.key.fn{background:radial-gradient(circle at 50% 25%,#3d64d8,#14307a 60%,#081a4a)}
.key.ok{background:radial-gradient(circle at 50% 25%,#e04848,#9a1020 60%,#4a0008)}

/* ---------- カードデータ (紺) ---------- */
.navy-bg{background:radial-gradient(ellipse at 60% 50%,#26318a 0%,#141c5e 45%,#070b2c 100%)}
.navy-strip{position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(#3b3f63,#14183a);border-bottom:2px solid #8c93c7;
  display:flex;align-items:center;gap:40px;padding:0 26px;font:800 19px var(--jp);color:#eef;letter-spacing:1px;z-index:3}
.navy-strip .en{font:italic 900 20px var(--en);letter-spacing:3px}
.navy-strip .hp{margin-left:auto;font:italic 900 20px var(--en)}
.tcard{position:absolute;left:44px;top:110px;width:420px;height:270px;border-radius:14px;overflow:hidden;color:#111;
  background:linear-gradient(170deg,#ffffff 0%,#eef0f5 60%,#d9dde8 100%);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 2px #fff inset;transform:rotate(-3deg);
  animation:slideL .5s ease-out both}
.tcard .th{height:38px;background:linear-gradient(90deg,#8a1b7a,#c43aa8 50%,#7a1670);display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  font:italic 900 20px var(--en);letter-spacing:4px;color:#fff;text-shadow:2px 2px 0 #4a0040}
.tcard .th small{font:700 12px var(--en);letter-spacing:1px}
.tcard .row{display:flex;align-items:baseline;gap:12px;padding:5px 16px 0}
.tcard .k{width:44px;flex:none;font:900 12px var(--jp);color:#fff;background:#444;border-radius:3px;text-align:center;line-height:18px}
.tcard .v{font:700 19px var(--jp);color:#1a1a3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .v.big{font:italic 900 28px var(--en)}
.tcard .foot{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(90deg,#222,#444);display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  font:italic 800 14px var(--en);color:#fff;letter-spacing:2px}
.tcard .chip{position:absolute;right:18px;top:52px;width:46px;height:36px;border-radius:6px;background:linear-gradient(135deg,#f6e27a,#c9a227 60%,#f3dc7a);border:1px solid #8a6d10}
.cd-info{position:absolute;left:44px;top:410px;width:420px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-info div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:8px 12px;font:700 13px var(--jp);color:#cfd6ff}
.cd-info b{display:block;font:italic 900 22px var(--en);color:#fff}
.plate{position:absolute;padding:10px 26px;border-radius:8px;background:linear-gradient(180deg,#ffffff 0%,#c9ced6 48%,#9aa3ae 52%,#e7eaee 100%);
  border:3px solid #6b7480;box-shadow:0 0 0 2px #fff,0 6px 16px rgba(0,0,0,.45)}
.plate .pn{font:italic 900 34px/1 var(--en);letter-spacing:1px;color:#1238b8;text-shadow:1px 1px 0 #fff}
.plate .ps{font:700 14px var(--jp);color:#333;margin-top:4px}

/* ---------- 車種選択 ---------- */
.carlist{position:absolute;left:24px;top:90px;width:290px;display:flex;flex-direction:column;gap:8px;z-index:4}
.citem{height:52px;border-radius:26px 8px 8px 26px;padding:0 16px 0 58px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#5b5b5b,#1d1d1d 55%,#000);border:3px solid #b8b8b8;box-shadow:0 0 0 1px #222,0 3px 6px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.citem .no{position:absolute;left:6px;top:5px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#aab);color:#123;display:grid;place-items:center;font:italic 900 18px var(--en)}
.citem .n{font:italic 900 20px/1.1 var(--en);letter-spacing:1px}
.citem .s{font:700 11px var(--jp);color:#bbb}
.citem.sel{transform:translateX(14px);box-shadow:0 0 0 1px #222,0 0 16px 5px rgba(43,140,255,.95)}
.stats{position:absolute;right:26px;top:96px;width:300px;padding:14px 18px;border-radius:12px;background:rgba(10,14,30,.82);border:2px solid #9aa;z-index:4;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.stats h3{font:italic 900 15px var(--en);letter-spacing:3px;color:#8fc0ff;margin-bottom:8px}
.stat{display:flex;align-items:center;gap:10px;margin:7px 0;font:700 14px var(--jp)}
.stat span{width:64px}
.stat .bar{flex:1;height:12px;border-radius:6px;background:#2a2f40;overflow:hidden;border:1px solid #556}
.stat .bar i{display:block;height:100%;background:linear-gradient(90deg,#1e6bff,#7ad0ff);transition:width .3s}
.stats .spec{margin-top:10px;font:700 13px/1.6 var(--jp);color:#cfd8ef}
.colors{position:absolute;left:0;right:0;bottom:84px;display:flex;justify-content:center;gap:16px;z-index:4}
.cchip{width:62px;height:62px;border-radius:50%;cursor:pointer;border:4px solid #ddd;box-shadow:0 0 0 2px #222,0 3px 8px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;position:relative}
.cchip.sel{transform:scale(1.2);box-shadow:0 0 0 2px #222,0 0 16px 6px rgba(43,140,255,.95)}
.cname{position:absolute;left:0;right:0;bottom:160px;text-align:center;font:900 24px var(--jp);color:#fff;z-index:4}
.confirm-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:560px;padding:30px;border-radius:16px;z-index:30;
  background:linear-gradient(180deg,rgba(30,30,30,.96),rgba(0,0,0,.96));border:3px solid #bbb;box-shadow:0 0 0 2px #000,0 10px 40px rgba(0,0,0,.6);text-align:center;animation:popIn .25s ease-out both}
.confirm-box .q{font:900 24px/1.6 var(--jp);margin-bottom:22px}
.confirm-box .q small{display:block;font:700 15px var(--jp);color:#bbb}

/* ---------- コース/時間帯 ---------- */
.course-row{position:absolute;left:0;right:0;top:92px;display:flex;justify-content:center;gap:10px}
.cthumb{width:150px;height:112px;border:3px solid #999;background:#333;position:relative;cursor:pointer;transition:all .15s;overflow:hidden}
.cthumb canvas{width:100%;height:100%;display:block}
.cthumb .t{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.85));font:900 14px var(--jp);padding:10px 6px 4px;text-shadow:1px 1px 0 #000}
.cthumb.sel{width:220px;border-color:#fff;box-shadow:0 0 0 2px #222,0 0 18px 6px rgba(43,140,255,.9)}
.cthumb.locked{filter:grayscale(1) brightness(.55)}
.course-map{position:absolute;left:50%;top:250px;transform:translateX(-50%);width:600px;height:330px;border-radius:12px;overflow:hidden;
  border:3px solid #aaa;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.course-map canvas{width:100%;height:100%;display:block}
.course-info{position:absolute;left:50%;top:520px;transform:translateX(-50%);font:900 18px var(--jp);color:#222;white-space:nowrap}

/* ---------- ストーリー (ADV) ---------- */
.story{background:#000}
.st-bg{position:absolute;inset:0}
.st-bg svg{width:100%;height:100%;display:block}
.st-tone{position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(#000 1px,transparent 1.4px);background-size:5px 5px}
.st-chars{position:absolute;inset:0}
.st-char{position:absolute;bottom:118px;width:460px;height:613px;transition:filter .25s,opacity .3s,transform .3s}
.st-char svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 12px rgba(0,0,0,.6))}
.st-char.dim{filter:brightness(.42) saturate(.6)}
.st-char.pos-l{left:-30px;animation:slideL .35s ease-out both}
.st-char.pos-r{right:-30px;animation:slideR .35s ease-out both}
.st-char.pos-c{left:282px;animation:slideR .35s ease-out both}
.st-lines{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.st-lines.on{opacity:1}
.st-box{position:absolute;left:24px;right:24px;bottom:22px;height:184px;border-radius:14px;z-index:5;
  background:linear-gradient(180deg,rgba(8,10,22,.88),rgba(0,0,0,.94));border:3px solid #c8c8c8;box-shadow:0 0 0 2px #000,0 8px 20px rgba(0,0,0,.6)}
.st-box::before{content:"";position:absolute;left:12px;right:12px;top:6px;height:2px;background:linear-gradient(90deg,transparent,rgba(120,170,255,.5),transparent)}
.st-name{position:absolute;left:36px;top:-24px;padding:4px 30px 4px 22px;font:900 22px/32px var(--jp);color:#fff;letter-spacing:2px;
  background:linear-gradient(100deg,#c4001b 0%,#7a0010 100%);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);text-shadow:2px 2px 0 #000}
.st-name.nar{display:none}
.st-name.p{background:linear-gradient(100deg,#1f5fd9,#0b2a8a)}
.st-name.t{background:linear-gradient(100deg,#2e8a3c,#11461a)}
.st-text{position:absolute;left:40px;right:40px;top:30px;font:700 26px/1.6 var(--jp);color:#fff;text-shadow:2px 2px 0 #000;white-space:pre-wrap}
.st-text.nar{font-style:normal;color:#d6dcff}
.st-next{position:absolute;right:26px;bottom:14px;color:#ffcc1a;font-size:22px;animation:floaty .7s infinite}
.st-skip{position:absolute;right:20px;top:18px;z-index:6;padding:6px 16px;border-radius:16px;background:rgba(0,0,0,.6);border:2px solid #aaa;
  font:italic 900 15px var(--en);letter-spacing:2px;cursor:pointer}
.st-choices{position:absolute;left:0;right:0;top:250px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:7}
.st-choices .pill{min-width:420px}
.st-flash{position:absolute;inset:0;background:#fff;pointer-events:none;opacity:0;z-index:8}
.st-flash.go{animation:flash .5s ease-out}
.shake{animation:shake .35s linear 2}
.ep-card{position:absolute;inset:0;z-index:10;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.ep-card .band{position:absolute;left:-10%;right:-10%;top:300px;height:170px;background:linear-gradient(90deg,#4a0008,#c4001b 30%,#ff2a3a 50%,#c4001b 70%,#4a0008);
  transform:skewY(-4deg) scaleX(0);transform-origin:left;animation:bandIn .5s .2s ease-out forwards}
@keyframes bandIn{to{transform:skewY(-4deg) scaleX(1)}}
.ep-card .s{position:relative;font:italic 900 30px var(--en);letter-spacing:12px;color:#ffcc1a;animation:slideL .5s .5s both;text-shadow:2px 2px 0 #000}
.ep-card .e{position:relative;font:900 34px var(--jp);letter-spacing:8px;margin:8px 0 4px;animation:slideL .5s .6s both;text-shadow:3px 3px 0 #000}
.ep-card .t{position:relative;font:400 104px/1.15 var(--brush);color:#fff;animation:popIn .6s .8s both;
  text-shadow:-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,6px 6px 0 #000,0 0 30px rgba(255,255,255,.35)}
.ep-card .c{position:relative;margin-top:22px;font:700 16px var(--jp);color:#bbb;letter-spacing:4px;animation:slideR .5s 1.1s both}

/* ---------- レース中 HUD (HTML部分) ---------- */
.rpanel{position:absolute;right:14px;top:12px;display:flex;gap:10px;align-items:flex-start;z-index:5}
.rpanel .face{width:78px;height:78px;border:3px solid #1d4fd8;box-shadow:0 0 0 2px #fff,0 0 0 4px #0b2a8a;background:#cfd8ff;overflow:hidden}
.rpanel .face svg{width:100%;height:100%;display:block}
.rpanel .info{text-align:right;padding-top:2px}
.rpanel .nm{font:900 20px var(--jp)}
.rpanel .car{font:italic 800 13px var(--en);color:#ddd;letter-spacing:1px}
.rpanel .gap{font:italic 900 26px var(--en);margin-top:2px}
.rpanel .gap.ahead{color:#5fb0ff}
.rpanel .gap.behind{color:#ff4a5a}
.cutin{position:absolute;left:236px;right:110px;top:100px;z-index:6;display:flex;align-items:flex-start;gap:14px;pointer-events:none;
  opacity:0;transform:translateY(-10px);transition:opacity .2s,transform .2s}
.cutin.on{opacity:1;transform:none}
.cutin .tx{flex:1;font:900 25px/1.45 var(--jp);color:#fff;text-align:center;padding-top:16px}
.cutin .fc{width:140px;height:150px;flex:none;border:3px solid #fff;box-shadow:0 0 0 3px #c4001b,0 6px 14px rgba(0,0,0,.6);background:linear-gradient(#ffdede,#ffb0b0);
  clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);overflow:hidden}
.cutin .fc svg{width:120%;height:120%;margin:-6% 0 0 -10%;display:block}
.cutin .who{position:absolute;right:20px;top:150px;font:900 14px var(--jp);background:#c4001b;padding:1px 10px;text-shadow:none}
.toast{position:absolute;left:50%;top:300px;transform:translateX(-50%);z-index:12;padding:10px 24px;border-radius:24px;background:rgba(0,0,0,.75);border:2px solid #ffcc1a;
  font:900 18px var(--jp);color:#ffcc1a;white-space:nowrap;animation:popIn .25s both}
.pause{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.66);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.pause h2{font:italic 900 64px var(--en);letter-spacing:10px;color:#fff;text-shadow:4px 4px 0 #c4001b}
.pause p{font:700 15px var(--jp);color:#ffcc1a;margin-bottom:12px}
.pause .pills{flex-direction:column;align-items:center}
.race-banner{position:absolute;left:0;top:220px;z-index:6;padding:14px 60px 14px 36px;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.6) 80%,transparent);
  animation:slideL .4s ease-out both}
.race-banner .a{font:900 46px var(--jp);letter-spacing:4px;text-shadow:3px 3px 0 #000}
.race-banner .b{font:italic 800 18px var(--en);letter-spacing:4px;color:#ffcc1a}
.race-vs{position:absolute;right:0;top:330px;z-index:6;padding:12px 36px 12px 70px;text-align:right;background:linear-gradient(270deg,rgba(120,0,16,.9),rgba(120,0,16,.6) 75%,transparent);
  animation:slideR .4s .2s ease-out both}
.race-vs .a{font:italic 900 24px var(--en);letter-spacing:4px;color:#ffcc1a}
.race-vs .b{font:900 36px var(--jp);text-shadow:3px 3px 0 #000}
.race-vs .c{font:italic 800 15px var(--en);letter-spacing:2px;color:#fdd}
.skiphint{position:absolute;right:20px;bottom:16px;z-index:6;font:700 13px var(--jp);color:#ccc;text-shadow:1px 1px 0 #000}

/* ---------- リザルト ---------- */
.res-big{position:absolute;left:0;right:0;top:86px;text-align:center;font:italic 900 72px var(--en);letter-spacing:6px;
  background:linear-gradient(180deg,#fff6b0 0%,#ffd21a 45%,#d48a00 55%,#ffe36a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #3a2200;filter:drop-shadow(0 4px 0 #000);animation:popIn .5s both;z-index:4}
.res-big.lose{background:linear-gradient(180deg,#e0f0ff 0%,#7ab8ff 45%,#1d5fd0 55%,#9fd0ff 100%);-webkit-background-clip:text;background-clip:text}
.res-sub{position:absolute;left:0;right:0;top:172px;text-align:center;font:900 26px var(--jp);color:#222;z-index:4}
.res-table{position:absolute;left:50%;top:470px;transform:translateX(-50%);width:600px;z-index:4;border-radius:12px;overflow:hidden;
  background:rgba(10,12,24,.86);border:2px solid #aaa;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.res-table .r{display:flex;justify-content:space-between;align-items:baseline;padding:8px 22px;border-bottom:1px solid rgba(255,255,255,.12);font:700 17px var(--jp)}
.res-table .r b{font:italic 900 26px var(--en)}
.res-table .r b.gold{color:#ffcc1a}
.res-table .r:last-child{border-bottom:none}
.lvup{position:absolute;left:0;right:0;top:170px;text-align:center;z-index:5}
.lvup .h{font:900 52px var(--jp);color:#ffcc1a;letter-spacing:3px;text-shadow:-3px -3px 0 #3a1a00,3px -3px 0 #3a1a00,-3px 3px 0 #3a1a00,3px 3px 0 #3a1a00,0 6px 0 #000;animation:popIn .45s both}
.lvup .from{font:900 30px var(--jp);color:#333;margin-top:24px}
.lvup .arr{font-size:30px;color:#333}
.goldplate{display:inline-block;margin-top:10px;padding:10px 46px;border-radius:14px;font:900 44px var(--jp);color:#2a1600;letter-spacing:4px;
  background:linear-gradient(180deg,#fff6c0 0%,#ffd84a 40%,#d99a00 60%,#ffe680 100%);border:4px solid #fff;box-shadow:0 0 0 3px #8a5a00,0 8px 20px rgba(0,0,0,.35);animation:popIn .5s .3s both}
.hpbar{width:560px;height:30px;margin:26px auto 0;border-radius:15px;background:#222;border:3px solid #ccc;overflow:hidden;box-shadow:0 0 0 2px #333}
.hpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7a00,#ffcc1a,#fff36a);transition:width 1.4s ease-out}
.saving{position:absolute;left:0;right:0;top:330px;text-align:center;font:900 26px var(--jp);color:#222;z-index:5}
.saving .sp{display:inline-block;width:34px;height:34px;border:5px solid #ccc;border-top-color:#2b8cff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:14px}
.tap-next{position:absolute;right:30px;bottom:80px;z-index:6;font:900 16px var(--jp);color:#333;animation:blink 1s steps(2) infinite}

/* ---------- コンティニュー / ゲームオーバー ---------- */
.cont{background:radial-gradient(ellipse at center,#1a1a2a,#000 70%)}
.cont .h{position:absolute;left:0;right:0;top:150px;text-align:center;font:italic 900 80px var(--en);letter-spacing:10px;color:#fff;text-shadow:5px 5px 0 #c4001b}
.cont .n{position:absolute;left:0;right:0;top:250px;text-align:center;font:italic 900 170px/1 var(--en);
  background:linear-gradient(180deg,#fff,#ffd21a 60%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #3a1a00}
.cont .m{position:absolute;left:0;right:0;top:450px;text-align:center;font:900 22px var(--jp);color:#ffcc1a}
.gover{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.gover .h{font:italic 900 86px var(--en);letter-spacing:10px;color:#fff;text-shadow:5px 5px 0 #c4001b;animation:popIn .6s both}
.gover .m{font:700 20px/1.8 var(--jp);color:#ddd;text-align:center}

/* ---------- タッチ操作 ---------- */
.touch-ctl{position:absolute;inset:0;z-index:30;pointer-events:none;display:none}
.touch-ctl.on{display:block}
.tc{position:absolute;bottom:20px;width:120px;height:120px;border-radius:50%;pointer-events:auto;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:3px solid rgba(255,255,255,.4);font:italic 900 22px var(--en);color:rgba(255,255,255,.8)}
.tc.on{background:rgba(43,140,255,.45)}
.tc-left{left:20px}.tc-right{left:160px}
.tc-brake{right:170px;width:110px;height:110px;font-size:17px}.tc-gas{right:24px;bottom:80px;width:130px;height:150px;border-radius:24px}