#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

.slip-dark { background: rgba(19,29,24,.93); color: var(--paper-light); box-shadow: 5px 6px 0 rgba(10,16,13,.26); }

.hud-clock { position: absolute; top: 18px; left: 18px; min-width: 168px; padding: 10px 13px; border-left: 5px solid var(--dispatch); }
.hud-clock > span { display: block; font-size: 24px; font-weight: 850; letter-spacing: -.04em; }
.hud-clock small { display: block; margin-top: 1px; color: #b6c0b9; font-size: 9px; font-weight: 800; letter-spacing: .09em; }

.dispatch-slip { color: var(--ink); background: var(--paper-light); box-shadow: 6px 7px 0 rgba(11,17,14,.3); }
.hud-job { position: absolute; top: 18px; left: 204px; width: 226px; min-height: 126px; padding: 12px 14px 13px; border-top: 5px solid var(--route); }
.hud-job .eyebrow { margin: 0 0 3px; font-size: 8px; }
.hud-job > strong { display: block; overflow: hidden; font-size: 18px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.hud-job-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 7px; font-size: 11px; font-weight: 750; }
.hud-job-row time { color: var(--route); font-size: 17px; font-weight: 900; }
.package-tag { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--ink); color: var(--paper-light); font-size: 8px; font-weight: 900; letter-spacing: .13em; }

.hud-right { position: absolute; top: 18px; right: 18px; display: grid; grid-template-columns: 92px 178px; gap: 8px; }
.speed-box { grid-row: 1 / span 2; display: flex; height: 84px; flex-direction: column; align-items: center; justify-content: center; }
.speed-box strong { font-size: 39px; line-height: .86; font-variant-numeric: tabular-nums; }
.speed-box span { margin-top: 6px; color: #a7b3ab; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.boost-box { height: 42px; padding: 7px 10px; }
.boost-box > span { display: block; margin-bottom: 5px; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.meter { height: 8px; overflow: hidden; background: #39423d; }
.meter i { display: block; width: 75%; height: 100%; background: var(--dispatch); transition: width .08s linear; }
.money-box { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 4px 9px; background: var(--paper-light); box-shadow: 5px 5px 0 rgba(12,18,15,.25); }
.money-box span { font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.money-box strong { font-size: 17px; }

.objective-strip { position: absolute; top: 154px; left: 18px; display: grid; min-width: 265px; grid-template-columns: 38px 1fr; grid-template-rows: 1fr 1fr; column-gap: 10px; padding: 7px 12px 7px 7px; background: rgba(244,239,222,.94); box-shadow: 5px 5px 0 rgba(14,21,17,.24); }
.objective-strip > span { grid-row: 1 / span 2; display: grid; place-items: center; background: var(--route); color: #fff; font-size: 15px; font-weight: 900; }
.objective-strip strong { font-size: 11px; align-self: end; }
.objective-strip small { color: var(--muted-ink); font-size: 9px; font-weight: 700; }

.cargo-condition { position: absolute; top: 203px; left: 18px; display: grid; width: 240px; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; background: rgba(19,29,24,.93); color: var(--paper-light); }
.cargo-condition span { font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.cargo-condition div { height: 6px; background: #48524c; }
.cargo-condition i { display: block; width: 100%; height: 100%; background: #69b780; }
.cargo-condition b { font-size: 10px; }

.combo { position: absolute; right: 20px; top: 120px; color: var(--paper-light); text-align: right; text-shadow: 2px 2px 0 var(--ink); }
.combo strong { display: block; color: var(--dispatch); font-size: 40px; line-height: .9; }
.combo span { font-size: 9px; font-weight: 900; letter-spacing: .18em; }