/* Mobile home layout/performance pass v2.
   Loaded after the legacy inline home styles so these rules only refine phones. */
@media (max-width: 600px) {
  .home-v2 {
    top: max(6px, env(safe-area-inset-top));
    width: min(94vw, 430px);
    padding: 7px 10px;
    border-radius: 16px;
  }

  .home-v2__top { gap: 8px; }
  .home-v2__identity { gap: 7px; }
  .home-v2__avatar { font-size: 19px; }
  .home-v2__identity strong { font-size: .8rem; }
  .home-v2__identity small { font-size: .68rem; margin-top: 0; }
  .home-v2__level { font-size: .68rem; padding: 4px 7px; }
  .home-v2__track { height: 6px; margin-top: 6px; }
  .home-v2__caption { margin-top: 4px; gap: 8px; font-size: .61rem; }

  /* The old 150px tiles were too large on ~360-430px phones and caused the
     locked cards to dominate the screen. Keep the same artwork and positions,
     but render a compact touch-friendly size. */
  .game-card__img-wrap {
    width: clamp(106px, 29vw, 124px);
    height: clamp(106px, 29vw, 124px);
    border-radius: 18px;
  }

  .game-card__lock-overlay {
    border-radius: 15px;
    font-size: 2.35rem;
    backdrop-filter: blur(2px);
  }

  .game-card__stars { font-size: 1.05rem; margin-top: 0; }
  .game-card__recommendation {
    top: 5px;
    right: 5px;
    padding: 4px 7px;
    font-size: .63rem;
  }

  /* Leave the compact progress card clear at the top and keep all five games
     inside the useful viewport without covering the bottom controls. */
  .game-puzzle      { top: 27%; left: 31%; }
  .game-differences { top: 27%; left: 69%; }
  .game-shadow      { top: 47%; left: 31%; }
  .game-shapes      { top: 47%; left: 69%; }
  .game-counting    { top: 68%; left: 50%; }

  /* Bottom controls are two separate rows: progress above, actions below. */
  #global-progress-bar {
    bottom: 64px;
    width: min(94vw, 430px);
    min-height: 46px;
    padding: 6px 12px;
    gap: 4px 6px;
    border-radius: 22px;
    font-size: .72rem;
  }

  #global-progress-bar span {
    min-height: 24px;
    padding: 2px 7px;
  }

  .rewards-link {
    right: 12px;
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 22px;
    font-size: .9rem;
  }

  .parent-area {
    left: 12px;
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .parent-area__toggle {
    height: 44px;
    min-width: 44px;
    padding: 0 10px;
    font-size: .78rem;
  }

  #badge-toast { bottom: 118px; }
}

@media (max-width: 380px) {
  .game-card__img-wrap {
    width: 104px;
    height: 104px;
  }

  .game-puzzle      { left: 30%; }
  .game-differences { left: 70%; }
  .game-shadow      { left: 30%; }
  .game-shapes      { left: 70%; }
}

@media (orientation: landscape) and (max-height: 500px) {
  #global-progress-bar { bottom: 6px; }
  .rewards-link { bottom: 6px; }
}