*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:"Arial Black",Impact,Helvetica,sans-serif;color:#fff;user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud>*{position:fixed;pointer-events:none;text-shadow:0 2px 3px #000,0 0 6px #000}
#topright{top:18px;right:24px;text-align:right}
#clock{font-size:22px;opacity:.9}
#money{font-size:40px;color:#7ee36b;letter-spacing:1px;font-style:italic}
#stars{font-size:34px;color:#ffd23f;letter-spacing:4px;min-height:40px}
#stars .off{color:rgba(255,255,255,.25)}
#stars .flash{animation:fl .4s infinite alternate}
@keyframes fl{to{opacity:.2}}
#mission{top:18px;left:24px;max-width:46vw}
#mTitle{font-size:22px;color:#ffd23f;font-style:italic}
#mDetail{font-size:16px;margin-top:4px;font-family:Arial,sans-serif;font-weight:700}
#subtitle{bottom:70px;left:0;right:0;text-align:center;font-size:24px;font-family:Arial,sans-serif;font-weight:700;opacity:0;transition:opacity .25s}
#subtitle.on{opacity:1}
#zone{bottom:260px;left:26px;font-size:26px;font-style:italic;opacity:0;transition:opacity .6s;letter-spacing:1px}
#zone.on{opacity:1}
#radarWrap{bottom:20px;left:20px;width:220px}
#radar{width:220px;height:220px;border-radius:50%;border:4px solid #111;box-shadow:0 0 0 2px #fff6,0 4px 14px #000a;background:#222}
#bars{margin-top:6px;width:200px;margin-left:10px}
#bars div{height:9px;background:#0008;border:1px solid #000;margin-top:4px}
#bars i{display:block;height:100%;width:100%}
#hpbar i{background:linear-gradient(#e05a4f,#a82b24)}
#turbobar i{background:linear-gradient(#ffb74d,#f57c00)}
#speedo{bottom:24px;right:30px;font-size:64px;font-style:italic}
#speedo small{font-size:18px;margin-left:6px;opacity:.8}
#radioTag{bottom:100px;right:30px;font-size:16px;font-family:Arial,sans-serif;opacity:0;transition:opacity .5s}
#radioTag.on{opacity:1}
#bust{top:42%;left:50%;width:240px;margin-left:-120px;height:10px;background:#0008;border:1px solid #000;opacity:0}
#bust i{display:block;height:100%;width:0;background:#4aa3ff}
#hint{bottom:4px;left:0;right:0;text-align:center;font-size:11px;font-family:Arial,sans-serif;opacity:.55}
#flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(transparent 40%,rgba(200,0,0,.8));opacity:0}
#banner{position:fixed;left:0;right:0;top:36%;text-align:center;font-size:110px;font-style:italic;letter-spacing:4px;pointer-events:none;opacity:0;transition:opacity .4s;text-shadow:0 6px 12px #000}
#banner.on{opacity:1}
#banner small{display:block;font-size:26px;font-family:Arial,sans-serif;letter-spacing:1px}
#bigmap{position:fixed;left:50%;top:50%;width:min(88vh,88vw);height:min(88vh,88vw);transform:translate(-50%,-50%);border:4px solid #fff;box-shadow:0 0 60px #000;background:#000}
#menu{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
 background:radial-gradient(circle at 50% 40%,rgba(255,170,40,.35),rgba(10,8,20,.94) 70%),#120d1a;z-index:10;padding:20px}
