/* Diagnostics, no-script state, and responsive rules. */
    .performance-monitor {
      position: fixed;
      top: 8px;
      right: 8px;
      z-index: 70;
      font-size: 0.56rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 10px;
      border: 1px solid rgba(0,255,157,0.25);
      background: rgba(0,0,0,0.6);
      padding: 6px 8px;
      display: none;
    }

    .noscript-warning {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      color: #fff;
      padding: 16px;
      text-align: center;
    }

    /* Mobile clutter fix: the same score/combo/HP/ATK info was showing
       up to 4 times at once (verbose header row, HP/ATK bars, hearts
       row, and the compact in-game overlay HUD), eating vertical space
       and pushing the actual game canvas into a cramped area. Keep only
       the compact overlay HUD on small screens.
       - .arcade-shell-header is the "real" accessible content for screen
         readers (not aria-hidden), so it's made visually-hidden rather
         than display:none, preserving screen reader access while
         removing it from the visual layout.
       - .hp-track/.atk-track/.hp-hearts are already aria-hidden="true"
         (purely decorative), so hiding them outright loses nothing. */
    @media (max-width: 640px) {
      .arcade-shell-header {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        margin: 0;
        padding: 0;
        border: 0;
      }
      .hp-track, .atk-track, .hp-hearts {
        display: none;
      }

      /* Keep the site-wide cookie settings button away from the contained
         bottom gameplay tray on narrow screens. */
      #cookieSettingsBtn {
        bottom: auto !important;
        top: 10px !important;
        right: 10px !important;
      }
    }