:root{
  --gold:#d8b46a;
  --gold-2:#f3dda4;
  --gold-dim:#9b7d45;
  --teal:#46c8b3;
  --red:#e15959;
  --ink:#080b0c;
  --panel:rgba(9,13,14,.72);
  --line:rgba(216,180,106,.28);
  --text:#f2eee5;
  --muted:#9aa3a0;
  --sans:"Segoe UI","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,sans-serif;
  --serif:"Songti TC","Noto Serif TC","PMingLiU",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;overflow:hidden}
canvas{display:block}
#gl{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#gl:active{cursor:grabbing}
.hidden{display:none!important}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 42%,rgba(0,0,0,.28) 78%,rgba(0,0,0,.62) 100%);z-index:2}
#labels{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}

/* HUD */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;font-size:13px;letter-spacing:.02em}
#hudTopLeft{position:absolute;top:24px;left:28px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
#brand{display:flex;align-items:baseline;gap:9px}
.brand-cn{font-family:var(--serif);font-size:25px;letter-spacing:.12em;color:var(--gold-2)}
.brand-en{font-size:11px;letter-spacing:.42em;color:var(--text);opacity:.85}
#district{margin-top:9px;display:flex;align-items:center;gap:10px;padding-left:2px}
#district:before{content:"";width:18px;height:1px;background:var(--gold);opacity:.7}
#districtCn{font-family:var(--serif);font-size:17px;letter-spacing:.16em}
#districtEn{font-size:9px;letter-spacing:.28em;color:var(--muted)}
#hudTopRight{position:absolute;top:22px;right:28px;text-align:right;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
#clock{display:flex;gap:12px;justify-content:flex-end;font-size:10px;letter-spacing:.18em;color:var(--muted)}
#clockTime{color:var(--text);font-variant-numeric:tabular-nums}
#money{margin-top:7px;font-size:25px;color:var(--gold-2);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px}
#money .cur{font-size:10px;letter-spacing:.15em;color:var(--gold-dim)}
#wanted{margin-top:8px;display:flex;gap:5px;justify-content:flex-end}
#wanted span{width:16px;height:16px;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.2;transition:opacity .25s}
#wanted span.on{opacity:1;background:#ffcf6a;filter:drop-shadow(0 0 5px rgba(255,180,60,.7))}
#clock.flash{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}

#toastWrap{position:absolute;top:110px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;width:min(520px,86vw)}
.toast{background:rgba(8,12,13,.84);border:1px solid var(--line);border-left:2px solid var(--gold);padding:11px 17px;font-size:13px;letter-spacing:.04em;color:#efe9da;animation:toastIn .35s cubic-bezier(.2,.9,.2,1) both;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:100%}
.toast b{color:var(--gold-2);font-weight:600}
.toast.teal{border-left-color:var(--teal)}
.toast.red{border-left-color:var(--red)}
.toast.out{animation:toastOut .4s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}

#missionCard{position:absolute;left:28px;bottom:268px;width:270px;background:linear-gradient(135deg,rgba(12,16,17,.9),rgba(12,16,17,.7));border:1px solid var(--line);backdrop-filter:blur(12px);padding:14px 16px 13px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#missionCard:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:linear-gradient(180deg,var(--gold-2),var(--gold-dim))}
.mc-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
#mcTimer{color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.08em}
#mcTitle{margin-top:9px;font-size:11px;color:var(--muted);letter-spacing:.1em}
#mcDest{font-family:var(--serif);font-size:20px;letter-spacing:.05em;margin-top:2px;line-height:1.25}
.mc-bar{height:2px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
#mcProgress{height:100%;width:0%;background:var(--gold);transition:width .4s}
#mcHint{margin-top:7px;font-size:9px;color:var(--muted);letter-spacing:.06em}

#leftBottom{position:absolute;left:28px;bottom:24px;width:260px}
#street{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;padding-left:1px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
#streetName{font-family:var(--serif);font-size:15px;letter-spacing:.06em;color:#eee6d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#streetEn{font-size:8.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#minimapWrap{position:relative;width:260px;height:190px;border:1px solid rgba(216,180,106,.35);background:#0b1112;box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:hidden}
#minimap{width:100%;height:100%;display:block}
.mm-n{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.3em;color:var(--gold);opacity:.8}
.mm-ring{position:absolute;inset:0;border:1px solid rgba(255,255,255,.05);pointer-events:none;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.28))}
#mmHint{position:absolute;right:7px;bottom:6px;font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.45);background:rgba(0,0,0,.35);padding:2px 5px}
#locBadge{position:absolute;left:-1px;top:-25px;display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.1em;color:var(--gold-2);opacity:.9}
#locKind{font-size:7px}

