:root{
  --blue:#1d6ff2; --cyan:#27c7ff; --orange:#ff8a00; --yellow:#ffd23a; --pink:#ff5fa8;
  --panel:rgba(10,20,48,.72); --panel2:rgba(16,32,72,.86); --line:rgba(120,190,255,.35);
  --txt:#f4f8ff; --muted:#a9bddb;
  --ui:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",sans-serif;
  --num:"Arial Black","Impact","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0a1430;color:var(--txt);font-family:var(--ui);user-select:none;-webkit-user-select:none;touch-action:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#fx{position:fixed;inset:0;pointer-events:none;width:100%;height:100%}
#vignette{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(30,140,255,.35) 85%,rgba(60,190,255,.65) 100%)}
#vignette.small{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 60%,rgba(255,150,40,.3) 90%,rgba(255,190,60,.55) 100%)}
#hitflash{position:fixed;inset:0;pointer-events:none;background:rgba(255,60,40,.35);opacity:0;transition:opacity .3s}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.25)}
#rank{position:absolute;left:16px;top:16px;width:210px;padding:8px 0;font-size:14px}
#rank .row{display:flex;align-items:center;gap:8px;padding:4px 12px;transition:background .2s}
#rank .row .p{width:22px;font-family:var(--num);font-style:italic;color:var(--yellow);text-align:center}
#rank .row .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rank .row .dot{width:10px;height:10px;border-radius:50%}
#rank .row.me{background:linear-gradient(90deg,rgba(255,138,0,.55),rgba(255,138,0,0));font-weight:700}
#rank .row.fin .n::after{content:" ✔";color:#6dff9e}
#topc{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:12px;align-items:stretch}
#timebox{padding:6px 18px;text-align:center;min-width:190px}
#timebox .t{font-family:var(--num);font-size:28px;font-style:italic;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
#timebox .s{font-size:12px;color:var(--muted)}
#lapbox{padding:6px 16px;text-align:center}
#lapbox .l{font-family:var(--num);font-size:28px;font-style:italic;color:var(--yellow)}
#lapbox .s{font-size:12px;color:var(--muted)}
#items{display:flex;gap:8px;padding:6px 10px;align-items:center}
#items .slot{width:54px;height:54px;border-radius:10px;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:30px;background:rgba(255,255,255,.08);position:relative}
#items .slot.first{border-color:var(--yellow);box-shadow:0 0 12px rgba(255,210,58,.6)}
#items .slot small{position:absolute;bottom:-16px;font-size:11px;color:#fff;white-space:nowrap;text-shadow:0 1px 2px #000}
#items .hint{font-size:11px;color:var(--muted);line-height:1.5;margin-left:4px}
#minimap{position:absolute;right:16px;top:16px;width:210px;height:210px;padding:0}
#minimap canvas{width:100%;height:100%}
#bigrank{position:absolute;left:22px;bottom:118px;font-family:var(--num);font-style:italic;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.35)}
#bigrank .r{font-size:86px;background:linear-gradient(180deg,#fff 20%,#ffd23a 60%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent}
#bigrank .of{font-size:26px;color:#fff;opacity:.85}
#speedo{position:absolute;right:18px;bottom:18px;width:230px;height:230px}
#speedo canvas{width:100%;height:100%}
#speedo .v{position:absolute;left:0;right:0;top:92px;text-align:center;font-family:var(--num);font-style:italic;font-size:52px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
#speedo .u{position:absolute;left:0;right:0;top:152px;text-align:center;font-size:13px;color:var(--muted);letter-spacing:2px}
#gaugebox{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 16px}
#gauge{width:360px;height:18px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.25)}
#gauge i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#27c7ff,#7af0ff 60%,#fff);box-shadow:0 0 14px #27c7ff}
#gauge.full i{background:linear-gradient(90deg,#ffd23a,#fff3a8)}
#gaugebox .lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.n2o{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:12px;font-style:italic;color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.n2o.on{color:#fff;border-color:#7af0ff;background:radial-gradient(circle,#27c7ff,#1d6ff2);box-shadow:0 0 16px #27c7ff;animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
#msgs{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column;align-items:center;gap:6px}
.msg{font-family:var(--num);font-style:italic;font-size:44px;letter-spacing:2px;color:#fff;
  text-shadow:0 0 10px var(--c,#27c7ff),0 0 22px var(--c,#27c7ff),0 3px 0 rgba(0,0,0,.4);animation:msgIn 1.1s ease-out forwards}
.msg.sm{font-size:26px}
@keyframes msgIn{0%{transform:scale(2.2);opacity:0}12%{transform:scale(.95);opacity:1}20%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-30px);opacity:0}}
#countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--num);font-style:italic;font-size:180px;color:#fff;
  text-shadow:0 0 30px #ff8a00,0 8px 0 rgba(0,0,0,.35)}
#countdown span{animation:cd .9s ease-out forwards}
@keyframes cd{0%{transform:scale(2.6);opacity:0}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.7);opacity:0}}
#warn{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:30px;font-weight:900;color:#ff4b4b;text-shadow:0 0 12px #f00;animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.35}}
#finalcount{position:absolute;left:50%;top:120px;transform:translateX(-50%);font-size:22px;font-weight:700;color:#ffd23a;text-shadow:0 2px 6px #000}
#keys{position:absolute;left:16px;bottom:16px;padding:10px 12px;font-size:12px;line-height:1.75;color:#dfe9ff;max-width:300px}
#keys b{display:inline-block;min-width:22px;padding:0 5px;margin-right:4px;border-radius:4px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);text-align:center;font-weight:700;color:#fff}
#keys .close{color:var(--muted);font-size:11px}
#songtip{position:absolute;right:250px;bottom:30px;font-size:13px;color:#fff;padding:6px 12px;opacity:0;transition:opacity .4s}
#songtip.show{opacity:1}

