#hdFlowCategories #hdOsakaRouteV5184{border:2px solid #66d6ff!important;background:linear-gradient(145deg,rgba(1,13,24,.86),rgba(1,52,82,.92))!important;position:relative;color:#f4fdff!important;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 24px #05aeeb35!important;text-shadow:0 1px 7px #000}
#hdOsakaRouteV5184 b{font:1000 clamp(19px,3.3vw,42px)/1 Arial Black,Arial,sans-serif;letter-spacing:.12em}
#hdOsakaRouteV5184 small{font:900 11px/1.2 Arial,sans-serif;color:#6ae2ff;letter-spacing:.16em}
#hdFlowCategories:has(#hdOsakaRouteV5184){grid-template-columns:repeat(3,minmax(0,1fr))!important}
#osakaTestOverlayV5184[hidden]{display:none!important}#osakaTestOverlayV5184{display:block;position:fixed;inset:0;z-index:2147480000;background:#030711}
#osakaTestOverlayV5184 iframe{display:block;width:100%;height:100%;border:0;background:#030711}
#osakaTestBackV5184{position:absolute;right:9px;bottom:9px;z-index:15;padding:7px 12px;border-radius:9px;background:rgba(4,22,37,.9);border:1px solid #7ae6ff;color:white;font:900 11px Arial,sans-serif}
@media(max-width:550px){#hdFlowCategories:has(#hdOsakaRouteV5184){grid-template-columns:repeat(3,minmax(0,1fr))!important}#hdOsakaRouteV5184 b{font-size:17px}}

/* V5.189: original ONLINE HUD, from the main runtime, above the Osaka iframe.
   This selector overrides the main-menu hidden status only while the Osaka overlay is active. */
body.hdCommonMainActive:not(.haruna-diag-presence-off) #osakaTestOverlayV5184:not([hidden]) #globalOnlineStatus{
 display:block!important;visibility:visible!important;position:absolute!important;top:46px!important;right:12px!important;
 z-index:20!important;max-width:min(340px,45vw)!important;max-height:40vh!important;overflow:hidden!important;
}
@media(max-width:680px){body.hdCommonMainActive:not(.haruna-diag-presence-off) #osakaTestOverlayV5184:not([hidden]) #globalOnlineStatus{
 top:42px!important;right:3px!important;max-width:44vw!important;padding:4px!important;
}}

/* Deprecated map-backed course picker remains in source for legacy engine callbacks,
   but cannot overlay the new common-menu/Osaka. */
body.hdCommonMainActive #onlineCoursePicker{z-index:-1!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}

#osakaReturnFromPhoneV5189{position:fixed;bottom:10px;right:10px;z-index:2147482600;min-width:150px;background:#07425b;border:1px solid #68dfff;color:white;font:bold 12px Arial;padding:10px;border-radius:7px}
#osakaReturnFromPhoneV5189[hidden]{display:none!important}

/* V5.189: actual native loading screen shared with the race, with step-progress from GLB and road fetches. */
#osakaTestOverlayV5184 #harunaStartLoading{z-index:100!important}
#osakaTestOverlayV5184 .harunaStartLoadingBar{width:100%}
#osakaTestOverlayV5184 .harunaStartLoadingBar:before{animation:none!important;transform:none!important;right:auto!important;width:var(--osaka-progress,0%)!important;transition:width .15s linear}
#osakaChatToastV5189{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:90;width:min(60vw,560px);max-width:90%;padding:8px 16px;background:rgba(1,6,13,.8);border:1px solid #61c9e1;border-radius:0 0 9px 9px;color:white;font:800 12px/1.45 Arial,'Yu Gothic',sans-serif;text-align:center;pointer-events:none;overflow-wrap:anywhere}
#osakaChatToastV5189[hidden]{display:none!important}

/* V5.195: explicit startup failure instead of a permanent loading spinner */
#osakaLoadFailureV5194[hidden]{display:none!important}
#osakaLoadFailureV5194{position:absolute;z-index:300;inset:0;background:rgba(2,9,18,.97);color:#e0f2ff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:30px;font:900 16px Arial,sans-serif}
#osakaLoadFailureV5194 strong{font-size:28px;color:#ff9b80}
#osakaLoadFailureV5194 p{max-width:700px;overflow-wrap:anywhere}
#osakaLoadFailureV5194 button{padding:13px 25px;background:#07516c;color:#fff;border:1px solid #57d6ff;border-radius:8px;cursor:pointer}

