/**
 * PLAYZONE ARCADE — Responsive Breakpoints & Mobile Optimization
 * Mobile-First adaptation for Android, iPhone, Tablet, Laptop & Desktop.
 * Strict horizontal overflow lockdown for 100% responsive fluid mobile layout.
 */

/* ------------------------------------------------------------------------- */
/* 1. TABLET & LAPTOP ADAPTATION (<= 1080px)                                  */
/* ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .pz-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .lb-hero-banner {
    grid-template-columns: 1fr;
  }

  .lb-content-grid {
    grid-template-columns: 1fr;
  }

  .pz-hud-bar {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* ------------------------------------------------------------------------- */
/* 2. MOBILE ROOT & COMPONENT ADAPTATION (<= 768px)                          */
/* ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Absolute Root Lockdown: Never allow horizontal panning on mobile */
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    box-sizing: border-box;
  }

  main {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden !important;
  }

  .pz-container {
    width: 100%;
    max-width: 100vw;
    padding: 0 0.75rem;
    box-sizing: border-box;
    overflow-x: clip;
  }

  /* 2.1 Compact Mobile Navbar */
  .pz-navbar {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
  }

  .pz-navbar__inner {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: auto;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .pz-logo {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    text-decoration: none;
  }

  .pz-logo__icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    border-radius: 8px;
  }

  .pz-logo__text {
    display: inline-flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    min-width: 0;
    line-height: 1.15;
  }

  .pz-logo__brand {
    font-size: 0.95rem;
  }

  .pz-logo__sub {
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }

  /* Navbar Action Chips: 3-column equal flex with strict text truncation */
  .pz-navbar__actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    order: 2;
    box-sizing: border-box;
  }

  .pz-btn--chip {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: 0.35rem 0.3rem;
    font-size: 0.72rem;
    min-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    box-sizing: border-box;
  }

  .pz-btn--chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Navbar Nav Links: Scrollable flex row without pushing parent container */
  .pz-nav {
    order: 3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0 0.15rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    box-sizing: border-box;
  }

  .pz-nav::-webkit-scrollbar {
    display: none;
  }

  .pz-nav__link {
    padding: 0.36rem 0.45rem;
    font-size: 0.76rem;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
  }

  /* 2.2 Mobile Hero Optimization */
  .pz-hero {
    padding: 1.25rem 0 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-hero__content,
  .pz-hero__showcase {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .pz-hero__eyebrow {
    display: inline-block;
    max-width: 100%;
    font-size: 0.66rem;
    padding: 0.32rem 0.65rem;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    box-sizing: border-box;
  }

  .pz-hero__title {
    font-size: clamp(1.65rem, 6.5vw, 2.2rem);
    margin-bottom: 0.75rem;
    word-break: break-word;
  }

  .pz-hero__desc {
    font-size: 0.88rem;
    margin-bottom: 1.15rem;
    line-height: 1.5;
    word-break: break-word;
  }

  .pz-hero__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-hero__cta > :first-child {
    grid-column: 1 / -1;
  }

  .pz-hero__cta .pz-btn {
    min-width: 0;
    max-width: 100%;
    padding: 0.65rem 0.5rem;
    font-size: 0.82rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  .pz-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding-top: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-hero__stat {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-hero__stat strong {
    font-size: 1.15rem;
  }

  .pz-hero__stat span {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  /* 2.3 Donna's Arcade Lounge Showcase Card */
  .pz-showcase-card {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-showcase-card__header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pz-showcase-card__note {
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
    line-height: 1.45;
    word-break: break-word;
  }

  .pz-showcase-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.45rem;
  }

  .pz-showcase-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.52rem 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
  }

  .pz-showcase-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
  }

  .pz-showcase-btn {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 0.32rem 0.45rem !important;
    font-size: 0.74rem !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* 2.4 Recently Played Bar */
  .pz-recent-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-recent-bar__label {
    font-size: 0.78rem;
    color: var(--accent-yellow);
    white-space: nowrap;
  }

  .pz-recent-bar__list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .recent-pill {
    flex-shrink: 0;
    max-width: 85vw;
    padding: 0.35rem 0.65rem;
    box-sizing: border-box;
  }

  .recent-pill__text {
    min-width: 0;
    overflow: hidden;
  }

  .recent-pill__text strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
  }

  .recent-pill__text small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
  }

  /* 2.5 Sections & Library Toolbar */
  .pz-section {
    padding: 1.5rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-section__header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .pz-section__title {
    font-size: 1.3rem;
    word-break: break-word;
  }

  .pz-section__subtitle {
    font-size: 0.84rem;
    line-height: 1.45;
    word-break: break-word;
  }

  .pz-library-toolbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.75rem;
    gap: 0.65rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-search-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-search-box .pz-input {
    width: 100%;
    max-width: 100%;
    font-size: 0.84rem;
    padding: 0.5rem 0.75rem 0.5rem 2.2rem;
    box-sizing: border-box;
  }

  .pz-filter-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    box-sizing: border-box;
  }

  .pz-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .pz-filter-pills .pz-pill-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.74rem;
    padding: 0.35rem 0.65rem;
  }

  .pz-library-selects {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-library-selects .pz-select {
    width: 100%;
    max-width: 100%;
    font-size: 0.82rem;
    padding: 0.45rem 0.65rem;
    box-sizing: border-box;
  }

  /* 2.6 1-Column Responsive Game Cards Grid */
  .pz-games-grid,
  .pz-hof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .game-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .game-card__top {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .game-card__title {
    font-size: 1.05rem;
  }

  .game-card__desc {
    font-size: 0.82rem;
  }

  .game-card__modes {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .game-card__mode-pill {
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
  }

  .game-card__scores {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
  }

  .game-card__actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* 2.7 Compact Game Arena View & Controls */
  .pz-arena-section {
    padding: 0.4rem 0 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-arena-topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.55rem 0.65rem;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-arena-topbar__left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.45rem;
    box-sizing: border-box;
  }

  #btn-back-to-arcade {
    padding: 0.35rem 0.55rem;
    font-size: 0.74rem;
    min-height: 32px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .pz-arena-title-group {
    text-align: right;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }

  .pz-arena-title {
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pz-arena-id {
    display: none;
  }

  .pz-arena-modes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-arena-modes .pz-pill-btn,
  .pz-arena-modes .pz-badge {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    font-size: 0.72rem;
    padding: 0.32rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  /* 5-column button controls bar */
  .pz-arena-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-arena-controls .pz-btn {
    min-width: 0;
    width: 100%;
    padding: 0.38rem 0.1rem;
    font-size: 0.66rem;
    font-weight: 700;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    text-align: center;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    white-space: nowrap;
  }

  .pz-arena-controls .pz-btn span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.64rem;
  }

  /* 3x2 Game HUD Bar */
  .pz-hud-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
    margin-bottom: 0.45rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-hud-item {
    min-width: 0;
    padding: 0.32rem 0.35rem;
    gap: 0.05rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pz-hud-item__label {
    font-size: 0.52rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pz-hud-item__value {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pz-game-stage {
    padding: 0.45rem;
    min-height: 360px;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* 2.8 Leaderboard & Modals */
  .lb-hero-banner {
    padding: 0.85rem;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lb-hero-banner__title {
    font-size: 1.2rem;
  }

  .lb-hero-banner__cards {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lb-stat-card {
    padding: 0.75rem;
  }

  .lb-stat-card__value {
    font-size: 1.2rem;
  }

  .lb-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .lb-table th,
  .lb-table td {
    padding: 0.5rem 0.4rem;
    font-size: 0.74rem;
  }

  .lb-history-card {
    padding: 0.85rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-modal-backdrop {
    padding: 0.65rem;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .pz-modal {
    width: 100%;
    max-width: calc(100vw - 1.3rem);
    padding: 1.15rem;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .pz-result-stats-grid,
  .pz-modal__actions--triple {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .pz-quiz-options {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* 2.9 Footer */
  .pz-footer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .pz-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pz-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------------- */
/* 3. NARROW MOBILE SCREENS (<= 480px)                                       */
/* ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pz-container {
    padding: 0 0.5rem;
  }

  .pz-game-stage {
    padding: 0.35rem;
  }

  .pz-modal {
    padding: 1rem;
  }

  .pz-donna-quick-grid {
    grid-template-columns: 1fr;
  }

  .pz-btn--chip {
    font-size: 0.68rem;
    padding: 0.32rem 0.25rem;
    min-height: 30px;
  }

  .pz-arena-controls .pz-btn {
    min-height: 38px;
    font-size: 0.62rem;
    padding: 0.32rem 0.05rem;
  }

  .pz-arena-controls .pz-btn span {
    font-size: 0.6rem;
  }

  .pz-hud-item__value {
    font-size: 0.74rem;
  }

  .pz-hud-item__label {
    font-size: 0.5rem;
  }
}

/* ------------------------------------------------------------------------- */
/* 4. ACCESSIBILITY: REDUCED MOTION                                          */
/* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}