/* Suppress old floating browser-style utility HUD in the new menu only. */ body.hdCommonMainActive #globalOnlineStatus,body.hdCommonMainActive #perfOverlay,body.hdCommonMainActive #harunaEurobeatRadio{display:none!important} /* COMMON MAIN LOCALTEST ONLY: Existing game overlays and physics stay intact. */ #onlineOverlay.hdCommonEnabled>.onlinePanel{opacity:0!important;pointer-events:none!important} #onlineOverlay #hdCommonMain{position:absolute;inset:0;z-index:10;color:#f0f8ff;font-family:Arial,'Yu Gothic',Meiryo,sans-serif;overflow:hidden;background:#020811} #hdCommonMain[hidden],#hdCourseGate[hidden],#hdCommonMain [hidden]{display:none!important} #hdCommonMain *{box-sizing:border-box} #hdCommonMain .hdShell{position:absolute;inset:0;display:grid;grid-template-columns:clamp(170px,30vw,310px) minmax(0,1fr);background:linear-gradient(130deg,#081523,#02070d 65%);} #hdCommonMain .hdSide{display:flex;flex-direction:column;min-height:0;gap:8px;padding:clamp(5px,1.15vh,12px) clamp(6px,1.2vw,16px);border-right:2px solid #09a1e8;background:linear-gradient(115deg,#060b14 10%,#0a2143 65%,#02070f);box-shadow:9px 0 22px #000a;z-index:3} #hdCommonMain .hdBrand{width:100%;height:auto;max-height:24%;aspect-ratio:244/94;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 9px #f70a)} #hdCommonMain .hdNav{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;min-height:0;gap:6px} #hdCommonMain .hdNav button{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:0;flex:1;max-height:82px;border:1px solid #25699a;border-left:5px solid #15b5ff;border-radius:3px;background:linear-gradient(95deg,#081528,#133963 80%,#102341);color:white;padding:3px clamp(5px,1.5vw,16px);cursor:pointer;font-family:Impact,'Arial Black',sans-serif;font-style:italic;text-align:left;box-shadow:inset 0 0 14px #0078c11e,0 3px 10px #0009} #hdCommonMain .hdNav button:first-child{border-left-color:#ff563b;background:linear-gradient(100deg,#491316,#bd3424 85%,#2f1015)} #hdCommonMain .hdNav button:hover,#hdCommonMain .hdNav button:focus-visible{filter:brightness(1.35);outline:1px solid #9ff3ff} #hdCommonMain .hdNav b{font-size:clamp(17px,2.6vw,34px);letter-spacing:.06em;line-height:1} #hdCommonMain .hdNav small{font:800 clamp(7px,.78vw,11px)/1.2 'Yu Gothic',Meiryo,Arial,sans-serif;color:#c6e7fc;text-align:right} #hdCommonMain .hdSideBottom{display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap;font:800 9px/1.1 Arial,sans-serif;color:#7dc7fa;white-space:nowrap} #hdCommonMain .hdSideBottom span{color:#e0a26e} #hdCommonMain .hdHero{min-width:0;min-height:0;padding:clamp(5px,1.2vh,12px) clamp(5px,1.2vw,15px);display:flex;flex-direction:column;gap:6px} #hdCommonMain .hdHeroHead{display:flex;align-items:center;justify-content:space-between;gap:10px;height:clamp(35px,8vh,60px);flex-shrink:0;border-bottom:2px solid #1269a5;padding:0 4px} #hdCommonMain .hdPlayer small{display:block;color:#82c6ff;font:bold clamp(9px,1.1vw,13px)/1.2 Arial,sans-serif} #hdCommonMain .hdPlayer strong{display:block;font:bold clamp(13px,2.1vw,25px)/1.1 Impact,'Arial Black',sans-serif;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #hdCommonMain .hdPresence{align-self:center;border:1px solid #1a896f;background:#061d24;padding:4px 9px;border-radius:3px;white-space:nowrap;font:bold clamp(11px,1.4vw,17px) Arial,sans-serif;box-shadow:0 0 8px #29f2b626} #hdCommonMain .hdPresence i{display:inline-block;width:7px;height:7px;margin-right:5px;background:#3efd9d;border-radius:100%;box-shadow:0 0 8px #22f5ab} #hdCommonMain .hdPresence small{display:block;font:600 9px Arial,sans-serif;color:#71becc;max-width:190px;overflow:hidden;text-overflow:ellipsis} #hdCommonMain .hdGarage{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid #155d9d;background:linear-gradient(125deg,#000712 0%,#002d63 50%,#09418c 100%);box-shadow:inset 0 0 80px #001224} #hdCommonMain .hdGarageBackdrop{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;transform:skewX(-8deg);overflow:hidden;pointer-events:none;opacity:.63} #hdCommonMain .hdGarageBackdrop>div{font:italic 900 clamp(20px,4vw,52px)/1.1 Impact,'Arial Black',sans-serif;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px #000b28;transform:translateX(-10%)} #hdCommonMain .hdGarageBackdrop>div:nth-child(even){transform:translateX(-28%)} #hdCommonMain .hdCarPanel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:clamp(5px,1vw,13px);gap:3px;z-index:1} #hdCommonMain .hdCarIdentity{flex:0 0 auto;text-shadow:1px 2px 4px #000} #hdCommonMain .hdCarIdentity>span{font:900 clamp(8px,.95vw,13px)/1.2 Arial,sans-serif;color:#bceeff;letter-spacing:.07em} #hdCommonMain .hdCarIdentity h1{margin:1px 0 0;color:white;font:italic 900 clamp(19px,3vw,43px)/1 Impact,'Arial Black',sans-serif;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #hdCommonMain .hdCarStage{position:relative;min-height:0;flex:1;background:linear-gradient(115deg,#010b17b8,#001e3f3d);border:1px solid #008ddd;box-shadow:0 0 18px #0008} #hdCommonMain #hdCarFallback,#hdCommonMain #hdThreeCar{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s} #hdCommonMain #hdThreeCar{touch-action:none;cursor:grab;opacity:0} #hdCommonMain .hdCarOrbitHint{position:absolute;right:5px;bottom:4px;font:800 8px Arial,sans-serif;text-shadow:0 1px 5px black;pointer-events:none;color:#e9f7ff} #hdCommonMain .hdChangeCar{width:100%;padding:clamp(4px,1vh,9px);border:1px solid #55dfff;background:linear-gradient(90deg,#005d9e,#089acc);color:#fff;font:bold clamp(10px,1.2vw,14px) Arial,sans-serif;cursor:pointer;flex-shrink:0} #hdCommonMain .hdChangeCar span{float:right} #hdCommonMain .hdDataPanel{position:relative;z-index:1;min-width:0;min-height:0;overflow:auto;background:linear-gradient(150deg,#001023eb,#000e22f5);padding:clamp(5px,1vw,12px);border-left:2px solid #16c5ff;scrollbar-width:thin} #hdCommonMain .hdDataTitle{font:italic 900 clamp(12px,1.65vw,24px)/1 Impact,'Arial Black',sans-serif;color:#aeefff;border-bottom:1px solid #0872b6;padding-bottom:3px} #hdCommonMain .hdDataTitle small{font:700 clamp(8px,.86vw,12px) 'Yu Gothic',Arial,sans-serif;color:#daeefe} #hdCommonMain .hdLevel{margin:4px 0 2px;border:1px solid #1d90d9;background:#072a54ab;padding:5px 7px} #hdCommonMain .hdLevel>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:7px} #hdCommonMain .hdLevel small{font:bold clamp(9px,1vw,13px) Arial,sans-serif;color:#e4f7ff} #hdCommonMain .hdLevel strong{font:italic 900 clamp(18px,2.2vw,31px) Impact,sans-serif;color:#fff} #hdCommonMain .hdLevelMeter{height:8px;margin:3px 0;background:#081728;border:1px solid #0d73a3} #hdCommonMain .hdLevelMeter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#27d8ed,#ffd556)} #hdCommonMain .hdLevel>span{font:bold clamp(9px,.9vw,12px) Arial,sans-serif;color:#c2ecff} #hdCommonMain .hdLevelBonus{font:bold clamp(9px,.9vw,12px)/1.3 Arial,sans-serif;color:#8ad8ff;min-height:15px} #hdCommonMain .hdTuneTitle{margin-top:5px} #hdCommonMain .hdTuneRows{display:flex;flex-direction:column;gap:5px;margin-top:7px} #hdCommonMain .hdTuneRow{display:grid;grid-template-columns:minmax(55px,28%) minmax(0,1fr) auto;align-items:center;gap:5px;color:white;font:bold clamp(9px,1vw,13px) Arial,sans-serif} #hdCommonMain .hdTuneRow span small{display:block;color:#9bd6ff;font-size:.85em} #hdCommonMain .hdTuneGauge{display:flex;gap:2px} #hdCommonMain .hdTuneGauge i{display:block;height:clamp(8px,1.8vh,15px);flex:1;border:1px solid #445b70;transform:skewX(-8deg);background:#122f48} #hdCommonMain .hdTuneGauge i.on{background:linear-gradient(#76edff,#096ede);border-color:#63d4ff} #hdCommonMain .hdTuneGauge i.high{background:linear-gradient(#ffa7a2,#cf1836);border-color:#e85e6f} #hdCommonMain .hdTuneRow b{font-size:clamp(9px,.95vw,13px);min-width:35px;text-align:right} #hdCommonMain .hdSpecs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} #hdCommonMain .hdSpecs span{font:bold clamp(8px,.95vw,12px) Arial,sans-serif;padding:3px 5px;border:1px solid #0f5e88;background:#03182c} #hdCommonMain .hdDataStatus{font:800 clamp(8px,.85vw,12px) Arial,sans-serif;color:#78c6e7;margin-top:6px} #hdCommonMain .hdChatPage{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;margin:clamp(6px,1.5vw,20px);background:linear-gradient(120deg,#04162a,#011024);border:2px solid #159fe7;z-index:4} #hdCommonMain .hdChatPage header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:2px solid #19aceb;color:white} #hdCommonMain .hdChatPage header>b{font:900 23px Impact,sans-serif} #hdCommonMain .hdChatPage header small{font:800 12px 'Yu Gothic',sans-serif;color:#a1daf4} #hdCommonMain .hdBack{background:#145080;color:#fff;border:1px solid #41c1ff;padding:9px 16px;font:bold 13px Arial,sans-serif;cursor:pointer} #hdCommonMain .hdChatBody{display:flex;flex-direction:column;min-height:0;flex:1;padding:10px;gap:10px} #hdCommonMain .hdChatBody #onlineChatLog{display:block;min-height:0;flex:1;overflow:auto;background:#010a16!important;max-height:none!important;height:auto!important;font-size:14px!important} #hdCommonMain .hdChatBody .chatRow{display:flex;flex:0 0 auto} #hdCommonMain .hdChatBody #onlineChatInput{min-width:0;flex:1;font-size:16px} #hdCommonMain .hdChatBody #onlineChatSend{font-size:13px} #hdCommonMain .hdToast{position:absolute;z-index:10;left:32%;right:3%;top:46%;padding:16px 20px;background:#001629e8;border:2px solid #6ddefe;color:#f8feff;font:bold clamp(16px,2.7vw,32px)/1.3 'Yu Gothic',Arial,sans-serif;text-align:center;text-shadow:0 2px 5px black;box-shadow:0 0 25px #01b6fb66;opacity:0;transform:translateY(14px);transition:opacity .2s,transform .2s;pointer-events:none;overflow-wrap:anywhere} #hdCommonMain .hdToast.show{opacity:1;transform:translateY(0)} #hdCourseGate{position:fixed;inset:0;z-index:100090;display:flex;flex-direction:column;background:linear-gradient(125deg,#030914,#0b315c,#080c16);color:white;padding:clamp(10px,3vh,30px);font-family:Arial,'Yu Gothic',sans-serif} #hdCourseGate .hdRouteTop{display:flex;justify-content:space-between;align-items:center} #hdCourseGate .hdRouteTop strong{font:italic 900 clamp(23px,4vw,48px)/1 Impact,'Arial Black',sans-serif} #hdCourseGate .hdRouteTop small{font:900 clamp(11px,1.5vw,19px) 'Yu Gothic',sans-serif;color:#a7e8ff} #hdCourseGate .hdRouteTop button{cursor:pointer;padding:12px 22px;color:white;background:#14273c;border:1px solid #65cff9;font:bold 15px Arial,sans-serif} #hdCourseGate .hdRouteCards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,32px);flex:1;min-height:0;padding:clamp(10px,3vh,40px)} #hdCourseGate .hdRouteCards button{cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;min-width:0;padding:clamp(12px,2.8vw,45px);border:2px solid #1caef6;background:radial-gradient(circle at 75% 30%,#1456a888,transparent 40%),linear-gradient(145deg,#011222,#074675);color:white;text-align:left;box-shadow:inset 0 0 50px #00284d,0 12px 32px #0009} #hdCourseGate .hdRouteCards button:last-child{border-color:#ff6a5c;background:radial-gradient(circle at 80% 20%,#9b1c1b99,transparent 55%),linear-gradient(140deg,#130815,#631b1f)} #hdCourseGate .hdRouteCards button:hover{transform:translateY(-2px);filter:brightness(1.2)} #hdCourseGate .hdRouteCards span{font:900 clamp(10px,1.5vw,16px) Arial,sans-serif;letter-spacing:.2em} #hdCourseGate .hdRouteCards b{font:italic 900 clamp(24px,4.5vw,66px)/1.2 Impact,'Arial Black','Yu Gothic',sans-serif} #hdCourseGate .hdRouteCards em{display:block;color:#a8ebff;font-size:.72em} #hdCourseGate .hdRouteCards small{font:bold clamp(12px,1.9vw,24px) Arial,sans-serif;color:#f9dcc1} /* Native ranking/option/garage overlays intentionally remain in service. */ @media(max-height:440px){ #hdCommonMain .hdSide{gap:4px;padding:4px 6px} #hdCommonMain .hdBrand{height:68px;max-height:25%} #hdCommonMain .hdNav{gap:3px} #hdCommonMain .hdNav button{max-height:none} #hdCommonMain .hdNav b{font-size:clamp(17px,2.7vw,26px)} #hdCommonMain .hdNav small{font-size:8px} #hdCommonMain .hdSideBottom{font-size:7px} #hdCommonMain .hdHero{gap:3px;padding:4px} #hdCommonMain .hdHeroHead{height:38px} #hdCommonMain .hdDataPanel{padding:5px} #hdCommonMain .hdTuneRows{gap:3px;margin-top:3px} #hdCommonMain .hdSpecs{margin-top:4px} #hdCommonMain .hdLevel{padding:2px 5px;margin:3px 0} #hdCommonMain .hdLevelMeter{height:6px} #hdCommonMain .hdLevelBonus{font-size:9px;min-height:11px} } @media(max-width:730px) and (orientation:landscape){ #hdCommonMain .hdShell{grid-template-columns:31% 69%} #hdCommonMain .hdNav small{display:none} #hdCommonMain .hdGarage{grid-template-columns:50% 50%} #hdCommonMain .hdTuneRow{grid-template-columns:55px minmax(0,1fr) 30px} #hdCommonMain .hdTuneRow span{font-size:8px} #hdCommonMain .hdDataTitle{font-size:11px} #hdCommonMain .hdSpecs span{font-size:8px} #hdCommonMain .hdHeroHead{height:32px} #hdCommonMain .hdPresence small{display:none} } @media(orientation:portrait) and (max-width:850px){ #onlineOverlay.hdCommonEnabled #hdCommonMain::after{content:'画面を横向きにしてください / PLEASE ROTATE YOUR DEVICE';position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:#000;color:#fff;font:900 23px/1.5 Arial,'Yu Gothic',sans-serif} } /* CHAT, like RANKING and OPTION, is a complete screen with BACK to MAIN. */ #hdCommonMain.hdChatOpen .hdSide{display:none!important} #hdCommonMain.hdChatOpen .hdShell{display:block!important} #hdCommonMain.hdChatOpen .hdChatPage{position:absolute;inset:0;margin:0!important;border-radius:0;z-index:4} /* Preserve actual top-right player presence on existing full-screen submenus. */ body.hdCommonMainActive:has(#rankingOverlay.show) #globalOnlineStatus, body.hdCommonMainActive:has(#onlineOptionOverlay.show) #globalOnlineStatus, body.hdCommonMainActive:has(#garageOverlay.show) #globalOnlineStatus{ display:block!important;z-index:100250!important;top:3px!important;right:118px!important; min-width:0!important;max-width:150px!important;padding:3px 6px!important;border-radius:3px!important } body.hdCommonMainActive:has(#rankingOverlay.show) #globalOnlineStatus .globalOnlineSub, body.hdCommonMainActive:has(#rankingOverlay.show) #globalOnlineStatus .globalOnlinePlayers, body.hdCommonMainActive:has(#onlineOptionOverlay.show) #globalOnlineStatus .globalOnlineSub, body.hdCommonMainActive:has(#onlineOptionOverlay.show) #globalOnlineStatus .globalOnlinePlayers, body.hdCommonMainActive:has(#garageOverlay.show) #globalOnlineStatus .globalOnlineSub, body.hdCommonMainActive:has(#garageOverlay.show) #globalOnlineStatus .globalOnlinePlayers{display:none!important} body.hdCommonMainActive:has(#rankingOverlay.show) #globalOnlineStatus .globalOnlineMain, body.hdCommonMainActive:has(#onlineOptionOverlay.show) #globalOnlineStatus .globalOnlineMain, body.hdCommonMainActive:has(#garageOverlay.show) #globalOnlineStatus .globalOnlineMain{font-size:11px!important} body.hdCommonMainActive:has(#rankingOverlay.show) #globalOnlineStatus .globalOnlineMain b, body.hdCommonMainActive:has(#onlineOptionOverlay.show) #globalOnlineStatus .globalOnlineMain b, body.hdCommonMainActive:has(#garageOverlay.show) #globalOnlineStatus .globalOnlineMain b{font-size:13px!important} /* V5.92: ONE-CAR SELECTOR / FULL-BLEED ARCADE GARAGE */ #hdCommonMain{--hd-accent:#167dda} #hdCommonMain .hdShell{background:#060812;grid-template-columns:clamp(152px,25vw,290px) minmax(0,1fr)} #hdCommonMain .hdSide{border:0;box-shadow:none;background:linear-gradient(100deg,#04060fee 10%,#07142ac9 65%,#07102290);z-index:3} #hdCommonMain .hdSide::after{content:'';position:absolute;right:0;top:10%;height:80%;width:2px;background:linear-gradient(transparent,var(--hd-accent),transparent);opacity:.75;pointer-events:none} #hdCommonMain .hdNav button{border:0;border-left:4px solid var(--hd-accent);border-radius:0;background:linear-gradient(95deg,#071127dd,#143d6db2,transparent);box-shadow:none;transform:skewX(-8deg);transition:filter .12s,background .12s} #hdCommonMain .hdNav button>*{transform:skewX(8deg)} #hdCommonMain .hdNav button:first-child{border-left-color:#ff7253;background:linear-gradient(95deg,#a42e29db,#71191acb,transparent)} #hdCommonMain .hdHero{position:relative;overflow:hidden;padding:0;gap:0;background:linear-gradient(118deg,#02050c 3%,#030d20 24%,color-mix(in srgb,var(--hd-accent) 72%,#050919) 100%)} #hdCommonMain .hdHero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 45% 64%,#c4edff2b,transparent 45%),linear-gradient(145deg,transparent 35%,#0c122c77 37%,transparent 55%);pointer-events:none;z-index:0} #hdCommonMain .hdHeroHead{position:absolute;z-index:3;left:0;right:0;top:0;padding:4px 14px;height:clamp(30px,9vh,54px);border:0;background:linear-gradient(#000b,transparent)} #hdCommonMain .hdGarage{position:absolute;inset:0;display:block;border:0;box-shadow:none;background:transparent} #hdCommonMain .hdGarageBackdrop{position:absolute;inset:-7% -6%;display:flex;opacity:.72;transform:skewX(-12deg) rotate(-3deg);z-index:0;justify-content:space-evenly;overflow:hidden} #hdCommonMain .hdGarageBackdrop>div{color:transparent;-webkit-text-stroke:clamp(1px,.12vw,2px) #020309;letter-spacing:.01em;font-size:clamp(25px,4vw,68px);line-height:1.1;text-shadow:none;transform:translateX(-8%)} #hdCommonMain .hdGarageBackdrop>div:nth-child(even){transform:translateX(-28%)} #hdCommonMain .hdCarPanel{position:absolute;inset:0;display:block;padding:0;z-index:1;overflow:hidden} #hdCommonMain .hdCarIdentity{position:absolute;top:clamp(33px,9vh,62px);left:clamp(8px,2.3vw,28px);z-index:5} #hdCommonMain .hdCarIdentity h1{font-size:clamp(25px,4.7vw,71px);letter-spacing:.005em;text-shadow:0 4px 16px #000b,0 0 20px #0008} #hdCommonMain .hdCarIdentity>span{font-size:clamp(10px,1.2vw,16px);text-shadow:0 2px 5px #000} #hdCommonMain .hdCarStage{position:absolute;inset:10% 20% 8% -6%;border:0;background:none;box-shadow:none;overflow:visible;transform:none;z-index:2} #hdCommonMain .hdCarStage #hdThreeCar,#hdCommonMain .hdCarStage #hdCarFallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 13px #02020d85);transition:opacity .14s ease} #hdCommonMain .hdCarStage #hdThreeCar{cursor:default;pointer-events:none;touch-action:auto} #hdCommonMain .hdFloorGlow{position:absolute;z-index:0;inset:auto 15% 1% 12%;height:28%;background:radial-gradient(ellipse,#e4f6ff56 0%,#5fc1f733 25%,transparent 69%);transform:perspective(300px) rotateX(73deg);filter:blur(9px);pointer-events:none} #hdCommonMain .hdCarArrow{position:absolute;z-index:5;top:47%;width:clamp(31px,4.6vw,62px);height:clamp(65px,11vh,110px);transform:translateY(-50%);border:0;border-radius:0;background:linear-gradient(90deg,#0007,transparent);font:900 clamp(42px,6vw,82px)/1 Impact,Arial,sans-serif;color:#fff;cursor:pointer;text-shadow:0 4px 12px #000,0 0 12px var(--hd-accent);transition:color .15s,transform .15s;filter:drop-shadow(0 0 4px #000)} #hdCommonMain .hdCarArrow:hover{color:#92eaff;transform:translateY(-50%) scale(1.1)} #hdCommonMain .hdPrev{left:7%} #hdCommonMain .hdNext{right:2%} #hdCommonMain .hdSelectionCaption{position:absolute;z-index:5;left:8%;bottom:5%;font:bold clamp(10px,1.25vw,15px)/1 Arial,'Yu Gothic',sans-serif;color:#ebf7ff;letter-spacing:.04em;text-shadow:0 2px 7px #000,0 0 13px #040b1b} #hdCommonMain .hdDataPanel{position:absolute;right:0;top:12%;bottom:0;width:clamp(165px,34%,420px);padding:clamp(7px,1.5vw,20px);border:0;overflow:auto;z-index:4;background:linear-gradient(90deg,transparent 0%,#01030ac9 23%,#01030ae8 100%);scrollbar-width:thin} #hdCommonMain .hdDataTitle{border:0;color:#fff;text-shadow:0 2px 8px #000,0 0 9px #139eff88} #hdCommonMain .hdLevel{border:0;border-left:3px solid var(--hd-accent);background:linear-gradient(90deg,#033160b5,transparent);padding:6px 7px} #hdCommonMain .hdSpecs span{background:#0411225e;border:0;border-bottom:1px solid #328ee0} #hdCommonMain .hdTuneGauge i{border:0;box-shadow:0 0 3px #000} #hdCommonMain .hdTuneGauge i.on{background:linear-gradient(#b8ffff,#0e72ec)} #hdCommonMain .hdTuneGauge i.high{background:linear-gradient(#ffb5ae,#f33250)} #hdCommonMain .hdCarStage.hdSwipeOut>#hdThreeCar,#hdCommonMain .hdCarStage.hdSwipeOut>#hdCarFallback{animation:hdCarSwipeOut .115s ease-in both} #hdCommonMain .hdCarStage.hdSwipeIn>#hdThreeCar,#hdCommonMain .hdCarStage.hdSwipeIn>#hdCarFallback{animation:hdCarSwipeIn .235s cubic-bezier(.1,.86,.2,1) both} @keyframes hdCarSwipeOut{from{transform:translateX(0) scale(1);filter:blur(0) drop-shadow(0 20px 13px #0008);opacity:1}to{transform:translateX(calc(-64px * var(--hd-slide-sign,1))) scale(.97);filter:blur(10px);opacity:0}} @keyframes hdCarSwipeIn{from{transform:translateX(calc(72px * var(--hd-slide-sign,1))) scale(.97);filter:blur(10px);opacity:.15}to{transform:translateX(0) scale(1);filter:blur(0) drop-shadow(0 20px 13px #0008);opacity:1}} @media(max-width:730px) and (orientation:landscape){ #hdCommonMain .hdShell{grid-template-columns:27% 73%} #hdCommonMain .hdCarStage{inset:14% 22% 7% -7%} #hdCommonMain .hdDataPanel{width:40%;top:13%;padding:5px;background:linear-gradient(90deg,transparent,#000b 20%,#000e)} #hdCommonMain .hdCarIdentity{top:11%;left:4px} #hdCommonMain .hdCarIdentity h1{font-size:clamp(20px,4vw,29px)} #hdCommonMain .hdSelectionCaption{left:6%;bottom:4%;font-size:8px} #hdCommonMain .hdCarArrow{width:30px;height:55px;font-size:43px} #hdCommonMain .hdNav b{font-size:clamp(14px,2.7vw,20px)} #hdCommonMain .hdDataTitle{font-size:12px} } @media(prefers-reduced-motion:reduce){#hdCommonMain .hdCarStage.hdSwipeOut>* ,#hdCommonMain .hdCarStage.hdSwipeIn>*{animation-duration:.01s!important}} /* V5.93. Arcade aesthetic: original vivid diagonal gradients + outline lettering. Full-bleed stage, no rectangles framing the car or management-style sections. */ #hdCommonMain{--hd-hot:#ff7725;--hd-mid:#db2737;--hd-deep:#67155b} #onlineOverlay #hdCommonMain{background:var(--hd-deep)} #hdCommonMain .hdShell{background:linear-gradient(115deg,#09080c 4%,#170922 26%,var(--hd-deep) 52%,var(--hd-hot) 100%)} #hdCommonMain .hdSide{background:linear-gradient(92deg,#0a0718ee,#110e25cf 60%,#0d0b2588);border-right:0;box-shadow:none} #hdCommonMain .hdHero{ background: radial-gradient(ellipse at 37% 63%,#ffffff6b 0%,#ffaadd38 23%,transparent 54%), linear-gradient(115deg,#050710 0%,#171026 17%,var(--hd-deep) 38%,var(--hd-mid) 68%,var(--hd-hot) 100%); } #hdCommonMain .hdHero:before{ background: repeating-linear-gradient(167deg,transparent 0 32px,#ffffff08 33px 35px,transparent 36px 83px), linear-gradient(178deg,#10101b90 0%,transparent 22%,transparent 67%,#1c052c8a 100%); } #hdCommonMain .hdGarageBackdrop{opacity:1;transform:rotate(-8deg) skewX(-13deg);inset:-26% -30%;z-index:0;justify-content:space-evenly} #hdCommonMain .hdGarageBackdrop>div{font-size:clamp(37px,5.5vw,95px);-webkit-text-stroke:clamp(1px,.15vw,2px) #0b0418d8;color:transparent;letter-spacing:-.03em;white-space:nowrap;filter:none;opacity:.82} #hdCommonMain .hdGarageBackdrop>div:nth-child(even){transform:translateX(-26%)} #hdCommonMain .hdGarageBackdrop>div:nth-child(odd){transform:translateX(-3%)} #hdCommonMain .hdCarStage{inset:4% 16% 2% -7%;background:transparent;filter:none} #hdCommonMain .hdFloorGlow{ inset:auto 9% 2% 4%;height:29%; background:radial-gradient(ellipse,#f6f3ff8a 0%,#d9a5ff85 15%,#a942cc50 35%,transparent 76%); filter:blur(12px);opacity:.95 } #hdCommonMain .hdCarStage #hdThreeCar,#hdCommonMain .hdCarStage #hdCarFallback{ filter:drop-shadow(0 13px 9px #130716b5); } #hdCommonMain .hdCarIdentity{top:clamp(35px,9vh,70px);z-index:6} #hdCommonMain .hdCarIdentity h1{font-size:clamp(26px,4.7vw,68px);text-shadow:0 4px 5px #180624,0 0 11px #120522bb} #hdCommonMain .hdHeroHead{background:linear-gradient(180deg,#12051ae0,transparent);border:0} #hdCommonMain .hdPresence{background:#090b1f99;border:1px solid #ccfff3bb;box-shadow:0 0 7px #16ffd3a3} #hdCommonMain .hdDataPanel{ width:clamp(164px,34%,420px);top:14%;bottom:1%; background:linear-gradient(90deg,transparent 0%,#14031a36 14%,#160b2b8a 58%,#0c092bd1 100%); border:0;box-shadow:none;backdrop-filter:none; } #hdCommonMain .hdDataTitle{color:#fff;text-shadow:0 1px 8px #140719,0 0 15px #f5c4ff} #hdCommonMain .hdLevel{background:linear-gradient(90deg,#240d4ea3,transparent)} #hdCommonMain .hdSpecs span{background:#100c3991;border-bottom:1px solid #d79bfc} #hdCommonMain .hdNav button{background:linear-gradient(90deg,#172447aa,#210d338a,transparent);border-left-color:#f8e7ff;box-shadow:0 0 12px #a34be029} #hdCommonMain .hdNav button:first-child{background:linear-gradient(90deg,#be281ea6,#6b184e60,transparent);border-left-color:#ffba54} #hdCommonMain .hdSide::after{background:linear-gradient(transparent,#ffaaff,transparent)} #hdCommonMain .hdCarArrow{background:transparent;color:#fff7e9;text-shadow:0 2px 10px #000,0 0 17px #fa9bfd} #hdCommonMain .hdSelectionCaption{bottom:2%;text-shadow:0 2px 5px #000,0 0 10px #0d0620} @media(max-width:730px) and (orientation:landscape){ #hdCommonMain .hdShell{grid-template-columns:25% 75%} #hdCommonMain .hdCarStage{inset:8% 20% 2% -10%} #hdCommonMain .hdDataPanel{width:40%;top:14%;background:linear-gradient(90deg,transparent,#20103b5e 12%,#120824d4)} #hdCommonMain .hdCarIdentity{top:9%;left:4px} #hdCommonMain .hdCarIdentity h1{font-size:clamp(19px,4vw,30px)} #hdCommonMain .hdCarArrow{width:28px;height:54px;top:49%} #hdCommonMain .hdSelectionCaption{bottom:2%;left:4%} } /* V5.94: Fullscreen real garage art; all UI floats on top. NO vehicle frame, NO extra GLB. */ #hdCommonMain .hdShell{display:block!important;grid-template-columns:none!important;background:var(--hd-car-image) center center / cover no-repeat!important} #hdCommonMain .hdShell::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0307128c 0%,transparent 32%,transparent 59%,#05071040 100%);z-index:0;pointer-events:none} #hdCommonMain .hdSide{position:absolute!important;left:0;top:0;bottom:0;width:clamp(150px,24%,300px);background:transparent!important;border:0!important;box-shadow:none!important;z-index:5} #hdCommonMain .hdSide::after{display:none!important} #hdCommonMain .hdHero{position:absolute!important;inset:0!important;background:none!important;pointer-events:none;padding:0!important} #hdCommonMain .hdHero:before,#hdCommonMain .hdGarageBackdrop,#hdCommonMain .hdFloorGlow{display:none!important} #hdCommonMain .hdGarage{position:absolute!important;inset:0!important;display:block!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important} #hdCommonMain .hdCarPanel{position:absolute!important;inset:0!important;padding:0!important;background:transparent!important;pointer-events:none} #hdCommonMain .hdCarStage{position:absolute!important;inset:0!important;background:none!important;border:0!important;box-shadow:none!important;filter:none!important;pointer-events:none} #hdCommonMain #hdThreeCar,#hdCommonMain #hdCarFallback{display:none!important} #hdCommonMain .hdCarIdentity{position:absolute!important;left:26%!important;top:10%!important;text-shadow:0 2px 9px #000!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(23px,4.2vw,65px)!important} #hdCommonMain .hdHeroHead{position:absolute!important;right:1%;top:1%;width:auto!important;z-index:4;background:none!important;border:none!important} #hdCommonMain .hdPlayer{display:none!important} #hdCommonMain .hdPresence{background:#080b2590!important} #hdCommonMain .hdDataPanel{position:absolute!important;right:1%!important;top:20%!important;bottom:3%!important;width:clamp(168px,27%,365px)!important;background:linear-gradient(90deg,transparent,#05081b50 35%,#08091d9e)!important;border:none!important;box-shadow:none!important;pointer-events:auto;padding:7px!important} #hdCommonMain .hdLevel{background:#09102875!important;border:0!important} #hdCommonMain .hdSpecs span{border:0!important} #hdCommonMain .hdCarArrow{position:absolute!important;top:53%!important;pointer-events:auto!important;z-index:6} #hdCommonMain .hdPrev{left:26%!important;right:auto!important} #hdCommonMain .hdNext{right:30%!important;left:auto!important} #hdCommonMain .hdSelectionCaption{position:absolute!important;left:35%!important;bottom:5%!important;pointer-events:none} #hdCommonMain .hdNav button{pointer-events:auto!important} #hdCommonMain .hdChatPage{position:absolute!important;inset:0!important;z-index:8} @media(max-width:730px) and (orientation:landscape){ #hdCommonMain .hdSide{width:25%!important} #hdCommonMain .hdCarIdentity{left:26%!important;top:6%!important} #hdCommonMain .hdDataPanel{top:17%!important;right:0!important;width:38%!important} #hdCommonMain .hdPrev{left:26%!important} #hdCommonMain .hdNext{right:37%!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(18px,3vw,27px)!important} } /* V5.95 correction: the existing garage artwork IS the large full-screen car. Never hide the only vehicle visual. One car only; no overlay GLB. */ #hdCommonMain .hdShell{background:#160a20!important} #hdCommonMain .hdCarStage{position:absolute!important;inset:0!important;z-index:0!important;display:block!important;overflow:hidden!important} #hdCommonMain #hdCarFallback{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;opacity:1!important;filter:none!important;max-width:none!important;max-height:none!important;z-index:0!important;pointer-events:none!important} #hdCommonMain #hdThreeCar{display:none!important} #hdCommonMain .hdHero,#hdCommonMain .hdGarage,#hdCommonMain .hdCarPanel{overflow:visible!important} #hdCommonMain .hdSide{z-index:7!important} #hdCommonMain .hdDataPanel{z-index:6!important} #hdCommonMain .hdCarIdentity{z-index:6!important} #hdCommonMain .hdHeroHead{z-index:7!important} /* V5.96: five real raised arcade BUTTONS, enlarged performance HUD. */ #hdCommonMain .hdSide{width:clamp(174px,23%,310px)!important;gap:7px!important} #hdCommonMain .hdNav{padding:5px 0!important;gap:clamp(5px,1.1vh,13px)!important;justify-content:space-evenly!important} #hdCommonMain .hdNav button{ position:relative!important;transform:none!important;flex:1 1 0!important; border:2px solid #85a9cd!important;border-bottom:5px solid #192b4a!important; border-radius:12px!important;padding:5px 12px!important; background:linear-gradient(180deg,#657b9bbb 0%,#29395acd 14%,#14203fdc 51%,#253657d9 88%,#5c7093cc 100%)!important; box-shadow:inset 0 2px 1px #ffffff80,inset 0 -3px 7px #071123,0 5px 0 #08101ee0,0 7px 14px #08050c9c!important; text-shadow:0 2px 4px #000!important;overflow:hidden!important; transition:filter .15s,transform .1s!important; } #hdCommonMain .hdNav button::before{content:'';position:absolute;left:8px;right:8px;top:3px;height:27%;border-radius:9px;background:linear-gradient(#fff5,transparent);pointer-events:none} #hdCommonMain .hdNav button>*{transform:none!important;position:relative!important} #hdCommonMain .hdNav button:first-child{border-color:#ffcd8b!important;border-bottom-color:#743012!important;background:linear-gradient(180deg,#ffbf6cc9,#d84522ea 44%,#77172adf 88%,#ed6648da)!important} #hdCommonMain .hdNav button:hover{filter:brightness(1.25)!important} #hdCommonMain .hdNav button:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 8px #0009,0 2px 0 #08101e!important} #hdCommonMain .hdNav b{font-size:clamp(18px,2.2vw,31px)!important} #hdCommonMain .hdNav small{font-size:clamp(8px,.73vw,12px)!important} /* Big but transparent HUD, not a framed administration panel. */ #hdCommonMain .hdDataPanel{width:clamp(230px,32%,510px)!important;top:18%!important;bottom:3%!important;right:1%!important;padding:clamp(8px,1vw,16px)!important; background:linear-gradient(90deg,transparent,#09071954 30%,#0808209a)!important;overflow:auto!important;scrollbar-width:thin} #hdCommonMain .hdDataTitle{font-size:clamp(20px,2vw,36px)!important;padding:3px 0 5px!important} #hdCommonMain .hdDataTitle small{font-size:clamp(10px,.88vw,16px)!important} #hdCommonMain .hdLevel{padding:clamp(5px,.65vw,12px)!important;margin:6px 0!important} #hdCommonMain .hdLevel small{font-size:clamp(12px,1vw,17px)!important} #hdCommonMain .hdLevel strong{font-size:clamp(26px,2.6vw,46px)!important} #hdCommonMain .hdLevelMeter{height:clamp(10px,1.45vh,20px)!important} #hdCommonMain .hdLevel>span,#hdCommonMain .hdLevelBonus{font-size:clamp(11px,.88vw,15px)!important} #hdCommonMain .hdTuneRows{gap:clamp(8px,1.3vh,16px)!important;margin-top:9px!important} #hdCommonMain .hdTuneRow{grid-template-columns:minmax(86px,29%) minmax(0,1fr) auto!important;gap:8px!important;font-size:clamp(12px,1.13vw,19px)!important} #hdCommonMain .hdTuneRow span{font-size:inherit!important} #hdCommonMain .hdTuneRow span small{font-size:.78em!important} #hdCommonMain .hdTuneGauge{gap:3px!important} #hdCommonMain .hdTuneGauge i{height:clamp(15px,2.3vh,25px)!important;border-width:1px!important} #hdCommonMain .hdTuneRow b{font-size:clamp(13px,1.2vw,20px)!important;min-width:45px!important} #hdCommonMain .hdSpecs span{font-size:clamp(11px,.98vw,17px)!important;padding:4px 7px!important} #hdCommonMain .hdDataStatus{font-size:clamp(10px,.83vw,14px)!important} @media(max-height:460px){ #hdCommonMain .hdSide{gap:2px!important} #hdCommonMain .hdNav{gap:5px!important;padding:1px 0!important} #hdCommonMain .hdNav button{border-radius:8px!important;border-bottom-width:3px!important;padding:2px 7px!important} #hdCommonMain .hdNav b{font-size:clamp(15px,2.2vw,25px)!important} #hdCommonMain .hdNav small{font-size:8px!important} #hdCommonMain .hdDataPanel{top:17%!important;width:clamp(220px,35%,420px)!important;padding:4px 7px!important} #hdCommonMain .hdDataTitle{font-size:clamp(17px,2vw,24px)!important;padding:1px 0!important} #hdCommonMain .hdLevel{padding:3px 5px!important;margin:2px 0!important} #hdCommonMain .hdLevel strong{font-size:clamp(20px,2.2vw,31px)!important} #hdCommonMain .hdLevelMeter{height:8px!important} #hdCommonMain .hdLevelBonus{font-size:10px!important;min-height:0!important} #hdCommonMain .hdTuneRows{gap:clamp(4px,.9vh,8px)!important;margin-top:4px!important} #hdCommonMain .hdTuneRow{grid-template-columns:minmax(72px,29%) minmax(0,1fr) auto!important;gap:5px!important;font-size:clamp(11px,1.1vw,15px)!important} #hdCommonMain .hdTuneGauge i{height:clamp(11px,2.7vh,17px)!important} #hdCommonMain .hdTuneRow b{font-size:clamp(11px,1.1vw,15px)!important} #hdCommonMain .hdSpecs{margin-top:4px!important} #hdCommonMain .hdSpecs span{font-size:10px!important;padding:2px 4px!important} } /* V5.97: original garage car art composited at 77% width into full-bleed stage. Left 24% reserved for the FIVE raised menu buttons. No enclosing picture frame. */ #hdCommonMain #hdCarFallback{object-fit:cover!important;object-position:center center!important;} #hdCommonMain .hdCarStage{overflow:hidden!important;} /* V5.98: preserve arcade composition, do not cover the brand with status. */ body.hdCommonMainActive #mpOnlineHud{display:none!important} body.hdCommonMainActive #globalOnlineStatus{display:none!important} #hdCommonMain .hdHeroHead{left:auto!important;right:clamp(8px,1.2vw,24px)!important;top:clamp(6px,1.1vh,14px)!important;width:auto!important;z-index:30!important;pointer-events:none!important} #hdCommonMain .hdPresence{position:relative!important;top:auto!important;right:auto!important;white-space:nowrap!important;padding:6px 12px!important;border-radius:6px!important;pointer-events:none!important} #hdCommonMain .hdSide{z-index:20!important} #hdCommonMain .hdBrand{display:block!important;width:100%!important;max-height:20%!important;object-fit:contain!important;object-position:left center!important;filter:drop-shadow(0 4px 6px #000b)!important} /* Only the two actual vehicle selection buttons, at the SAME center height. */ #hdCommonMain .hdCarArrow{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important;width:clamp(32px,4vw,55px)!important;height:clamp(54px,10vh,80px)!important;border-radius:11px!important;border:2px solid #dce8ffbd!important;background:linear-gradient(180deg,#263c62d9,#101b37e8)!important;box-shadow:inset 0 1px 1px #fffa,0 5px 15px #0009!important} #hdCommonMain .hdPrev{left:clamp(182px,25.5%,350px)!important;right:auto!important} #hdCommonMain .hdNext{right:clamp(240px,34%,530px)!important;left:auto!important} #hdCommonMain .hdSelectionCaption{display:none!important} @media (max-width:730px) and (orientation:landscape){ #hdCommonMain .hdPrev{left:26%!important} #hdCommonMain .hdNext{right:39%!important} #hdCommonMain .hdBrand{max-height:18%!important} #hdCommonMain .hdPresence{padding:3px 6px!important;font-size:10px!important} } /* V5.99 approved arcade menu. Full-bleed original artwork; no enclosing car frame. */ #hdCommonMain .hdShell{background:#2d0613!important} #hdCommonMain .hdShell:before{background:linear-gradient(90deg,#0d061043 0%,transparent 30%,transparent 80%)!important} #hdCommonMain .hdCarStage{z-index:0!important} #hdCommonMain .hdCarStage:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#20004535 0%,#9a12c151 55%,#ca1dff42 100%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .18s} #hdCommonMain.hdIsTuned .hdCarStage:after{opacity:1} #hdCommonMain.hdIsTuned .hdShell{background:#350a62!important} #hdCommonMain.hdIsTuned .hdShell:before{background:linear-gradient(100deg,#1b004740 0%,#9d13b52a 60%,#5600c14d 100%)!important} #hdCommonMain .hdCarIdentity{left:25.5%!important;top:6%!important;right:15%!important;width:auto!important;z-index:12!important} #hdCommonMain .hdCarIdentity .hdSelected{display:block!important;font-weight:1000!important;font-style:italic!important;font-size:clamp(20px,3.45vw,58px)!important;line-height:1!important;color:#fff!important;letter-spacing:.025em!important;text-shadow:0 2px #1263ef,0 0 12px #00a7ff,0 0 24px #005aff!important} #hdCommonMain .hdCarMeta{display:flex!important;align-items:center!important;gap:clamp(8px,1.3vw,23px)!important;white-space:nowrap!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(24px,4.25vw,74px)!important;line-height:1!important;margin:0!important;color:#fff!important;white-space:nowrap!important} #hdCommonMain #hdCarVariant{font-weight:1000!important;font-size:clamp(14px,2.0vw,33px)!important;color:#fff!important;padding:clamp(4px,.5vw,9px) clamp(8px,1.15vw,19px)!important;background:linear-gradient(145deg,#09142be0,#0952a4db)!important;border:2px solid #2bd1ff!important;border-radius:4px!important;box-shadow:0 0 14px #219ef8!important} #hdCommonMain.hdIsTuned #hdCarVariant{background:linear-gradient(135deg,#620083,#c21eae)!important;border-color:#f967ff!important;box-shadow:0 0 16px #ff17e9!important} #hdCommonMain .hdLevelGold{font-style:italic!important;font-size:clamp(30px,5.1vw,86px)!important;line-height:1!important;letter-spacing:-.05em!important;color:#ffd03c!important;-webkit-text-stroke:1px #7f4100!important;text-shadow:0 3px #a85500,0 0 12px #ffae00,0 0 22px #ff6500!important;white-space:nowrap!important} #hdCommonMain .hdDataPanel{position:absolute!important;left:25%!important;right:1.2%!important;top:auto!important;bottom:3.8%!important;width:auto!important;height:auto!important;max-height:none!important;padding:clamp(5px,.7vw,12px)!important;background:linear-gradient(110deg,#0b0d2dcc,#10163ac8 60%,#080c25be)!important;border:0!important;border-top:2px solid #38c9ff!important;border-bottom:2px solid #ff4e9a!important;border-radius:7px!important;overflow:visible!important;box-shadow:0 0 18px #001aff55!important;z-index:11!important} #hdCommonMain .hdTuneRows{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(5px,.9vh,11px) clamp(12px,2vw,34px)!important;margin:0!important} #hdCommonMain .hdTuneRow{display:grid!important;grid-template-columns:minmax(77px,30%) minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important;min-width:0!important} #hdCommonMain .hdTuneRow:nth-child(1){grid-column:1;grid-row:1} #hdCommonMain .hdTuneRow:nth-child(2){grid-column:2;grid-row:1} #hdCommonMain .hdTuneRow:nth-child(3){grid-column:1;grid-row:2} #hdCommonMain .hdTuneRow:nth-child(4){grid-column:2;grid-row:2} #hdCommonMain .hdTuneRow>span{color:#ffd04a!important;font-size:clamp(13px,1.75vw,30px)!important;font-weight:1000!important;font-style:italic!important;line-height:1!important;text-shadow:0 1px #7d3000,0 0 7px #f6a21d!important} #hdCommonMain .hdTuneRow>span small{display:block!important;font-size:.44em!important;font-style:normal!important;color:#fff!important;margin-top:2px!important;text-shadow:0 1px 3px #111!important} #hdCommonMain .hdTuneGauge{width:100%!important;min-width:0!important} #hdCommonMain .hdTuneGauge i{height:clamp(10px,2.15vh,24px)!important;transform:skewX(-12deg)!important} #hdCommonMain .hdTuneRow b{font-size:clamp(9px,.86vw,14px)!important;min-width:0!important;color:#fff!important} #hdCommonMain .hdHiddenData{display:none!important} #hdCommonMain .hdNav button{background:linear-gradient(135deg,#143069,#095bbf 55%,#0b2347)!important;border:2px solid #6ad7ff!important;border-bottom:5px solid #09245d!important;border-radius:clamp(5px,.7vw,12px)!important;clip-path:polygon(7% 0,92% 0,100% 50%,92% 100%,7% 100%,0 50%)!important;box-shadow:inset 0 0 14px #8bf1ff99,0 0 12px #0e92ff99!important} #hdCommonMain .hdNav button:nth-child(1){background:linear-gradient(135deg,#8b3200,#ffa900,#bf4b00)!important;border-color:#ffe35b!important} #hdCommonMain .hdNav button:nth-child(2){background:linear-gradient(135deg,#052164,#0579ed,#063572)!important;border-color:#71deff!important} #hdCommonMain .hdNav button:nth-child(3){background:linear-gradient(135deg,#006329,#00be6e,#004726)!important;border-color:#7bffa9!important} #hdCommonMain .hdNav button:nth-child(4){background:linear-gradient(135deg,#431069,#9825ea,#36115e)!important;border-color:#f4a3ff!important} #hdCommonMain .hdNav button:nth-child(5){background:linear-gradient(135deg,#690918,#ec2c32,#65101b)!important;border-color:#ffb7bf!important} #hdCommonMain .hdNav button b{font-size:clamp(18px,2.3vw,39px)!important;color:white!important;text-shadow:0 2px 3px #001!important} #hdCommonMain .hdSideBottom{font-size:10px!important} #hdCommonMain .hdPrev{left:25.4%!important} #hdCommonMain .hdNext{right:1.7%!important} @media(max-width:730px) and (orientation:landscape){ #hdCommonMain .hdCarIdentity{left:25.5%!important;top:3%!important} #hdCommonMain .hdCarIdentity .hdSelected{font-size:clamp(13px,2.6vw,22px)!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(14px,3.3vw,24px)!important} #hdCommonMain #hdCarVariant{font-size:clamp(10px,2vw,15px)!important;padding:2px 5px!important} #hdCommonMain .hdLevelGold{font-size:clamp(18px,3.8vw,32px)!important} #hdCommonMain .hdDataPanel{left:25%!important;right:1%!important;bottom:2%!important;padding:4px!important} #hdCommonMain .hdTuneRow{grid-template-columns:minmax(54px,30%) minmax(0,1fr) auto!important;gap:2px!important} #hdCommonMain .hdTuneRows{column-gap:8px!important;row-gap:3px!important} #hdCommonMain .hdTuneRow>span{font-size:clamp(10px,1.8vw,14px)!important} #hdCommonMain .hdTuneGauge i{height:10px!important} #hdCommonMain .hdTuneRow b{font-size:8px!important} #hdCommonMain .hdNext{right:1%!important} } /* V5.100 correction: standalone rectangular arcade buttons; content never clipped */ #hdCommonMain .hdNav button{clip-path:none!important;border-radius:13px!important;justify-content:center!important;text-align:center!important;box-shadow:inset 0 4px 8px #ffffff65,inset 0 -5px 8px #0006,0 4px 12px #0009!important} #hdCommonMain .hdCarIdentity{left:25.5%!important;right:9%!important;max-width:72%!important} #hdCommonMain .hdCarMeta{gap:clamp(5px,1vw,14px)!important;min-width:0!important} #hdCommonMain .hdCarIdentity h1{flex:0 1 auto!important;min-width:0!important;overflow:visible!important;font-size:clamp(18px,3.35vw,56px)!important} #hdCommonMain .hdLevelGold{font-weight:1000!important;-webkit-text-stroke:2px #8b4800!important;filter:drop-shadow(0 0 8px #ffb700) drop-shadow(0 0 15px #ff6300)!important} #hdCommonMain .hdDataPanel{background:linear-gradient(0deg,#031021b8,transparent)!important;border:0!important;box-shadow:none!important;left:26%!important;right:1.5%!important;bottom:2%!important;padding:6px!important;overflow:visible!important} #hdCommonMain .hdTuneRow{grid-template-columns:minmax(100px,31%) minmax(0,1fr) auto!important} #hdCommonMain .hdTuneRow>span{white-space:nowrap!important;font-size:clamp(12px,1.45vw,25px)!important} #hdCommonMain .hdBrand{filter:drop-shadow(0 3px 5px #000d)!important} #hdCommonMain .hdPresence small{max-width:clamp(170px,19vw,310px)!important;white-space:normal!important;max-height:68px!important;overflow:auto!important;text-overflow:clip!important} #hdCommonMain .hdHeroHead{z-index:35!important} body.hdCommonMainActive #harunaEurobeatRadio{display:flex!important;left:auto!important;right:clamp(8px,1vw,24px)!important;top:clamp(68px,8vh,105px)!important;z-index:200!important} @media(max-width:730px) and (orientation:landscape){#hdCommonMain .hdCarIdentity h1{font-size:clamp(15px,2.8vw,24px)!important}#hdCommonMain .hdDataPanel{left:26%!important;right:1%!important;padding:2px!important}#hdCommonMain .hdTuneRow{grid-template-columns:minmax(53px,28%) minmax(0,1fr) auto!important}#hdCommonMain .hdTuneRow>span{font-size:clamp(9px,1.5vw,13px)!important}body.hdCommonMainActive #harunaEurobeatRadio{top:40px!important}} /* V5.101: arcade five-color hierarchy, regular rectangular button shape. */ #hdCommonMain .hdNav button{clip-path:none!important;transform:none!important;min-height:0!important;border-radius:12px!important} #hdCommonMain .hdNav button:nth-child(1){background:linear-gradient(160deg,#207fe0,#064eac 52%,#102956)!important;border-color:#8dd9ff!important} #hdCommonMain .hdNav button:nth-child(2){background:linear-gradient(160deg,#1cb775,#08764e 60%,#064328)!important;border-color:#a3ffcb!important} #hdCommonMain .hdNav button:nth-child(3){background:linear-gradient(160deg,#a447e6,#621d9b 60%,#34104f)!important;border-color:#e8b6ff!important} #hdCommonMain .hdNav button:nth-child(4){background:linear-gradient(160deg,#f6ae38,#c66a08 60%,#783007)!important;border-color:#ffe3a2!important} #hdCommonMain .hdNav button:nth-child(5){background:linear-gradient(160deg,#526070,#29323f 60%,#151b26)!important;border-color:#a5b5c6!important} /* One line: car name left, NORMAL / TUNED + illuminated level right. */ #hdCommonMain .hdCarMeta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:clamp(6px,1.2vw,22px)!important;width:100%!important;min-width:0!important} #hdCommonMain .hdCarIdentity{left:26%!important;right:3%!important;max-width:none!important} #hdCommonMain .hdCarIdentity h1{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:clamp(18px,3vw,48px)!important} #hdCommonMain .hdCarMeta #hdCarVariant{flex:0 0 auto!important} #hdCommonMain .hdCarMeta .hdLevelGold{flex:0 0 auto!important;font-weight:1000!important;color:#ffe794!important;text-shadow:0 0 4px #fff7ab,0 0 14px #ffcb3a,0 0 25px #ff9700,2px 2px 3px #431d04!important} /* Shrink selected car slightly without shifting it into the nav. */ #hdCommonMain #hdCarFallback{transform:scale(.95)!important;transform-origin:center center!important} #hdCommonMain .hdCarStage #hdThreeCar{transform:scale(.95)!important;transform-origin:center center!important} /* Course selection: cinematic photographic scenery, not pictograms. */ #hdCourseGate .hdRouteCards button{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#06102120,#000d21e0),url('assets/dawn/haruna_dawn_360_2048.webp') center / cover no-repeat!important;text-shadow:0 2px 6px #000,0 0 14px #000!important;border:3px solid #64bdff!important;box-shadow:inset 0 0 65px #000b,0 16px 30px #000c!important} #hdCourseGate .hdRouteCards button:last-child{background:linear-gradient(180deg,#1a070820,#150306da),url('assets/dawn/tsukuba_photographic_dawn_v452_2048.webp') center / cover no-repeat!important;border-color:#ff8d66!important} #hdCourseGate .hdRouteCards button b{color:#fff!important;text-shadow:0 3px 7px #000,0 0 18px #181a29!important} #hdCourseGate .hdRouteCards button:hover{filter:brightness(1.16) saturate(1.16)!important} /* Mobile landscape: tachometer from live car.rpm regardless of touch or controller. */ @media (hover:none) and (pointer:coarse) and (orientation:landscape){ body.haruna-25d-active #mobileRpmHud,body.mobile-racing #mobileRpmHud,body.mobile-gamepad-connected #mobileRpmHud{display:block!important;visibility:visible!important} body.haruna-25d-active.mobile-gamepad-connected #mobileRpmHud{display:block!important} } /* Mobile always starts in landscape-only UI; no temporary portrait layout. */ #hdLandscapeRequiredV5101{display:none} @media (hover:none) and (pointer:coarse) and (orientation:portrait){ #hdLandscapeRequiredV5101{display:flex!important;position:fixed!important;inset:0!important;z-index:2147483647!important;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#030910!important;color:#fff!important;text-align:center;padding:25px;font:900 22px/1.4 Arial,'Yu Gothic',sans-serif!important} #hdLandscapeRequiredV5101 strong{color:#ffbd48;font:italic 900 30px Impact,Arial,sans-serif;letter-spacing:.04em} #hdLandscapeRequiredV5101 span{font-size:15px;color:#a5e9ff} } /* V5.102 approved: angled selected seal, larger legible name, no car-wide TUNED tint. */ #hdCommonMain .hdCarStage:after{display:none!important;opacity:0!important} #hdCommonMain .hdCarIdentity{top:5%!important;left:25.5%!important;right:2%!important;max-width:none!important} #hdCommonMain .hdCarIdentity .hdSelected{display:inline-block!important;transform:rotate(-9deg)!important;transform-origin:30% 50%!important;border:3px solid #f7cc49!important;border-radius:3px!important;padding:3px 12px!important;margin:5px 0 13px 15px!important;font:italic 1000 clamp(14px,2.15vw,34px)/1 Impact,'Arial Black',sans-serif!important;color:#ffda5b!important;text-shadow:0 0 8px #ffb300!important;box-shadow:inset 0 0 8px #c97a12,0 0 8px #ffe26299!important;letter-spacing:.065em!important;background:#1c130a65!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(24px,3.9vw,65px)!important;overflow:visible!important;text-overflow:clip!important} #hdCommonMain .hdCarMeta{gap:clamp(4px,.75vw,15px)!important} #hdCommonMain .hdCarMeta #hdCarVariant{font-size:clamp(13px,1.6vw,27px)!important} #hdCommonMain .hdCarMeta .hdLevelGold{font-size:clamp(29px,4.4vw,72px)!important} /* vivid tuned theme comes from separately rendered backdrop, never a blanket color filter over the car. */ #hdCommonMain.hdIsTuned .hdShell:before{opacity:0!important;background:none!important} #hdCommonMain.hdIsTuned .hdCarStage:after{display:none!important} /* Revert the screen-filling garage color layer for the actual car image */ #hdCourseGate .hdRouteCards button{background:linear-gradient(0deg,#06112270,#0000 60%),url('assets/hd_gate_touge.webp') center/cover no-repeat!important} #hdCourseGate .hdRouteCards button:last-child{background:linear-gradient(0deg,#06112270,#0000 60%),url('assets/hd_gate_circuit.webp') center/cover no-repeat!important} #hdCourseGate .hdRouteCards button>b{font:italic 1000 clamp(36px,5.7vw,92px)/1 Impact,'Arial Black',sans-serif!important;color:white!important;letter-spacing:.02em!important;text-shadow:0 4px 4px #000,0 0 18px #000,0 0 26px #15adff!important} #hdCourseGate .hdRouteCards button:first-child>b{color:#ffdf7d!important;text-shadow:0 4px 4px #000,0 0 16px #e34b10,0 0 25px #ec8019!important} #hdCourseGate .hdRouteCards button span,#hdCourseGate .hdRouteCards button small{display:none!important} @media(max-width:730px) and (orientation:landscape){#hdCommonMain .hdCarIdentity .hdSelected{font-size:12px!important;padding:1px 5px!important;margin:1px 0 3px 5px!important;border-width:2px!important}#hdCommonMain .hdCarIdentity h1{font-size:clamp(17px,3.4vw,27px)!important}#hdCommonMain .hdCarIdentity{top:2%!important}#hdCommonMain .hdCarMeta .hdLevelGold{font-size:clamp(19px,3.7vw,32px)!important}} /* Gate illustration already contains ONLY TOUGE / CIRCUIT title; do not double print. */ #hdCourseGate .hdRouteCards button>b{display:none!important} /* =============== V5.103 visual + usability corrections =============== */ /* No Japanese translations under ACCEL / TOP SPEED / BRAKING / CORNERING. */ #hdCommonMain .hdTuneRow>span small{display:none!important} /* The side rail owns the BGM toggle; it is NOT part of the ONLINE presence. */ body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio{ display:flex!important;position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important; z-index:40!important;align-self:stretch!important;width:100%!important;max-width:none!important;min-height:30px!important; padding:3px 7px!important;gap:5px!important;margin:0!important;transform:none!important; border:1px solid #549caad0!important;border-radius:7px!important;background:linear-gradient(120deg,#071a2bdb,#030b19ea)!important; box-shadow:inset 0 1px #ffffff18!important;font-size:10px!important } body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio .radioName{font-size:clamp(9px,.9vw,13px)!important;flex:1!important;min-width:0!important;white-space:nowrap!important} body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio #harunaEurobeatRadioToggle{min-height:25px!important;min-width:40px!important} /* Keep the actual connected players in the top-right, independent of music. */ #hdCommonMain .hdPresence{width:clamp(175px,20vw,295px)!important;max-width:32vw!important;min-height:48px!important;white-space:normal!important} #hdCommonMain .hdOnlineNames{font:800 clamp(8px,.72vw,11px)/1.2 Consolas,Arial,sans-serif;color:#e5fff4;letter-spacing:.01em;word-break:break-word;max-height:31px;overflow:hidden;padding-top:4px} #hdCommonMain .hdHeroHead{pointer-events:none!important} /* Left menu uses five coherent rectangular buttons with distinct restrained metallic colors. */ #hdCommonMain .hdNav button{clip-path:none!important;border-radius:12px!important;transform:none!important} #hdCommonMain .hdNav button:nth-child(1){background:linear-gradient(180deg,#3697e2,#045aaa 55%,#071c47)!important;border-color:#87d3fc!important} #hdCommonMain .hdNav button:nth-child(2){background:linear-gradient(180deg,#25b477,#087a52 55%,#072e24)!important;border-color:#85ecbb!important} #hdCommonMain .hdNav button:nth-child(3){background:linear-gradient(180deg,#ac64d8,#68269e 55%,#270f4a)!important;border-color:#daa4fc!important} #hdCommonMain .hdNav button:nth-child(4){background:linear-gradient(180deg,#ffb951,#c77e19 55%,#573210)!important;border-color:#ffe0a0!important} #hdCommonMain .hdNav button:nth-child(5){background:linear-gradient(180deg,#657284,#323d4c 55%,#111923)!important;border-color:#b3b8c4!important} /* Preserve vehicle art but reduce it to 90% of the original without shifting left. */ #hdCommonMain #hdCarFallback{transform:scale(.90)!important;transform-origin:center center!important} /* The name is PRIMARY. The stamp lives below it, angled like a punched seal. */ #hdCommonMain .hdCarIdentity{top:4%!important;left:25.5%!important;right:20%!important;z-index:15!important;display:flex!important;flex-direction:column!important;gap:clamp(5px,1vh,14px)!important} #hdCommonMain .hdCarMeta{display:flex!important;gap:clamp(8px,1.2vw,17px)!important;align-items:baseline!important;justify-content:flex-start!important;white-space:nowrap!important;width:100%!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(27px,4.5vw,82px)!important;flex:0 1 auto!important;min-width:0!important;text-overflow:clip!important;overflow:visible!important;letter-spacing:-.01em!important;line-height:1!important} #hdCommonMain .hdCarMeta #hdCarVariant{font-size:clamp(11px,1.42vw,23px)!important;padding:4px 10px!important;flex:0 0 auto!important} #hdCommonMain .hdCarMeta .hdLevelGold{font-size:clamp(29px,4.7vw,77px)!important;line-height:1!important;font-weight:1000!important;white-space:nowrap!important;text-shadow:0 0 4px #fff7ab,0 0 14px #ffcb3a,0 0 27px #ff9700,2px 2px #431d04!important} #hdCommonMain .hdSelectionMark{margin-left:clamp(70px,8vw,170px)!important;min-height:50px!important;display:flex!important;align-items:center!important} #hdCommonMain .hdSelected{display:inline-flex!important;transform:rotate(-11deg)!important;transform-origin:center center!important;border:4px double #ffc932!important;border-radius:4px!important;padding:5px 18px!important;margin:0!important;font:italic 1000 clamp(23px,3vw,50px)/1 Impact,'Arial Black',sans-serif!important;color:#ffe07f!important;background:#220d0b38!important;letter-spacing:.065em!important;text-shadow:0 1px 0 #421a00,0 0 12px #ffd65b!important;box-shadow:inset 0 0 6px #9f5f1644,0 0 5px #ffcb2855!important;opacity:.95!important} #hdCommonMain .hdSelected[hidden],#hdCommonMain #hdSelectCar[hidden]{display:none!important} #hdCommonMain #hdSelectCar{pointer-events:auto!important;cursor:pointer;transform:rotate(-7deg);font:italic 900 clamp(16px,2vw,30px) Impact,'Arial Black',sans-serif;color:#fff;border:3px solid #56cafe;border-radius:5px;padding:6px 15px;background:#075aafcc;box-shadow:0 0 15px #15bfff55} /* One row per pair, no encasing box; lines cannot intrude on the left menu. */ #hdCommonMain .hdDataPanel{left:25.7%!important;right:1.3%!important;bottom:2%!important;background:linear-gradient(0deg,#010818b5,#07112733 85%,transparent)!important;border:0!important;box-shadow:none!important;overflow:visible!important;padding:8px 5px!important} #hdCommonMain .hdTuneRows{column-gap:clamp(12px,1.5vw,28px)!important;row-gap:clamp(9px,1.35vh,16px)!important} #hdCommonMain .hdTuneRow{grid-template-columns:minmax(106px,28%) minmax(0,1fr) auto!important;gap:6px!important} #hdCommonMain .hdTuneRow>span{font-size:clamp(15px,1.6vw,26px)!important;white-space:nowrap!important} #hdCommonMain .hdTuneRow b{font-size:clamp(9px,.78vw,14px)!important} /* TUNED background is an entirely different workshop image; NO color cover over vehicle. */ #hdCommonMain.hdIsTuned .hdShell:before{opacity:0!important;background:none!important} #hdCommonMain.hdIsTuned .hdCarStage:after{display:none!important} #hdCommonMain.hdIsTuned #hdCarVariant{background:linear-gradient(120deg,#12417a,#07a3e0)!important;border-color:#64e7ff!important;box-shadow:0 0 17px #06d9ffbb!important} /* START gate remains above every ordinary menu; course art contains its own ONLY label. */ #hdCourseGate{z-index:100800!important} #hdCourseGate .hdRouteCards button{background:linear-gradient(0deg,#0004,transparent 65%),url('../assets/hd_gate_touge.webp') center/cover no-repeat!important;min-height:0!important} #hdCourseGate .hdRouteCards button:last-child{background:linear-gradient(0deg,#0004,transparent 65%),url('../assets/hd_gate_circuit.webp') center/cover no-repeat!important} #hdCourseGate .hdRouteCards button>b{display:none!important} #hdCourseGate .hdRouteCards button span,#hdCourseGate .hdRouteCards button small{display:none!important} /* Background URLs above are relative to CSS directory (../assets). */ @media(max-width:1050px) and (orientation:landscape){ #hdCommonMain .hdCarIdentity{left:25%!important;right:23%!important;top:2.5%!important;gap:2px!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(20px,3.4vw,36px)!important} #hdCommonMain .hdCarMeta #hdCarVariant{font-size:clamp(10px,1.3vw,13px)!important;padding:2px 6px!important} #hdCommonMain .hdCarMeta .hdLevelGold{font-size:clamp(21px,3.4vw,37px)!important} #hdCommonMain .hdSelectionMark{min-height:24px!important;margin-left:5vw!important} #hdCommonMain .hdSelected{border-width:2px!important;padding:1px 8px!important;font-size:clamp(13px,2vw,23px)!important} #hdCommonMain .hdDataPanel{left:26%!important;right:1%!important;padding:2px!important} #hdCommonMain .hdTuneRow{grid-template-columns:minmax(60px,27%) minmax(0,1fr) auto!important;gap:3px!important} #hdCommonMain .hdTuneRow>span{font-size:clamp(10px,1.9vw,15px)!important} #hdCommonMain .hdTuneGauge i{height:clamp(9px,2vh,13px)!important} #hdCommonMain .hdPresence{width:clamp(120px,23vw,185px)!important;min-height:32px!important;font-size:11px!important} #hdCommonMain .hdOnlineNames{font-size:8px!important;max-height:17px!important} body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio{min-height:24px!important;padding:1px 5px!important} } /* V5.103: disciplined START flow: category -> track -> mode -> original start handler */ #hdCourseGate{background:radial-gradient(ellipse at 50% 8%,#113e60,#03050e 67%)!important} #hdCourseGate .hdRouteTop{min-height:54px;gap:18px} #hdCourseGate .hdRouteCards button{font-size:0} #hdCourseGate .hdFlowCourses,#hdCourseGate .hdFlowMethods{flex:1;min-height:0;align-content:center;margin:clamp(8px,2vh,22px) clamp(5px,4vw,70px)} #hdCourseGate .hdFlowCourses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(72px,1fr);gap:clamp(8px,2vw,24px)} #hdCourseGate .hdFlowCourses[hidden],#hdCourseGate .hdFlowMethods[hidden],#hdCourseGate .hdRouteCards[hidden]{display:none!important} #hdCourseGate .hdFlowCourseBtn,#hdCourseGate .hdFlowMethodBtn,#hdCourseGate .hdFlowLaunch{cursor:pointer;color:#fff;font-family:Impact,'Arial Black',Arial,sans-serif;font-style:italic;border-radius:9px;border:2px solid #4cd6ff;background:linear-gradient(155deg,#113051,#031024 75%);box-shadow:0 5px 18px #000b,inset 0 2px #ffffff31;transition:filter .12s,transform .12s} #hdCourseGate .hdFlowCourseBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px;font-size:clamp(24px,3.7vw,59px);letter-spacing:.04em;text-shadow:0 0 12px #249dff9e} #hdCourseGate .hdFlowCourseBtn small{font:900 clamp(12px,1.45vw,20px) Arial,sans-serif;color:#ffce69;letter-spacing:.1em} #hdCourseGate .hdFlowCourseBtn:hover,#hdCourseGate .hdFlowMethodBtn:hover,#hdCourseGate .hdFlowLaunch:hover{filter:brightness(1.35);transform:translateY(-2px)} #hdCourseGate .hdFlowMethods{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,36px)} #hdCourseGate .hdFlowCourseTitle{font:italic 900 clamp(30px,6vw,86px)/1 Impact,'Arial Black',sans-serif;text-align:center;letter-spacing:.04em;color:#fff;text-shadow:0 0 23px #199fff} #hdCourseGate .hdFlowMethodCards{display:flex;flex-flow:row wrap;justify-content:center;align-items:stretch;gap:clamp(8px,2vw,22px);width:100%} #hdCourseGate .hdFlowMethodBtn{font-size:clamp(20px,3vw,45px);min-width:clamp(128px,20vw,315px);min-height:clamp(60px,15vh,135px);padding:15px 20px} #hdCourseGate .hdFlowMethodBtn.active{background:linear-gradient(140deg,#856110,#ef9c09 55%,#513000);border-color:#fff1a8;box-shadow:0 0 26px #ffb7339e,inset 0 2px #fff8} #hdCourseGate .hdFlowLaunch{width:min(430px,65%);min-height:clamp(54px,12vh,95px);font-size:clamp(27px,4vw,58px);color:#ffe8af;background:linear-gradient(135deg,#b6241b,#df5e0b 62%,#572019);border-color:#ffbd63} #hdCourseGate .hdFlowInfo{height:clamp(23px,5vh,45px);font:900 clamp(12px,1.2vw,19px) Arial,sans-serif;text-align:center;color:#fdd77f;letter-spacing:.04em} @media(max-width:730px) and (orientation:landscape){ #hdCourseGate{padding:6px!important} #hdCourseGate .hdRouteTop{min-height:36px!important} #hdCourseGate .hdRouteTop strong{font-size:clamp(22px,4vw,31px)!important} #hdCourseGate .hdRouteTop button{padding:6px 12px!important;font-size:12px!important} #hdCourseGate .hdFlowCourses,#hdCourseGate .hdFlowMethods{margin:3px 12px} #hdCourseGate .hdFlowCourses{gap:7px;grid-auto-rows:minmax(38px,1fr)} #hdCourseGate .hdFlowCourseBtn{font-size:clamp(17px,3vw,25px)} #hdCourseGate .hdFlowMethodBtn{font-size:clamp(16px,2.5vw,24px);min-width:110px;min-height:55px} #hdCourseGate .hdFlowCourseTitle{font-size:clamp(27px,5vw,48px)} #hdCourseGate .hdFlowLaunch{min-height:48px} } /* Frame the TWO illustrated cards as wide arcade selections, avoiding letter cropping. */ #hdCourseGate .hdRouteCards{align-items:center!important} #hdCourseGate .hdRouteCards button{height:min(64vh,610px)!important;max-height:100%!important;width:100%!important;align-self:center!important} @media(max-height:490px) and (orientation:landscape){ #hdCourseGate .hdRouteCards button{height:min(63vh,295px)!important} } /* ==================== V5.104 FINAL UI RECTIFICATION ==================== */ /* SELECTED is a compact angled gold STAMP below the car name, never a banner. SELECT CAR, while browsing another car, is a compact CTA in the same place. */ #hdCommonMain .hdCarIdentity{ top:clamp(25px,4.4vh,58px)!important; left:25.6%!important; right:13%!important; width:auto!important; max-width:none!important; display:flex!important; flex-flow:column nowrap!important; gap:clamp(9px,1.8vh,22px)!important; align-items:flex-start!important; z-index:16!important; pointer-events:none!important } #hdCommonMain .hdCarMeta{display:flex!important;align-items:center!important;justify-content:flex-start!important; gap:clamp(8px,1.3vw,21px)!important;min-width:0!important;width:100%!important; white-space:nowrap!important;flex-wrap:nowrap!important} #hdCommonMain .hdCarIdentity h1{font:italic 1000 clamp(31px,4.25vw,72px)/1 Impact,'Arial Black',sans-serif!important; min-width:0!important;max-width:55%!important;flex:0 1 auto!important;white-space:nowrap!important; letter-spacing:-.015em!important;overflow:visible!important;text-overflow:clip!important; -webkit-text-stroke:.4px #fff8!important;filter:drop-shadow(0 4px 4px #000)!important} #hdCommonMain .hdCarMeta #hdCarVariant{font-size:clamp(13px,1.5vw,25px)!important;flex:0 0 auto!important;padding:5px 12px!important} #hdCommonMain .hdCarMeta .hdLevelGold{font-size:clamp(35px,4.55vw,78px)!important;flex:0 0 auto!important;font-weight:1000!important; -webkit-text-stroke:1.6px #884500!important;color:#ffdb54!important; filter:drop-shadow(0 0 6px #ffc82c) drop-shadow(0 0 11px #ff7b00)!important} #hdCommonMain .hdSelectionMark{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important; align-self:flex-start!important;margin:0 0 0 clamp(8px,1.7vw,29px)!important;padding:0!important; width:max-content!important;max-width:240px!important;min-height:0!important; transform:none!important;flex:none!important;pointer-events:none!important} #hdCommonMain #hdSelectedMark{display:inline-block!important;position:relative!important;flex:none!important; width:auto!important;max-width:240px!important;min-width:0!important;height:auto!important; padding:5px 16px!important;margin:0!important;border:3px double #f9cc56!important; border-radius:3px!important;background:transparent!important; color:#ffe48b!important;transform:rotate(-11deg)!important; font:italic 1000 clamp(21px,2.6vw,38px)/1 Impact,'Arial Black',sans-serif!important; letter-spacing:.07em!important;text-shadow:1px 2px #5a2700,0 0 9px #ffb91f!important; box-shadow:inset 0 0 5px #fdb93990,0 0 8px #ffbc275e!important;white-space:nowrap!important} #hdCommonMain #hdSelectedMark[hidden],#hdCommonMain #hdSelectCar[hidden]{display:none!important} #hdCommonMain #hdSelectCar{display:inline-flex!important;position:relative!important;align-items:center!important; justify-content:center!important;flex:0 0 auto!important;pointer-events:auto!important;cursor:pointer!important; box-sizing:border-box!important;width:clamp(145px,12.5vw,206px)!important;min-width:0!important;max-width:206px!important; height:clamp(37px,4.5vh,53px)!important;max-height:53px!important;min-height:37px!important; padding:5px 12px!important;margin:0!important;overflow:hidden!important; border:2px solid #69cfff!important;border-radius:7px!important; transform:rotate(-6deg)!important; background:linear-gradient(160deg,#075499ee,#022247f0)!important; box-shadow:inset 0 1px #ebfaff88,0 0 10px #1388ff88!important; font:italic 900 clamp(16px,1.55vw,25px)/1 Impact,'Arial Black',sans-serif!important; white-space:nowrap!important;color:white!important;text-align:center!important;letter-spacing:.04em!important} #hdCommonMain #hdSelectCar:hover{filter:brightness(1.25)!important} /* Vehicle art keeps its own original colours; no generic purple semi-transparent overlays. */ #hdCommonMain #hdCarFallback{transform:scale(.87)!important;transform-origin:center center!important} #hdCommonMain .hdSelectionCaption{display:none!important} /* Distinct and restrained BGM control directly under the brand, NOT under ONLINE. */ body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio{ position:relative!important;top:auto!important;left:auto!important;right:auto!important; display:flex!important;align-items:center!important;justify-content:space-between!important; width:100%!important;max-width:100%!important;height:clamp(32px,4vh,45px)!important; max-height:45px!important;min-height:30px!important;flex:0 0 auto!important; margin:0!important;padding:3px 8px!important;gap:7px!important; border:1px solid #688db7!important;border-radius:9px!important; background:linear-gradient(180deg,#14283e,#070f20)!important; box-shadow:inset 0 1px #ffffff30,0 3px 8px #0008!important;transform:none!important;z-index:30!important; } body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio .radioName{color:#edf7ff!important; font:800 clamp(11px,1vw,15px)/1 Arial,sans-serif!important;min-width:0!important;flex:1!important} body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio #harunaEurobeatRadioToggle{ background:linear-gradient(#174977,#092d4b)!important;color:#e1fff9!important;border:1px solid #78cbff!important; font:800 clamp(10px,.94vw,14px)/1 Arial,sans-serif!important; min-width:51px!important;width:51px!important;min-height:26px!important;height:26px!important;border-radius:5px!important} /* ONLINE: display actual player names legibly; maintain HUD at top right. */ #hdCommonMain .hdPresence{position:absolute!important;top:clamp(5px,.6vh,12px)!important; right:clamp(10px,1.4vw,27px)!important;z-index:50!important; box-sizing:border-box!important;width:clamp(190px,20vw,326px)!important;max-width:30vw!important; min-height:61px!important;padding:7px 12px 8px!important; background:linear-gradient(150deg,#070d19f2,#190d24f2)!important; border:1px solid #71d6ad!important;border-radius:8px!important; font:900 clamp(13px,1.18vw,20px)/1.13 Arial,sans-serif!important; color:white!important;text-align:left!important;white-space:normal!important; box-shadow:0 0 12px #0ec08b6b!important} #hdCommonMain .hdPresence #hdOnlineState{font:700 clamp(8px,.66vw,10px)/1.2 Arial,sans-serif!important; max-width:none!important;max-height:none!important;margin:3px 0 2px!important;color:#9bdbff!important} #hdCommonMain .hdOnlineNames{display:flex!important;flex-wrap:wrap!important;align-content:flex-start!important; gap:4px 7px!important;max-width:100%!important;max-height:58px!important;overflow-y:auto!important;overflow-x:hidden!important; padding-top:2px!important;font:700 12px/1.2 Arial,sans-serif!important;color:#fff!important} #hdCommonMain .hdOnlineNames .hdPlayerTag{display:inline-block!important;max-width:100%!important; padding:1px 5px!important;border-radius:3px!important;background:#145b606a!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important;color:#e5fff6!important;font:700 clamp(10px,.8vw,12px)/1.25 Arial,sans-serif!important} /* Clear bottom two-column / two-row gauge layout. Nothing touches the sidebar. */ #hdCommonMain .hdDataPanel{left:25.6%!important;right:1.2%!important;bottom:clamp(10px,1.4vh,22px)!important; top:auto!important;width:auto!important;height:auto!important;min-height:0!important; padding:5px 5px 2px!important;border:0!important;overflow:visible!important; background:linear-gradient(0deg,#031024cf,#03102475 65%,transparent)!important; box-shadow:none!important;z-index:18!important} #hdCommonMain .hdTuneRows{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-flow:row!important;column-gap:clamp(22px,2.5vw,48px)!important;row-gap:clamp(11px,1.4vh,20px)!important; width:100%!important;margin:0!important} #hdCommonMain .hdTuneRow{display:grid!important;min-width:0!important; grid-template-columns:max-content minmax(0,1fr) max-content!important; column-gap:clamp(7px,.7vw,13px)!important;align-items:center!important} #hdCommonMain .hdTuneRow>span{font:italic 1000 clamp(18px,1.65vw,27px)/1 Impact,'Arial Black',sans-serif!important; color:#ffca42!important;white-space:nowrap!important;overflow:visible!important; text-shadow:0 0 7px #b96200,1px 2px 3px #1b0500!important} #hdCommonMain .hdTuneGauge{min-width:0!important;display:flex!important;gap:2px!important} #hdCommonMain .hdTuneGauge i{min-width:0!important;height:clamp(12px,1.75vh,18px)!important} #hdCommonMain .hdTuneRow b{min-width:0!important;width:auto!important; font:800 clamp(10px,.76vw,13px)/1 Arial,sans-serif!important;white-space:nowrap!important;color:#fff!important} /* No stamp or text should overlap an adjacent component at mobile landscape sizes. */ @media(max-width:1050px) and (orientation:landscape){ #hdCommonMain .hdCarIdentity{top:2.8%!important;left:26%!important;right:19%!important;gap:clamp(2px,.5vh,7px)!important} #hdCommonMain .hdCarIdentity h1{font-size:clamp(19px,3.4vw,36px)!important;max-width:51%!important} #hdCommonMain .hdCarMeta{gap:clamp(3px,.68vw,10px)!important} #hdCommonMain .hdCarMeta #hdCarVariant{font-size:clamp(10px,1.35vw,15px)!important;padding:2px 5px!important} #hdCommonMain .hdCarMeta .hdLevelGold{font-size:clamp(23px,3.8vw,41px)!important;-webkit-text-stroke:.7px #864700!important} #hdCommonMain .hdSelectionMark{margin-left:9px!important;max-width:128px!important} #hdCommonMain #hdSelectedMark{font-size:clamp(14px,2vw,21px)!important;padding:2px 8px!important;border-width:2px!important} #hdCommonMain #hdSelectCar{width:100px!important;max-width:100px!important;min-height:25px!important;height:28px!important; font-size:clamp(11px,1.6vw,16px)!important;border-width:1px!important;padding:1px 3px!important} #hdCommonMain #hdCarFallback{transform:scale(.88)!important} #hdCommonMain .hdPresence{min-height:39px!important;width:clamp(145px,23vw,225px)!important;max-width:26vw!important; padding:3px 6px!important;font-size:clamp(10px,1.65vw,14px)!important} #hdCommonMain .hdPresence #hdOnlineState{font-size:8px!important;margin:0!important} #hdCommonMain .hdOnlineNames{max-height:25px!important;gap:2px 4px!important;padding:0!important} #hdCommonMain .hdOnlineNames .hdPlayerTag{font-size:9px!important;padding:0 3px!important} #hdCommonMain .hdDataPanel{left:26%!important;right:1.2%!important;bottom:2%!important;padding:1px 3px!important} #hdCommonMain .hdTuneRows{column-gap:clamp(10px,1.8vw,24px)!important;row-gap:clamp(3px,.7vh,7px)!important} #hdCommonMain .hdTuneRow{column-gap:clamp(2px,.45vw,6px)!important} #hdCommonMain .hdTuneRow>span{font-size:clamp(11px,1.65vw,18px)!important} #hdCommonMain .hdTuneGauge i{height:clamp(8px,1.8vh,12px)!important} #hdCommonMain .hdTuneRow b{font-size:clamp(8px,.92vw,10px)!important} body.hdCommonMainActive #hdCommonMain .hdSide #harunaEurobeatRadio{min-height:27px!important;height:28px!important;padding:1px 4px!important} } /* V5.104 QA correction: show entire approved garage image instead of cropping car's rear. */ #hdCommonMain .hdCarStage #hdCarFallback{object-fit:contain!important;object-position:center center!important} /* Fade art boundaries into full-screen garage instead of exposing a hard rectangle. */ #hdCommonMain .hdCarStage #hdCarFallback{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 93%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%)!important; -webkit-mask-composite:source-in!important; mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 93%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%)!important; mask-composite:intersect!important; } /* Course illustrations are wide racing posters; show the artwork rather than empty letterbox bars. */ #hdCourseGate .hdRouteCards{align-content:center!important;align-items:center!important} #hdCourseGate .hdRouteCards button{ height:min(38vh,350px)!important;min-height:200px!important; background-size:cover!important;background-position:center!important; border-width:3px!important;box-shadow:0 12px 40px #000a,0 0 18px #00bfff33!important } #hdCourseGate .hdRouteCards button:first-child{border-color:#ff752d!important;box-shadow:0 12px 40px #000a,0 0 18px #ff552977!important} #hdCourseGate .hdRouteCards button:last-child{border-color:#3dabff!important} @media(max-width:1050px) and (orientation:landscape){ #hdCourseGate .hdRouteCards button{height:min(45vh,190px)!important;min-height:120px!important} } /* V5.105 gold painted foreground in the TUNED garage artwork; one authentic SELECTED stamp */ #hdCommonMain #hdSelectedMark{background:transparent!important;box-shadow:inset 0 0 4px #ffcb5760,0 0 3px #e2a42688!important;transform:rotate(-12deg)!important;border:4px double #e7ba50!important;color:#ffe49c!important;text-shadow:1px 2px 2px #613500!important;letter-spacing:.08em!important} #hdCommonMain #hdSelectedMark[hidden]{display:none!important} #hdCommonMain #hdSelectCar[hidden]{display:none!important} #hdCommonMain.hdIsTuned .hdGarage:before,#hdCommonMain.hdIsTuned .hdCarStage:before{display:none!important;opacity:0!important} /* V5.107 mobile landscape visual QA: keep menu touch-sized and gauges readable. */ @media (max-width:1050px) and (orientation:landscape) { #hdCommonMain .hdSide{gap:4px!important;padding:4px 5px!important} #hdCommonMain .hdBrand{max-height:17%!important;object-position:left center!important} #hdCommonMain .hdNav{justify-content:space-between!important;gap:5px!important;min-height:0!important} #hdCommonMain .hdNav button{min-height:35px!important;max-height:44px!important;flex:1 1 0!important;border-radius:8px!important;justify-content:center!important;padding:3px 5px!important} #hdCommonMain .hdNav b{font-size:clamp(14px,2.1vw,19px)!important} #hdCommonMain .hdTuneRow>span{font-size:clamp(12px,1.7vw,16px)!important} #hdCommonMain .hdTuneGauge i{min-height:9px!important} #hdCommonMain .hdTuneRow b{font-size:9px!important} #hdCommonMain .hdDataPanel{bottom:1.2%!important} } @media (max-width:1050px) and (orientation:landscape) { #hdCommonMain .hdNav{justify-content:flex-start!important;flex:1 1 auto!important;gap:6px!important;overflow:hidden!important} #hdCommonMain .hdNav button{flex:0 0 clamp(30px,8vh,39px)!important;min-height:30px!important;max-height:39px!important} } @media (max-width:1050px) and (orientation:landscape) { #hdCommonMain .hdSide{position:relative!important} #hdCommonMain .hdNav{position:absolute!important;top:28%!important;bottom:8%!important;left:5px!important;right:5px!important; display:flex!important;flex-direction:column!important;justify-content:space-evenly!important;gap:4px!important;overflow:visible!important} #hdCommonMain .hdNav button{flex:0 0 clamp(29px,8.2vh,38px)!important;min-height:29px!important;max-height:38px!important} } @media (max-width:1050px) and (orientation:landscape) { #hdCommonMain .hdSide{position:absolute!important;top:0!important;bottom:0!important;left:0!important;height:100%!important} #hdCommonMain .hdNav{top:29%!important;bottom:8%!important} } @media (max-width:1050px) and (orientation:landscape) { #hdCommonMain .hdNav button{margin-top:0!important;margin-bottom:0!important} #hdCommonMain .hdSideBottom{position:absolute!important;left:5px!important;bottom:3px!important;font-size:7px!important} } /* Rank colors remain sourced from the existing driver-rank stylesheet (E grey ... S gold). */ #hdCommonMain .hdOnlineNames .hrRankName{display:inline-flex!important;gap:4px!important;align-items:center!important} #hdCommonMain .hdOnlineNames .hrRankBadge{display:inline-block!important;flex:0 0 auto!important} /* Keep NORMAL and TUNED on the same approved red/black backdrop. Distinction is the real gold-painted garage art. */ #hdCommonMain.hdIsTuned .hdShell{background:#2d0613!important} #hdCommonMain.hdIsTuned .hdShell:before{opacity:0!important;background:none!important} /* V5.108 measured QA fixes: gate fills landscape viewport; launch remains visible. */ #hdCourseGate.hdThemeArea{position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;box-sizing:border-box!important;z-index:99999!important;overflow:hidden!important;} @media(max-height:470px){ #hdCourseGate.hdThemeArea .hdRouteTop{height:38px!important;min-height:38px!important;} #hdCourseGate.hdThemeArea .hdFlowMethods{height:calc(100% - 44px)!important;max-height:calc(100% - 44px)!important;justify-content:space-evenly!important;} #hdCourseGate.hdThemeArea .hdFlowMethodCards{height:calc(100% - 57px)!important;max-height:220px!important;grid-auto-rows:minmax(54px,1fr)!important;} #hdCourseGate.hdThemeArea .hdFlowLaunch{min-height:32px!important;height:34px!important;max-height:34px!important;padding:0!important;flex-shrink:0!important;} #hdCourseGate.hdThemeArea .hdFlowInfo{height:0!important;min-height:0!important;overflow:hidden!important;} } /* No unapproved blue SELECT CAR label; image click commits a browsed vehicle. */ #hdCommonMain #hdSelectCar{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;} #hdCommonMain #hdCarFallback{cursor:pointer;} /* V5.110 route stage visibility safety */ #hdCourseGate [hidden]{display:none!important} /* V5.124: Approved garage layout. Identity row contains NAME / NORMAL only; progress strip and SELECTED are within the vehicle artwork frame. */ #hdCommonMain .hdCarMeta .hdLevelGold{display:none!important} #hdCommonMain .hdCarIdentity{gap:0!important;top:clamp(24px,4.4vh,56px)!important;} /* Preserve absolute positioning of full-screen vehicle stage. */ #hdCommonMain .hdCarStage{position:absolute!important} #hdCommonMain .hdFrameSelection{position:absolute;top:clamp(7px,1.35vh,19px);left:clamp(13px,2vw,35px);z-index:26;pointer-events:none} #hdCommonMain .hdFrameSelection .hdSelectionMark{position:relative!important;display:flex!important;min-height:0!important;max-width:none!important;margin:0!important;pointer-events:none!important} #hdCommonMain .hdFrameSelection #hdSelectedMark{font-size:clamp(15px,2.2vw,36px)!important;padding:4px 12px!important;margin:0!important;transform:rotate(-11deg)!important} #hdCommonMain .hdFrameLevel{position:absolute;z-index:27;top:clamp(7px,1.35vh,19px);right:clamp(8px,1.3vw,24px);width:min(52%,570px);min-width:0;box-sizing:border-box;display:flex;gap:clamp(5px,.7vw,12px);align-items:center;justify-content:flex-end;padding:clamp(6px,.8vw,11px);border:2px solid #e85b22;border-radius:10px;background:#20080dc9;box-shadow:0 0 16px #ff5b2859,inset 0 0 10px #fd5c2640;pointer-events:none} #hdCommonMain .hdFrameLevel #hdLevelProgressVisible{flex:0 0 auto;font:900 clamp(12px,1.8vw,30px)/1 Impact,'Arial Black',sans-serif;color:#ffe6aa;white-space:nowrap;text-shadow:0 0 9px #ffd248} #hdCommonMain .hdFrameLevel .hdFrameGauge{flex:1 1 auto;min-width:18px;display:flex;flex-direction:column;gap:4px} #hdCommonMain .hdFrameLevel .hdFrameGauge small{color:#ffdd69;font:800 clamp(7px,.73vw,12px)/1 sans-serif;white-space:nowrap} #hdCommonMain .hdFrameLevel .hdFrameTrack{height:clamp(9px,1.25vw,19px);border:1px solid #ffbb46;border-radius:6px;background:#201519dd;overflow:hidden} #hdCommonMain .hdFrameLevel .hdFrameTrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ec770b,#ffd93b);box-shadow:0 0 12px #ffbd35;transition:width .3s ease} #hdCommonMain .hdFrameLevel .hdLevelGold{font:italic 1000 clamp(21px,3.4vw,55px)/1 Impact,'Arial Black',sans-serif!important;display:block!important;color:#ffdb54!important;-webkit-text-stroke:1px #864500;text-shadow:0 0 9px #ffbf00,0 0 17px #ff6900!important;white-space:nowrap!important;filter:none!important} @media(max-width:740px) and (orientation:landscape){ #hdCommonMain .hdFrameSelection{left:5px;top:4px} #hdCommonMain .hdFrameSelection #hdSelectedMark{font-size:12px!important;padding:1px 5px!important;border-width:2px!important} #hdCommonMain .hdFrameLevel{top:4px;right:4px;width:60%;gap:4px;padding:3px;border-width:1px} #hdCommonMain .hdFrameLevel .hdLevelGold{font-size:clamp(15px,2.9vw,23px)!important} #hdCommonMain .hdFrameLevel #hdLevelProgressVisible{font-size:clamp(10px,1.8vw,14px)} #hdCommonMain .hdFrameLevel .hdFrameTrack{height:8px} } /* V5.125: preserve full-frame garage and permit SELECT action if previewing. */ #hdCommonMain .hdFrameSelection .hdSelectionMark{pointer-events:auto!important} #hdCommonMain .hdFrameSelection #hdSelectCar{pointer-events:auto!important} /* V5.126 FIX: the decorated controls are attached to the visual car-ART frame. The old hdCarStage covers the entire hero; it is NOT the artwork frame. Artwork on desktop occupies approximately x=6.5%-92.3%, y=16%-87.5% of hero. */ #hdCommonMain .hdArtworkFrameAnchor{position:absolute!important;left:6.5%!important;right:7.7%!important;top:16%!important;bottom:12.5%!important;z-index:35!important;pointer-events:none!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection{position:absolute!important;top:clamp(8px,1.35vh,19px)!important;left:clamp(12px,1.2vw,24px)!important;right:auto!important;pointer-events:none!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameLevel{position:absolute!important;top:clamp(8px,1.35vh,19px)!important;right:clamp(8px,1vw,17px)!important;left:auto!important;width:min(53%,570px)!important;pointer-events:none!important;} @media(max-width:740px) and (orientation:landscape){ #hdCommonMain .hdArtworkFrameAnchor{left:6%!important;right:4%!important;top:16%!important;bottom:13%!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection{top:3px!important;left:3px!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameLevel{top:3px!important;right:3px!important;width:58%!important;} } /* V5.127 HOTFIX: keep SELECTED and CAR LEVEL EXP anchored to the vehicle artwork stage. */ #hdCommonMain .hdCarStage{overflow:visible!important;} #hdCommonMain .hdArtworkFrameAnchor{position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;z-index:40!important;pointer-events:none!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection{position:absolute!important;top:clamp(10px,1.45vh,20px)!important;left:clamp(16px,1.7vw,30px)!important;right:auto!important;pointer-events:none!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection .hdSelectionMark{pointer-events:auto!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection #hdSelectCar{pointer-events:auto!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameLevel{position:absolute!important;top:clamp(10px,1.45vh,20px)!important;right:clamp(10px,1vw,20px)!important;left:auto!important;width:min(54%,560px)!important;pointer-events:none!important;} @media(max-width:730px) and (orientation:landscape){ #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection{top:4px!important;left:4px!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameLevel{top:4px!important;right:4px!important;width:58%!important;} } /* V5.127: decorations are children of hdCarStage, which fills the hero. Anchor to the inner artwork rectangle instead of viewport/screen edges. */ #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor{ position:absolute!important;inset:auto!important; left:25.3%!important;right:5.2%!important; top:16%!important;bottom:12.5%!important; z-index:40!important;box-sizing:border-box!important; pointer-events:none!important; } #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection{ top:clamp(24px,3.1vh,34px)!important; left:clamp(10px,1.2vw,24px)!important; right:auto!important; } #hdCommonMain .hdArtworkFrameAnchor .hdFrameLevel{ top:clamp(7px,1.35vh,18px)!important; right:clamp(8px,1vw,17px)!important; left:auto!important;width:min(53%,570px)!important; } @media(max-width:740px) and (orientation:landscape){ #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor{ left:26%!important;right:3%!important;top:16%!important;bottom:13%!important; } #hdCommonMain .hdArtworkFrameAnchor .hdFrameSelection{top:3px!important;left:3px!important;} #hdCommonMain .hdArtworkFrameAnchor .hdFrameLevel{top:3px!important;right:3px!important;width:58%!important;} } /* V5.128 FIX: pin SELECTED and CAR LEVEL EXP to the visible car image frame, not the full screen. */ #hdCommonMain .hdCarStage{overflow:visible!important;} #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor{ position:absolute!important; inset:auto!important; left:25.6%!important; right:14.6%!important; top:15.2%!important; bottom:17.2%!important; z-index:48!important; box-sizing:border-box!important; pointer-events:none!important; } #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor .hdFrameSelection{ position:absolute!important; top:clamp(8px,1.1vh,14px)!important; left:clamp(10px,1vw,18px)!important; right:auto!important; pointer-events:none!important; } #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor .hdFrameSelection .hdSelectionMark, #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor .hdFrameSelection #hdSelectCar{ pointer-events:auto!important; } #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor .hdFrameLevel{ position:absolute!important; top:clamp(8px,1.1vh,14px)!important; right:clamp(8px,.8vw,16px)!important; left:auto!important; width:min(54%,560px)!important; pointer-events:none!important; } @media (max-width:730px) and (orientation:landscape){ #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor{ left:25.8%!important; right:3.2%!important; top:16.3%!important; bottom:14.2%!important; } #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor .hdFrameSelection{ top:3px!important; left:3px!important; } #hdCommonMain .hdCarStage>.hdArtworkFrameAnchor .hdFrameLevel{ top:3px!important; right:3px!important; width:58%!important; } } /* V5.161: JB64 ONLY. Shift the 16:9 gallery artwork toward the vehicle bay. No other car, GLB geometry, arrow, HUD or photo is altered. */ #hdCommonMain[data-hd-vehicle="jb64"] #hdCarFallback{ transform:translateX(clamp(20px,2.8vw,52px)) scale(.95)!important; transform-origin:center center!important; } @media (max-width:860px) and (orientation:landscape){ #hdCommonMain[data-hd-vehicle="jb64"] #hdCarFallback{ transform:translateX(clamp(8px,2vw,20px)) scale(.95)!important; } }