/* V5.229: parent-layer display is required; iframe z-index cannot outdraw ONLINE HUD.
   Values arrive from the child WebGL requestAnimationFrame clock, not the main 2D game. */
#osakaTestOverlayV5184 #osakaNativePerfV5227{
 display:block!important;visibility:visible!important;opacity:1!important;
 position:absolute;top:8px;right:8px;z-index:120;pointer-events:none;
 padding:6px 9px;border-radius:7px;background:rgba(0,0,0,.66);
 border:1px solid rgba(255,255,255,.16);color:#8ff0b0;
 font:800 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.03em;
 text-shadow:0 1px 2px #000;white-space:nowrap;
}
#osakaTestOverlayV5184[hidden] #osakaNativePerfV5227{display:none!important}

/* V5.229: ADMIN monitor runs in parent above the Osaka iframe, only when ON. */
#osakaTestOverlayV5184 #osakaAdminPerfHudV5229{position:absolute;bottom:10px;right:10px;z-index:155;
 background:rgba(0,0,0,.88);color:#d9eff9;border:1px solid #4793b2;border-radius:7px;
 padding:8px 10px;min-width:250px;max-width:min(310px,88vw);font:800 10px/1.45 ui-monospace,Consolas,monospace;
 box-shadow:0 4px 18px #0008;pointer-events:none}
#osakaTestOverlayV5184 #osakaAdminPerfHudV5229[hidden]{display:none!important}
#osakaAdminPerfHudV5229 header{color:#adf3ff;display:flex;justify-content:space-between;gap:15px;
 font-size:11px;letter-spacing:.04em;margin-bottom:6px}
#osakaAdminPerfHudV5229 header span{font-size:9px;color:#82a4b8}
#osakaAdminPerfHudV5229 pre{margin:0 0 4px;white-space:pre;font:inherit}
#osakaAdminPerfHudV5229 button{pointer-events:auto;background:#113244;color:#ebfaff;
 border:1px solid #537e96;border-radius:4px;padding:4px 12px;cursor:pointer}
#osakaAdminPerfHudV5229 button:disabled{opacity:.4;cursor:default}

/* V5.242: PHONE in parent above its ONLINE HUD; never covered by the iframe's overlay. */
#osakaTestOverlayV5184 #osakaPhoneParentV5242{
 position:absolute;left:max(9px,env(safe-area-inset-left));top:max(9px,env(safe-area-inset-top));
 z-index:175;display:flex;align-items:center;justify-content:center;gap:5px;
 min-height:39px;min-width:104px;padding:6px 12px;border-radius:9px;
 color:#effcff;background:#042b46ed;border:2px solid #7fe2ff;
 font:900 13px/1 Arial,sans-serif;box-shadow:0 0 13px #32c5ff66;touch-action:manipulation;
}
#osakaTestOverlayV5184 #osakaPhoneParentV5242[hidden]{display:none!important}
@media(orientation:landscape) and (pointer:coarse){
 #osakaTestOverlayV5184 #osakaPhoneParentV5242{font-size:11px;min-height:33px;min-width:95px;padding:5px 7px}
}

/* V5.244: compact PC and mobile PHONE. Never inherit full-width menu button CSS. */
#osakaTestOverlayV5184 > button#osakaPhoneParentV5242{
 display:inline-flex!important;position:absolute!important;box-sizing:border-box!important;
 left:10px!important;top:10px!important;right:auto!important;bottom:auto!important;
 width:106px!important;max-width:106px!important;min-width:0!important;
 height:36px!important;max-height:36px!important;min-height:36px!important;
 flex:none!important;align-self:flex-start!important;margin:0!important;
 padding:4px 6px!important;white-space:nowrap!important;line-height:1!important;
 font-size:12px!important;letter-spacing:0!important;z-index:175!important;
}
#osakaTestOverlayV5184 > button#osakaPhoneParentV5242[hidden]{display:none!important}


/* V5.273 PC PHONE: top center, leaving top-left for native-style lap HUD.
   Mobile PHONE is intentionally unchanged. */
@media (hover:hover) and (pointer:fine){
 #osakaTestOverlayV5184 > button#osakaPhoneParentV5242{
  left:50%!important;right:auto!important;top:10px!important;
  transform:translateX(-50%)!important;
 }
 #osakaTestOverlayV5184 #osakaChatToastV5189{top:54px!important;}
}
/* Osaka lap display is on the parent layer above the iframe, matching the
   shared top-left time HUD region used in HARUNA/TSUKUBA. */
