/* === MOBILE GAME BASE — shared foundation === */
/* Import FIRST in your game HTML: <link rel="stylesheet" href="../_base.css"> */
/* Game-specific CSS overrides these defaults via specificity */

:root {
  /* Z-index scale — consolidate existing values */
  --z-game: 1;
  --z-game-overlay: 100;
  --z-modal: 2000;
  --z-header: 3000;
  --z-toast: 9999;
  --z-emergency: 100000;

  /* Game layout */
  --game-max-width: 100%;
}

/* Game container responsive defaults */
.game-container, .game-area, .game-board {
  max-width: var(--game-max-width);
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

canvas {
  max-width: 100%;
}

/* Responsive canvas — mobile only */
@media (max-width: 768px) {
  canvas {
    max-width: 100%;
    height: auto;
    touch-action: manipulation;
  }
}

/* Typography floor — soft enforcement */
@media (max-width: 768px) {
  body {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* Touch targets minimum */
@media (max-width: 768px) {
  button, .btn, [role="button"], a.game-control, .mobile-control {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Mobile game container */
@media (max-width: 768px) {
  .game-container {
    padding: 8px;
    width: 100%;
  }
}

/* Touch action for interactive elements */
button, .btn, [role="button"], input[type="text"], select {
  touch-action: manipulation;
}

/* Prevent body scroll when game captures touch */
.game-touch-capture {
  touch-action: none;
  overscroll-behavior: contain;
}