#rightBottom{position:absolute;right:26px;bottom:22px;width:220px;height:160px;text-align:right;filter:drop-shadow(0 3px 10px rgba(0,0,0,.8))}
#speedo{position:absolute;right:-8px;bottom:-12px;width:230px;height:164px}
#speedoText{position:absolute;right:20px;bottom:35px;display:flex;align-items:baseline;gap:5px}
#speedVal{font-size:47px;font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;color:#f7f2e6}
#speedoText .unit{font-size:9px;letter-spacing:.14em;color:var(--muted)}
#gearBox{position:absolute;right:23px;bottom:12px;display:flex;align-items:center;gap:8px;font-size:10px;color:var(--gold)}
#gearVal{font-size:12px;width:12px;text-align:center}
#rpmBar{width:64px;height:2px;background:rgba(255,255,255,.12);display:block;overflow:hidden}
#rpmBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold),var(--red));transition:width .08s}
#carName{position:absolute;right:24px;top:3px;font-size:8px;letter-spacing:.3em;color:rgba(255,255,255,.35)}
#controlsHint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:14px;font-size:9px;letter-spacing:.05em;color:rgba(255,255,255,.4);white-space:nowrap}
#controlsHint b{color:rgba(255,255,255,.75);font-weight:600;border:1px solid rgba(255,255,255,.18);padding:1px 4px;margin-right:2px;font-size:8px}
#weatherTag{position:absolute;right:30px;top:112px;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.43)}
#actionPrompt{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);background:rgba(8,12,13,.82);border:1px solid var(--line);padding:8px 16px;font-size:11px;letter-spacing:.1em;backdrop-filter:blur(10px);animation:bob 2.2s ease-in-out infinite}
#actionPrompt b{color:var(--gold);border:1px solid var(--gold-dim);padding:1px 5px;margin-right:5px}
@keyframes bob{50%{transform:translate(-50%,-5px)}}
#centerHint{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:26px;letter-spacing:.2em;opacity:0;transition:opacity .6s;text-shadow:0 4px 22px rgba(0,0,0,.8);color:var(--gold-2);text-align:center}
#centerHint.show{opacity:1}

