/*
 * Correzioni HUD per i giochi Canvas originali precedenti ai moduli condivisi.
 * Mantiene punteggio e record leggibili senza coprire l'area centrale in verticale.
 */
@media (max-width: 520px) and (orientation: portrait) {
  html,
  body {
    min-width: 0 !important;
  }

  .game-shell > .hud {
    inset: max(5px, env(safe-area-inset-top)) 5px auto !important;
    z-index: 20 !important;
    display: flex !important;
    max-height: 52px;
    align-items: flex-start !important;
    gap: 4px !important;
    overflow: visible;
  }

  .game-shell > .hud .hud-group {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    min-width: 0;
    max-width: none !important;
    overflow: visible;
  }

  .game-shell > .hud .hud-pill,
  .game-shell > .hud > p {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 7px !important;
    line-height: 1.15;
    letter-spacing: .035em !important;
    white-space: nowrap;
    backdrop-filter: blur(5px) !important;
  }

  .game-shell > .hud .hud-pill strong,
  .game-shell > .hud > p strong {
    display: inline-block;
    max-width: none !important;
    overflow: visible !important;
    margin-left: 2px !important;
    font-size: 9px !important;
    font-variant-numeric: tabular-nums;
    text-overflow: clip !important;
    white-space: nowrap;
  }

  .game-shell > .hud > :not(.hud-group):not(p) {
    flex: 0 1 30vw;
    width: min(30vw, 108px) !important;
    max-height: 43px;
    min-width: 0;
    overflow: hidden;
    padding: 5px 7px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    backdrop-filter: blur(5px) !important;
  }

  .game-shell > .hud > :not(.hud-group):not(p) p,
  .game-shell > .hud > :not(.hud-group):not(p) span,
  .game-shell > .hud > :not(.hud-group):not(p) strong {
    font-size: 7px !important;
    line-height: 1.15;
  }

  .game-shell > .hud > :not(.hud-group):not(p) .progress,
  .game-shell > .hud > :not(.hud-group):not(p) [class*="meter"],
  .game-shell > .hud > :not(.hud-group):not(p) [class*="bar"] {
    max-height: 4px;
    margin-block: 3px !important;
  }

  .game-shell > .overlay,
  .game-shell > [class*="overlay"] {
    padding-top: max(62px, calc(env(safe-area-inset-top) + 52px)) !important;
  }
}

@media (max-width: 350px) and (orientation: portrait) {
  .game-shell > .hud .hud-pill,
  .game-shell > .hud > p {
    padding-inline: 4px !important;
    font-size: 6px !important;
  }

  .game-shell > .hud > :not(.hud-group):not(p) {
    flex-basis: 27vw;
    width: 27vw !important;
  }
}