/* Generated metal rims have real alpha openings. They frame live text and
   gauge values while letting the moving highway show through the HUD. */
#hud { display:grid;grid-template-columns:minmax(0,1fr) clamp(76px,22cqw,88px);grid-template-rows:38px 52px;
  column-gap:10px;row-gap:0;align-items:center;background:transparent;border:0;box-shadow:none;pointer-events:none; }
#hud .hud-main,#hud .hud-bottom { display:contents; }
#hud .track-h { grid-column:1;grid-row:1;min-width:0;height:32px;justify-content:center;align-self:center;
  padding:0 8%;background:url("assets/hud-title.webp") center/100% 100% no-repeat; }
#hud .track-h strong { --hud-title-size:17px;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--hud-title-size);line-height:22px;font-weight:760;letter-spacing:0;color:#ffe7b0;
  text-shadow:0 1px 0 #604a25,0 2px 3px #000,0 0 7px #000; }
#hud .mode-badge { grid-column:2;grid-row:2;justify-self:end;align-self:start;margin:0;padding:0;border:0;background:none;gap:4px;font-size:8px;line-height:11px; }
#hud .mode-badge .mini-bars { display:none; }
#hud .score-h { grid-column:2;grid-row:2;align-self:end;margin-bottom:6px; }
#hud .score-h { text-shadow:0 2px 4px #000,0 0 9px #000; }
#hud .score-h small { color:#decba9;font-size:7px;line-height:9px; }
#hud .score-h b { color:#fff2cd;letter-spacing:.015em;font-size:20px;line-height:23px; }
#hud .mode-badge { color:#ebd2a3;text-shadow:0 1px 3px #000,0 0 7px #000; }
#hud .gauge-wrap { grid-column:1;grid-row:2;width:100%;max-width:none;height:52px;padding:0;align-self:start; }
#hud .gauge-text { height:13px;padding:0 8%;align-items:start; }
#hud .gauge-text small { color:#e5d6b8;text-shadow:0 1px 3px #000;letter-spacing:.06em;font-size:8px;line-height:12px;font-weight:700; }
#hud .gauge-text b { color:#e9fff5;text-shadow:0 1px 3px #000,0 0 7px #6febc966;font-size:12px;line-height:12px;font-weight:800;font-variant-numeric:tabular-nums; }
#hud .gauge-housing { position:relative;height:32px;margin:0;background:url("assets/hud-gauge.webp") center/100% 100% no-repeat; }
#hud .gauge { position:absolute;left:8%;top:25%;width:84%;height:50%;margin:0;border-radius:7px;background:#091b2659;
  box-shadow:inset 0 2px 4px #0008;overflow:visible; }
#hud .gauge i { background:linear-gradient(#e8ffef 0%,#79f5d4 22%,#28b59e 52%,#2ed5bb 75%,#a9ffe2 100%);
  box-shadow:inset 0 1px 1px #f5fff8aa,0 0 5px #4cecc25e; }
#hud .gauge span { height:calc(100% + 4px);top:-2px;width:2px;background:#ffe3a2;box-shadow:0 0 4px #000; }
#hud .gauge-target { left:66.8%;bottom:0;font-size:7px;line-height:8px;color:#ffe4a5;text-shadow:0 1px 3px #000; }
#hud #pause { grid-column:2;grid-row:1;justify-self:end;width:44px;height:44px;pointer-events:auto; }
#hud #pause:before { border-color:#dfc28c99;background:#08192324;box-shadow:inset 0 1px 1px #fff3c93b,0 2px 7px #0003; }
#hud #pause i { background:#ffedc9; }
.landscape #hud { grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(66px,10.4cqw,88px) 40px;
  grid-template-rows:52px;gap:8px;background:transparent;box-shadow:none;border:0; }
.landscape #hud .track-h { grid-column:1;grid-row:1;align-self:start;margin-top:13px; }
.landscape #hud .track-h strong,.landscape.jp-song #hud .track-h strong { --hud-title-size:15px;font-size:var(--hud-title-size);line-height:22px;letter-spacing:0; }
.landscape #hud .mode-badge { grid-column:1;grid-row:1;align-self:start;justify-self:start;margin-left:8%;font-size:8px;line-height:12px; }
.landscape #hud .gauge-wrap { grid-column:2;grid-row:1; }
.landscape #hud .score-h b { font-size:17px;letter-spacing:.015em; }
.landscape #hud .score-h { grid-column:3;grid-row:1;align-self:start;flex-direction:column;align-items:flex-end;gap:1px;padding-top:1px;margin:0; }
.landscape #hud .score-h small { font-size:7px;line-height:11px; }
.landscape #hud #pause { grid-column:4;grid-row:1; }
.landscape #hud #combo { margin-bottom:4px; }
.landscape #hud #fever-banner { margin:0 0 0 8%;line-height:12px; }
.landscape #judgement { position:absolute;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;
  font-size:clamp(17px,2.4cqw,22px);line-height:1.1;letter-spacing:.08em;font-weight:800;
  text-shadow:0 2px 2px #000,0 0 7px #06121a,0 0 13px #06121a; }
.landscape #judgement small { display:none; }
.fever-on #hud .gauge i { background:linear-gradient(90deg,#ff82ba,#ffc665,#fff3a8,#75f6de); }
.in-danger #hud .gauge i { background:linear-gradient(#ffe7d0,#ff7a87 28%,#b6335d 70%,#ff9aa9);box-shadow:0 0 6px #ed526c88; }