#teleportFlash{position:fixed;inset:0;pointer-events:none;z-index:70;background:radial-gradient(circle at 50% 58%,rgba(196,239,255,.75),rgba(168,220,240,.22) 42%,rgba(4,10,14,.0) 72%);opacity:0;transition:opacity .45s ease-out}
#teleportFlash.on{opacity:1;transition:opacity .04s}
/* 3D labels */
.world-label{position:absolute;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .25s}
.world-label .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.world-label .name{font-size:10px;letter-spacing:.1em;color:#f0e6cf;background:rgba(7,10,11,.62);border:1px solid rgba(216,180,106,.22);padding:3px 7px;backdrop-filter:blur(4px);text-shadow:0 1px 2px #000}
.world-label .sub{font-size:7px;letter-spacing:.12em;color:rgba(255,255,255,.45);margin-top:-2px}
.world-label.dim{opacity:.4}

/* Map overlay */
#mapOverlay{position:absolute;inset:0;z-index:40;background:rgba(5,8,9,.94);display:flex;flex-direction:column;backdrop-filter:blur(8px)}
.map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:22px 32px 16px;border-bottom:1px solid rgba(216,180,106,.18)}
.map-kicker{font-size:9px;letter-spacing:.32em;color:var(--gold);opacity:.8}
.map-head h2{font-family:var(--serif);font-size:25px;letter-spacing:.14em;font-weight:500;margin-top:4px}
.map-legend{display:flex;gap:18px;font-size:9px;color:var(--muted);letter-spacing:.06em;padding-bottom:5px}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{width:14px;height:2px;display:block}
#mapClose{border:1px solid var(--line);padding:9px 14px;font-size:11px;letter-spacing:.1em;color:var(--text);background:rgba(255,255,255,.03);white-space:nowrap}
#mapClose b{color:var(--gold);margin-left:5px;font-size:9px}
.map-body{flex:1;display:flex;min-height:0}
#bigmap{flex:1;min-width:0;height:100%;cursor:grab}
#bigmap:active{cursor:grabbing}
.map-side{width:290px;border-left:1px solid rgba(216,180,106,.16);padding:24px 22px;display:flex;flex-direction:column;min-height:0}
.map-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}
.map-stats>div{background:#0a0e0f;padding:14px 12px}
.map-stats span{font-size:22px;color:var(--gold-2);font-weight:200;letter-spacing:-.02em}
.map-stats small{display:block;margin-top:3px;font-size:8px;letter-spacing:.12em;color:var(--muted)}
.map-title{margin:28px 0 10px;font-size:9px;letter-spacing:.3em;color:var(--gold)}
.map-search{position:relative;margin-bottom:8px}
.map-search input{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(216,180,106,.22);color:var(--text);font:inherit;font-size:11px;letter-spacing:.05em;padding:8px 26px 8px 10px;outline:none}
.map-search input:focus{border-color:rgba(216,180,106,.6);background:rgba(255,255,255,.07)}
.map-search input::placeholder{color:rgba(255,255,255,.3)}
#mapSearchClear{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:15px;padding:2px 6px;display:none}
#mapSearchClear.on{display:block}
.map-group{font-size:8px;letter-spacing:.24em;color:rgba(216,180,106,.7);padding:10px 2px 4px;border-bottom:1px solid rgba(216,180,106,.18)}
.map-poi .tag{font-size:7px;letter-spacing:.1em;color:var(--muted);border:1px solid rgba(255,255,255,.12);padding:1px 4px;margin-left:4px;vertical-align:1px}
.map-empty{padding:18px 4px;font-size:10px;color:var(--muted);line-height:1.8}
#mapPoiList{overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.map-poi{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s}
.map-poi:hover{background:rgba(255,255,255,.04)}
.map-poi .idx{font-size:8px;color:var(--gold-dim);width:18px;font-variant-numeric:tabular-nums}
.map-poi .nm{font-size:11px;letter-spacing:.05em;flex:1}
.map-poi .en{font-size:8px;color:var(--muted);letter-spacing:.03em;margin-top:1px}
.map-poi .dist{font-size:9px;color:var(--gold);font-variant-numeric:tabular-nums}
.map-tip{font-size:8px;color:var(--muted);letter-spacing:.05em;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.map-footer{padding:8px 32px;font-size:8px;color:rgba(255,255,255,.25);letter-spacing:.08em;border-top:1px solid rgba(255,255,255,.05)}

/* Screens */
.screen{position:absolute;inset:0;z-index:50}
#loadingScreen{background:radial-gradient(ellipse at 30% 40%,#111a1b 0%,#080b0c 55%,#050707 100%);display:flex;align-items:center;justify-content:center;flex-direction:column}
#loadingScreen:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.012) 3px);pointer-events:none}
.load-inner{display:flex;align-items:center;gap:44px;width:min(720px,86vw)}
.load-mark{font-family:var(--serif);font-size:64px;line-height:1.02;color:var(--gold);letter-spacing:.02em;border-right:1px solid rgba(216,180,106,.3);padding-right:40px}
.load-copy{flex:1}
.kicker{font-size:9px;letter-spacing:.32em;color:var(--gold);opacity:.8}
.load-copy h2{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:.08em;margin:10px 0 25px}
#loadStatus{font-size:10px;color:var(--muted);letter-spacing:.08em;margin-bottom:10px}
.load-bar{height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
#loadBar{width:0%;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-2));transition:width .3s ease}
.load-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.36)}
#loadPct{color:var(--gold)}
.load-foot{position:absolute;bottom:28px;font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.22)}

