/* ==========================================================================
   EXAM ARENA HUD - SMALL SCREEN / MOBILE RESPONSIVE MEDIA QUERY
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* 1. Expand top bar container to capture full screen width */
  .exam-arena-hud {
    padding: 4px 6px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Seamless edge-to-edge glass bar layout */
  .header-exam-hud {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 3. High-density responsive capsules with multi-line text prevention */
  .hud-item {
    display: flex !important;
    flex-direction: column !important; /* Retains label on 1st line, value on 2nd line */
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0% !important;
    min-width: 0 !important; /* Prevents overflow pushing components off-screen */
    padding: 6px 2px !important;
    border-radius: 10px !important;
    white-space: nowrap !important; /* Prevents text breaking into multi-line */
    overflow: hidden !important;
  }

  /* 4. Scaled typography for global device accessibility */
  .hud-label,
  .hud-item > span:first-child {
    font-size: clamp(0.52rem, 2.2vw, 0.7rem) !important;
    letter-spacing: 0.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important; /* Strict single line enforcement */
  }

  .hud-val {
    font-size: clamp(0.85rem, 3.5vw, 1.1rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Strict single line enforcement */
  }
}