/* ============================================
   Mobile Responsive Overrides
   ============================================ */

/* Sidebar toggle — hidden on desktop */
.sidebar-toggle {
  display: none;
}

/* ---- Global mobile fixes ---- */
@media (max-width: 767px) {

  /* Nav — compact */
  .nav__logo-text {
    font-size: var(--text-sm) !important;
  }

  .nav__actions {
    gap: var(--space-1);
  }

  .nav__actions .btn--icon {
    padding: var(--space-1);
  }

  .nav__actions .btn--ghost.btn--sm {
    padding: var(--space-1) var(--space-2);
    font-size: 10px;
  }

  /* Player HUD — avatar only on mobile */
  .player-hud__info {
    display: none !important;
  }

  .player-hud__avatar {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  /* Container — tighter padding */
  .container {
    padding: 0 var(--space-3);
  }

  /* ---- Carousel ---- */
  .carousel {
    border-radius: var(--radius-lg);
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
    border-radius: 0;
  }

  .carousel__image {
    aspect-ratio: 16 / 10;
  }

  .carousel__content {
    padding: var(--space-3);
  }

  .carousel__title {
    font-size: var(--text-xl);
  }

  .carousel__desc {
    font-size: var(--text-xs);
    -webkit-line-clamp: 1;
  }

  .carousel__content .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }

  .carousel__dots {
    bottom: var(--space-2);
    right: var(--space-3);
  }

  /* ---- Game Grid — tighter ---- */
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .game-card__content {
    padding: var(--space-2);
  }

  .game-card__title {
    font-size: var(--text-xs);
  }

  .game-card__meta {
    font-size: 10px;
  }

  .game-card--featured {
    grid-column: span 2;
  }

  .game-card--featured .game-card__title {
    font-size: var(--text-base);
  }

  /* ---- Section ---- */
  .section {
    padding: var(--space-6) 0;
  }

  .section__title {
    font-size: var(--text-xl);
  }

  .section__link {
    font-size: var(--text-xs);
  }

  /* ---- Filter Bar ---- */
  .filter-bar {
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .filter-pill {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }

  /* ---- Quick Play ---- */
  .quick-play {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .quick-play__title {
    font-size: var(--text-xl);
  }

  .quick-play__text {
    font-size: var(--text-xs);
  }

  /* ---- Game Page ---- */
  .game-page {
    padding: var(--space-2);
  }

  .game-shell {
    border-radius: var(--radius-md);
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    border-radius: 0;
  }

  .game-shell__container {
    aspect-ratio: 4 / 3;
  }

  body[data-game="maze-muncher"] .game-shell__container {
    aspect-ratio: 1 / 1;
  }

  body[data-game="maze-muncher"] .game-hud {
    align-items: flex-start;
    padding: var(--space-2);
    gap: var(--space-1);
  }

  body[data-game="maze-muncher"] .game-hud > div:first-child {
    gap: var(--space-1) !important;
  }

  body[data-game="maze-muncher"] .game-hud__score,
  body[data-game="maze-muncher"] .game-hud__level,
  body[data-game="maze-muncher"] .game-hud__lives {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
  }

  body[data-game="maze-muncher"] .game-hud__score-label {
    font-size: 10px;
  }

  body[data-game="maze-muncher"] .game-hud__score-value {
    font-size: var(--text-base);
  }

  body[data-game="maze-muncher"] .game-hud__lives {
    font-size: 12px;
    letter-spacing: -2px;
  }

  .game-toolbar {
    border-radius: 0;
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    padding: var(--space-2);
  }

  .game-toolbar__title {
    font-size: var(--text-xs);
  }

  /* Sidebar — sticky bottom drawer on mobile */
  .game-page__sidebar {
    display: block !important;
    width: 100% !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    max-height: 45vh;
    overflow-y: auto;
    transform: translateY(calc(100% - 44px));
    transition: transform var(--transition-normal);
  }

  .game-page__sidebar.is-expanded {
    transform: translateY(0);
  }

  /* Sidebar toggle tab */
  .sidebar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 44px;
    width: 100%;
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .sidebar-toggle .icon {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
  }

  .game-page__sidebar.is-expanded .sidebar-toggle .icon {
    transform: rotate(180deg);
  }

  .game-page__sidebar .card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 0 !important;
  }

  /* Add bottom padding to main so content isn't hidden behind drawer */
  .game-page__main {
    padding-bottom: 52px;
  }

  /* Hide sidebar ad on mobile */
  .game-page__sidebar .ad-zone--rectangle {
    display: none;
  }

  /* Ad zones — smaller on mobile */
  .ad-zone--banner {
    min-height: 50px;
    font-size: 10px;
    margin: var(--space-2) 0;
  }

  .ad-zone--rectangle {
    width: 100%;
    min-height: 100px;
  }

  /* Game info */
  .game-info__title {
    font-size: var(--text-xl);
  }

  .game-info__desc {
    font-size: var(--text-xs);
  }

  .game-info__controls {
    padding: var(--space-3);
  }

  .game-info__control-row {
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
  }

  /* Similar games scroll */
  .game-card--small {
    width: 130px;
  }

  /* ---- Categories Page ---- */
  .category-header__title {
    font-size: var(--text-2xl);
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .category-tile {
    padding: var(--space-4);
  }

  .category-tile__icon {
    width: 40px;
    height: 40px;
  }

  .category-tile__name {
    font-size: var(--text-sm);
  }

  /* ---- Profile ---- */
  .profile-card {
    padding: var(--space-6) var(--space-4);
  }

  .profile-card__avatar {
    width: 64px;
    height: 64px;
    font-size: var(--text-xl);
  }

  .profile-card__name {
    font-size: var(--text-xl);
  }

  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .profile-stat {
    padding: var(--space-3);
  }

  .profile-stat__value {
    font-size: var(--text-xl);
  }

  /* ---- Leaderboard ---- */
  .leaderboard-page__title {
    font-size: var(--text-2xl);
  }

  .leaderboard-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .leaderboard-filters__game {
    max-width: 100%;
  }

  .tabs--pills {
    width: 100%;
    justify-content: center;
  }

  .podium__item:nth-child(1) .podium__avatar {
    width: 48px;
    height: 48px;
    font-size: var(--text-base);
  }

  .podium__avatar {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }

  .podium__name {
    font-size: var(--text-xs);
  }

  .podium__bar {
    display: none;
  }

  /* ---- Premium ---- */
  .premium-hero {
    padding: var(--space-8) var(--space-3);
  }

  .premium-hero__title {
    font-size: var(--text-2xl);
  }

  .premium-hero__subtitle {
    font-size: var(--text-sm);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: var(--space-4);
  }

  .pricing-card {
    padding: var(--space-6) var(--space-4);
  }

  .diamond-packs__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .diamond-pack {
    padding: var(--space-3);
  }

  .diamond-pack__amount {
    font-size: var(--text-lg);
  }

  /* ---- Footer ---- */
  .footer {
    padding: var(--space-8) 0 var(--space-4);
    margin-top: var(--space-8);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer__brand-desc {
    font-size: var(--text-xs);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  /* ---- Game Over overlay — mobile friendly ---- */
  .game-over__card {
    padding: var(--space-5) var(--space-4);
    width: min(340px, 95%);
  }

  .game-over__title {
    font-size: var(--text-xl);
  }

  .game-over__score-value {
    font-size: var(--text-4xl);
  }

  .game-over__stats {
    gap: var(--space-4);
  }

  /* ---- Game HUD — mobile adjustments ---- */
  .game-hud {
    padding: var(--space-2);
  }

  .game-hud__score {
    padding: var(--space-1) var(--space-2);
  }

  .game-hud__score-value {
    font-size: var(--text-base);
  }

  body[data-game="word-trail"] .game-hud {
    padding: 6px;
  }

  body[data-game="word-trail"] .game-hud > div:first-child {
    gap: 5px !important;
    flex-wrap: nowrap !important;
    max-width: calc(100% - 42px);
  }

  body[data-game="word-trail"] .game-hud__score,
  body[data-game="word-trail"] .game-hud__level,
  body[data-game="word-trail"] .game-hud__lives {
    padding: 6px 8px;
    min-height: 34px;
    font-size: 11px;
    white-space: nowrap;
  }

  body[data-game="word-trail"] .game-hud__score-value {
    font-size: 14px;
  }

  body[data-game="crystal-orbit"] .game-hud {
    padding: 6px;
  }

  body[data-game="crystal-orbit"] .game-hud > div:first-child {
    gap: 5px !important;
    max-width: calc(100% - 42px);
  }

  body[data-game="crystal-orbit"] .game-hud__score,
  body[data-game="crystal-orbit"] .game-hud__level,
  body[data-game="crystal-orbit"] .game-hud__lives {
    padding: 6px 8px;
    min-height: 34px;
    font-size: 11px;
    white-space: nowrap;
  }

  body[data-game="crystal-orbit"] #hud-orbit {
    letter-spacing: 0;
  }

  /* ---- D-pad — bigger for touch ---- */
  .dpad {
    width: 130px;
    height: 130px;
  }

  .dpad__btn {
    width: 44px;
    height: 44px;
  }
}

/* ---- Extra small phones (< 380px) ---- */
@media (max-width: 379px) {
  .game-grid {
    grid-template-columns: 1fr;
  }

  .diamond-packs__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .nav__logo-text {
    display: none !important;
  }
}