/* Race HUD + touch controls, arcade overhaul (2026-10-16). Old cards/boxes stay in the DOM (tests
   read some ids) but are hidden; the new HUD is light: position top-left, speedometer top-centre,
   minimap top-right, nothing over the car. */
#hud .hud-top,#hud .hud-bottom,#steer-pad .arrow{visibility:hidden}
#h2{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:var(--ui-text);color:#fff}
#h2-pos{position:absolute;left:14px;top:max(8px,env(safe-area-inset-top));line-height:0.9;text-shadow:0 2px 6px rgba(0,0,0,0.55)}
#h2-pos .p{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:46px;letter-spacing:-1px}
#h2-pos .of{font-family:var(--ui-display);font-style:italic;font-weight:800;font-size:20px;color:rgba(255,255,255,0.75);margin-left:2px}
#h2-pos .lap{display:block;margin-top:4px;font-weight:700;font-size:13px;letter-spacing:1px;color:#e6ecff}
#h2-pos .lap b{color:#fff}
#h2-pos .chal{display:none;margin-top:2px;font-weight:800;font-size:11.5px;letter-spacing:1.2px;color:var(--ui-c);text-shadow:0 2px 6px rgba(0,0,0,0.6)}
#h2-speedo{position:absolute;left:50%;top:max(4px,env(safe-area-inset-top));transform:translateX(-50%);width:170px;height:96px}
#h2-gauge{width:170px;height:96px;display:block}
#h2-kmh{position:absolute;left:0;right:0;top:34px;text-align:center;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:36px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
#h2-unit{position:absolute;left:0;right:0;top:72px;text-align:center;font-weight:700;font-size:10.5px;letter-spacing:1.4px;color:#dfe6ff}
#h2-unit b{color:var(--ui-c)}
/* standings: compact list under the position */
#standings{top:96px!important;left:12px!important;gap:1px!important}
#standings .row{background:rgba(6,10,30,0.42)!important;border-left-width:3px!important;min-width:104px!important;padding:1px 7px 1px 5px!important;font-size:10.5px!important}
#standings .row.me{background:rgba(255,255,255,0.92)!important;color:#0a0c12!important}
#minimap{width:92px!important;height:92px!important;top:max(10px,env(safe-area-inset-top))!important;right:12px!important;border:2px solid rgba(255,255,255,0.5)!important;background:rgba(6,10,30,0.5)!important}
#pause-btn{top:max(10px,env(safe-area-inset-top))!important;right:112px!important;width:38px!important;height:38px!important;background:rgba(6,10,30,0.55)!important;border:2px solid rgba(255,255,255,0.45)!important}
@media (max-width:480px){
  #h2-speedo{top:max(54px,calc(env(safe-area-inset-top) + 46px))}
  #minimap{top:max(10px,env(safe-area-inset-top))!important}
  #standings{top:92px!important}
  #ghost-delta{top:150px!important}
}
#ghost-delta{top:96px}
.hud-center-msg{top:30%!important}
#callout-txt{font-family:var(--ui-display)!important;font-style:italic!important;font-weight:900!important;letter-spacing:0.6px!important;color:#fff!important;
  text-shadow:0 3px 0 rgba(0,0,0,0.45)!important;background:linear-gradient(90deg,rgba(7,9,14,0),rgba(7,9,14,0.72) 16%,rgba(7,9,14,0.72) 84%,rgba(7,9,14,0));padding:4px 30px}
#countdown-txt{font-family:var(--ui-display)!important;font-style:italic!important;font-weight:900!important;color:#fff!important;text-shadow:0 6px 0 rgba(0,0,0,0.45)!important}

/* touch controls: glass buttons, big targets, quiet visuals */
#touch-ui.big .t-btn{border-radius:12px!important;background:rgba(8,12,34,0.38)!important;border:2px solid rgba(255,255,255,0.32)!important;box-shadow:none!important;
  font-family:var(--ui-display)!important;font-style:italic!important;font-weight:900!important;font-size:15px!important;letter-spacing:1.2px!important;color:#fff!important;backdrop-filter:blur(2px)}
