*{box-sizing:border-box}
/* safe-area insets (notch / home bar): every fixed HUD element is offset by them; js/ui/insets.js reads them; a harness overrides the four properties on <html> */
:root{--ins-l:env(safe-area-inset-left,0px);--ins-r:env(safe-area-inset-right,0px);--ins-t:env(safe-area-inset-top,0px);--ins-b:env(safe-area-inset-bottom,0px)}
html,body{touch-action:none;overscroll-behavior:none;margin:0;height:100%;overflow:hidden;background:#000;font-family:var(--ag-lead,"Segoe UI"),"Segoe UI",Arial,Helvetica,sans-serif;color:#fff;user-select:none}
canvas{display:block}
.hud{position:fixed;pointer-events:none;text-shadow:2px 2px 0 #000,0 0 6px #000;font-style:italic;font-weight:800}
#hudTL{left:calc(18px + var(--ins-l));top:calc(14px + var(--ins-t));font-size:20px;line-height:1.25}
#hudTL .big{font-size:44px;color:#ffd21f}
#hudTL .lbl{color:#ffb000;font-size:14px;letter-spacing:1px}
#mini{right:calc(14px + var(--ins-r));top:calc(14px + var(--ins-t));background:rgba(0,0,0,.35);border:2px solid rgba(255,210,31,.6);border-radius:8px}
#tacho{right:calc(14px + var(--ins-r));bottom:calc(14px + var(--ins-b))}
#note{left:50%;top:calc(22px + var(--ins-t));transform:translateX(-50%);display:none;align-items:center;gap:14px;background:rgba(0,0,0,.55);border:3px solid #ffd21f;border-radius:10px;padding:6px 18px;font-size:46px;color:#ffd21f}
#note small{font-size:18px;color:#fff;display:block;font-style:normal}
#msg{left:50%;top:38%;transform:translate(-50%,-50%);font-size:84px;color:#ffd21f;display:none;white-space:nowrap}
#lights{left:50%;top:20%;transform:translateX(-50%);display:none;gap:14px;background:#111;padding:12px 18px;border-radius:12px;border:3px solid #333}
#lights i{display:inline-block;width:46px;height:46px;border-radius:50%;background:#300;margin:0 6px;box-shadow:inset 0 0 8px #000}
#lights i.on{background:#f22;box-shadow:0 0 22px #f22}
#lights.go i{background:#2f4;box-shadow:0 0 22px #2f4}
#warn{left:50%;bottom:22%;transform:translateX(-50%);font-size:26px;color:#ff5030;display:none}
.ov{z-index:10;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,30,50,.6),rgba(0,0,0,.85))}
.panel{background:linear-gradient(160deg,#1a2233,#0d121c);border:3px solid #ffd21f;border-radius:14px;padding:26px 34px;min-width:440px;box-shadow:0 10px 60px #000}
.panel h1{margin:0 0 4px;font-size:58px;font-style:italic;color:#ffd21f;letter-spacing:2px;text-shadow:3px 3px 0 #a33}
.panel h2{margin:0 0 16px;font-size:24px;font-style:italic;color:#ffd21f}
.panel .sub{color:#9ab;margin-bottom:18px;font-size:14px}
.row{display:flex;justify-content:space-between;align-items:center;margin:9px 0;gap:16px;font-weight:600}
.row input,.row select{background:#0a0f18;color:#fff;border:1px solid #556;border-radius:6px;padding:6px 8px;font-size:15px;width:170px}
.btns{display:flex;gap:10px;margin-top:18px}
button{flex:1;background:#ffd21f;color:#111;border:0;border-radius:8px;padding:12px 16px;font-size:18px;font-weight:900;font-style:italic;cursor:pointer}
button.alt{background:#334;color:#fff}
button:hover{filter:brightness(1.15)}
.keys{margin-top:16px;font-size:12.5px;color:#9ab;line-height:1.6}
table{border-collapse:collapse;width:100%;font-size:17px}
td,th{padding:6px 10px;text-align:left;border-bottom:1px solid #334}
th{color:#ffb000;font-size:13px}
tr.me td{color:#ffd21f;font-weight:800}
.hidden{display:none!important}
.panel.wide{min-width:620px;max-width:94vw;max-height:94vh;overflow:auto}
.row input[type=text]{width:170px}
.bot-row td{color:#9ab}
.panel.wide h1{font-size:44px}
.panel.wide .sub{margin-bottom:8px}
.panel.wide .row{margin:6px 0}
.panel.wide h2{margin-bottom:8px}
.panel.wide .btns{margin-top:10px}
.panel.wide .keys{margin-top:8px}
#speed{inset:0;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 3deg,rgba(255,255,255,.55) 3.4deg 3.8deg,rgba(255,255,255,0) 4.2deg 7deg);-webkit-mask-image:radial-gradient(circle,transparent 42%,#000 95%);mask-image:radial-gradient(circle,transparent 42%,#000 95%)}
#item{left:calc(18px + var(--ins-l));bottom:calc(48px + var(--ins-b));width:96px;height:96px;background:rgba(8,10,16,.7);border:3px solid #ffd21f;border-radius:14px;display:flex;align-items:center;justify-content:center;font-style:normal}
#item span{font-size:58px;line-height:1}
#item small{position:absolute;right:6px;bottom:2px;font-size:24px;font-style:italic;color:#ffd21f}
#msg{font-size:84px}
#msg.long{font-size:56px}
.row.chk input{width:auto}
.touchonly{display:none}
body.touch .touchonly{display:flex}
#touch{display:none;position:fixed;inset:var(--ins-t) var(--ins-r) var(--ins-b) var(--ins-l);z-index:5;pointer-events:none}
body.touchctl #touch{display:block}
body.touchoff #touch{display:none}
#touch>*{pointer-events:auto;touch-action:none}
/* the geometry of the controls lives in css/touch.css, their skin in css/ag-win-touch.css (AG) and below (the classic skin) */
.tBtn{border-radius:12px;background:rgba(20,24,34,.55);border:3px solid rgba(255,210,31,.7);color:#ffd21f}
.tBtn.on{background:rgba(255,210,31,.55);color:#111}
#tRing{background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);border:2px solid rgba(255,255,255,.35)}
#tKnob{background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.5)}
@media (max-width:900px),(max-height:500px){
  #tacho{width:140px;height:140px}
  #mini{width:110px;height:110px}
  #hudTL{font-size:14px}
  #hudTL .big{font-size:28px}
  #note{font-size:28px}
  #msg{font-size:44px}
  #msg.long{font-size:32px}
  .panel{min-width:0;width:min(96vw,900px);max-height:92vh;overflow:auto}
}
body.touch body.touch #item{left:auto;right:calc(14px + var(--ins-r));top:calc(140px + var(--ins-t));bottom:auto;width:64px;height:64px}
body.touch #item span{font-size:38px}

.gname{font-size:20px;font-weight:800;font-style:italic;margin-top:8px}
.gcredit{color:#6f8196;font-size:11px;margin-top:1px;min-height:13px}
.gnote{color:#789;font-size:12px;margin-top:8px}


/* ---- vehicle-source garage (js/ui/veh-garage.js; window template in ui/windows.js) */
[data-win=vehgarage]{text-align:left;max-width:calc(100vw - 8px)}
.vg-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.vg-chips{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
.vg-chips b{font-weight:600;font-size:12px;padding:2px 8px;border:1px solid #556;color:#9ab;cursor:pointer;user-select:none;white-space:nowrap}
.vg-chips b.on{border-color:#ffd21f;color:#ffd21f}
.vg-search{flex:0 1 150px;min-width:90px;font-size:12px;padding:3px 6px;box-sizing:border-box;background:#0b0c10;border:1px solid #556;color:#dfe8f4;outline:none}
.vg-search:focus{border-color:#ffd21f}
.vg-count{font-size:11px;color:#789;white-space:nowrap}
.vg-main{display:grid;grid-template-columns:172px minmax(0,1.25fr) minmax(0,1fr);gap:8px;align-items:start}
.vg-list{max-height:min(54vh,330px);overflow-y:auto;overscroll-behavior:contain;border:1px solid #334}
.vg-list div{font-size:12px;padding:3px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9ab}
.vg-list div:hover{background:rgba(255,255,255,.08)}
.vg-list div.on{color:#ffd21f;background:rgba(255,210,31,.12)}
.vg-list .vg-empty{cursor:default;color:#789}
.vg-view{min-width:0;text-align:center}
.vg-stage{position:relative}
#vgView{display:block;margin:0 auto;width:100%;aspect-ratio:16/9;background:#0b0c10;touch-action:none;cursor:grab}
.vg-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,12,16,.55);color:#dfe8f4;font-size:13px;pointer-events:none}
.vg-load.hidden{display:none}
.vg-side{min-width:0}
.vg-stats{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;font-size:12px;color:#9ab}
.vg-bar{height:7px;background:#1a2030;border:1px solid #334}
.vg-bar i{display:block;height:100%;background:#ffd21f}
.vg-nums{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin-top:6px;font-size:12px;color:#9ab}
.vg-nums span:nth-child(even){color:#dfe8f4;text-align:right}
.vg-sec{font-size:11px;color:#789;margin-top:8px}
.vg-sw{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.vg-sw i{width:22px;height:22px;box-sizing:border-box;border:2px solid #556;cursor:pointer;display:block}
.vg-pal{gap:2px}
.vg-pal i{width:11px;height:11px;border-width:1px}
.vg-sw i.on{border-color:#ffd21f;box-shadow:0 0 6px #ffd21f}
@media (max-width:760px){
  .vg-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vg-list{grid-column:1/-1;display:flex;max-height:none;overflow-x:auto;overflow-y:hidden}
  .vg-list div{flex:none}
}
@media (max-width:520px){ .vg-main{grid-template-columns:minmax(0,1fr)} }
@media (max-height:640px){ .vg-view .gnote{display:none} }
.hudbtn{position:fixed;right:calc(14px + var(--ins-r));top:calc(206px + var(--ins-t));z-index:4;background:rgba(8,10,16,.7);color:#ffd21f;border:2px solid rgba(255,210,31,.7);border-radius:8px;padding:6px 12px;font-size:14px;font-weight:800;font-style:italic;cursor:pointer;flex:none}
body.touch .hudbtn{display:none!important}
#tGarage{right:calc(2vw + 80px + 3*var(--tp))}
@media (max-width:900px),(max-height:500px){#tGarage{right:calc(2vw + 120px + 3*var(--tp))}}

/* the version line is ops-only (the original client draws nothing there): kept in the DOM for tooling, logged to the console, never shown */
#ver{display:none}


@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (max-height:640px){

  .gnote{display:none}
}

.pausewin{min-width:300px}
.pausewin .btns{margin-top:10px}
#agtip{position:fixed;z-index:100;pointer-events:none;max-width:320px;padding:6px 10px;background:#0d121c;border:1px solid #ffd21f;font-size:13px}

/* TEMPORARY: remove with the click-teleport — loader window */
#tpLoad{background:rgba(0,0,0,.35);z-index:30}
.entry-status{color:#ff5030;font-weight:700;min-height:20px;margin-top:6px}

/* entry screen: classic = one plain form (panel + the car arrows under it); the AG skin lays it out like the character-select screen */
#entry{flex-direction:column;gap:12px}
#entry .entry-logo,#entry .entry-list{display:none}
#entry .entry-center{order:2;display:flex;align-items:center;gap:12px;font-weight:700}
#entry .entry-center button{flex:none;padding:6px 14px}
#entry .entry-side{order:1}

/* login / select screens (classic); the AG skin restyles them in ag-win-options.css */
html:not(.agui) .logon-logo,html:not(.agui) .logon-stack,html:not(.agui) .logon-copy,html:not(.agui) .lw-pw,html:not(.agui) #loginPwd{display:none}
.loginwin{min-width:340px}
.lobby-start{display:flex;margin-top:10px}.lobby-start button{flex:1}
.lobby-menu .btns:first-child{margin-top:10px}

/* ---- window template + components (classic look; the AG skin restyles them in ag-window.css / ag-components.css) */
html:not(.agui) .agw{position:relative;display:flex;flex-direction:column;min-width:260px;max-width:96vw;max-height:94vh;overflow:hidden;background:linear-gradient(160deg,#1a2233,#0d121c);border:3px solid #ffd21f;border-radius:14px;box-shadow:0 10px 60px #000}
html:not(.agui) .agw-title{display:flex;align-items:center;padding:10px 44px 6px 18px}
html:not(.agui) .agw-tt{flex:1;font-size:22px;font-style:italic;font-weight:700;color:#ffd21f}
html:not(.agui) .agw-x{position:absolute;top:8px;right:10px;width:30px;height:30px;flex:none;padding:0;font-size:0}
html:not(.agui) .agw-x::before{content:"×";font-size:20px;line-height:1}
html:not(.agui) .agw-client{display:flex;flex-direction:column;min-height:0;flex:1}
html:not(.agui) .agw-body{flex:1;min-height:0;overflow:auto;padding:8px 20px}
html:not(.agui) .agw[data-pad=none] .agw-body{padding:0}
html:not(.agui) .agw-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:8px 20px 16px}
html:not(.agui) .agw-foot:empty,html:not(.agui) .agw-body:empty{display:none}
html:not(.agui) .agw-head{display:flex}
html:not(.agui) .agf-rs{position:absolute;touch-action:none}
html:not(.agui) .agf-rs[data-dir=e]{right:0;top:0;bottom:0;width:8px;cursor:ew-resize}
html:not(.agui) .agf-rs[data-dir=s]{left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
html:not(.agui) .agf-rs:hover{background:rgba(255,210,31,.35)}
html:not(.agui) .ov.agw-nomodal{background:none;pointer-events:none}html:not(.agui) .ov.agw-nomodal>.agw{pointer-events:auto}
html:not(.agui) .ov.agw-inline{position:relative;inset:auto;display:inline-block;vertical-align:top;background:none;margin:8px}
html:not(.agui) .ag-msg,html:not(.agui) .ag-line{text-align:center;margin:6px 0}
html:not(.agui) .agb{flex:none;padding:8px 18px}html:not(.agui) .agb-t{pointer-events:none}
html:not(.agui) .agtabs{display:flex;gap:6px;flex:1}html:not(.agui) .agtab{flex:1;background:#334;color:#fff;padding:8px 6px;font-size:15px}html:not(.agui) .agtab.on{background:#ffd21f;color:#111}
html:not(.agui) .agbox{margin:0 0 12px;padding:8px 12px;background:#0d121c;border:1px solid #334;border-radius:8px}
html:not(.agui) .agbox>h3{margin:2px 0 8px;font-size:16px;font-style:italic;color:#ffd21f}
html:not(.agui) .agr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:4px 0}html:not(.agui) .agr-stack{grid-template-columns:minmax(0,1fr)}
html:not(.agui) .agc{display:flex;gap:8px;align-items:center;margin:4px 0}
html:not(.agui) .ags{display:flex;gap:10px;align-items:center}html:not(.agui) .ags input{flex:1;min-width:120px}html:not(.agui) .ags b{min-width:44px;text-align:right;font-size:13px}
html:not(.agui) .agsel select.native{position:static;opacity:1;pointer-events:auto;width:100%;height:auto}html:not(.agui) .agsel-b{display:none}
html:not(.agui) .agsel-list{display:none!important}
html:not(.agui) .aglist table{width:100%}
html:not(.agui) .agin{width:100%}
html:not(.agui) .agp{height:12px;background:#0d121c;border:1px solid #334}html:not(.agui) .agp i{display:block;height:100%;width:0;background:#ffd21f}
html:not(.agui) .krow{display:flex;flex-direction:column;gap:4px;margin:3px 0}html:not(.agui) .kbtns{display:flex;gap:6px}html:not(.agui) .kbtns .agkey{flex:1;padding:6px 8px;font-size:13px}
html:not(.agui) .agkey.listen{background:#ffd21f;color:#111}html:not(.agui) .agkey.conflict{background:#a33;color:#fff}
html:not(.agui) .agw-break{flex:0 0 100%;height:0;order:-1}html:not(.agui) #oMsg{order:-3;flex:1 1 0;text-align:center;font-size:13px;color:#9ab}html:not(.agui) #oMsg.bad{color:#ff7050}html:not(.agui) #oMsg[hidden]{display:none}
html:not(.agui) .khint{font-size:12px;color:#9ab}
html:not(.agui) .pfcode{display:block;margin:4px 0;padding:4px 6px;font:700 14px/1.4 monospace;letter-spacing:2px;color:#eee;background:#0d121c;border:1px solid #334;user-select:all;text-align:center}
html:not(.agui) .pfcode[hidden]{display:none}
html:not(.agui) .tfwin{display:flex;flex-direction:column;gap:8px;min-width:220px}

html:not(.agui) .cr-win{display:none}
html:not(.agui) #create{flex-direction:column}

/* in-game car window (js/ui/car-pick-window.js): centred near the top by default (xdat WndDefPos convention: the project windows must not
   displace the original ones — StatusWnd owns the top-left corner), collapsible to its title bar. `agw-dragged` (a drag or a saved position)
   swaps the centring for inline left/top taken from the post-transform box (js/ui/window.js dragBy), so the window never jumps. */
[data-win=carpick]{text-align:left;max-width:calc(100vw - 8px)}
html.agui .agw[data-win=carpick]:not(.agw-dragged){position:fixed;left:50%;top:calc(90*var(--u));transform:translateX(-50%);margin:0}
.cp-top{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.cp-chips{display:flex;flex-wrap:wrap;gap:3px;flex:1 1 auto;min-width:0}
.cp-chips b{font-weight:600;font-size:11px;padding:1px 6px;border:1px solid #556;color:#9ab;cursor:pointer;user-select:none;white-space:nowrap}
.cp-chips b.on{border-color:#ffd21f;color:#ffd21f}
.cp-search{flex:0 0 110px;min-width:0;background:#10151e;border:1px solid #556;color:#dde;padding:2px 5px;font-size:12px}
.cp-row{display:flex;align-items:stretch;gap:4px}
.cp-strip{flex:1 1 auto;min-width:0;display:flex;gap:4px;justify-content:center;touch-action:pan-y}
.cp-card{flex:1 1 0;min-width:0;max-width:92px;padding:3px;border:1px solid #334;background:#10151e;cursor:pointer;text-align:center;overflow:hidden}
.cp-card.on{border-color:#ffd21f;background:#1a2230}.cp-card.cur{box-shadow:inset 0 -2px 0 #4cc24c}
.cp-th{aspect-ratio:16/9;background:#0b0c10}.cp-th img{display:block;width:100%;height:100%;object-fit:cover}
.cp-name{font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cp-sub{font-size:10px;color:#9ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-bars{display:flex;flex-direction:column;gap:2px;margin-top:2px}.cp-bars u{display:block;height:3px;background:#223}.cp-bars i{display:block;height:100%;background:#ffd21f}
.cp-bars u:nth-child(2) i{background:#e0703a}.cp-bars u:nth-child(3) i{background:#4aa8e0}
.cp-empty{color:#9ab;font-size:12px;align-self:center}
.cp-foot{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.cp-dots{display:flex;flex-wrap:wrap;gap:3px;flex:1 1 90px;min-width:0}.cp-dots i{width:14px;height:14px;border:1px solid #556;cursor:pointer}.cp-dots i.on{border-color:#ffd21f;outline:1px solid #ffd21f}
.cp-status{flex:1 1 100%;order:5;font-size:11px;color:#ffd21f;min-height:0}.cp-status:empty{display:none}.cp-status.warn{color:#9ab}
/* race class (Q9): cars that may not start the round are greyed (js/ui/car-pick-window.js, veh-garage.js) */
.cp-card.inel,.vg-list div.inel{opacity:.45;filter:grayscale(.8)}
.cp-chips b[data-e],.vg-chips b[data-e]{border-style:dashed}