#menu.paused{background:rgba(0,0,0,.6)}
.logo{font-size:clamp(44px,9vw,100px);line-height:.95;font-style:italic;color:#ffd23f;text-shadow:5px 5px 0 #c62828,9px 9px 0 #000;letter-spacing:2px}
.logo span{color:#fff}
.series{margin-top:-4px;font-size:clamp(13px,2.2vw,22px);letter-spacing:.42em;font-style:italic;background:#c62828;color:#fff;padding:5px 16px 5px 22px;border:3px solid #000;box-shadow:4px 4px 0 #000;transform:skewX(-8deg)}
.tag{font-family:Arial,sans-serif;font-weight:700;font-size:18px;opacity:.9}
#startBtn{font:inherit;font-size:28px;padding:14px 44px;background:#ffd23f;border:4px solid #000;color:#000;cursor:pointer;font-style:italic;box-shadow:5px 5px 0 #c62828}
#startBtn:hover{transform:translate(-2px,-2px)}
#startBtn:disabled{opacity:.5;cursor:wait}
#loadmsg{font-family:Arial,sans-serif;min-height:20px;color:#ffd23f}
.controls{font-family:Arial,sans-serif;font-size:14px;line-height:1.7;max-width:760px;opacity:.9}
.controls b{background:#fff;color:#000;padding:1px 6px;border-radius:3px;font-size:12px}

#crack{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:4;transition:opacity .25s}

input,button{font-family:Arial,sans-serif}
input{user-select:text;-webkit-user-select:text}
#score{font-size:22px;color:#ffd23f;font-style:italic;margin-top:2px}
#lmCount{font-size:14px;color:#5ee0ff;font-family:Arial,sans-serif;font-weight:700;letter-spacing:.5px}
#chud{top:96px;left:50%;transform:translateX(-50%);text-align:center;font-family:Arial,sans-serif;font-weight:700;font-size:16px;background:#000a;border:2px solid #4fdcff;border-radius:6px;padding:8px 18px;opacity:0;transition:opacity .25s;min-width:260px}
#chud.on{opacity:1}
#chud b{color:#4fdcff;font-size:15px;letter-spacing:1px;text-transform:uppercase}
#chud .big{font-size:34px;font-style:italic;font-family:"Arial Black",Impact,sans-serif;color:#fff}
.authbox{font-family:Arial,sans-serif;max-width:560px}
.authrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.authrow input{padding:9px 12px;border:3px solid #000;background:#fff;color:#000;font-size:15px;width:170px}
.authwho{font-size:15px}
.authwho b{color:#ffd23f}
.mini{padding:9px 16px;border:3px solid #000;background:#ffd23f;color:#000;font-weight:700;font-size:14px;cursor:pointer}
.mini.alt{background:#fff}
.mini:hover{filter:brightness(1.1)}
.authmsg{color:#ff7a7a;min-height:18px;font-size:14px;margin-top:6px;font-weight:700}
.authnote{font-size:13px;opacity:.75;margin-top:6px}
#panel{position:fixed;inset:0;z-index:20;background:rgba(5,5,12,.78);display:flex;align-items:center;justify-content:center;padding:16px;font-family:Arial,sans-serif}
.pbox{width:min(860px,96vw);max-height:92vh;display:flex;flex-direction:column;background:#14111d;border:4px solid #ffd23f;box-shadow:8px 8px 0 #c62828}
.phead{display:flex;gap:4px;padding:10px 10px 0;border-bottom:3px solid #ffd23f;align-items:flex-end}
.ptab{font:inherit;font-weight:900;letter-spacing:1px;font-size:14px;padding:10px 18px;background:#2a2438;color:#bbb;border:0;cursor:pointer;font-style:italic}
.ptab.on{background:#ffd23f;color:#000}
.pclose{margin-left:auto;font-size:18px;background:none;border:0;color:#fff;cursor:pointer;padding:6px 12px}
.pbody{padding:16px;overflow:auto;text-align:left;min-height:260px}
.phint{font-size:11px;opacity:.5;text-align:center;padding:6px}
.clist,.llist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ccard,.lcard{background:#201b2e;border:2px solid #3a3350;padding:12px;display:flex;flex-direction:column;gap:6px}
.ccard.daily{border-color:#ffd23f;background:#2b2412}
.lcard.got{border-color:#5ee0ff}
.ctitle,.ltitle{font-family:"Arial Black",Impact,sans-serif;font-style:italic;font-size:16px;color:#ffd23f}
.lcard.got .ltitle{color:#5ee0ff}
.tag2{font-family:Arial,sans-serif;font-size:10px;background:#ffd23f;color:#000;padding:2px 6px;margin-left:8px;font-style:normal;vertical-align:middle}
.cdesc{font-size:13px;line-height:1.4;opacity:.9;flex:1}
.cbest{font-size:12px;color:#7ee36b;font-weight:700}
.cgo{align-self:flex-start;font:inherit;font-weight:900;font-style:italic;padding:8px 22px;background:#ffd23f;border:3px solid #000;cursor:pointer;color:#000}
.cgo:disabled{opacity:.4;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font:inherit;font-size:13px;font-weight:700;padding:6px 12px;background:#2a2438;color:#ddd;border:2px solid #3a3350;cursor:pointer}
.chip.on{background:#4fdcff;color:#000;border-color:#4fdcff}
.tbl{display:flex;flex-direction:column;gap:3px}
.trow{display:grid;grid-template-columns:56px 1fr 120px;padding:7px 12px;background:#201b2e;font-size:15px}
.trow:nth-child(1){background:#3a3115;color:#ffd23f;font-weight:700}
.trow.me{outline:2px solid #4fdcff;background:#16303a}
.trow .vl{text-align:right;font-weight:700}
.tgap{text-align:center;opacity:.5}

/* ===================== touch / mobile ===================== */
html,body{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.touchhelp{display:none}
#rotate{display:none}
#touch{position:fixed;inset:0;z-index:5;pointer-events:none}
#touch .tb{position:absolute;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;font:900 14px "Arial Black",Impact,sans-serif;font-style:italic;letter-spacing:.5px;color:#fff;
 background:rgba(15,12,25,.45);border:3px solid rgba(255,255,255,.55);border-radius:50%;text-shadow:0 1px 3px #000;backdrop-filter:blur(2px)}
#touch .tb.on{background:rgba(255,210,63,.75);color:#000;border-color:#fff;transform:scale(.94)}
.joyzone{position:absolute;left:0;bottom:0;width:48%;height:78%;pointer-events:auto;touch-action:none}
.joybase{position:absolute;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;border:3px solid rgba(255,255,255,.35);background:rgba(15,12,25,.28);pointer-events:none;transition:opacity .2s,border-color .2s;opacity:.55}
.joybase.on{opacity:1;border-color:rgba(255,210,63,.85)}
.joyknob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.55);border:3px solid rgba(255,255,255,.9);box-shadow:0 2px 8px #0008}
.joybase.on .joyknob{background:rgba(255,210,63,.85)}
.joylock{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(150px + env(safe-area-inset-bottom));font:900 12px Arial,sans-serif;font-style:italic;color:#7ee36b;background:#000a;padding:4px 10px;border-radius:12px;opacity:0;transition:opacity .2s;pointer-events:none}
.joylock.on{opacity:1}
.tc-right{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:230px;height:190px}
.tc-right .hb{right:0;bottom:0;width:98px;height:98px;font-size:15px}
.tc-right .turbo{right:106px;bottom:12px;width:74px;height:74px;font-size:12px}
.tc-right .horn{right:62px;bottom:110px;width:62px;height:62px;font-size:11px}
.tc-top{position:absolute;top:calc(6px + env(safe-area-inset-top));right:calc(150px + env(safe-area-inset-right));display:flex;gap:8px;pointer-events:none}
#touch .tc-top .util{position:static;width:42px;height:42px;font-size:10px;letter-spacing:0;padding:0}

body.touch .controls{display:none}
body.touch .touchhelp{display:block;font-family:Arial,sans-serif;font-size:14px;line-height:1.7;max-width:640px;opacity:.92}
body.touch .touchhelp b{background:#ffd23f;color:#000;padding:1px 6px;border-radius:3px;font-size:12px}
body.touch #hint,body.touch #radioTag{display:none}
body.touch #topright{top:calc(6px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}
body.touch #clock{font-size:13px}
body.touch #money{font-size:24px}
body.touch #score{font-size:14px}
body.touch #lmCount{font-size:10px}
body.touch #stars{font-size:20px;min-height:22px;letter-spacing:2px}
body.touch #mission{top:calc(6px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));max-width:36vw}
body.touch #mTitle{font-size:13px}
body.touch #mDetail{font-size:11px;margin-top:2px}
body.touch #radarWrap{top:calc(54px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));bottom:auto;width:92px}
body.touch #radar{width:92px;height:92px;border-width:3px}
body.touch #bars{width:92px;margin-left:0;margin-top:4px}
body.touch #speedo{bottom:calc(10px + env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%);font-size:34px}
body.touch #speedo small{font-size:11px}
body.touch #zone{bottom:auto;top:calc(54px + env(safe-area-inset-top));left:112px;font-size:14px}
body.touch #subtitle{bottom:calc(64px + env(safe-area-inset-bottom));left:150px;right:150px;font-size:14px}
body.touch #banner{font-size:clamp(28px,9vh,52px);top:30%}
body.touch #banner small{font-size:13px}
body.touch #chud{top:calc(56px + env(safe-area-inset-top));font-size:12px;padding:5px 12px;min-width:170px}
body.touch #chud .big{font-size:22px}
body.touch #bust{top:36%}
body.touch #menu{gap:8px;padding:10px;overflow:auto;justify-content:flex-start}
body.touch .logo{font-size:clamp(30px,10vh,60px)}
body.touch .series{font-size:11px;padding:3px 12px 3px 16px;margin-top:-2px}
body.touch .tag{font-size:13px}
body.touch #startBtn{font-size:22px;padding:10px 34px}
body.touch .authrow input{width:130px;padding:7px 8px;font-size:14px}
body.touch .pbox{max-height:96vh}
body.touch .pbody{padding:8px}
body.touch .clist,body.touch .llist{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
body.touch .ctitle,body.touch .ltitle{font-size:13px}
body.touch .cdesc{font-size:11px}
body.touch .ptab{padding:8px 10px;font-size:11px}
body.touch .phint{display:none}
body.touch .trow{font-size:13px;padding:5px 8px}
@media (max-height:430px){
  .joybase{width:116px;height:116px;margin:-58px 0 0 -58px}
  .tc-right{width:200px;height:160px}
  .tc-right .hb{width:84px;height:84px}
  .tc-right .turbo{right:92px;width:64px;height:64px}
  .tc-right .horn{right:54px;bottom:94px;width:54px;height:54px}
}
@media (orientation:portrait){
  body.touch #rotate{position:fixed;inset:0;z-index:50;background:#120d1a;color:#ffd23f;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-weight:700;font-size:20px;gap:10px}
  body.touch #rotate div{font-size:90px;line-height:1}
}

.about{max-width:760px;font-family:Arial,sans-serif;font-size:13px;line-height:1.6;text-align:left;opacity:.9}
.about summary{cursor:pointer;text-align:center;font-weight:700;color:#ffd23f;list-style:none;padding:6px}
.about summary::-webkit-details-marker{display:none}
.about[open]{max-height:34vh;overflow:auto;background:rgba(0,0,0,.45);padding:8px 16px 12px;border:1px solid #ffffff22}
.about h2{font-size:14px;color:#ffd23f;margin:10px 0 2px;font-style:italic}
.about p{margin:0}
body.touch .about{font-size:12px}

#vig{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.42) 100%)}
body.nopost #vig{opacity:1}
#qualitySlot{font-family:Arial,sans-serif;font-size:13px}
#qualitySlot select{font:inherit;padding:4px 8px;background:#1d1828;color:#fff;border:2px solid #ffd23f;border-radius:3px}

#credit{font-family:Arial,sans-serif;font-size:11px;opacity:.65;max-width:700px;text-align:center}
#credit summary{cursor:pointer}
#credit details[open]{max-height:22vh;overflow:auto;text-align:left;background:#0006;padding:6px 10px}
#credit:empty{display:none}