#touch-ui.big .t-btn.pressed,#touch-ui.big .t-btn:active{background:rgba(255,255,255,0.32)!important;transform:scale(0.96)!important}
#touch-ui.big #btn-drift{color:#fff!important;border-color:rgba(255,255,255,0.55)!important}
#touch-ui.big #btn-boost{color:var(--ui-c)!important;border-color:rgba(0,225,255,0.7)!important}
#touch-ui.big #btn-brake{color:#ff6a6a!important;border-color:rgba(255,106,106,0.6)!important}
#touch-ui.big .touch-pad-right{gap:8px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important}
#touch-ui.big .t-btn{width:clamp(78px,20vw,104px)!important;height:clamp(58px,9vh,74px)!important}
/* steering: two round glass buttons drawn over the slide pad */
#steer-pad{width:calc(36px + 2 * clamp(78px,21vw,104px))!important;max-width:none!important;display:flex!important;gap:12px;padding:0 0 max(14px,env(safe-area-inset-bottom)) 12px!important;align-items:flex-end;justify-content:flex-start!important}
#steer-pad::before,#steer-pad::after{content:'';position:absolute;bottom:max(14px,env(safe-area-inset-bottom));width:clamp(78px,21vw,104px);height:clamp(78px,21vw,104px);border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);background:rgba(8,12,34,0.35) no-repeat center/34% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M7 1 2 5l5 4z' fill='white'/%3E%3C/svg%3E")}
#steer-pad::before{left:12px}
#steer-pad::after{left:calc(24px + clamp(78px,21vw,104px));transform:scaleX(-1)}
#steer-pad.l::before,#steer-pad.r::after{background-color:rgba(255,255,255,0.32)}
#cam-btn,#reset-btn{position:fixed;z-index:13;pointer-events:auto;bottom:calc(max(14px,env(safe-area-inset-bottom)) + clamp(86px,23vw,114px));
  font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:11px;letter-spacing:1.2px;color:#fff;background:rgba(8,12,34,0.4);border:1.5px solid rgba(255,255,255,0.3);border-radius:8px;padding:6px 10px}