/* ---------- 触屏 ---------- */
#touch{position:fixed;inset:0;pointer-events:none}
#touch .tb{pointer-events:auto;position:absolute;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;backdrop-filter:blur(4px)}
#touch .tb.on{background:rgba(39,199,255,.5)}
#t-left{left:24px;bottom:34px}#t-right{left:112px;bottom:34px}
#t-drift{right:28px;bottom:120px;width:86px;height:86px}#t-nitro{right:124px;bottom:40px}#t-boost{right:124px;bottom:132px}#t-brake{left:68px;bottom:122px;width:58px;height:58px}#t-swap{right:220px;bottom:40px;width:58px;height:58px}
body.touch #speedo{bottom:auto;top:236px;width:150px;height:150px;right:12px}
body.touch #speedo .v{top:56px;font-size:34px}body.touch #speedo .u{top:96px}
body.touch #keys,body.touch #bigrank{display:none}
body.touch #gauge{width:180px}

#clinks{position:fixed;top:236px;right:16px;z-index:30;display:flex;gap:8px}
body.touch #clinks{top:16px;right:238px}
#clinks a{pointer-events:auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.55;background:rgba(10,16,34,.45);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);transition:opacity .15s}
#clinks a:hover{opacity:1}
#clinks svg{width:18px;height:18px;fill:currentColor}
@media (max-width:860px){#clinks{top:150px}body.touch #clinks{top:16px;right:158px}}

/* ---------- 菜单 ---------- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow:auto;padding:18px 16px}
#menu{background:linear-gradient(180deg,rgba(8,20,55,.35),rgba(8,20,55,.78) 70%,rgba(8,20,55,.92))}
.mlinks{display:flex;gap:18px;justify-content:center;margin-top:10px}
.mlinks a{color:var(--muted);text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.mlinks a:hover{color:#fff}
.mlinks svg{width:14px;height:14px;fill:currentColor}
.logo{font-family:var(--num);font-style:italic;font-size:64px;line-height:1;letter-spacing:4px;
  background:linear-gradient(180deg,#fff 10%,#ffe36b 45%,#ff8a00 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #0b3fb0) drop-shadow(0 0 18px rgba(39,199,255,.6));transform:skewX(-8deg)}
.sub{margin:4px 0 12px;font-size:14px;color:#cfe3ff;letter-spacing:3px}
.menu-grid{width:min(1100px,100%);display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.card{padding:12px 16px}
.card h3{font-size:14px;color:var(--cyan);letter-spacing:2px;margin-bottom:10px;font-weight:800}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{pointer-events:auto;cursor:pointer;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);font-size:14px;color:#e8f1ff;transition:all .15s}
.opt:hover{background:rgba(255,255,255,.16)}
.opt.sel{background:linear-gradient(135deg,var(--orange),#ffb13b);border-color:#ffd48a;color:#fff;font-weight:800;box-shadow:0 0 14px rgba(255,138,0,.5)}
.opt small{display:block;font-size:11px;opacity:.8;font-weight:400}
.maps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.map{cursor:pointer;border-radius:12px;padding:10px 12px;min-height:80px;position:relative;overflow:hidden;border:2px solid transparent;transition:transform .15s}
.map:hover{transform:translateY(-2px)}
.map.sel{border-color:#ffd23a;box-shadow:0 0 18px rgba(255,210,58,.55)}
.map .nm{font-size:20px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.map .en{font-family:var(--num);font-style:italic;font-size:11px;opacity:.85;letter-spacing:2px}
.map .tg{font-size:12px;margin-top:6px;opacity:.95}
.map[data-id=city]{background:linear-gradient(135deg,#2f7fe0,#6fc3ff 60%,#a6e1ff)}
.map[data-id=aegean]{background:linear-gradient(135deg,#1d63c9,#5ab0ff 55%,#f4f1ea)}
.map[data-id=egypt]{background:linear-gradient(135deg,#5b3f9e,#d99b3f 55%,#f3d58f)}
.map[data-id=snow]{background:linear-gradient(135deg,#3f86d6,#bfe1ff 55%,#ffffff);color:#0b2750}
.map[data-id=snow] .nm{text-shadow:none}
.skins{display:flex;flex-wrap:wrap;gap:8px}
.skin{cursor:pointer;width:44px;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.25);position:relative}
.skin.sel{border-color:#ffd23a;box-shadow:0 0 12px rgba(255,210,58,.7);transform:scale(1.08)}
#skinname{font-size:13px;color:#ffd23a;margin-top:8px;height:18px}
.go{pointer-events:auto;cursor:pointer;margin-top:12px;padding:12px 64px;border:none;border-radius:40px;font-family:var(--ui);font-size:24px;font-weight:900;letter-spacing:6px;color:#fff;
  background:linear-gradient(180deg,#ffb13b,#ff7a00);box-shadow:0 6px 0 #b34a00,0 0 30px rgba(255,138,0,.55);transition:transform .1s}
.go:hover{transform:translateY(-2px)}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #b34a00}
.go.sec{background:linear-gradient(180deg,#4a8cff,#1d5fe0);box-shadow:0 6px 0 #0b3a9a}
.keylist{font-size:13px;line-height:1.9;color:#dce8ff}
.keylist b{display:inline-block;min-width:26px;padding:0 6px;margin-right:6px;border-radius:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);text-align:center;color:#fff}
.tip{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px}
.foot{margin-top:14px;font-size:11px;color:rgba(200,220,255,.6)}
#loading{background:rgba(6,14,36,.85);z-index:20}
#loading .bar{width:260px;height:6px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:14px}
#loading .bar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#27c7ff,#fff);animation:load 1s infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
#pause,#result{background:rgba(6,14,36,.72);z-index:10}
.box{padding:22px 26px;min-width:min(520px,100%);text-align:center}
.box h2{font-size:30px;font-weight:900;margin-bottom:14px;letter-spacing:3px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btns .go{padding:10px 30px;font-size:18px;letter-spacing:3px;margin-top:10px}
table.res{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:15px}
table.res th{color:var(--muted);font-weight:400;font-size:12px;padding:6px}
table.res td{padding:8px 6px;border-top:1px solid rgba(255,255,255,.1)}
table.res tr.me td{background:rgba(255,138,0,.3);font-weight:800}
table.res td.pos{font-family:var(--num);font-style:italic;color:var(--yellow);font-size:20px}
#resTitle.win{background:linear-gradient(180deg,#fff,#ffd23a 50%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:flex;gap:10px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.stat{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.08);font-size:12px;color:var(--muted)}
.stat b{display:block;font-size:18px;color:#fff;font-family:var(--num);font-style:italic}
@media (max-width:860px){
  .menu-grid{grid-template-columns:1fr}
  .logo{font-size:52px}
  #rank{width:150px;font-size:12px}
  #minimap{width:130px;height:130px}
  #gauge{width:200px}
  .msg{font-size:30px}
  #countdown{font-size:120px}
}