/*
 * Shared mobile-first polish for all 4 games (scratcher, match3, flappy-rocket, badge-memory).
 * Purpose: safe-area insets, responsive board sizing, clamp() typography, touch targets.
 * Additive only — does not override game-specific identity styles.
 */

/* Safe-area insets on the whole game shell */
html, body { min-height: 100%; }
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  -webkit-text-size-adjust: 100%;
}

/* Prevent rubber-banding behind game canvas */
body.sl-game { overscroll-behavior: none; }

/* Responsive fluid typography */
:root {
  --sl-font-xs: clamp(0.75rem, 3vw, 0.875rem);
  --sl-font-sm: clamp(0.875rem, 3.25vw, 1rem);
  --sl-font-base: clamp(1rem, 3.75vw, 1.125rem);
  --sl-font-lg: clamp(1.125rem, 4.5vw, 1.5rem);
  --sl-font-xl: clamp(1.5rem, 6vw, 2rem);
  --sl-font-2xl: clamp(2rem, 8vw, 3rem);
}

/* Touch target minimums (44x44 WCAG / Apple HIG) */
button, .sl-tap, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.18);
}

/* Scratcher board responsive */
.scratcher-card {
  margin: clamp(0.5rem, 3vw, 2rem) auto !important;
  padding: clamp(1rem, 4vw, 2rem) !important;
  max-width: min(96vw, 500px) !important;
}
.scratcher-grid {
  width: 100% !important;
  max-width: min(92vw, 400px) !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
}
.scratcher-tile {
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: var(--sl-font-base);
}

/* Match-3 board responsive */
.game-board {
  width: min(92vw, 480px) !important;
  height: min(92vw, 480px) !important;
  max-width: 100%;
}
.game-tile {
  font-size: var(--sl-font-base);
}

/* Flappy canvas wrapper — center + scale */
canvas#gameCanvas, canvas.game-canvas {
  max-width: min(92vw, 420px);
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  display: block;
  margin: 0 auto;
}

/* Badge memory board responsive */
.memory-board {
  width: min(92vw, 480px) !important;
  height: min(92vw, 480px) !important;
}

/* Headers and modals respect safe areas */
.sl-game-header, .sl-game-footer, .sl-share-sheet {
  padding-left: max(env(safe-area-inset-left, 0), 1rem);
  padding-right: max(env(safe-area-inset-right, 0), 1rem);
}
.sl-game-footer {
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0.75rem);
}

/* Reposition volume / audio control so it doesn't overlap small-screen headers */
@media (max-width: 420px) {
  #volumeControlContainer, .audio-control, [data-audio-control] {
    top: auto !important;
    bottom: max(env(safe-area-inset-bottom, 0), 0.5rem) !important;
    right: max(env(safe-area-inset-right, 0), 0.5rem) !important;
    transform: scale(0.9);
  }
}

/* Shared win/share sheet look */
.sl-share-sheet {
  border-radius: 20px 20px 0 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(14px);
  color: #fff;
}