/* ============================================
   Mini Game Bay - Layout Styles
   ============================================ */

/* ============ NAVBAR ============ */
.navbar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1.5rem;
  padding-top: max(0.75rem, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateZ(0);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.nav-brand { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 700; color: var(--accent-primary); flex-shrink: 0; }
.nav-brand-title { color: var(--accent-primary); }
.nav-links { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.nav-links .nav-item {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  font-size: 0.9rem;
}
.nav-links .nav-item:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-links .nav-item.active { background: var(--accent-primary); color: #fff; }
.nav-game-bar { display: flex; align-items: center; gap: 0.75rem; }
.nav-timer { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-powerups { display: flex; gap: 0.25rem; align-items: center; }

/* Navbar icon helpers */
.nav-brand .gicon { font-size: 1.5rem; margin-right: 0.25rem; }
.nav-links .nav-item .gicon { font-size: 1.1rem; margin-right: 0.25rem; vertical-align: -0.15em; }
.nav-timer .gicon { font-size: 1.1rem; vertical-align: -0.15em; }

/* ============ MAIN CONTENT ============ */
.main-content { flex: 1; padding: 2rem; max-width: 1100px; margin: 0 auto; min-height: calc(100vh - 60px); min-height: calc(var(--vh, 1vh) * 100 - 60px); }
.page-section { display: none; }
.page-section.active { display: block; }

/* ============ GAMES GRID ============ */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* ============ LEVEL SELECTION ============ */
.levels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-top: 1rem; }

/* ============ STATS ============ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

/* ============ GAME HEADER ============ */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ============ GLOBAL MOBILE GAME-AREA RULES ============ */
#page-game {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
}
#page-game.active {
  display: flex;
}

/* Prevent pull-to-refresh and overscroll on game boards */
#game-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#game-content canvas {
  touch-action: none;
  margin: 0 auto !important; /* Force override Phaser's inline margin-top */
}

/* All game grid cells — prevent accidental text selection & zoom */
[class*="-cell"],
[class*="-tile"],
.blocks-cell, .light-cell, .connect-cell, .sumix-cell,
.cm-cell, .tile-btn, .num-cell, .crown-cell, .ws-cell,
.sudoku-cell, .pipe-cell, .match-card,
.chess-square, .ring-peg, .ol-node,
.family-item, .hw-letter, .mc-cell, .block-piece,
.ol-edge, .family-category {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}