@font-face{font-family:"Caveat";src:url("/fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--ink:#1f1a2e;--cream:#fffaf2;--accent:#ff5c39;--orange:#ff8a2a;--blue:#2a6ad8;--red:#e83a3a;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#1f2a44;color:var(--ink);font:800 15px "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
.screen{position:fixed;inset:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
i[data-i]{display:inline-flex;width:1.1em;height:1.1em;vertical-align:-.18em}
i[data-i] svg,.ic svg{width:100%;height:100%}
.btn{font:900 17px "Nunito",system-ui,sans-serif;border:3px solid var(--ink);border-radius:14px;padding:10px 18px;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);position:relative;top:0;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{top:3px;box-shadow:0 1px 0 var(--ink)}
.btn.big{font-size:22px;padding:12px 16px;width:100%}
.btn.small{font-size:14px;padding:6px 11px;box-shadow:0 3px 0 var(--ink);border-radius:10px}
.btn.ghost{background:#f3e7d3}
.btn.go{background:var(--accent);color:#fff}
.btn.buy{background:#ffd23a}
.btn.done{background:#c8f0c8}
.btn:disabled{opacity:.45;cursor:default}
.panel{background:var(--cream);border:3px solid var(--ink);border-radius:20px;box-shadow:0 7px 0 var(--ink)}
.err{color:#c0281a;min-height:1.2em;text-align:center;font-size:15px}

/* ---------- title ---------- */
#menuBg{position:absolute;inset:0;width:100%;height:100%}
.yen-home{position:absolute;top:calc(12px + var(--safe-t));left:14px;z-index:2;color:var(--ink);text-decoration:none;font-weight:900;font-size:14px;padding:7px 13px;border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;gap:4px}
.menu-wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:58px 16px 20px;overflow:auto}
.logo{position:relative;display:flex;align-items:baseline;gap:6px;font:900 clamp(54px,13vw,104px)/1 "Arial Black","Nunito",system-ui,sans-serif;letter-spacing:2px;transform:rotate(-3deg);margin-bottom:16px}
.logo .l1{color:#ff8a2a;-webkit-text-stroke:3px var(--ink);text-shadow:0 7px 0 var(--ink)}
.logo .l2{color:#fff;-webkit-text-stroke:3px var(--ink);text-shadow:0 7px 0 var(--ink)}
.logo .bars{position:absolute;inset:-6px -14px;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(31,26,46,.82) 30px 37px);z-index:2;pointer-events:none;mix-blend-mode:normal;opacity:.55;border-top:6px solid rgba(31,26,46,.8);border-bottom:6px solid rgba(31,26,46,.8)}
.menu-panel{width:min(380px,100%);padding:16px;display:flex;flex-direction:column;gap:12px}
.mechip{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 12px 6px 6px}
.mechip canvas{width:40px;height:40px;border-radius:10px;background:#f3e7d3;border:2px solid var(--ink)}
.mechip small{display:block;font-size:13px;color:#1a8a40}
.mechip b{font-size:18px}
.teams{display:flex;gap:10px}
.btn.team{flex:1;flex-direction:column;gap:2px;padding:12px 8px;font-size:20px;color:#fff}
.btn.team i{width:30px;height:30px;margin-bottom:2px}
.btn.team small{font-size:12px;font-weight:800;opacity:.9}
.btn.team.pri{background:#ff8a2a}
.btn.team.pol{background:#2a6ad8}
.note{font-size:13px;color:#6a5f7a;text-align:center;min-height:1em}
.join-row{display:flex;gap:8px}
.join-row input{flex:1;min-width:0;font:900 20px "Nunito",system-ui,sans-serif;letter-spacing:.3em;text-align:center;text-transform:uppercase;border:3px solid var(--ink);border-radius:14px;padding:6px;background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text}
.join-row input::placeholder{letter-spacing:.1em;color:#b0a8bc}

/* ---------- the HUD ---------- */
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#topL{position:absolute;top:calc(10px + var(--safe-t));left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:none}
#topL>*{pointer-events:auto}
.trow{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:900 14px "Nunito",system-ui,sans-serif;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 12px;box-shadow:0 3px 0 var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.chip.cash{color:#1a7a34}
.chip.red{background:#e83a3a;color:#fff}
.chip.gold{background:#ffd23a}
.chip.bag{background:#2a5a2a;color:#fff}
.chip.pri{background:#ff8a2a;color:#fff}.chip.crim{background:#e83a3a;color:#fff}.chip.pol{background:#2a6ad8;color:#fff}
#robList{display:flex;flex-wrap:nowrap;gap:4px}
.rob{width:30px;height:30px;border:2px solid var(--ink);border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;padding:4px;color:#1a8a40;position:relative}
.rob.closed{background:#d8d4cc;color:#8a8494}
.rob.alarm{background:#ffd8d4;color:#e83a3a;animation:blink .8s infinite}
@keyframes blink{50%{background:#e83a3a;color:#fff}}
#topR{position:absolute;top:calc(10px + var(--safe-t));right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#mini{width:132px;height:132px;border:3px solid var(--ink);border-radius:16px;background:#2a3a2a;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.ibtns{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:180px}
.ibtn{width:40px;height:40px;border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:0 3px 0 var(--ink);padding:7px;display:flex;align-items:center;justify-content:center}
.ibtn svg{width:100%;height:100%}
.ibtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ibtn.on{background:#ffd23a}
#banner{position:absolute;top:22%;left:50%;transform:translate(-50%,-20px) scale(.9);opacity:0;transition:all .25s cubic-bezier(.3,1.6,.6,1);pointer-events:none;
  background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:10px 20px;font:900 24px "Nunito",system-ui,sans-serif;text-align:center;width:max-content;max-width:88vw;display:flex;align-items:center;gap:10px}
#banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#banner.red{background:#e83a3a;color:#fff}#banner.gold{background:#ffd23a}#banner.blue{background:#2a6ad8;color:#fff}#banner.green{background:#4ac85a;color:#fff}#banner.grey{background:#d8d4cc}
#banner i{width:28px;height:28px}
#toasts{position:absolute;left:50%;top:calc(34% + 20px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92vw,520px)}
.toast{background:var(--ink);color:#fff;border-radius:999px;padding:7px 16px;font-size:14px;text-align:center;animation:tin .2s}
.toast.bad{background:#c0281a}.toast.good{background:#1a8a40}.toast.blue{background:#2a6ad8}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#prompt{position:absolute;left:50%;bottom:calc(30px + var(--safe-b));transform:translateX(-50%);background:var(--cream);border:3px solid var(--ink);border-radius:999px;padding:7px 16px;box-shadow:0 3px 0 var(--ink);font-size:15px;white-space:nowrap;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:10px}
#game.driving #prompt{bottom:calc(62px + var(--safe-b))}
#prompt .p1,#prompt .p2{display:flex;align-items:center;gap:7px}
#prompt .p2{border-left:2px solid #d8c8ae;padding-left:10px;color:#5a4a8a}
#prompt kbd{font:900 13px "Nunito",system-ui,sans-serif;background:var(--ink);color:#fff;border-radius:6px;padding:1px 6px}
#hold{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
#hold .ring{width:58px;height:58px;border-radius:50%;background:conic-gradient(#ffd23a var(--p,0%),rgba(31,26,46,.5) 0);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
#hold .ring i{width:38px;height:38px;border-radius:50%;background:var(--cream)}
#hold span{font-weight:900;color:#fff;text-shadow:0 2px 0 var(--ink),0 0 4px var(--ink)}
#carHud{position:absolute;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}
#speedo{font:900 22px "Nunito",system-ui,sans-serif;color:#fff;background:rgba(31,26,46,.75);border-radius:12px;padding:2px 12px;min-width:84px;text-align:center}
#speedo:after{content:" mph";font-size:12px}
#nitroBar{width:90px;height:12px;border:2px solid var(--ink);border-radius:8px;background:rgba(31,26,46,.6);overflow:hidden}
#nitroBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3ab4ff,#a05aff)}
#chatLog{position:absolute;left:10px;bottom:calc(150px + var(--safe-b));width:min(330px,62vw);display:flex;flex-direction:column;gap:3px;pointer-events:none}
#chatLog div{background:rgba(31,26,46,.62);color:#fff;border-radius:10px;padding:3px 9px;font-size:13px;animation:tin .2s;overflow-wrap:anywhere}
#chatLog div.sys{background:rgba(31,26,46,.42);font-style:italic}
#chatLog b{color:#ffd23a}
#chatIn{position:absolute;left:10px;bottom:calc(112px + var(--safe-b));width:min(360px,80vw);font:800 16px "Nunito",system-ui,sans-serif;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;-webkit-user-select:text;user-select:text}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s}
#fade.on{opacity:1}
/* touch controls */
#pads{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:32px;bottom:calc(36px + var(--safe-b));width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.2);border:3px solid rgba(31,26,46,.35);display:none;pointer-events:none}
#knob{position:absolute;left:37px;top:37px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.8);border:3px solid var(--ink)}
#btns{position:absolute;right:14px;bottom:calc(22px + var(--safe-b));display:none;flex-wrap:wrap-reverse;justify-content:flex-end;gap:10px;width:180px;pointer-events:auto}
.touch #stick,.touch #btns{display:flex}
.touch #stick{display:block}
.pbtn{width:80px;height:80px;border-radius:50%;border:3px solid var(--ink);background:#ffd23a;box-shadow:0 4px 0 var(--ink);font:900 15px "Nunito",system-ui,sans-serif;padding:0;touch-action:none}
.pbtn:active,.pbtn.down{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pbtn.jump{background:#fff}
.pbtn.tase{background:#3ab4ff;color:#fff;width:70px;height:70px}
.pbtn.spike{background:#5a5a64;color:#fff;width:64px;height:64px;font-size:13px}
.pbtn.nitro{background:#a05aff;color:#fff;width:70px;height:70px}
.touch #prompt{bottom:calc(184px + var(--safe-b));padding:10px 18px;font-size:16px}
.touch #game.driving #prompt{bottom:calc(226px + var(--safe-b))}
.touch #carHud{bottom:calc(184px + var(--safe-b))}
.touch #chatLog{bottom:calc(280px + var(--safe-b))}
.touch #chatIn{bottom:calc(240px + var(--safe-b))}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(18,12,28,.62);display:flex;align-items:center;justify-content:center;padding:12px;z-index:20}
.ov-panel{width:min(520px,100%);max-height:92vh;max-height:92dvh;overflow:auto;padding:16px 18px}
.ov-panel h2{margin:0 0 8px;font:700 38px/1 "Caveat","Segoe Print",cursive}
.ov-panel h3{margin:14px 0 6px;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#6a5f7a}
.ov-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.mrow{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
#ppl{display:flex;flex-direction:column;gap:5px}
.pp{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #e0d3bd;border-radius:12px;padding:5px 10px}
.pp canvas{width:30px;height:30px;border-radius:8px;background:#f3e7d3}
.pp b{flex:1}
.pp .tm{font-size:12px;border-radius:999px;padding:2px 8px;color:#fff}
#inviteBox{display:flex;gap:6px;flex-wrap:wrap}
#inviteBox input{flex:1;min-width:120px;font:800 14px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:10px;padding:6px 8px;-webkit-user-select:text;user-select:text}
#inviteBox select{font:800 14px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:10px}
.qr-panel{padding:16px;text-align:center}
#qrCv{width:min(70vw,300px);height:auto;background:#fff}
#qrTxt{font-size:13px;color:#6a5f7a;margin-top:8px;overflow-wrap:anywhere}
#qrCode{font:900 34px "Nunito",system-ui,sans-serif;letter-spacing:.2em;color:var(--accent)}
.how-panel{width:min(620px,100%)}
.how-body p,.how-body li{line-height:1.45;font-weight:700;font-size:15px;margin:6px 0}
.how-body ul{padding-left:20px;margin:6px 0}
b.o{color:#e8701a}b.r{color:#e83a3a}b.b{color:#2a6ad8}
/* the map */
.map-panel{width:min(980px,100%);max-height:94vh;max-height:94dvh;display:flex;flex-direction:column;padding:10px}
.map-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.map-head h2{margin:0;font:700 32px/1 "Caveat",cursive;flex:none}
.map-head span{flex:1;font-size:13px;color:#6a5f7a}
#mapWrap{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border:3px solid var(--ink);border-radius:12px;background:#3a8ad8}
#mapCv{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94vh - 76px);max-height:calc(94dvh - 76px);cursor:crosshair}
/* shops */
.shop-panel{width:min(640px,100%)}
.shop-head{display:flex;align-items:center;gap:10px}
.shop-head h2{flex:1;margin:0}
.smoney{font:900 18px "Nunito",system-ui,sans-serif;color:#1a7a34;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 14px}
.sub{color:#6a5f7a;font-size:14px;margin:2px 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{background:#fff;border:3px solid #e0d3bd;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.card.own{border-color:#5ac84a}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.card canvas{width:120px;height:64px}
.card .nm{font-weight:900;font-size:15px}
.card .pr{font-weight:900;color:#1a7a34}
.stat{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:5px;width:100%;font-size:11px;color:#6a5f7a;text-align:left}
.stat i{display:block;height:6px;border-radius:4px;background:#e8e0d0;overflow:hidden}
.stat i b{display:block;height:100%;background:var(--accent)}
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.tab{font:900 14px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;background:#fff}
.tab.on{background:var(--ink);color:#fff}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:3px solid #e0d3bd;border-radius:12px;background:#fff;padding:6px 10px;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px;font-weight:900}
.opt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.opt .sw{width:34px;height:22px;border-radius:7px;border:2px solid var(--ink)}
.opt .pr{color:#1a7a34;font-size:12px}
.carprev{display:flex;justify-content:center;background:repeating-linear-gradient(45deg,#e8e0d0 0 10px,#f0e8da 10px 20px);border:3px solid var(--ink);border-radius:14px;padding:6px;margin:4px 0}
.carprev canvas{width:240px;height:130px}
#popOv{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:25;pointer-events:none}
#popBox{background:var(--cream);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);padding:16px 26px;text-align:center;animation:popin .35s cubic-bezier(.3,1.6,.6,1);pointer-events:auto}
#popBox h1{margin:0;font:900 40px/1.05 "Arial Black","Nunito",sans-serif}
#popBox p{margin:6px 0 0;font-weight:800}
@keyframes popin{from{transform:scale(.6);opacity:0}}
@media (max-width:640px){
  #mini{width:104px;height:104px}
  .ibtns{max-width:136px}
  .ibtn.more{display:none}
  .ibtn{width:38px;height:38px;padding:6px}
  #banner{font-size:19px;padding:8px 14px}
  .chip{font-size:13px;padding:4px 10px}
  .rob{width:26px;height:26px;padding:3px}
  .join-row{flex-wrap:wrap}
  #privBtn{flex-basis:100%;order:3}
}