/**
 * zoom.css
 *
 * Purpose: Zoom feature implementation including zoom level classes,
 * zoom selector UI, and zoom-specific transformations for different tabs.
 *
 * Dependencies: base.css, layout.css
 *
 * Key Styles:
 * - Zoom level CSS custom properties
 * - Zoom selector button styles
 * - Subtle zoom transforms for non-game tabs
 * - Zoom-exempt element declarations
 */

/* ==================== ZOOM CONTROLS ==================== */

/*
 * ZOOM IMPLEMENTATION: Dual-mode zoom system for optimal user experience.
 *
 * GAME TAB (aggressive zoom):
 *   - Zoom is handled via JavaScript by recalculating card sizes
 *   - When zoom is 75%, 80%, or 90%, getCardLayoutSettings() multiplies card
 *     dimensions by the zoom factor, ensuring cards are ACTUALLY smaller
 *   - Only .face-down-cards (the clickable card grid) is affected
 *
 * NON-GAME TABS (subtle zoom - ~7.5% per zoom step):
 *   - Stats, Leaderboard, Account, Settings pages use CSS transform: scale()
 *   - 100% → 100%, 90% → 92.5%, 80% → 85%, 75% → 81.25%
 *   - This provides visual consistency without aggressive resizing
 *
 * HEADER STAYS FIXED on ALL tabs - never scaled by zoom.
 * The following elements are NEVER affected by zoom:
 *   - .game-header (title, subtitle, hamburger menu)
 *   - .control-panel (reference card section with "CAN YOU FEEL IT?" label)
 *   - .section-label ("TRUST YOUR INTUITION:" text)
 *
 * The zoom-XX classes are applied to:
 *   - .game-container (for CSS-based subtle zoom on non-game tabs)
 *   - .game-layout (for state tracking on Game tab)
 */

/* Zoom level classes - applied to .game-container for state tracking */
/* Game tab zoom is handled by JavaScript card sizing (aggressive zoom) */
/* Non-game tabs use CSS transform for SUBTLE zoom (~7.5% per zoom step) */

/* Define subtle zoom scale factors as CSS custom properties */
.game-container.zoom-100 { --subtle-zoom-scale: 1; }
.game-container.zoom-90 { --subtle-zoom-scale: 0.925; }  /* 7.5% smaller */
.game-container.zoom-80 { --subtle-zoom-scale: 0.85; }   /* 15% smaller */
.game-container.zoom-75 { --subtle-zoom-scale: 0.8125; } /* 18.75% smaller */

/* Game layout - NO transform (zoom handled by JS card resizing) */
.game-layout.zoom-100,
.game-layout.zoom-90,
.game-layout.zoom-80,
.game-layout.zoom-75 {
  /* No transform - zoom is applied via JavaScript card size calculations */
  /* Explicitly prevent any scaling on the game layout container */
  transform: none !important;
}

/*
 * SUBTLE ZOOM FOR NON-GAME TABS
 * Stats, Leaderboard, Account pages scale subtly when zoom is changed.
 * Uses CSS transform: scale() for visual scaling while keeping header fixed.
 */

/* Stats page subtle zoom */
.game-container.zoom-100 .stats-page .stats-container,
.game-container.zoom-90 .stats-page .stats-container,
.game-container.zoom-80 .stats-page .stats-container,
.game-container.zoom-75 .stats-page .stats-container {
  transform: scale(var(--subtle-zoom-scale));
  transform-origin: top center;
}

/*
 * LEADERBOARD ZOOM BEHAVIOR
 * - The leaderboard uses a modified zoom approach to prevent horizontal overflow
 * - Instead of scaling the entire container, we only scale font sizes
 * - The table width remains at 100% to prevent cut-off at any zoom level
 * - Button font scales with zoom but container size remains stable
 */
.game-container.zoom-100 .leaderboard-page .leaderboard-container {
  /* No transform at 100% - full size */
}

.game-container.zoom-90 .leaderboard-page .leaderboard-container,
.game-container.zoom-80 .leaderboard-page .leaderboard-container,
.game-container.zoom-75 .leaderboard-page .leaderboard-container {
  /* Use font-size scaling instead of transform to prevent overflow */
  /* Transform removed - tables now use responsive widths */
}

