/* RoadLife V29.1 compact driving HUD.
 * Layout follows the supplied TrackLife reference: dark translucent cards,
 * thin dividers, large speed, circular road limit and a compact route row. */
#game #roadlifeGameBrand291 {
  position:absolute; left:22px; top:18px; z-index:14; pointer-events:none;
  color:#f4f7f9; font-style:italic; font-weight:850; font-size:31px; line-height:.9;
  letter-spacing:-.055em; text-shadow:0 2px 8px rgba(0,0,0,.55);
}
#game #roadlifeGameBrand291 b { color:#69d052; font-weight:900; }
#game #roadlifeGameBrand291 small { display:block; margin:8px 0 0 6px; font-size:8px; font-style:normal; letter-spacing:.28em; color:rgba(245,249,250,.82); font-weight:650; }

#game .hudPanel.hud291 {
  left:14px; top:auto; bottom:14px; width:354px; min-width:354px; max-width:calc(100vw - 28px);
  padding:0; overflow:hidden; border:1px solid rgba(201,217,226,.22); border-top:1px solid rgba(201,217,226,.22);
  border-radius:6px; background:rgba(12,24,32,.91); box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(7px); color:#f3f6f7;
}
#game .hud291 .hud291Top { height:40px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid rgba(210,225,233,.15); }
#game .hud291 .hud291Kind { font-size:18px; font-weight:850; letter-spacing:-.04em; color:#fff; }
#game .hud291 #hudVehicle291 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; color:#e7edf0; }
#game .hud291 #gear { min-width:30px; text-align:right; font-size:15px; font-weight:850; color:#e7edf0; }

#game .hud291 .hud291Main { display:grid; grid-template-columns:112px 92px minmax(0,1fr); min-height:76px; align-items:center; }
#game .hud291 .hud291Speed { height:100%; display:flex; align-items:center; padding:0 0 0 12px; border-right:1px solid rgba(210,225,233,.15); }
#game .hud291 .speed { font-size:34px; line-height:1; font-weight:500; letter-spacing:-.045em; color:#fff; font-variant-numeric:tabular-nums; }
#game .hud291 .unit { align-self:flex-end; padding:0 0 19px 5px; font-size:10px; color:#cbd5da; letter-spacing:0; }
#game .hud291 .hud291Limit { height:100%; display:flex; align-items:center; gap:8px; padding:0 9px; border-right:1px solid rgba(210,225,233,.15); }
#game .hud291 .hud291Limit[hidden] { visibility:hidden; display:flex!important; }
#game .hud291 .hud291Sign { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; border:4px solid #e81f31; background:#fff; color:#12191e; font-size:11px; font-weight:900; box-shadow:0 1px 3px rgba(0,0,0,.45); font-variant-numeric:tabular-nums; }
#game .hud291 .hud291LimitText { display:flex; flex-direction:column; gap:1px; color:#dae3e7; font-size:9px; line-height:1.15; }
#game .hud291 .hud291LimitText b { font-size:11px; color:#fff; font-weight:650; }
#game .hud291 .hud291Fuel { min-width:0; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 11px; gap:6px; }
#game .hud291 .hud291FuelHeader { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:9px; color:#b9c6cc; text-transform:uppercase; letter-spacing:.08em; }
#game .hud291 #fuel { color:#f3f6f7; font-size:10px; font-weight:650; letter-spacing:0; text-transform:none; white-space:nowrap; }
#game .hud291 .fuelbar { width:100%; height:7px; margin:0; overflow:hidden; border-radius:2px; background:rgba(231,239,242,.14); }
#game .hud291 .fuelbar>div { height:100%; background:#69d052; border-radius:2px; }
#game .hud291 #fuelPercent291 { font-size:10px; color:#dce5e8; font-variant-numeric:tabular-nums; }

