/* HARUNA V5.54 / SPEED + GEAR / CSS-only visual, existing physics/HUD placements unchanged. */
.h54HUD{position:fixed;inset:0;z-index:20;pointer-events:none;display:none;contain:layout style;}
.h54HUD.h54Visible{display:block;}
.h54GearBox,.h54SpeedBox{position:fixed;box-sizing:border-box;isolation:isolate;overflow:visible;border-radius:12px;pointer-events:none;background:linear-gradient(170deg,rgba(4,16,39,.93),rgba(1,4,12,.88) 57%,rgba(2,8,25,.92));border:1.5px solid rgba(76,203,255,.68);box-shadow:inset 0 0 0 1px rgba(192,243,255,.12),inset 0 0 20px rgba(0,127,255,.12),0 0 14px rgba(5,129,255,.24),0 7px 22px rgba(0,0,0,.42);}
.h54GearBox{width:92px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
.h54GearLabel,.h54SpeedLabel{position:relative;z-index:2;color:#86d7ff;font:900 9px/1 'Arial Black',Arial,sans-serif;letter-spacing:.22em;text-shadow:0 0 8px #0094ed;}
.h54GearNumber,.h54SpeedNumber{position:relative;z-index:2;white-space:nowrap;font:1000 italic 49px/.89 Impact,'Arial Black',sans-serif;letter-spacing:-.025em;color:transparent;background:linear-gradient(180deg,#fff 0%,#edfeff 22%,#5eeaff 42%,#0ba9ff 61%,#003cbe 82%,#cef9ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(218,246,255,.72);paint-order:stroke fill;filter:drop-shadow(2px 3px 0 #00112c) drop-shadow(0 0 7px #009dff);font-variant-numeric:tabular-nums;}
.h54GearBox.h54Shift .h54GearNumber{animation:h54GearShift .52s cubic-bezier(.18,1.38,.28,1) both;background-image:linear-gradient(180deg,#fffdf0 0%,#fff8a8 22%,#ffe63a 45%,#ff9e13 68%,#8f3404 90%);-webkit-text-stroke-color:#ffec7a;filter:drop-shadow(2px 3px 0 #5b2700) drop-shadow(0 0 11px #ffc600);}
.h54GearSweep,.h54SpeedSweep{position:absolute;z-index:3;left:4px;right:4px;top:54%;height:2px;border-radius:4px;opacity:0;transform:translateX(-40%) scaleX(.15);background:linear-gradient(90deg,transparent,#ffdf27 40%,white 52%,#ff9800 70%,transparent);box-shadow:0 0 11px #ffd500;}
.h54GearBox.h54Shift .h54GearSweep,.h54SpeedBox.h54Surge .h54SpeedSweep{animation:h54Line .5s ease-out both;}
.h54SpeedBox{width:124px;height:68px;display:grid;grid-template-columns:1fr 24px;grid-template-rows:14px 37px;column-gap:0;align-content:center;align-items:end;justify-items:center;padding:4px 7px;}
.h54SpeedLabel{grid-column:1/3;align-self:center;justify-self:start;margin-left:2px;font-size:8px;letter-spacing:.20em;}
.h54SpeedNumber{grid-column:1;grid-row:2;font-size:41px;line-height:.9;justify-self:end;margin-right:2px;}
.h54SpeedUnit{grid-column:2;grid-row:2;align-self:end;margin:0 0 2px;font:900 9px/1 Arial,sans-serif;color:#a9f1ff;text-shadow:0 0 7px #00aaff;}
.h54SpeedBox.h54Fast{border-color:rgba(255,201,50,.82);box-shadow:inset 0 0 0 1px #fff2b119,0 0 15px #ffad0044,0 7px 22px #0007;}
.h54SpeedBox.h54Fast .h54SpeedNumber{background-image:linear-gradient(180deg,#fff 0%,#fff7b0 25%,#ffda18 52%,#f77d00 78%,#fff4c0 100%);-webkit-text-stroke-color:#fff2ac;filter:drop-shadow(2px 3px 0 #562b00) drop-shadow(0 0 8px #ff9c00);}
.h54SpeedBox.h54Redline{border-color:#ff485d;box-shadow:0 0 16px #fc234a77,inset 0 0 17px #fc234a33;}
.h54SpeedBox.h54Redline .h54SpeedNumber{background-image:linear-gradient(180deg,#fff 0%,#ffc4c5 20%,#ff455d 50%,#a60a21 80%,#ffb3be 100%);-webkit-text-stroke-color:#ffbbca;filter:drop-shadow(2px 3px 0 #360008) drop-shadow(0 0 9px #ff4057);}
.h54SpeedBox.h54Surge .h54SpeedNumber{animation:h54SpeedSurge .55s cubic-bezier(.2,1.22,.3,1) both;}
@keyframes h54GearShift{0%{transform:translateX(-25px) scale(1.55) skewX(-9deg);opacity:.1}46%{transform:translateX(5px) scale(.95) skewX(-9deg);opacity:1}100%{transform:translateX(0) scale(1) skewX(0);opacity:1}}
@keyframes h54SpeedSurge{0%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes h54Line{0%{opacity:0;transform:translateX(-45%) scaleX(.15)}45%{opacity:1}100%{opacity:0;transform:translateX(35%) scaleX(1)}}
/* Dedicated portrait-gamepad HUD is already DOM; use the same visual identity without changing its layout. */
body.haruna-portrait-pad .h19-gear-value,body.haruna-portrait-pad .h19-speed b{color:#b7f1ff!important;text-shadow:0 2px 0 #002955,0 0 10px #00aaff,0 0 22px #005bff!important;filter:none!important;}
body.haruna-portrait-pad .h19-gear-value.h54NativeShift{animation:h54GearShift .52s ease-out both;color:#ffe95d!important;text-shadow:0 0 12px #ffc600!important;}
body.haruna-portrait-pad .h19-speed.h54Fast b{color:#ffe260!important;text-shadow:0 0 13px #ffb000!important;}
body.haruna-portrait-pad .h19-speed.h54Redline b{color:#ff7d8e!important;text-shadow:0 0 13px #ff3355!important;}
@media(max-width:650px){.h54HUD:not(.h54Tiny) .h54GearBox{width:76px;height:65px}.h54HUD:not(.h54Tiny) .h54GearNumber{font-size:43px}.h54HUD:not(.h54Tiny) .h54SpeedBox{transform:scale(.85);transform-origin:right bottom}}
.h54HUD.h54Tiny .h54GearBox{width:42px;height:37px;border-radius:7px;gap:0}.h54HUD.h54Tiny .h54GearLabel{font-size:6px;letter-spacing:.06em}.h54HUD.h54Tiny .h54GearNumber{font-size:25px;line-height:.9}.h54HUD.h54Tiny .h54SpeedBox{width:76px;height:37px;border-radius:7px;grid-template-columns:1fr 15px;grid-template-rows:9px 21px;gap:0;padding:3px 4px}.h54HUD.h54Tiny .h54SpeedLabel{font-size:5px}.h54HUD.h54Tiny .h54SpeedNumber{font-size:23px}.h54HUD.h54Tiny .h54SpeedUnit{font-size:6px}
@media(prefers-reduced-motion:reduce){.h54GearBox.h54Shift .h54GearNumber,.h54SpeedBox.h54Surge .h54SpeedNumber,.h54GearSweep,.h54SpeedSweep{animation:none!important;}}

/* V5.70 simple tach-integrated readout: normal text, zero shadows/filters/animations. */
.h54HUD .h54GearBox,.h54HUD .h54SpeedBox{display:flex!important;align-items:center;justify-content:center;gap:0;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;isolation:auto!important;transform:none!important}
.h54HUD .h54GearBox{width:28px!important;height:24px!important}
.h54HUD .h54SpeedBox{width:96px!important;height:31px!important;flex-direction:row!important}
.h54HUD .h54GearLabel,.h54HUD .h54SpeedLabel,.h54HUD .h54GearSweep,.h54HUD .h54SpeedSweep{display:none!important}
.h54HUD .h54GearNumber{font:700 24px/1 Arial,sans-serif!important;color:#f1f1f1!important;letter-spacing:0!important}
.h54HUD .h54SpeedNumber{font:700 27px/1 "Arial Narrow",Arial,sans-serif!important;color:#fff!important;letter-spacing:-.02em!important}
.h54HUD .h54SpeedUnit{font:400 9px/1 Arial,sans-serif!important;color:#e5e5e5!important;margin:11px 0 0 3px!important}
.h54HUD .h54GearNumber,.h54HUD .h54SpeedNumber{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-stroke:0!important;text-shadow:none!important;filter:none!important;animation:none!important;transform:none!important}
.h54HUD .h54GearBox.h54Shift .h54GearNumber,.h54HUD .h54SpeedBox.h54Surge .h54SpeedNumber{animation:none!important;background:none!important;filter:none!important}
.h54HUD .h54SpeedBox.h54Fast,.h54HUD .h54SpeedBox.h54Redline{border:0!important;box-shadow:none!important}
.h54HUD.h54Tiny .h54GearBox{width:22px!important;height:19px!important}
.h54HUD.h54Tiny .h54GearNumber{font-size:18px!important}
.h54HUD.h54Tiny .h54SpeedBox{width:66px!important;height:22px!important}
.h54HUD.h54Tiny .h54SpeedNumber{font-size:20px!important}

/* V5.74: unify GEAR/SPEED values: equal color, family and letter height, no glows. */
.h54HUD .h54GearNumber,.h54HUD .h54SpeedNumber{
  font-family:Arial,sans-serif!important;
  font-size:27px!important;
  font-weight:700!important;
  line-height:1!important;
  color:#ffffff!important;
  letter-spacing:0!important;
  font-style:normal!important;
  font-variant-numeric:tabular-nums!important;
  background:none!important;
  text-shadow:none!important;
  filter:none!important;
  -webkit-text-stroke:0!important;
}
.h54HUD .h54SpeedBox{width:102px!important;justify-content:center!important}
.h54HUD .h54SpeedUnit{font-size:9px!important;margin:10px 0 0 3px!important}
.h54HUD.h54Tiny .h54GearNumber,.h54HUD.h54Tiny .h54SpeedNumber{font-size:20px!important}

/* V5.76: gear cyan matching arcade reference, speed remains white. */
.h54HUD .h54GearNumber{color:#48cfff!important}

/* V5.77 EXACT REFERENCE LAYOUT: cyan GEAR at middle-left; speed in its OWN framed panel at middle-right. */
.h54HUD .h54GearBox{width:64px!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}
.h54HUD .h54GearNumber{color:#48cfff!important;font:700 38px/1 Arial,sans-serif!important}
.h54HUD .h54SpeedBox{width:150px!important;height:64px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;box-sizing:border-box!important;padding:0 9px!important;background:rgba(2,10,18,.84)!important;border:2px solid rgba(133,214,252,.90)!important;border-radius:7px!important;box-shadow:inset 0 0 0 1px rgba(22,81,115,.54)!important}
.h54HUD .h54SpeedNumber{color:#fff!important;font:700 38px/1 Arial,sans-serif!important;letter-spacing:-.025em!important}
.h54HUD .h54SpeedUnit{color:#fff!important;font:400 11px/1 Arial,sans-serif!important;margin:17px 0 0 0!important}
.h54HUD.h54Tiny .h54GearBox{width:42px!important;height:34px!important}
.h54HUD.h54Tiny .h54GearNumber{font-size:25px!important}
.h54HUD.h54Tiny .h54SpeedBox{width:93px!important;height:38px!important;gap:2px!important;border-width:1px!important;padding:0 4px!important}
.h54HUD.h54Tiny .h54SpeedNumber{font-size:24px!important}
.h54HUD.h54Tiny .h54SpeedUnit{font-size:7px!important;margin:11px 0 0 0!important}

/* V5.78 tach-local layout: small cyan gear left of dial; compact framed speed lower right. */
.h54HUD .h54GearBox{width:64px!important;height:52px!important}
.h54HUD .h54GearNumber{font:700 34px/1 Arial,sans-serif!important;color:#48cfff!important}
.h54HUD .h54SpeedBox{width:132px!important;height:58px!important;gap:4px!important;border-radius:6px!important;padding:0 7px!important}
.h54HUD .h54SpeedNumber{font:700 34px/1 Arial,sans-serif!important;color:#fff!important}
.h54HUD .h54SpeedUnit{font-size:9px!important;margin:14px 0 0!important}
.h54HUD.h54Tiny .h54GearBox{width:42px!important;height:34px!important}
.h54HUD.h54Tiny .h54GearNumber{font-size:25px!important}
.h54HUD.h54Tiny .h54SpeedBox{width:93px!important;height:38px!important}
.h54HUD.h54Tiny .h54SpeedNumber{font-size:24px!important}

/* V5.79 metallic tach companion; one static SVG, only digits update. */
.h54HUD .h579MetalFrame{position:fixed;z-index:1;pointer-events:none;background:url('../assets/hud/haruna_v579_metal_frame.svg') center/100% 100% no-repeat;}
.h54HUD .h54GearBox,.h54HUD .h54SpeedBox{position:fixed!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:center!important;background:none!important;border:0!important;box-shadow:none!important;filter:none!important;padding:0!important;transform:none!important;isolation:auto!important;overflow:visible!important;}
.h54HUD .h54GearBox{width:68px!important;height:45px!important}
.h54HUD .h54SpeedBox{width:86px!important;height:42px!important;gap:0!important}
.h54HUD .h54GearNumber{font:italic 900 42px/1 Impact,'Arial Narrow',Arial,sans-serif!important;color:#4ad9ff!important;letter-spacing:-.02em!important;text-shadow:none!important;filter:none!important}
.h54HUD .h54SpeedNumber{font:italic 900 32px/1 Impact,'Arial Narrow',Arial,sans-serif!important;color:#fff!important;letter-spacing:-.02em!important;text-shadow:none!important;filter:none!important}
.h54HUD .h54GearLabel,.h54HUD .h54SpeedLabel,.h54HUD .h54SpeedUnit{display:none!important}
.h54HUD.h54Tiny .h54GearBox{width:43px!important;height:29px!important}
.h54HUD.h54Tiny .h54SpeedBox{width:56px!important;height:27px!important}
.h54HUD.h54Tiny .h54GearNumber{font-size:27px!important}
.h54HUD.h54Tiny .h54SpeedNumber{font-size:21px!important}

/* V5.80: one static unified tach + metal chassis, with only live needle and two digits. */
.h54HUD .h579MetalFrame{background-image:url('../assets/hud/haruna_v580_unified_hud.svg')!important;background-repeat:no-repeat!important;z-index:1!important;transform:none!important;overflow:visible!important;}
.h54HUD .h579MetalFrame svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.h54HUD .h54GearBox,.h54HUD .h54SpeedBox{z-index:2!important;}
.h54HUD .h54GearBox{width:70px!important;height:57px!important}
.h54HUD .h54SpeedBox{width:116px!important;height:43px!important}
.h54HUD .h54GearNumber{font:italic 900 49px/1 Impact,'Arial Narrow',Arial,sans-serif!important;color:#42dcff!important;text-shadow:none!important}
.h54HUD .h54SpeedNumber{font:italic 900 39px/1 Impact,'Arial Narrow',Arial,sans-serif!important;color:white!important;text-shadow:none!important}
.h54HUD.h54Tiny .h54GearBox{width:45px!important;height:38px!important}
.h54HUD.h54Tiny .h54SpeedBox{width:74px!important;height:28px!important}
.h54HUD.h54Tiny .h54GearNumber{font-size:32px!important}
.h54HUD.h54Tiny .h54SpeedNumber{font-size:25px!important}

/* V5.81: REV color changes disabled; digit colors stay cyan/white. */
.h54HUD .h54GearNumber{color:#42dcff!important;}
.h54HUD .h54SpeedNumber{color:#fff!important;}

/* V5.83: ONE alpha WebP static panel+tacho, no separate composited frame images. */
.h54HUD .h579MetalFrame{background-image:url('../assets/hud/haruna_v583_unified_static.webp')!important;background-size:100% 100%!important;}
.h54HUD .h54GearBox,.h54HUD .h54SpeedBox{z-index:3!important;}
.h54HUD .h54GearNumber{font-style:italic!important;color:#27dfff!important;}
.h54HUD .h54SpeedNumber{font-style:italic!important;color:#fff!important;}