#osakaTestOverlayV5184 #osakaGarageLapHudV5273{
 position:absolute;top:9px;left:10px;z-index:171;pointer-events:none;
 box-sizing:border-box;width:196px;max-width:38vw;padding:7px 10px 9px;
 color:#f5fbff;background:linear-gradient(105deg,rgba(0,13,25,.87),rgba(2,19,35,.66));
 border:1px solid rgba(87,189,237,.52);border-left:3px solid #31bfff;border-radius:6px;
 text-shadow:0 1px 3px #000;box-shadow:0 3px 17px #0006;
 font:800 11px/1.3 Arial,'Yu Gothic',sans-serif;
}
#osakaGarageLapHudV5273 .olTop{font-size:10px;letter-spacing:.09em;color:#a1dafa;margin-bottom:4px}
#osakaGarageLapHudV5273 .olCurrent{display:flex;align-items:baseline;justify-content:space-between;gap:5px}
#osakaGarageLapHudV5273 .olCurrent b{font:900 17px/1 ui-monospace,Consolas,monospace;color:#fff;white-space:nowrap}
#osakaGarageLapHudV5273 .olBottom{display:flex;justify-content:space-between;gap:4px;margin-top:5px;color:#a3c6da;font:800 9px/1.2 Arial,sans-serif}
#osakaGarageLapHudV5273 .olBottom b{color:#f5d587;font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
#osakaGarageLapHudV5273 .olStatus{color:#6eabba;font:800 9px/1.2 Arial,sans-serif;margin-top:5px;white-space:nowrap}
@media (hover:none) and (pointer:coarse){
 /* Preserve the existing smartphone PHONE launcher and map dimensions.
    Stack the lap panel below the existing top-left PHONE instead. */
 #osakaTestOverlayV5184 #osakaGarageLapHudV5273{
  top:max(85px,calc(env(safe-area-inset-top) + 76px));left:7px;
  width:133px;max-width:34vw;padding:4px 6px 5px;font-size:9px;
 }
 #osakaGarageLapHudV5273 .olTop{font-size:8px;margin-bottom:2px}
 #osakaGarageLapHudV5273 .olCurrent b{font-size:12px}
 #osakaGarageLapHudV5273 .olBottom{font-size:8px;flex-wrap:wrap}
 #osakaGarageLapHudV5273 .olStatus{font-size:8px;margin-top:2px}
}
@media(max-height:450px) and (hover:none) and (pointer:coarse){
 #osakaTestOverlayV5184 #osakaGarageLapHudV5273{top:82px}
}

/* V5.289: OSAKA landscape TOUCH ONLY, stereo controls remain in iframe.
   Move parent lap and native online panels BESIDE their respective steering hitboxes. */
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
 body.hdCommonMainActive #osakaTestOverlayV5184:not([hidden]) #osakaGarageLapHudV5273{
  top:max(47px,calc(25dvh - 33px))!important;
  left:calc(max(5px,env(safe-area-inset-left)) + clamp(64px,12dvh,94px) + 12px)!important;
  right:auto!important;bottom:auto!important;
  width:clamp(118px,21vw,154px)!important;
  max-width:clamp(118px,21vw,154px)!important;
  padding:4px 6px!important;
  z-index:175!important;
 }
 body.hdCommonMainActive:not(.haruna-diag-presence-off) #osakaTestOverlayV5184:not([hidden]) #globalOnlineStatus{
  top:calc(25dvh - 36px)!important;
  right:calc(max(5px,env(safe-area-inset-right)) + clamp(64px,12dvh,94px) + 12px)!important;
  left:auto!important;bottom:auto!important;
  min-width:0!important;width:clamp(116px,20vw,160px)!important;
  max-width:clamp(116px,20vw,160px)!important;max-height:clamp(68px,24dvh,108px)!important;
  box-sizing:border-box!important;padding:3px 5px!important;
  overflow:hidden!important;z-index:175!important;
 }
 #osakaTestOverlayV5184 #globalOnlineStatus .globalOnlineMain{font-size:10px!important}
 #osakaTestOverlayV5184 #globalOnlineStatus .globalOnlineMain b{font-size:12px!important}
 #osakaTestOverlayV5184 #globalOnlineStatus .globalOnlineSub{display:none!important}
 #osakaTestOverlayV5184 #globalOnlineStatus .globalOnlinePlayers{margin-top:3px!important;padding-top:3px!important;max-height:52px!important;overflow:hidden!important}
 #osakaTestOverlayV5184 #globalOnlineStatus .globalOnlinePlayer{font-size:8px!important;min-height:12px!important;padding:1px!important}
}