/* Scale only text content, not container dimensions */
.game-container.zoom-90 .leaderboard-page .leaderboard-title { font-size: 2.3em; }
.game-container.zoom-80 .leaderboard-page .leaderboard-title { font-size: 2.1em; }
.game-container.zoom-75 .leaderboard-page .leaderboard-title { font-size: 2em; }

.game-container.zoom-90 .leaderboard-page .leaderboard-subtitle { font-size: 0.95em; }
.game-container.zoom-80 .leaderboard-page .leaderboard-subtitle { font-size: 0.9em; }
.game-container.zoom-75 .leaderboard-page .leaderboard-subtitle { font-size: 0.85em; }

/* Table cell font scaling */
.game-container.zoom-90 .leaderboard-table th,
.game-container.zoom-90 .leaderboard-table td { font-size: 0.9em; padding: 11px 5px; }
.game-container.zoom-80 .leaderboard-table th,
.game-container.zoom-80 .leaderboard-table td { font-size: 0.85em; padding: 10px 4px; }
.game-container.zoom-75 .leaderboard-table th,
.game-container.zoom-75 .leaderboard-table td { font-size: 0.8em; padding: 9px 4px; }

/* Button font scaling - container stays stable */
.game-container.zoom-90 .leaderboard-container .back-to-game-btn { font-size: 1.05em; }
.game-container.zoom-80 .leaderboard-container .back-to-game-btn { font-size: 1em; }
.game-container.zoom-75 .leaderboard-container .back-to-game-btn { font-size: 0.95em; }

/* Account page subtle zoom */
.game-container.zoom-100 .account-page .account-container,
.game-container.zoom-90 .account-page .account-container,
.game-container.zoom-80 .account-page .account-container,
.game-container.zoom-75 .account-page .account-container {
  transform: scale(var(--subtle-zoom-scale));
  transform-origin: top center;
}

/* Settings page subtle zoom */
.game-container.zoom-100 .settings-page .settings-container,
.game-container.zoom-90 .settings-page .settings-container,
.game-container.zoom-80 .settings-page .settings-container,
.game-container.zoom-75 .settings-page .settings-container {
  transform: scale(var(--subtle-zoom-scale));
  transform-origin: top center;
}

/* Win screen subtle zoom */
.game-container.zoom-100 .win-screen,
.game-container.zoom-90 .win-screen,
.game-container.zoom-80 .win-screen,
.game-container.zoom-75 .win-screen {
  transform: scale(var(--subtle-zoom-scale));
  transform-origin: top center;
}

/*
 * ZOOM-EXEMPT ELEMENTS: These elements should NEVER be scaled by zoom.
 * Their sizes remain constant regardless of zoom level setting.
 */
.game-header,
.control-panel,
.section-label,
.cards-section > .section-label,
.control-label,
.stat-pill,
.control-panel .card.reference {
  /* Prevent any zoom scaling - always render at 100% */
  transform: none;
  transform-origin: center;
}

/* ==================== ZOOM SELECTOR UI ==================== */

/* Screen Zoom Selector */
.zoom-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.zoom-option {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 56px;
  font-size: 0.95em;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Nunito", sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.zoom-option:hover {
  border-color: #667eea;
  color: #667eea;
}

.zoom-option.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: white;
}

.zoom-option.default-badge {
  position: relative;
}

.zoom-option.default-badge::after {
  content: "Default";
  position: absolute;
  top: -8px;
  right: -8px;
  background: #27ae60;
  color: white;
  font-size: 0.6em;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
}

.zoom-reset-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 0.85em;
  cursor: pointer;
  padding: 5px 0;
  margin-top: 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  transition: opacity 0.3s;
}

.zoom-reset-btn:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ==================== RESPONSIVE ZOOM SELECTOR ==================== */

@media (max-width: 400px) {
  .zoom-selector {
    gap: 8px;
  }

  .zoom-option {
    padding: 8px 12px;
    min-width: 48px;
    font-size: 0.9em;
  }
}