.game-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--color-text);
  pointer-events: none;
}
.game-hud[hidden] { display: none; }
.game-hud__top,
.game-hud__bottom {
  position: absolute;
  left: 50%;
  width: min(100%, var(--game-canvas-width, 680px));
  transform: translateX(-50%);
}
/* Both bands make way for the board while previewing a rewind — the dialog
   itself already repeats the turn/instability info these bands would show,
   and the board needs the reclaimed space to move fully clear of the
   dialog panel (src/app/game-controller.ts pairs this with setHudBands(0, 0)
   so the canvas's own layout doesn't keep reserving the blank space too). */
.game-hud[data-rewind-preview="true"] .game-hud__top,
.game-hud[data-rewind-preview="true"] .game-hud__bottom { display: none; }
.game-hud__top {
  top: calc(50% - var(--game-canvas-height, 0px) / 2);
  height: 96px;
  padding: 10px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
/* Ration's mode card needs the summary pinned to the left of a two-column row
   and both columns flush with the grid edges. Every other mode keeps the
   long-standing centered top HUD. */
.game-hud[data-ration-mode="true"] .game-hud__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-right: max(16px, env(safe-area-inset-right), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
  padding-left: max(16px, env(safe-area-inset-left), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
}
.game-hud__bottom {
  top: calc(50% + var(--game-canvas-height, 0px) / 2 - 80px);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: max(16px, env(safe-area-inset-left), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
  padding-right: max(16px, env(safe-area-inset-right), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
}
.game-hud__top-grid {
  display: block;
  width: 100%;
  min-width: 0;
}
/* Ration only: two columns — the regular top-HUD summary on the left and the
   mode card (Ration's meters) on the right, both aligned to the grid edges. */
.game-hud[data-ration-mode="true"] .game-hud__top-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.game-hud__summary {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0;
  font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.game-hud[data-ration-mode="true"] .game-hud__summary {
  justify-items: start;
}
.game-hud__score { margin-bottom: 5px; font-size: 24px; line-height: 1.1; color: #ffffff; }
.game-hud[data-multiplayer="true"] .game-hud__score,
.game-hud[data-multiplayer="true"] .game-hud__records { visibility: hidden; }
.game-hud[data-multiplayer="true"] .game-hud__bottom {
  align-items: flex-start;
  padding-top: 6px;
}
.game-hud__records { margin-bottom: 3px; color: var(--color-accent); font-size: 11px; white-space: nowrap; }
.game-hud__level { margin-top: 7px; color: #a0aec0; white-space: nowrap; }
.game-hud__turns { display: grid; justify-items: center; gap: 7px; color: #a0aec0; white-space: nowrap; }
.game-hud__pips {
  display: grid;
  justify-items: start;
  width: var(--game-grid-width, 504px);
  max-width: min(var(--game-grid-width, 504px), calc(100vw - 32px));
  padding-inline: 1px;
}
/* Ration lays the summary out as the left column of a two-column row, so this
   grid-width pip strip can't sit in that column's flow. Pin it along the
   bottom of the top band instead, flush with the grid's left edge. Every
   other mode keeps it in flow under the turn label, centered by
   .game-hud__turns. */
.game-hud[data-ration-mode="true"] .game-hud__pips {
  position: absolute;
  left: max(16px, env(safe-area-inset-left), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
  bottom: 6px;
}
.game-hud__pip {
  flex: 0 0 auto;
  width: clamp(9px, calc(var(--game-grid-width, 504px) / 32), 16px);
  height: clamp(9px, calc(var(--game-grid-width, 504px) / 32), 16px);
  border: 1px solid #718096;
  border-radius: 50%;
}
.game-hud__pip--remaining { background: var(--color-text); border-color: var(--color-text); }
.game-hud__pip--placeholder { visibility: hidden; }
.game-hud__queue {
  display: grid;
  gap: 7px;
  width: min(190px, 44vw);
}
/* The enlarged "current" disc grew this cluster past the 80px bottom band,
   and the band's bottom edge is pinned to the canvas bottom (which is the
   footer's top edge), so the advanced-stats row ended up flush against the
   footer. The only slack is the empty entry-pad lane above the band
   (>= MIN_CELL_SIZE/2 + 8 = 28px tall), so anchor the cluster to the band
   top and lift it into that lane to restore separation from the footer.
   Multiplayer keeps its own band alignment and hides the advanced row. */
.game-hud:not([data-multiplayer="true"]) .game-hud__queue {
  align-self: start;
  margin-top: -14px;
}
.game-hud__discs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.game-hud__advanced {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(113, 128, 150, .35);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.game-hud__advanced[hidden] { display: none; }
.game-hud__advanced-metric { display: grid; gap: 2px; min-width: 0; }
.game-hud__advanced dt {
  overflow: hidden;
  color: #718096;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-hud__advanced dd {
  margin: 0;
  overflow: hidden;
  color: #b8c5d3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-hud__disc-slot { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.game-hud__disc-caption { text-transform: uppercase; }
.game-hud__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 50%;
  color: #fff;
  font: 700 12px system-ui, sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
/* The disc about to be played is the primary HUD cue. */
.game-hud__disc-slot--current .game-hud__disc {
  width: 46px;
  height: 46px;
  font-size: 22px;
}
.game-hud__disc[data-kind="numbered"][data-value="1"] { background: radial-gradient(circle at 35% 35%, rgb(255,165,149), #e74c3c); }
.game-hud__disc[data-kind="numbered"][data-value="2"] { background: radial-gradient(circle at 35% 35%, rgb(255,215,123), #e67e22); }
.game-hud__disc[data-kind="numbered"][data-value="3"] { background: radial-gradient(circle at 35% 35%, rgb(255,255,104), #f1c40f); }
.game-hud__disc[data-kind="numbered"][data-value="4"] { background: radial-gradient(circle at 35% 35%, rgb(135,255,202), #2ecc71); }
.game-hud__disc[data-kind="numbered"][data-value="5"] { background: radial-gradient(circle at 35% 35%, rgb(141,241,255), #3498db); }
.game-hud__disc[data-kind="numbered"][data-value="6"] { background: radial-gradient(circle at 35% 35%, rgb(244,178,255), #9b59b6); }
.game-hud__disc[data-kind="numbered"][data-value="7"] { background: radial-gradient(circle at 35% 35%, rgb(115,255,245), #1abc9c); }
.game-hud__disc[data-kind="single-cracked"],
.game-hud__disc[data-kind="double-cracked"] {
  background: radial-gradient(circle at 37.5% 37.5%, #4a5568, #2d3748);
}
.game-hud__disc-crack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.game-hud__disc-crack i {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: #e2e8f0;
  transform-origin: left center;
}
.game-hud__disc-crack--primary i:first-child { left: 40%; top: 22.5%; width: 24%; transform: rotate(69deg); }
.game-hud__disc-crack--primary i:last-child { left: 48.5%; top: 45%; width: 37.5%; transform: rotate(65deg); }
.game-hud__disc-crack--secondary i:first-child { left: 69%; top: 26%; width: 27%; transform: rotate(127deg); }
.game-hud__disc-crack--secondary i:last-child { left: 53%; top: 47.5%; width: 34.5%; transform: rotate(124deg); }
.game-hud__gravity {
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
  width: 48px;
  height: 48px;
}
.game-hud__gravity[hidden] { display: none; }
.game-hud__instability {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  /* Ration's card owns the right edge, so instability stays right there and on
     narrow screens everywhere; wide non-Ration layouts move it back to the
     left edge (see the wide-viewport media query below). */
  right: max(16px, env(safe-area-inset-right), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  border: 1px solid #a855f7;
  border-radius: 10px;
  padding: 5px 9px 4px;
  background: rgba(59, 29, 92, .88);
  color: #e9d5ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}
.game-hud__instability-value {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}
.game-hud__pressure {
  color: #d8b4fe;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .1em;
}
.game-hud__instability[hidden] { display: none; }
.game-hud__ration {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px 12px 7px;
  background: rgba(11, 32, 52, .92);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.game-hud__ration[hidden] { display: none; }
.game-hud__ration-meter {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.game-hud__ration-label {
  grid-column: 1;
  color: #718096;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
.game-hud__ration-value {
  grid-column: 2;
  overflow: hidden;
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.game-hud__ration-track {
  grid-column: 1 / -1;
  position: relative;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(113, 128, 150, .3);
}
.game-hud__ration-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: rgba(129, 230, 179, .3);
}
.game-hud__ration-marker {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 50%;
  background: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%);
}
.game-hud__ration[data-status="under"] .game-hud__ration-meter--balance .game-hud__ration-marker { background: #38bdf8; }
.game-hud__ration[data-status="balanced"] .game-hud__ration-meter--balance .game-hud__ration-marker { background: #34d399; }
.game-hud__ration[data-status="over"] .game-hud__ration-meter--balance .game-hud__ration-marker { background: #fb7185; }
.game-hud__ration[data-status="over"] .game-hud__ration-meter--balance .game-hud__ration-value { color: #fda4af; }
.game-hud__ration[data-status="balanced"] .game-hud__ration-meter--balance .game-hud__ration-value { color: #6ee7b7; }
.game-hud__entropy-pips {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
  margin-top: 5px;
}
.game-hud__entropy-pip {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  background: rgba(113, 128, 150, .4);
}
.game-hud__entropy-pip--filled { background: #fb7185; }
.game-hud__ration--recovered { animation: ration-recovered 600ms ease-out; }
.game-hud__ration--imbalanced { animation: ration-imbalanced 600ms ease-out; }
@keyframes ration-recovered {
  0% { border-color: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  100% { border-color: var(--color-border); box-shadow: 0 0 0 14px rgba(52, 211, 153, 0); }
}
@keyframes ration-imbalanced {
  0% { border-color: #fb7185; box-shadow: 0 0 0 0 rgba(251, 113, 133, .6); }
  100% { border-color: var(--color-border); box-shadow: 0 0 0 14px rgba(251, 113, 133, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .game-hud__ration--recovered,
  .game-hud__ration--imbalanced { animation: none; }
  .game-hud__ration--recovered { border-color: #34d399; }
  .game-hud__ration--imbalanced { border-color: #fb7185; }
}
.multiplayer-hud {
  position: absolute;
  top: calc(50% - var(--game-canvas-height, 0px) / 2 + 5px);
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: rgba(16, 42, 67, .94);
  color: #d9e2ec;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  pointer-events: none;
  transform: translateX(-50%);
}
.multiplayer-hud__metric {
  display: grid;
  flex: 0 1 auto;
  gap: 3px;
  min-width: 0;
  padding: 3px 12px;
}
.multiplayer-hud__metric:first-child { padding-left: 0; }
.multiplayer-hud__metric + .multiplayer-hud__metric {
  border-left: 1px solid rgba(159, 179, 200, .3);
}
/* Shrink priority when the row is too wide for the viewport: the match
   title gives up space first (it's the most decorative/duplicative
   string), scores shrink moderately, and the clock never shrinks — the
   timer must stay fully legible. */
.multiplayer-hud__match { flex-shrink: 3; }
.multiplayer-hud__local,
.multiplayer-hud__opponent { flex-shrink: 1; }
.multiplayer-hud__clock { flex-shrink: 0; }
.multiplayer-hud__label {
  min-width: 0;
  overflow: hidden;
  color: #829ab1;
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Whose-turn indicator: a dot on the active player's own metric, not a
   separate "YOUR TURN"/"OPPONENT'S TURN" text field — a text field there
   forced the whole HUD to resize every time the turn (and therefore the
   field's text length) flipped. The dot is decorative; .multiplayer-hud__turn-sr
   carries the equivalent text for screen readers. */
.multiplayer-hud__turn-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: transparent;
  vertical-align: middle;
}
.multiplayer-hud__turn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.multiplayer-hud[data-turn="mine"] .multiplayer-hud__local {
  background: rgba(129, 230, 179, .24);
}
.multiplayer-hud[data-turn="mine"] .multiplayer-hud__local .multiplayer-hud__turn-dot {
  background: #81e6b3;
  box-shadow: 0 0 4px #81e6b3;
}
.multiplayer-hud[data-turn="opponent"] .multiplayer-hud__opponent {
  background: rgba(246, 173, 85, .24);
}
.multiplayer-hud[data-turn="opponent"] .multiplayer-hud__opponent .multiplayer-hud__turn-dot {
  background: #f6ad55;
  box-shadow: 0 0 4px #f6ad55;
}
.multiplayer-hud__status {
  min-width: 0;
  overflow: hidden;
  color: #81e6b3;
  font-size: 14px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiplayer-hud__local-value,
.multiplayer-hud__opponent-value {
  min-width: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiplayer-hud__local-value { color: var(--color-text); }
.multiplayer-hud__opponent-value { color: #f6ad55; }
.multiplayer-hud__timer {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: 19px;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
}
.multiplayer-hud__ping { flex-shrink: 0; }
.multiplayer-hud__ping-value {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.multiplayer-hud__ping-value[data-stale="true"] { color: #f6ad55; }
.multiplayer-hud__result {
  flex: 0 1 auto;
  color: #81e6b3;
  font-size: 18px;
  white-space: nowrap;
}
.multiplayer-hud__result[hidden] { display: none; }
.multiplayer-hud[data-result="true"] .multiplayer-hud__metric { display: none; }
.game-hud__instability--pressured {
  border-color: #d8b4fe;
  box-shadow: 0 0 12px rgba(168, 85, 247, .28);
}
.game-hud__instability--pressured .game-hud__pressure { color: #f3e8ff; }
.game-hud__instability--critical {
  border-color: #f472b6;
  color: #fbcfe8;
  box-shadow: 0 0 14px rgba(244, 114, 182, .4);
}
.game-hud__instability--critical .game-hud__pressure { color: #f9a8d4; }
.game-hud__gravity-dial { display: block; width: 100%; height: 100%; overflow: visible; }
.game-hud__gravity-attention-ring { opacity: 0; }
.game-hud__gravity--attention .game-hud__gravity-attention-ring {
  opacity: 1;
  animation: gravity-attention-ring 1s ease-in-out infinite;
}
@keyframes gravity-attention-ring {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
.game-hud__gravity-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.game-hud__status {
  display: grid;
  justify-items: end;
  gap: 4px;
  max-width: 58%;
  min-width: 0;
  flex: 0 1 auto;
  text-align: right;
}
.game-hud[data-stack-mode="true"] .game-hud__status {
  align-self: flex-start;
  padding-top: 2px;
}
@media (min-width: 721px) and (pointer: fine) {
  .game-hud[data-rewind-mode="true"] .game-hud__status { max-width: 70%; }
  .game-hud:not([data-ration-mode="true"]) .game-hud__instability {
    right: auto;
    left: max(16px, env(safe-area-inset-left), calc((var(--game-canvas-width, 680px) - var(--game-grid-width, 504px)) / 2));
  }
}
.game-hud__stack-receipt {
  display: grid;
  justify-items: end;
  gap: 1px;
  color: #ffd700;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.25;
}
.game-hud__stack-receipt-breakdown { color: #cbd5e1; }
.game-hud__stack-receipt[hidden] { display: none; }
.game-hud__hint { color: #a0aec0; font-size: 10px; text-align: right; }
.game-hud__hint--controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 12px;
}
.game-hud__hint-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: #94a3b8;
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.game-hud__hint-action kbd {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid var(--color-border);
  border-bottom-color: #243b53;
  border-radius: 4px;
  background: rgba(11, 32, 52, .9);
  box-shadow: 0 1px 0 #071523;
  color: #e2e8f0;
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  text-transform: none;
}
.game-hud__hint--attention {
  color: #9ecdf0;
  animation: hint-attention 1s ease-in-out infinite;
}
.game-hud__hint--ready {
  color: #81e6b3;
  font-weight: 700;
}
@keyframes hint-attention {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .game-hud__hint--attention,
  .game-hud__gravity--attention .game-hud__gravity-attention-ring {
    animation: none;
  }
  .game-hud__gravity--attention .game-hud__gravity-attention-ring { opacity: 0.7; }
}
@media (max-width: 720px), (pointer: coarse) {
  .game-hud__summary {
    font-size: 12px;
    min-width: 0;
  }
  .game-hud__score {
    font-size: 22px;
  }
  .game-hud__status { max-width: 58%; }
  .game-hud__top-grid { gap: 10px; }
  .game-hud[data-ration-mode="true"] .game-hud__records {
    max-width: 32vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .game-hud__ration { gap: 10px; padding: 4px 8px 5px; border-radius: 8px; }
  .game-hud__ration-label { font-size: 7px; }
  .game-hud__ration-value { font-size: 11px; }
  .game-hud__ration-track { height: 6px; }
  .game-hud__ration-meter { column-gap: 6px; }
  .game-hud__entropy-pip { height: 6px; }
  .multiplayer-hud { padding: 4px 8px; }
  .multiplayer-hud__metric { padding: 0 8px; }
  .multiplayer-hud__label { font-size: 8px; }
  .multiplayer-hud__status { font-size: 12px; }
  .multiplayer-hud__local-value,
  .multiplayer-hud__opponent-value { font-size: 16px; }
  .multiplayer-hud__timer { font-size: 15px; }
}
@media (max-width: 420px) {
  .game-hud__top { height: 96px; }
  .game-hud__bottom { height: 80px; }
  .game-hud__disc { width: 20px; height: 20px; font-size: 11px; }
  .game-hud__disc-slot--current .game-hud__disc { width: 40px; height: 40px; font-size: 19px; }
  .game-hud__disc-slot { gap: 4px; font-size: 9px; }
  .game-hud__status { max-width: 54%; }
  .game-hud__hint,
  .game-hud__stack-receipt { font-size: 9px; }
  .game-hud__gravity { width: 40px; height: 40px; }
  .game-hud__instability {
    top: max(6px, env(safe-area-inset-top));
    gap: 0;
    padding: 3px 6px 2px;
    border-radius: 8px;
  }
  .game-hud__instability-value { font-size: 8px; }
  .game-hud__pressure { font-size: 6px; }
  .game-hud__ration-label { display: none; }
  .multiplayer-hud {
    max-width: calc(100% - 16px);
    padding: 3px 6px;
  }
  .multiplayer-hud__metric { padding: 0 6px; }
  .multiplayer-hud__mode-label { display: none; }
  .multiplayer-hud__status { font-size: 11px; }
  .multiplayer-hud__local-value,
  .multiplayer-hud__opponent-value { font-size: 14px; }
  .multiplayer-hud__timer { font-size: 13px; }
}