#game .hud291 .hud291Route { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; min-height:55px; padding:0 12px; border-top:1px solid rgba(210,225,233,.15); }
#game .hud291 .hud291Pin { width:17px; height:17px; position:relative; margin-left:1px; }
#game .hud291 .hud291Pin:before { content:''; position:absolute; left:3px; top:0; width:10px; height:10px; border:2px solid #e4ebee; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
#game .hud291 .hud291Pin:after { content:''; position:absolute; left:7px; top:4px; width:3px; height:3px; border-radius:50%; background:#e4ebee; }
#game .hud291 .hud291Road { min-width:0; display:flex; flex-direction:column; gap:2px; }
#game .hud291 #hudRoad291 { min-height:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:650; color:#f3f6f7; }
#game .hud291 #hudLocation291 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#b7c4ca; }
#game .hud291 .hud291Time { align-self:stretch; min-width:58px; display:flex; align-items:center; justify-content:flex-end; margin-left:8px; padding-left:10px; border-left:1px solid rgba(210,225,233,.15); font-size:10px; font-variant-numeric:tabular-nums; color:#d9e1e5; }
#game .hud291 .hud291Mission { display:none; }
#game .hud291 .hud291Legacy { display:none!important; }
#game .hud291 .roadlifeHudLogo { display:none!important; }
#game .hud291 #busPanel27 { border-top:1px solid rgba(210,225,233,.15); margin:0; padding:10px 12px 12px; }
#game .hudPanel.hud291.busActive27 { width:354px; }

#game #controls { left:auto; right:14px; bottom:80px; max-width:335px; border-radius:5px; background:rgba(12,24,32,.91); border-color:rgba(201,217,226,.22); color:#e5ecef; }
#game #controls .key { border-radius:3px; background:rgba(232,239,242,.10); }
#game #steeringWheelHud { left:384px; bottom:18px; }
#game #topRight { border-radius:6px; background:rgba(12,24,32,.88); border-color:rgba(201,217,226,.18); }
#game :is(#debug,#fpsReadout26,#poiQuickStatus27) { border-radius:5px; background:rgba(12,24,32,.91); border-color:rgba(201,217,226,.20); }

@media(max-width:800px){
  #game #roadlifeGameBrand291 { left:12px; top:10px; font-size:25px; }
  #game .hudPanel.hud291 { left:8px; bottom:8px; width:min(354px,calc(100vw - 16px)); min-width:0; }
  #game .hud291 .hud291Main { grid-template-columns:96px 84px minmax(0,1fr); }
  #game .hud291 .speed { font-size:30px; }
  #game #steeringWheelHud { left:auto; right:10px; bottom:10px; opacity:.82; }
  #game #controls { right:8px; bottom:132px; }
}

/* Small location/time card mirrors the reference HUD's upper-left information block. */
#game #hudLocationCard291 {
  position:absolute; left:14px; top:88px; z-index:14; width:185px; pointer-events:none;
  overflow:hidden; border:1px solid rgba(201,217,226,.20); border-radius:5px;
  background:rgba(12,24,32,.90); box-shadow:0 8px 24px rgba(0,0,0,.24); backdrop-filter:blur(7px);
  color:#eef3f5;
}
#game .hudLoc291Row { min-height:34px; display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:4px; padding:0 10px; border-bottom:1px solid rgba(210,225,233,.13); font-size:10px; }
#game .hudLoc291Row:last-child { border-bottom:0; color:#ced8dc; }
#game #hudLocationTop291 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
#game .hudLoc291Pin { width:12px; height:12px; position:relative; }
#game .hudLoc291Pin:before { content:''; position:absolute; left:2px; top:0; width:7px; height:7px; border:2px solid #e6edf0; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
#game .hudLoc291Clock { width:11px; height:11px; border:1.5px solid #dce5e9; border-radius:50%; position:relative; box-sizing:border-box; }
#game .hudLoc291Clock:before { content:''; position:absolute; width:1px; height:3px; left:4px; top:1px; background:#dce5e9; }
#game .hudLoc291Clock:after { content:''; position:absolute; width:3px; height:1px; left:4px; top:4px; background:#dce5e9; transform-origin:left center; transform:rotate(25deg); }
@media(max-width:800px){#game #hudLocationCard291{left:8px;top:72px;width:170px;}}