#startScreen{background:linear-gradient(100deg,rgba(4,7,8,.96) 0%,rgba(4,7,8,.9) 35%,rgba(4,7,8,.48) 66%,rgba(4,7,8,.2) 100%);display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;gap:40px}
.start-left{max-width:660px;padding-top:10px}
.start-left .kicker{margin-bottom:12px}
h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:.92;display:flex;flex-direction:column}
h1 span{font-size:clamp(72px,9vw,132px);color:var(--gold-2);letter-spacing:.06em;text-shadow:0 0 70px rgba(216,180,106,.18)}
h1 em{font-style:normal;font-family:var(--sans);font-weight:200;font-size:clamp(34px,4.4vw,64px);letter-spacing:.28em;color:#f2eee5;margin-left:6px;margin-top:6px}
.tagline{margin-top:26px;font-size:13px;line-height:1.9;color:#b6bcb7;letter-spacing:.05em;max-width:470px}
.start-stats{display:flex;gap:0;margin-top:35px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:15px 0}
.start-stats>div{padding:0 26px;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:3px}
.start-stats>div:first-child{padding-left:0}
.start-stats>div:last-child{border:none}
.start-stats b{font-size:19px;font-weight:300;color:var(--gold-2);letter-spacing:.02em}
.start-stats span{font-size:8px;letter-spacing:.16em;color:var(--muted)}
.start-actions{display:flex;align-items:center;gap:14px;margin-top:34px}
#startBtn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--gold);color:#131313;padding:13px 32px 11px;min-width:185px;overflow:hidden;transition:background .2s,transform .2s}
#startBtn:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4),transparent 70%);transform:translateX(-120%);transition:transform .6s}
#startBtn:hover{background:var(--gold-2);transform:translateY(-1px)}
#startBtn:hover:before{transform:translateX(120%)}
#startBtn span{font-family:var(--serif);font-size:17px;letter-spacing:.14em;font-weight:600}
#startBtn small{font-size:7px;letter-spacing:.3em;opacity:.6}
.ghost{border:1px solid rgba(255,255,255,.2);padding:13px 22px;font-size:10px;letter-spacing:.14em;color:#d8dcd8;transition:border-color .2s,background .2s}
.ghost:hover{border-color:var(--gold);background:rgba(216,180,106,.06)}
.start-foot{display:flex;gap:24px;margin-top:38px;font-size:7.5px;letter-spacing:.06em;color:rgba(255,255,255,.26)}
.start-right{width:min(310px,25vw);flex-shrink:0;padding-top:40px;opacity:.9}
.car-card{border:1px solid rgba(255,255,255,.14);background:rgba(8,12,13,.38);backdrop-filter:blur(6px);padding:20px 20px 17px;position:relative}
.car-card:before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cc-kicker{font-size:8px;letter-spacing:.3em;color:var(--gold);opacity:.8}
.cc-name{font-family:var(--serif);font-size:29px;letter-spacing:.1em;margin-top:4px;color:#eee6d4}
.cc-specs{display:flex;gap:12px;margin-top:8px;font-size:8px;color:var(--muted);letter-spacing:.08em}
.cc-bars{margin-top:17px;display:flex;flex-direction:column;gap:8px}
.cc-bars label{display:flex;align-items:center;gap:10px;font-size:8px;color:var(--muted);letter-spacing:.14em}
.cc-bars label:after{content:"";flex:1;height:2px;background:rgba(255,255,255,.1);order:1}
.cc-bars i{width:42px;height:2px;background:var(--gold);order:2;position:relative;margin-left:auto}
.cc-bars i:before{content:"";position:absolute;left:0;top:0;height:100%;width:calc(var(--v));background:var(--gold);box-shadow:0 0 8px rgba(216,180,106,.5)}
.cc-bars i:after{content:"";position:absolute;left:calc(var(--v));top:-2px;width:1px;height:6px;background:#fff;opacity:.6}
.start-tips{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.start-tips>div{background:rgba(8,11,12,.75);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.start-tips b{font-size:8px;letter-spacing:.1em;color:var(--gold-2);font-weight:600}
.start-tips span{font-size:8px;color:var(--muted);letter-spacing:.06em}

#pauseMenu{background:rgba(4,7,8,.72);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center}
.pause-card{width:min(520px,90vw);border:1px solid rgba(216,180,106,.25);background:rgba(8,12,13,.92);padding:38px 42px;position:relative;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.pause-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)}
.pause-card h2{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.1em;margin:8px 0 26px;color:#f0e9d9}
.pause-actions{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.pause-actions button{display:flex;justify-content:space-between;align-items:center;background:#0b1011;padding:14px 17px;font-size:11px;letter-spacing:.12em;text-align:left;transition:background .15s;color:#ddd}
.pause-actions button:hover{background:#121919}
.pause-actions button small{font-size:8px;color:var(--gold);letter-spacing:.1em}
.pause-actions button.danger{color:#c78b8b}
.pause-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:26px}
.switch{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.06em;color:var(--muted);cursor:pointer}
.switch input{display:none}
.switch span{width:24px;height:12px;border:1px solid rgba(255,255,255,.25);position:relative;flex-shrink:0;transition:border-color .2s}
.switch span:after{content:"";position:absolute;left:2px;top:2px;width:6px;height:6px;background:rgba(255,255,255,.35);transition:all .2s}
.switch input:checked+span{border-color:var(--gold)}
.switch input:checked+span:after{left:14px;background:var(--gold);box-shadow:0 0 8px rgba(216,180,106,.6)}
.pause-stats{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:26px;font-size:8px;color:var(--muted);letter-spacing:.08em}
.pause-stats b{display:block;font-size:15px;font-weight:300;color:var(--gold-2);margin-bottom:2px}

#helpOverlay{background:rgba(4,7,8,.78);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center}
.help-card{width:min(680px,92vw);border:1px solid rgba(216,180,106,.25);background:rgba(8,12,13,.95);padding:38px 42px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.help-card h2{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.1em;margin:8px 0 24px}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.help-grid>div{background:#0b1011;padding:17px}
.help-grid h3{font-size:9px;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
.help-grid p{font-size:10px;line-height:2;color:var(--muted)}
.help-grid b{color:#ddd;font-weight:500;font-size:9px;border:1px solid rgba(255,255,255,.16);padding:1px 4px;margin-right:4px}
.help-note{margin-top:18px;padding:12px 14px;border-left:1px solid var(--gold-dim);background:rgba(216,180,106,.05);font-size:10px;color:#c9c3b6;line-height:1.6;letter-spacing:.03em}
#helpClose{margin-top:22px;background:var(--gold);color:#111;padding:11px 22px;font-size:11px;letter-spacing:.14em}
#cinemaBars{position:absolute;inset:0;z-index:30;pointer-events:none}
#cinemaBars .bar{position:absolute;left:0;right:0;height:0;background:#050707;transition:height .8s cubic-bezier(.4,0,.2,1)}
#cinemaBars .bar.top{top:0}
#cinemaBars .bar.bottom{bottom:0}
#cinemaBars.on .bar{height:9vh}
#splashMsg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:35;font-family:var(--serif);font-size:clamp(24px,4vw,46px);letter-spacing:.3em;color:var(--gold-2);text-shadow:0 0 40px rgba(216,180,106,.3);opacity:0;pointer-events:none;transition:opacity .7s}

.drown-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(10,40,50,.2),rgba(2,10,14,.9));z-index:25;pointer-events:none;opacity:0;transition:opacity 1s}
.drown-overlay.on{opacity:1}

/* touch */
#touchControls{display:none}
@media (max-width:1100px){
  .start-right{display:none}
  #controlsHint{display:none}
  #missionCard{width:240px;bottom:240px}
  #leftBottom{width:230px}
  #minimapWrap{width:230px;height:168px}
  .map-side{width:250px}
}
@media (max-width:760px){
  #hudTopLeft{top:16px;left:16px}
  .brand-cn{font-size:20px}.brand-en{font-size:9px;letter-spacing:.3em}
  #district{margin-top:5px}#districtCn{font-size:13px}
  #hudTopRight{top:14px;right:16px}
  #money{font-size:19px}
  #leftBottom{left:12px;bottom:12px;width:170px}
  #minimapWrap{width:170px;height:126px}
  #streetName{font-size:12px}
  #rightBottom{right:8px;bottom:6px;width:160px;height:120px}
  #speedo{width:170px;height:120px}
  #speedVal{font-size:36px}
  #speedoText{right:14px;bottom:27px}
  #gearBox{right:16px;bottom:7px}
  #carName{display:none}
  #missionCard{left:12px;bottom:172px;width:190px;padding:10px 12px}
  #mcDest{font-size:16px}
  .start-left{padding:0}
  .start-stats>div{padding:0 12px}.start-stats b{font-size:14px}
  .start-stats span{font-size:7px}
  .start-foot{flex-direction:column;gap:4px}
  h1 span{font-size:56px}h1 em{font-size:25px}
  .tagline{font-size:11px;margin-top:16px}
  .start-actions{margin-top:24px}
  #startBtn{min-width:150px;padding:11px 22px}
  .map-legend,.map-side{display:none}
  .map-head{padding:14px 16px}
  .map-head h2{font-size:19px}
  .load-inner{gap:22px}.load-mark{font-size:40px;padding-right:20px}
  .load-copy h2{font-size:19px;margin:6px 0 16px}
  .help-card{padding:24px;overflow-y:auto;max-height:88vh}
  .help-grid{grid-template-columns:1fr}
  #toastWrap{top:88px}
  #weatherTag{display:none}
}

/* touch controls */
#touchControls{display:none}
@media (pointer:coarse){
  #touchControls{display:flex;pointer-events:none;position:absolute;inset:0;z-index:30}
  #touchControls button{pointer-events:auto;touch-action:none;user-select:none;background:rgba(10,14,15,.62);border:1px solid rgba(216,180,106,.38);color:#f2e9d6;backdrop-filter:blur(6px);font-family:var(--sans);letter-spacing:.06em;min-width:58px;min-height:52px;font-size:11px;border-radius:6px}
  #touchControls button.on{background:rgba(216,180,106,.3);border-color:var(--gold)}
  .tc-steer{position:absolute;left:14px;bottom:96px;display:flex;gap:10px}
  .tc-steer button{width:66px;height:62px;font-size:22px}
  .tc-pedals{position:absolute;right:14px;bottom:96px;display:flex;gap:10px}
  .tc-pedals button{width:66px;height:62px;font-size:13px}
  .tc-pedals .gas{border-color:rgba(70,200,179,.6)}
  .tc-pedals .brake{border-color:rgba(225,89,89,.6)}
  .tc-actions{position:absolute;right:14px;top:104px;display:flex;flex-direction:column;gap:7px}
  .tc-actions button{min-width:56px;min-height:34px;font-size:9px}
  #hud.hidden #touchControls{display:none}
  #minimapWrap{width:150px;height:110px}
  #leftBottom{width:150px}
}
@media (max-height:560px){
  #startScreen{align-items:flex-start;overflow-y:auto;padding-top:16px;padding-bottom:16px}
  h1 span{font-size:46px}h1 em{font-size:21px}
  .tagline,.start-stats,.start-foot,.start-right{display:none}
  .start-left .kicker{margin-bottom:6px}
  .start-actions{margin-top:16px}
  #loadingScreen .load-inner{gap:16px}
  #loadingScreen .load-mark{font-size:38px;padding-right:16px}
  #loadingScreen .load-copy h2{font-size:18px;margin:4px 0 12px}
}

@media (pointer:coarse){
  #leftBottom{display:none!important}
  .tc-pedals{bottom:18px!important;right:16px!important;z-index:3}
  .tc-steer{bottom:18px!important;left:16px!important;z-index:3}
  .tc-actions{bottom:96px!important;right:16px!important;z-index:2}
  #actionPrompt{display:none!important}
  #rightBottom{display:none!important}
  #controlsHint{display:none!important}
  #actionPrompt{bottom:30%;top:auto}
  #missionCard{left:12px;top:94px;bottom:auto;width:min(300px,58vw)}
  .tc-actions{bottom:94px;top:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:180px}
  #toastWrap{top:64px}
  .toast{font-size:11px;padding:8px 12px}
  #hudTopLeft{top:14px;left:14px}
  #hudTopRight{top:12px;right:14px}
  #missionCard .mc-head{font-size:8px}
  #missionCard #mcDest{font-size:16px}
  #weatherTag{display:none}
}
@media (pointer:coarse) and (max-height:480px){
  #brand .brand-cn{font-size:20px}
  #districtCn{font-size:13px}
  #missionCard{width:220px;top:80px;padding:9px 10px}
  #missionCard #mcDest{font-size:14px}
  .tc-steer button{width:58px;height:54px}
  .tc-pedals button{width:58px;height:54px}
  .tc-actions button{min-width:48px;min-height:30px}
}

@media (max-height:560px){
  #pauseMenu{align-items:flex-start;overflow-y:auto;padding:12px 0}
  .pause-card{max-height:94vh;overflow-y:auto;padding:18px 22px;width:min(560px,92vw)}
  .pause-card h2{font-size:18px;margin:4px 0 12px}
  .pause-actions button{padding:9px 12px;font-size:10px}
  .pause-settings{margin-top:12px;gap:6px 16px}
  .pause-stats{margin-top:10px;padding-top:8px}
  .help-card{max-height:94vh;overflow-y:auto;padding:20px 24px}
  .help-card h2{font-size:20px;margin:4px 0 12px}
  .help-grid{grid-template-columns:1fr 1fr 1fr}
  .help-note{margin-top:10px;padding:8px 10px}
}

.map-head-actions{display:flex;align-items:center;gap:10px}
#mapTeleportBtn{border:1px solid rgba(70,200,179,.55);background:rgba(70,200,179,.1);color:#a8eee3;padding:8px 13px;font-size:10px;letter-spacing:.12em}
#mapTeleportBtn:hover{background:rgba(70,200,179,.22)}

#tutorialOverlay{background:radial-gradient(ellipse at 60% 40%,rgba(19,28,28,.55),rgba(4,7,8,.9));backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:60}
.tutorial-card{width:min(660px,92vw);background:rgba(8,12,13,.95);border:1px solid rgba(216,180,106,.35);padding:36px 40px;box-shadow:0 40px 100px rgba(0,0,0,.65);position:relative;max-height:92vh;overflow-y:auto}
.tutorial-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold)}
.tutorial-card h2{font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:.08em;margin:8px 0 12px;color:#f1ead9}
.tutorial-card p{font-size:12px;line-height:1.8;color:#b8bdb6;letter-spacing:.03em}
.tutorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);margin-top:20px}
.tutorial-grid>div{background:#0b1011;padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.tutorial-grid b{font-size:9px;letter-spacing:.1em;color:var(--gold-2)}
.tutorial-grid span{font-size:9px;color:var(--muted);letter-spacing:.05em}
.tutorial-note{margin-top:14px;padding:9px 12px;border-left:1px solid var(--gold-dim);background:rgba(216,180,106,.05);font-size:10px;color:#d0caba}
.tutorial-note b{color:var(--gold)}
.tutorial-actions{display:flex;gap:12px;margin-top:22px}
.tutorial-actions #tutorialStart{background:var(--gold);color:#111;padding:12px 24px;font-size:12px;letter-spacing:.12em}
.tutorial-actions .ghost{padding:12px 18px;font-size:10px}
#coach{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:32;display:flex;align-items:center;gap:16px;background:rgba(8,12,13,.88);border:1px solid var(--gold-dim);border-left:2px solid var(--gold);padding:11px 15px;backdrop-filter:blur(10px);box-shadow:0 12px 35px rgba(0,0,0,.4);max-width:min(620px,88vw)}
#coach span{font-size:12px;letter-spacing:.05em;color:#eee7d7}
#coach span b{color:var(--gold-2)}
#coachSkip{font-size:9px;color:var(--muted);letter-spacing:.1em;border-left:1px solid rgba(255,255,255,.15);padding-left:12px;white-space:nowrap}
#coach.hidden{display:none}
@media (max-width:760px){.tutorial-card{padding:22px}.tutorial-grid{grid-template-columns:1fr 1fr}.tutorial-card h2{font-size:24px}.tutorial-card p{font-size:11px}#coach{bottom:180px}}

#casinoOverlay{background:radial-gradient(ellipse at 50% 38%,rgba(60,20,20,.20),rgba(4,6,8,.74));backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:55}
.casino-card{width:min(720px,94vw);border:1px solid rgba(216,180,106,.45);background:linear-gradient(160deg,rgba(27,12,13,.93),rgba(9,12,13,.95));padding:26px 32px 22px;box-shadow:0 40px 100px rgba(0,0,0,.7);position:relative;max-height:94vh;overflow-y:auto}
.casino-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#e3c37c,#7d2b2b)}
.casino-head{display:flex;justify-content:space-between;align-items:center}
#casinoClose{border:1px solid rgba(255,255,255,.18);padding:7px 12px;font-size:9px;letter-spacing:.12em;color:#ddd}
#casinoClose b{color:var(--gold);font-size:8px}
#casinoName{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:.08em;margin:7px 0 4px;color:#f1e6cc}
.casino-balance{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.casino-balance b{color:var(--gold-2);font-size:18px;font-weight:300;letter-spacing:.02em;margin-left:5px}
.casino-table{margin-top:18px;border:1px solid rgba(216,180,106,.25);background:radial-gradient(ellipse at center,#153a2e,#0b211c);padding:22px;text-align:center}
.dice-row{display:flex;justify-content:center;gap:16px}
.die{width:64px;height:64px;background:linear-gradient(145deg,#faf6ea,#d9d0ba);border-radius:10px;color:#1b1c1a;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600;box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.6);transition:transform .15s}
.die.rolling{animation:dieShake .12s infinite}
.die.win{box-shadow:0 0 22px rgba(216,180,106,.9),0 6px 14px rgba(0,0,0,.4)}
@keyframes dieShake{0%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}100%{transform:rotate(-5deg)}}
#casinoResult{margin-top:16px;font-size:12px;letter-spacing:.06em;color:#cfc7b4;min-height:20px}
#casinoResult.win{color:#8fe0b0}
#casinoResult.lose{color:#ef9a8d}
.casino-controls{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip-row{display:flex;align-items:center;gap:6px}
.ctl-label{font-size:8px;letter-spacing:.18em;color:var(--muted);margin-right:3px}
.chip{width:47px;height:47px;border-radius:50%;border:2px dashed rgba(255,255,255,.4);background:#5d2a2b;color:#f3e4c3;font-size:11px}
.chip.active{border-style:solid;border-color:var(--gold);background:#8d3a35;box-shadow:0 0 12px rgba(216,180,106,.4)}
.bigsmall{display:flex;gap:8px;flex:1}
.bigsmall button{flex:1;border:1px solid rgba(216,180,106,.35);padding:8px;color:#ece2cc;font-family:var(--serif);font-size:20px;letter-spacing:.2em;background:rgba(0,0,0,.2)}
.bigsmall button small{display:block;font-family:var(--sans);font-size:7px;letter-spacing:.12em;color:var(--muted);margin-top:2px}
.bigsmall button.active{background:rgba(216,180,106,.18);border-color:var(--gold)}
#rollBtn{background:var(--gold);color:#151311;padding:14px 24px;font-size:11px;letter-spacing:.2em;min-width:110px}
#rollBtn:disabled{opacity:.45}
.casino-foot{margin-top:14px;font-size:8px;letter-spacing:.08em;color:rgba(255,255,255,.32)}
@media (max-width:560px){.casino-card{padding:18px}.casino-table{padding:14px}.die{width:48px;height:48px;font-size:22px}.casino-controls{gap:8px}.chip{width:40px;height:40px}.bigsmall button{font-size:16px}#casinoName{font-size:21px}}

#schoolOverlay{position:absolute;inset:0;z-index:45;pointer-events:none;background:linear-gradient(180deg,rgba(3,6,7,.5),transparent 18%,transparent 82%,rgba(3,6,7,.55));display:flex;flex-direction:column;justify-content:space-between;padding:18px 26px}
.school-top{display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.school-top h2{font-family:var(--serif);font-size:23px;letter-spacing:.06em;margin-top:3px;color:#f2ead6;text-shadow:0 2px 14px rgba(0,0,0,.7);max-width:70vw}
#schoolExit{pointer-events:auto;border:1px solid rgba(216,180,106,.5);background:rgba(8,12,13,.8);padding:9px 14px;font-size:10px;letter-spacing:.12em;color:#eee4cf}
#schoolExit b{color:var(--gold);font-size:9px;margin-left:5px}
.school-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.6);background:rgba(5,8,9,.55);border:1px solid rgba(255,255,255,.1);padding:7px 13px;backdrop-filter:blur(6px);white-space:nowrap}
.school-hint b{color:var(--gold-2)}
.school-touch{display:none;position:absolute;right:18px;bottom:54px;gap:8px;flex-direction:column;align-items:center;pointer-events:none}
.school-touch>div{display:flex;gap:6px}
.school-touch button{pointer-events:auto;width:44px;height:44px;border:1px solid rgba(216,180,106,.35);background:rgba(8,12,13,.65);color:#eadfc8;font-size:13px;border-radius:4px;touch-action:none}
@media (pointer:coarse){.school-touch{display:flex}}