#cam-btn{left:12px}#reset-btn{left:72px}
body.in-shell #cam-btn,body.in-shell #reset-btn,body.in-shell #h2{display:none!important}
/* auto-gas: BRAKE spans the bottom row */
#touch-ui.big.autogas #btn-brake{grid-column:1 / span 2!important;width:auto!important}
.hud-center-msg{top:40%!important}
/* portrait: minimap bottom-left above CAM/RESET (like the reference); top row = position · speed · pause */
@media (max-width:480px){
  #minimap{top:auto!important;bottom:calc(max(14px,env(safe-area-inset-bottom)) + clamp(86px,23vw,114px) + 40px)!important;left:12px!important;right:auto!important;width:84px!important;height:84px!important}
  #pause-btn{right:12px!important;top:max(10px,env(safe-area-inset-top))!important}
  #h2-speedo{top:max(8px,env(safe-area-inset-top));transform:translateX(-36%) scale(0.92);transform-origin:top center}
  #standings .row{min-width:94px!important}
  .hud-center-msg{top:34%!important}
}
/* ===== critic round 1: HUD + controls ===== */
#h2-kmh{font-size:42px;top:30px}
#h2-unit{display:flex;justify-content:center;gap:8px;align-items:baseline;top:74px;color:rgba(255,255,255,0.75)}
#h2-unit b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:15px;color:#fff;background:rgba(255,255,255,0.14);padding:0 6px;border-radius:4px}
#standings{gap:0!important;background:rgba(6,8,12,0.45);border-radius:8px;padding:3px 0;width:max-content}
#standings .row{background:transparent!important;border-left-width:3px!important}
#standings .row.me{background:rgba(255,255,255,0.92)!important}
#callout-txt{background:none!important;padding:0 0 4px!important;border-bottom:2px solid var(--ui-c);text-shadow:0 2px 8px rgba(0,0,0,0.6)!important}
#touch-ui.big .t-btn{background:rgba(255,255,255,0.08)!important;border-width:1.5px!important;border-color:rgba(255,255,255,0.35)!important}
#touch-ui.big #btn-drift,#touch-ui.big #btn-boost{border-color:rgba(255,255,255,0.35)!important}
#touch-ui.big #btn-boost{color:var(--ui-c)!important}
#touch-ui.big #btn-brake{border-color:rgba(255,106,106,0.5)!important}
#steer-pad::before,#steer-pad::after{background-color:rgba(255,255,255,0.08);border-width:1.5px}
/* safe areas: clear the home indicator; landscape keeps 44px+ from the notch sides */
#touch-ui.big .touch-pad-right{bottom:calc(env(safe-area-inset-bottom) + 14px)!important;right:calc(env(safe-area-inset-right) + 14px)!important}
#steer-pad{padding-bottom:calc(env(safe-area-inset-bottom) + 14px)!important}
#steer-pad::before,#steer-pad::after{bottom:calc(env(safe-area-inset-bottom) + 14px)}
#steer-pad::before{left:calc(env(safe-area-inset-left) + 14px)}
#steer-pad::after{left:calc(env(safe-area-inset-left) + 26px + clamp(78px,21vw,104px))}
@media (orientation:landscape){#touch-ui.big .t-btn{width:clamp(74px,11vw,96px)!important;height:clamp(52px,14vh,66px)!important}}
@media (max-width:480px){#minimap{bottom:calc(env(safe-area-inset-bottom) + clamp(86px,23vw,114px) + 8px)!important}}
/* ===== critic round 2: brake not pink; portrait safe area; legibility ===== */
#touch-ui.big #btn-brake{color:#fff!important;border-color:rgba(255,255,255,0.35)!important;background:rgba(255,255,255,0.06)!important}
@media (orientation:portrait){
  #touch-ui.big .touch-pad-right{bottom:calc(env(safe-area-inset-bottom) + 34px)!important}
  #steer-pad{padding-bottom:calc(env(safe-area-inset-bottom) + 34px)!important}
  #steer-pad::before,#steer-pad::after{bottom:calc(env(safe-area-inset-bottom) + 34px)}
}
@media (orientation:landscape){
  #touch-ui.big .touch-pad-right{right:max(24px,calc(env(safe-area-inset-right) + 14px))!important}
  #steer-pad::before{left:max(24px,calc(env(safe-area-inset-left) + 14px))}
  #steer-pad::after{left:calc(max(24px,calc(env(safe-area-inset-left) + 14px)) + 12px + clamp(78px,21vw,104px))}
  #h2-speedo{transform:translateX(-50%) scale(0.82);transform-origin:top center}
  .hud-center-msg{top:62%!important}
}
#h2-unit{font-weight:800;color:#fff}
#callout-txt{border-bottom:0!important;background:rgba(255,255,255,0.95)!important;color:#0a0c12!important;text-shadow:none!important;padding:3px 14px!important;transform:skewX(var(--ui-skew,-8deg))}
/* ===== critic round 3: portrait minimap top-right under pause (clear of the steer buttons) ===== */
@media (max-width:480px){
  #minimap{top:calc(max(10px,env(safe-area-inset-top)) + 48px)!important;bottom:auto!important;right:12px!important;left:auto!important;width:84px!important;height:84px!important}
}
/* ===== critic round 4: lighter controls — quiet at rest, bright on press ===== */
#touch-ui.big .t-btn{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.25)!important;opacity:0.75;border-radius:16px!important}
#touch-ui.big .t-btn.pressed,#touch-ui.big .t-btn:active{opacity:1}
#steer-pad::before,#steer-pad::after{border-width:1px;border-color:rgba(255,255,255,0.25);background-color:rgba(255,255,255,0.04);opacity:0.8}
#steer-pad.l::before,#steer-pad.r::after{opacity:1}
/* ===== corner arrows (Asphalt / NFS style) ===== */
#h2-turn{position:absolute;left:50%;top:26%;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
#h2-turn.on{display:flex}
#h2-turn .ch{display:flex;gap:2px}
#h2-turn i{display:none;width:30px;height:46px;background:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
#h2-turn.l1 i:nth-child(1),#h2-turn.l2 i:nth-child(-n+2),#h2-turn.l3 i{display:block}
#h2-turn.left .ch{transform:scaleX(-1)}
#h2-turn .lbl{display:none;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:13px;letter-spacing:2px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.6)}
#h2-turn.hot .lbl{display:block}
#h2-turn.hot i{background:#ff4d5e}
#h2-turn.hot{animation:turnblink .32s steps(2) infinite}
@keyframes turnblink{50%{filter:brightness(1.6)}}
@media (max-width:480px){#h2-turn{top:22%}#h2-turn i{width:24px;height:38px}}
/* ===== new-lap banner ===== */
#h2-lapban{position:absolute;left:50%;top:38%;transform:translate(-50%,-10px) scale(0.92);opacity:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:opacity .25s,transform .25s;
  background:linear-gradient(90deg,rgba(7,9,14,0),rgba(7,9,14,0.78) 18%,rgba(7,9,14,0.78) 82%,rgba(7,9,14,0));padding:8px 60px 10px}
#h2-lapban.on{opacity:1;transform:translate(-50%,0) scale(1)}
#h2-lapban small{font-family:var(--ui-text);font-weight:800;font-size:13px;letter-spacing:3px;color:#c9a3ff}
#h2-lapban b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:54px;line-height:1;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,0.4)}
#h2-lapban span{font-family:var(--ui-text);font-weight:700;font-size:13px;letter-spacing:1px;color:rgba(255,255,255,0.8);margin-top:2px}
@media (max-width:480px){#h2-lapban{top:32%}#h2-lapban b{font-size:44px}}