.juan-race .jr-panel,.juan-race .jr-brand,.juan-race .jr-hud,.juan-race .jr-control-hint{display:none!important}
.jx,.hd{font-family:system-ui,-apple-system,sans-serif;color:#fff}
.jx{position:fixed;inset:0;z-index:60}
.jx button{cursor:pointer;font-family:inherit}
/* 5: showroom */
.s-showroom,.s-shop{pointer-events:none;background:linear-gradient(transparent 50%,#000c)}
.s-showroom>*,.s-shop>*{pointer-events:auto}
.sr-top{position:absolute;top:max(8px,env(safe-area-inset-top));left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 10px;pointer-events:none!important}
.sr-top>*{pointer-events:auto}
.sk{background:#fff;color:#111;border:0;transform:skew(-14deg);padding:8px 20px;font:italic 800 12px system-ui;letter-spacing:.04em}
.sr-coin{background:#000a;border:1px solid #ffe600;color:#ffe600;padding:5px 12px;font:800 13px system-ui}
.sr-name{position:absolute;left:18px;top:52px;pointer-events:none!important}
.sr-name h1{margin:0;font:italic 900 clamp(40px,9vw,66px)/1 system-ui;text-shadow:0 3px 12px #000}
.sr-name h2{margin:0 0 8px;font:italic 700 26px system-ui;opacity:.8}
.sr-name .jx-bars{width:190px;text-shadow:0 1px 3px #000}
.sr-grade{position:absolute;right:14px;bottom:134px;display:flex;gap:5px}
.sr-grade b{width:30px;height:30px;display:grid;place-items:center;background:#fff;color:#111;font:italic 900 17px system-ui;transform:skew(-12deg);opacity:.85}
.sr-grade b.on{background:#ffe600;outline:2px solid #fff;opacity:1}
.sr-go{position:absolute;left:18px;bottom:134px;background:#ffe600;color:#111;border:0;padding:11px 26px;font:italic 900 16px system-ui;transform:skew(-12deg)}
.sr-go:disabled{background:#555;color:#aaa}
.sr-row{position:absolute;left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));height:118px;display:flex;gap:6px;overflow-x:auto}
.sr-car{flex:0 0 124px;position:relative;background:linear-gradient(#2d2f3a,#14151b);border:2px solid #333;color:#fff;padding:6px;text-align:left}
.sr-car.on{border-color:#fff}.cim{display:block;width:100%;filter:drop-shadow(0 6px 6px #0009)}.sr-car .cim{margin-top:10px}.sr-car.lock .cim{opacity:.4;filter:grayscale(.6)}
.sr-car small{position:absolute;left:6px;top:5px;font:700 8px system-ui;opacity:.8}
.sr-car b{position:absolute;right:6px;bottom:6px;color:#4ff;font:italic 800 14px system-ui}
.sr-car s{position:absolute;left:6px;bottom:6px;text-decoration:none;font-size:9px;color:#fff;letter-spacing:1px}
.sr-car u{position:absolute;left:50%;top:40%;transform:translateX(-50%);text-decoration:none;font-size:22px}
.sr-car .chev{position:absolute;right:0;top:0;border-top:30px solid #ffe600;border-left:30px solid transparent}
/* 1: menu */
.s-menu{background:rgba(8,9,14,.88);backdrop-filter:blur(8px);display:grid;place-items:center}
.mk{width:min(96vw,840px);height:min(94vh,430px);display:grid;grid-template-columns:128px 1fr;background:#1e1f29;border:1px solid #333;border-radius:12px;overflow:hidden}
.mk-side{background:#191a22;padding:12px 8px;display:flex;flex-direction:column;gap:6px;border-right:1px solid #2c2d38}
.mk-logo{font:900 16px/1 system-ui;text-align:center;padding-bottom:10px;border-bottom:1px solid #2c2d38;margin-bottom:6px}.mk-logo em{color:#2554ff;font-style:normal}
.mk-side small{font-size:9px;opacity:.6}
.mk-it{background:none;border:0;color:#aab;text-align:left;padding:9px 10px;border-radius:5px;font:700 11px system-ui}
.mk-it.on{background:#2554ff;color:#fff}.mk-out{margin-top:auto}
.mk-main{display:flex;flex-direction:column;min-height:0;padding:10px 14px}
.mk-hd{display:flex;align-items:center;gap:10px;border-bottom:1px solid #2c2d38;padding-bottom:8px}
.mk-hd h2{margin:0;flex:1;font:800 18px system-ui}.mk-hd span{font-size:11px}
.mk-av{width:28px;height:28px;border-radius:50%;background:#2554ff;display:grid;place-items:center;font-weight:800}
.jx-body{flex:1;overflow:auto;display:grid;gap:10px;padding-top:10px;align-content:start;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.jx-body.ov{grid-template-columns:1fr 1fr}.jx-body.ov>:last-child{grid-column:1/-1}
.jx-card{background:#272833;border-radius:6px;display:grid;gap:7px;padding:0 0 10px}
.jx-card>*:not(.jx-card-h){margin:0 10px}
.jx-card-h{background:#30313e;padding:8px;font:700 11px system-ui;text-align:center;border-radius:6px 6px 0 0}
.jx-card h3{text-align:center;margin:0;font:800 16px system-ui}.jx-card p{font-size:13px;opacity:.85}
.mk-pill{background:#30313e;border-radius:5px;padding:9px;text-align:center;font:700 12px system-ui}
.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mk-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mk-img .cim{height:74px;width:auto;margin:auto}.mk-fav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-favc{background:#30313e;border-radius:5px;padding:6px;display:grid;gap:5px;text-align:center;font-size:10px}
.jx-btn{background:#2554ff;color:#fff;border:0;padding:9px;font:700 11px system-ui;border-radius:3px}.jx-btn:disabled{background:#444;opacity:.6}
.jx-in{background:#14141a;border:1px solid #444;color:#fff;padding:8px;font-size:13px;width:calc(100% - 20px);box-sizing:border-box;border-radius:4px}
.jx-sm{width:90px!important;margin:0!important}.jx-f{display:grid;gap:3px;font-size:11px}.jx-f .jx-in{width:100%}
.jx-mini{background:#a22;color:#fff;border:0;width:24px;height:24px;border-radius:3px}
.jx-list{display:grid;gap:4px}.jx-li{display:flex;align-items:center;gap:8px;background:#30313e;padding:7px;font-size:12px;border-radius:4px}.jx-li span{flex:1}.jx-li.me{outline:1px solid #ffe600;color:#ffe600}.jx-li em{width:20px;font-style:normal;font-weight:900}
.jx-seg{display:flex;gap:6px;margin-bottom:8px}.jx-tab{background:#30313e;color:#fff;border:0;padding:8px 12px;font:700 11px system-ui;border-radius:4px}.jx-tab.on{background:#2554ff}
.jx-note{grid-column:1/-1;font-size:11px}
.jx-bars{display:grid;gap:5px}.jx-bar{display:grid;grid-template-columns:78px 1fr 20px;gap:6px;align-items:center;font-size:10px}
.jx-bar b{order:3;text-align:right}.jx-bar i{order:2;background:#0008;height:6px;display:block}.jx-bar u{display:block;height:100%;background:#ffe600}
/* 2: profile */
.s-profile{background:rgba(110,110,120,.5);backdrop-filter:blur(14px);padding:max(10px,env(safe-area-inset-top)) 14px 10px}
.pf-corner{position:absolute;top:0;left:0;width:0;height:0;border-top:64px solid #ff1f8f;border-right:64px solid transparent;font:900 24px/1 system-ui;color:#fff;padding:0}
.pf-corner{display:block}.pf-corner::after{content:none}
.pf-top{display:flex;justify-content:space-between;margin:0 0 8px 50px;font-size:12px}.pf-top em{background:#000a;padding:4px 8px;font-style:normal;font-weight:800;font-size:10px}.pf-top span{color:#ffe600;font-weight:800}
.pf-left{position:absolute;left:16px;top:60px;width:130px;display:grid;gap:6px}
.pf-av{height:110px;display:grid;place-items:center;font:900 48px system-ui;color:#111;border:2px solid #fff}
.pf-pill{background:linear-gradient(#777,#555);color:#fff;border:0;padding:7px;font:700 12px system-ui;text-align:left}
.pf-grid{position:absolute;left:162px;right:14px;top:56px;bottom:12px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.pf-grid .jx-card{background:linear-gradient(135deg,#8c8c91,#4b4b50);border:1px solid #bbb;border-radius:0;align-content:start}
.pf-grid .jx-card-h{background:none;text-align:left;font:italic 800 11px system-ui;letter-spacing:.06em}
.pf-lg{display:flex;gap:10px;align-items:center;font:700 12px system-ui}.tr{font-size:36px}
.pf-btn{background:#fff;color:#111;border:0;padding:6px;font:800 10px system-ui}
.pf-rs{display:flex;justify-content:space-around}.pf-r{display:grid;gap:3px;text-align:center;font-size:8px}
.ring{width:54px;height:54px;border-radius:50%;background:conic-gradient(var(--k) calc(var(--v)*1%),#0007 0);display:grid;place-items:center}
.ring b{width:44px;height:44px;border-radius:50%;background:#3d3d42;display:grid;place-items:center;font-size:11px}
.pf-fv{display:flex;align-items:center;gap:8px;font:700 11px system-ui}.pf-fv .cim{width:120px}
.pf-bg{display:flex;justify-content:space-around}.pf-b{display:grid;gap:2px;text-align:center;font-size:8px;opacity:.4;filter:grayscale(1)}.pf-b.on{opacity:1;filter:none}
.pf-b span{width:42px;height:46px;background:var(--k);display:grid;place-items:center;font-size:20px;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);margin:auto}
/* 3: workshop */
.sh-logo{position:absolute;left:16px;top:max(8px,env(safe-area-inset-top));font:italic 900 22px system-ui}.sh-logo em{color:#ff2e9a}
.sh{position:absolute;left:18px;top:max(44px,calc(env(safe-area-inset-top) + 36px));width:min(300px,50vw);max-height:calc(100vh - 100px);overflow:auto;background:rgba(32,32,36,.88);padding:8px}
.sh-tabs{display:flex;margin-bottom:8px}.sh-tabs button{flex:1;background:#0006;color:#aaa;border:0;padding:7px;font:italic 800 10px system-ui}.sh-tabs .on{background:#fff;color:#111}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sh-t{background:#2b2b30;border:2px solid transparent;color:#ddd;padding:4px;display:grid;justify-items:center;gap:2px}.sh-t.on{border-color:#fff;background:#3a3a40}
.sh-t small{font:700 8px system-ui;text-transform:uppercase}.sh-t em{font:normal 7px system-ui;color:#ffe600}
.sw{width:44px;height:30px;border-radius:55% 45% 60% 40%/50% 60% 40% 50%;transform:rotate(-18deg);box-shadow:0 2px 5px #0008}
.sh-ft{position:absolute;left:18px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;background:#000a;padding:4px 8px;font-size:11px}
.sh-ft button{background:#ffe600;border:0;font:800 10px system-ui;padding:6px 14px}
/* 4: HUD */
.hd{position:fixed;inset:0;z-index:30;pointer-events:none;display:none}
.hd-pos{position:absolute;top:max(8px,env(safe-area-inset-top));left:12px;text-shadow:0 1px 4px #000}
.hd-pos b{font:italic 900 44px/1 system-ui}.hd-pos span{font:italic 700 18px system-ui;opacity:.8}
.hd-pos ol{margin:4px 0 0;padding:0;list-style:none;font:700 9px/1.4 system-ui}.hd-pos li.me{color:#2ef2e0}
.hd-spd{position:absolute;top:6px;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 6px #000}
.hd-spd b{font:italic 300 56px/1 system-ui;letter-spacing:-2px}.hd-spd i{display:inline-block;vertical-align:top;margin:6px 0 0 6px;background:#ffe600;color:#111;font:900 12px system-ui;padding:2px 7px}
.hd-spd small{display:block;font-size:10px;letter-spacing:.15em}
.hd-lap{position:absolute;top:56px;right:14px;font:700 10px system-ui;text-shadow:0 1px 3px #000}
.juan-race .jr-pause-button{background:#ffe600!important;color:#111!important;border:0!important;border-radius:0!important;width:30px!important;height:36px!important;font-weight:900;top:max(8px,env(safe-area-inset-top))!important;right:12px!important}
.juan-race .has-touch .jr-touch-button{border-radius:8px!important;background:#000a!important;border:1px solid #fff5!important;backdrop-filter:none!important}
.juan-race .has-touch .jr-touch-left,.juan-race .has-touch .jr-touch-right{background:none!important;border:0!important;font-size:0!important;width:70px!important;height:70px!important}
.juan-race .jr-touch-left::before{content:"«";font:300 74px/1 serif;color:#fffd}.juan-race .jr-touch-right::before{content:"»";font:300 74px/1 serif;color:#fffd}
.juan-race .has-touch .jr-touch-accelerate{width:48px!important;height:120px!important;background:repeating-linear-gradient(-30deg,#222 0 8px,#666 8px 10px)!important;font-size:9px!important;align-items:end!important}
.juan-race .has-touch .jr-touch-brake{width:48px!important;height:66px!important;font-size:9px!important}
.juan-race .has-touch .jr-touch-boost{border-radius:50%!important;border:3px solid #26c6ff!important;width:58px!important;height:58px!important;color:#26c6ff!important}
.juan-race .jr-modal{background:linear-gradient(#4a4a4e,#2c2c30)!important;border:1px solid #888!important;border-radius:0!important}
.juan-race .jr-button-primary{background:#2554ff!important;border-color:#2554ff!important}
.jx-bl{background:#2554ff!important}
