:root{--ui:'Lilita One','Trebuchet MS',system-ui,sans-serif}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:var(--ui);user-select:none;-webkit-user-select:none;color:#fff}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
button{font-family:var(--ui)}
.screen{position:fixed;inset:0;display:none;z-index:20}
.screen.on{display:flex}

/* ---------- menu ---------- */
#menu{pointer-events:none}
#menuPanel{pointer-events:auto;width:min(560px,100%);height:100%;overflow-y:auto;box-sizing:border-box;padding:14px 18px 24px;
  background:linear-gradient(90deg,rgba(10,20,40,.92),rgba(10,20,40,.78) 85%,rgba(10,20,40,0));}
#menuPanel img.title{width:100%;max-width:420px;display:block;margin:0 auto 4px;filter:drop-shadow(0 4px 0 #0008)}
.row{margin:10px 0}
.lbl{font-size:15px;letter-spacing:.5px;color:#9fd8ff;margin-bottom:5px;text-shadow:0 2px 0 #0008}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{background:#1d2c4a;border:3px solid #34507e;border-radius:12px;padding:6px 12px;cursor:pointer;color:#fff;font-size:17px;transition:transform .08s}
.opt:hover{transform:translateY(-2px);border-color:#5fa0ff}
.opt.sel{background:#ffcc00;border-color:#fff;color:#222;box-shadow:0 0 0 3px #ff8800}
.opt img{display:block;margin:0 auto 3px;border-radius:6px;background:#fff}
.stage img{width:110px;height:146px;object-fit:cover}
.car img{width:130px;height:60px;object-fit:contain;background:transparent}
.drv{width:84px;text-align:center;font-size:13px;padding:5px}
.drv img{width:60px;height:60px;object-fit:cover}
.drv small{display:block;font-size:11px;opacity:.85;font-family:system-ui,sans-serif;line-height:1.15}
.pbox{border:3px dashed #ffffff33;border-radius:14px;padding:6px 10px 10px;margin-top:10px}
.pbox h3{margin:2px 0 6px;font-weight:normal;font-size:20px}
.pbox.p1 h3{color:#ffd23f}.pbox.p2 h3{color:#3fe0ff}
.carinfo{font-size:12px;font-family:system-ui,sans-serif;opacity:.85;margin-top:3px}
#startBtn{margin-top:14px;width:100%;font-size:34px;padding:10px;border-radius:16px;border:4px solid #fff;background:linear-gradient(#3ee66b,#18a33f);color:#fff;cursor:pointer;text-shadow:0 3px 0 #0006;box-shadow:0 6px 0 #0c5c24}
#startBtn:active{transform:translateY(4px);box-shadow:0 2px 0 #0c5c24}
.help{font-family:system-ui,sans-serif;font-size:12px;line-height:1.45;opacity:.9;background:#0006;border-radius:10px;padding:8px 10px;margin-top:12px}
.help b{color:#ffd23f;font-weight:600}
.help .p2c{color:#3fe0ff}
kbd{background:#fff2;border-radius:4px;padding:0 4px;font-family:inherit}

/* ---------- HUD ---------- */
.hud{position:fixed;pointer-events:none;overflow:hidden;z-index:5;display:none}
.hud.on{display:block}
.hud .tl{position:absolute;left:12px;top:8px;text-shadow:0 3px 0 #000a,0 0 6px #000}
.hud .pos{font-size:56px;line-height:1}
.hud .pos small{font-size:22px;opacity:.9}
.hud .lap{font-size:22px}
.hud .pname{font-size:16px;opacity:.85}
.hud .tr{position:absolute;right:10px;top:10px}
.hud canvas.mini{width:150px;height:200px;border-radius:12px;background:#0007;border:2px solid #fff6}
.hud .bl{position:absolute;left:12px;bottom:12px;width:280px}
.hpbar{position:relative;height:24px;background:#000a;border:3px solid #fff;border-radius:12px;overflow:hidden}
.hpfill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#7dff7d,#1fbf3a);transition:width .15s}
.shfill{position:absolute;left:0;top:0;height:7px;background:#4fc3ff;transition:width .15s}
.hpbar span{position:absolute;inset:0;text-align:center;font-size:17px;line-height:19px;text-shadow:0 2px 0 #000}
.speed{font-size:28px;margin-top:2px;text-shadow:0 3px 0 #000a}
.speed small{font-size:15px}
.hud .br{position:absolute;right:12px;bottom:12px;display:flex;gap:10px;align-items:flex-end}
.wbox{background:#000a;border:3px solid #3bd16f;border-radius:14px;padding:6px 10px;min-width:150px;text-align:center}
.wbox img{height:46px;max-width:150px;object-fit:contain;display:block;margin:0 auto}
.wname{font-size:17px;line-height:1.1}
.wrar{font-size:11px;font-family:system-ui,sans-serif;opacity:.9}
.ammo{font-size:20px}
.ibox{width:66px;height:66px;background:#000a;border:3px solid #fff;border-radius:14px;font-size:40px;line-height:66px;text-align:center}
.ibox small{position:absolute;font-size:10px}
.feed{position:absolute;right:170px;top:10px;text-align:right;font-family:system-ui,sans-serif;font-size:13px;font-weight:700}
.feed div{background:#000a;border-radius:6px;padding:2px 8px;margin-bottom:3px;display:inline-block;clear:both;float:right}
.msg{position:absolute;left:0;right:0;top:28%;text-align:center;font-size:44px;text-shadow:0 4px 0 #000a,0 0 10px #000;transition:opacity .3s}
.submsg{position:absolute;left:0;right:0;top:calc(28% + 52px);text-align:center;font-size:22px;text-shadow:0 3px 0 #000a}
.cross{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;display:none}
.cross:before,.cross:after{content:'';position:absolute;background:#fff;box-shadow:0 0 2px #000}
.cross:before{left:16px;top:0;width:2px;height:34px}.cross:after{top:16px;left:0;height:2px;width:34px}
.cross i{position:absolute;left:12px;top:12px;width:6px;height:6px;border:2px solid #ff3b3b;border-radius:50%}
.hitmark{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;font-size:30px;line-height:30px;text-align:center;color:#fff;text-shadow:0 0 4px #f00}
.lock{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid #ff3030;border-radius:6px;transform:rotate(45deg);display:none;box-shadow:0 0 6px #f00}
.fpsgun{position:absolute;right:20%;bottom:-3%;width:34%;max-width:460px;height:40%;display:none}
.fpsgun img{position:absolute;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform-origin:50% 100%;filter:drop-shadow(0 6px 0 #0007)}
.flash{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(#fff 0,#ffe066 25%,#ff8a00aa 50%,transparent 70%);opacity:0;pointer-events:none}
.scope{position:absolute;inset:0;display:none;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 32%,#000 33%)}
.scope:before,.scope:after{content:'';position:absolute;background:#000}
.scope:before{left:50%;top:0;bottom:0;width:2px}.scope:after{top:50%;left:0;right:0;height:2px}
.vign{position:absolute;inset:0;opacity:0;background:radial-gradient(circle,transparent 45%,rgba(255,0,0,.55) 100%);transition:opacity .25s}
.dead{position:absolute;inset:0;display:none;background:rgba(80,0,0,.35);text-align:center;padding-top:22%}
.dead b{display:block;font-size:56px;font-weight:normal;color:#ffd23f;text-shadow:0 4px 0 #000}
.dead span{font-size:26px}
.fpshint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-family:system-ui;font-size:12px;opacity:.7;text-shadow:0 1px 2px #000}
#splitLine{position:fixed;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:#000;z-index:6;display:none}

/* ---------- countdown ---------- */
#countdown{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;pointer-events:none}
#countdown img{max-height:46vh;max-width:70vw;filter:drop-shadow(0 8px 0 #0008) drop-shadow(0 0 20px #fff8);display:none}
#countdown img.pop{display:block;animation:pop .9s ease-out forwards}
@keyframes pop{0%{transform:scale(.2) rotate(-12deg);opacity:0}18%{transform:scale(1.25) rotate(4deg);opacity:1}35%{transform:scale(1)}80%{opacity:1}100%{transform:scale(1.1);opacity:0}}
#introText{position:fixed;left:0;right:0;top:12%;text-align:center;font-size:40px;z-index:8;text-shadow:0 4px 0 #000a;pointer-events:none;display:none}

/* ---------- pause / results ---------- */
.dlg{margin:auto;background:rgba(12,22,44,.93);border:4px solid #fff;border-radius:22px;padding:22px 30px;text-align:center;min-width:300px;box-shadow:0 10px 0 #0008}
.dlg h1{margin:0 0 14px;font-weight:normal;font-size:44px;color:#ffd23f;text-shadow:0 4px 0 #000}
.dlg button{display:block;width:100%;margin:8px 0;font-size:24px;padding:8px 18px;border-radius:12px;border:3px solid #fff;background:#2d6cdf;color:#fff;cursor:pointer}
.dlg button:hover{background:#3f85ff}
#results{align-items:flex-end;justify-content:center;pointer-events:none}
#resBox{pointer-events:auto;margin-bottom:1.5vh;max-height:56vh;overflow:auto;padding:10px 20px}
#resBox h1{font-size:28px;margin-bottom:4px}
#resTable{border-collapse:collapse;font-family:system-ui,sans-serif;font-size:13px;margin:0 auto 6px}
#resTable td,#resTable th{padding:1px 10px;text-align:left}
#resTable th{color:#9fd8ff;font-weight:600}
#resTable tr.me td{color:#ffd23f;font-weight:700}
#resTable tr.me2 td{color:#3fe0ff;font-weight:700}
#resTable img{height:20px;vertical-align:middle;border-radius:4px}
.resBtns{display:flex;gap:10px}
.resBtns button{flex:1}
#loading{position:fixed;inset:0;z-index:50;background:#0b1428;display:flex;align-items:center;justify-content:center;font-size:30px}
#err{position:fixed;left:10px;bottom:10px;z-index:99;color:#f66;font:12px monospace;white-space:pre-wrap;max-width:90vw}
/* city mode: get in/out hint, gamepad notices */
.enter{position:absolute;left:50%;top:62%;transform:translateX(-50%);display:none;font-size:22px;background:#000a;padding:6px 14px;border-radius:10px;text-shadow:0 2px 0 #000}
.enter kbd{font-family:system-ui;font-size:16px;background:#ffd23f;color:#222;border-radius:5px;padding:1px 8px;margin-right:4px}
.padwarn{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:none;text-align:center;font-size:34px;color:#3fe0ff;background:#000c;padding:14px 26px;border-radius:14px;border:3px solid #3fe0ff}
.padwarn small{display:block;font-family:system-ui;font-size:14px;color:#fff;margin-top:6px}
.padst{font-family:system-ui;font-size:13px;color:#ff8a7d;margin-left:8px}
.padst.ok{color:#7dff7d}

#padInfo{font-family:system-ui,sans-serif;font-size:13px;color:#ff8a7d;align-self:center;margin-right:4px}
#padInfo.ok{color:#7dff7d}
.padbtn{font-family:var(--ui);font-size:15px;padding:5px 10px;border-radius:10px;border:2px solid #fff;background:#0006;color:#fff;cursor:pointer}
.padbtn:hover{background:#fff3}
#padCal{display:none;z-index:60;background:#000a}
#padCal.on{display:flex}
#pcStep{font-size:30px;color:#ffd23f;margin:10px 0 4px}
#pcHint{font-family:system-ui,sans-serif;font-size:15px;opacity:.9;margin-bottom:14px}
.pcrow{display:flex;gap:10px;justify-content:center}
#pcLive{font-family:ui-monospace,monospace;font-size:14px;color:#7dff7d;background:#0008;border-radius:8px;padding:6px 10px;margin:-6px 0 14px;min-height:20px;max-width:520px}
#pcHint{max-width:520px}

/* ---------- touch controls (phones / tablets) ---------- */
html,body{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#splitLine.vert{left:50%;right:auto;top:0;bottom:0;width:4px;height:auto;margin:0 0 0 -2px}
#tPause{position:fixed;z-index:9;display:none;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;
  background:#000a;border:3px solid #fff;text-align:center;line-height:34px;font-size:17px}
.tc{position:fixed;z-index:7;display:none;overflow:hidden;--u:clamp(40px,min(11.5vh,9vw),74px);
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
body.solo .tc{--u:clamp(46px,min(13vh,9vw),84px)}
.tc>*{position:absolute;touch-action:none}
.tlook{inset:0}
.tjoy{left:0;bottom:0;width:46%;height:68%}
.tjoy i{position:absolute;border-radius:50%;pointer-events:none;transform-origin:center}
.jbase{width:calc(var(--u)*2.3);height:calc(var(--u)*2.3);margin:calc(var(--u)*-1.15) 0 0 calc(var(--u)*-1.15);border:3px solid #fff6;background:#ffffff14;
  left:calc(var(--u)*1.5);top:calc(100% - var(--u)*1.6);opacity:.55}
.jknob{width:calc(var(--u)*1.05);height:calc(var(--u)*1.05);margin:calc(var(--u)*-.525) 0 0 calc(var(--u)*-.525);background:#ffffff55;border:3px solid #fffb;
  left:calc(var(--u)*1.5);top:calc(100% - var(--u)*1.6);opacity:.7}
.tjoy.on .jbase{opacity:.9}
.p2 .jbase,.p2 .jknob{border-color:#3fe0ffcc}
.tbtn{display:flex;align-items:center;justify-content:center;width:var(--u);height:var(--u);border-radius:50%;background:#0007;border:3px solid #fff9;
  font-size:calc(var(--u)*.5);color:#fff;box-sizing:border-box;line-height:1;text-shadow:0 2px 0 #000a;-webkit-user-select:none}
.tbtn.down{background:#ffd23fcc;border-color:#fff;transform:scale(.92)}
.tbtn.active{background:#3bd16fbb;border-color:#fff}
.p2 .tbtn{border-color:#3fe0ffbb}
.b-fire{width:calc(var(--u)*1.45);height:calc(var(--u)*1.45);right:calc(var(--u)*.35);bottom:calc(var(--u)*.35);background:#c8201fa0;font-size:calc(var(--u)*.7)}
.b-jump{right:calc(var(--u)*.5);bottom:calc(var(--u)*2.0)}
.b-drift{right:calc(var(--u)*2.0);bottom:calc(var(--u)*.4)}
.b-item{width:calc(var(--u)*.85);height:calc(var(--u)*.85);right:calc(var(--u)*2.0);bottom:calc(var(--u)*1.65)}
.b-enter{width:calc(var(--u)*.9);height:calc(var(--u)*.9);right:calc(var(--u)*3.2);bottom:calc(var(--u)*1.0)}
.b-reset{width:calc(var(--u)*.75);height:calc(var(--u)*.75);right:calc(var(--u)*3.35);bottom:calc(var(--u)*2.2)}
.b-fps{width:calc(var(--u)*.85);height:calc(var(--u)*.85);right:10px;top:calc(var(--u)*2.4)}
.b-zoom{width:calc(var(--u)*.85);height:calc(var(--u)*.85);right:10px;top:calc(var(--u)*3.4)}
.p1 .b-fps,.p1 .b-zoom{right:10px}

/* compact HUD so it clears the thumbs: hp + speed on top, weapon/item under the position */
body.touch .hud .tl{left:10px;top:6px}
body.touch .hud .pos{font-size:34px}
body.touch .hud .pos small{font-size:16px}
body.touch .hud .lap{font-size:15px}
body.touch .hud .pname{font-size:11px}
body.touch .hud canvas.mini{width:70px;height:93px;border-radius:9px}
body.touch .hud .tr{right:8px;top:8px}
body.touch .hud .bl{left:50%;right:auto;top:8px;bottom:auto;width:clamp(110px,34%,200px);transform:translateX(-50%)}
body.touch .hpbar{height:17px;border-width:2px}
body.touch .hpbar span{font-size:12px;line-height:14px}
body.touch .speed{font-size:17px;text-align:center}
body.touch .speed small{font-size:10px}
body.touch .hud .br{left:10px;right:auto;top:84px;bottom:auto;gap:6px;align-items:flex-start}
body.touch .ibox{width:38px;height:38px;line-height:38px;font-size:22px;border-width:2px;border-radius:10px}
body.touch .wbox{min-width:0;padding:3px 7px;border-width:2px;border-radius:10px}
body.touch .wbox img{height:26px;max-width:80px}
body.touch .wname{font-size:11px}
body.touch .wrar{display:none}
body.touch .ammo{font-size:13px}
body.touch .hud .feed{right:auto;left:10px;top:150px;text-align:left;font-size:10px}
body.touch .hud .feed div{float:left;padding:1px 6px;margin-bottom:2px}
body.touch .hud .msg{font-size:30px;top:20%}
body.touch .hud .submsg{font-size:16px;top:calc(20% + 36px)}
body.touch .hud .enter{font-size:15px;top:52%;padding:4px 10px}
body.touch .hud .enter kbd{font-size:14px;padding:0 4px}
body.touch .hud .fpshint{display:none}
body.touch .hud .dead b{font-size:34px}
body.touch .hud .dead span{font-size:18px}
body.touch .hud .fpsgun{right:12%;width:42%}
body.touch.solo #tPause{left:calc(50% + 122px);transform:none}
body.touch.solo .hud .bl{width:200px}
body.touch.solo .hud .tl{left:14px}
body.touch.solo .hud canvas.mini{width:105px;height:140px}
body.touch.solo .hud .pos{font-size:44px}
body.touch.solo .hud .lap{font-size:19px}
body.touch.solo .hud .pname{font-size:13px}
body.touch.solo .hud .br{top:112px}
body.touch.solo .hud .feed{top:190px;font-size:12px}
body.touch.solo .b-fps{top:calc(var(--u)*2.9)}
body.touch.solo .b-zoom{top:calc(var(--u)*3.9)}
/* menu / dialogs fit a phone */
body.touch .dlg{min-width:0;max-width:92vw;padding:14px 20px}
body.touch .dlg h1{font-size:30px;margin-bottom:8px}
body.touch .dlg button{font-size:19px;padding:6px 14px;margin:6px 0}
@media (max-height:520px){
  #menuPanel{padding:8px 12px 16px}
  .stage img{width:80px;height:100px}
  #startBtn{font-size:26px;padding:6px}
}
body.touch.cols #tPause{top:50%;margin-top:-19px}