/* ─────────────────────────────────────────────────────────────────────
   MadCatChat Games — Universal Mobile Fix
   Loaded by every game in /games/* via <link rel="stylesheet">.
   Ensures content doesn't overflow viewport on phones.
   ───────────────────────────────────────────────────────────────────── */

/* Prevent horizontal scroll on the page level. Many of these games were
   designed for desktop and have hardcoded widths that exceed phone widths.
   `overflow-x: hidden` is the safety net; the per-game rules below also
   try to make the actual layout fit. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Canvas elements should never exceed their container. We do NOT touch
   internal resolution (the width/height attributes drive the game's
   internal coordinate system), only the CSS display size. */
canvas {
  max-width: 100% !important;
}

/* ─── PONG ─────────────────────────────────────────────────────────── */
/* Stock Pong CSS hardcodes #game to 480px wide on small screens; that
   overflows iPhone-SE-class widths. Force responsive sizing instead. */
@media (max-width: 700px) {
  #game {
    width: 100% !important;
    max-width: 480px !important;
    height: auto !important;
    aspect-ratio: 4/3;
  }
  #sidebar { display: none !important; }
  body { padding: 4px !important; margin: 0 !important; }
}

/* ─── TETRIS ───────────────────────────────────────────────────────── */
/* Stock Tetris uses inline-block side-by-side. Stack vertically on
   mobile and scale the playfield to fit. */
@media (max-width: 700px) {
  #tetris {
    margin: 0.5em auto !important;
    padding: 0.5em !important;
    text-align: center;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
  }
  #stats, #menu, #canvas {
    display: block !important;
    margin: 8px auto !important;
  }
  #canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  #menu {
    position: static !important;
    width: auto !important;
  }
  #upcoming {
    max-width: 100px;
  }
}

/* ─── RACER ────────────────────────────────────────────────────────── */
/* Hardcoded 640x480 #racer with margin-left:20em pushes it off screen.
   On mobile we drop the side controls and centre the game canvas. */
@media (max-width: 800px) {
  #racer, #hud {
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    height: auto !important;
    aspect-ratio: 4/3;
  }
  #racer canvas {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4/3;
  }
  #controls, #instructions { display: none !important; }
  #mute {
    margin-left: 0 !important;
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 10;
  }
  body { margin: 0 !important; padding: 4px !important; }
}

/* ─── BREAKOUT ─────────────────────────────────────────────────────── */
/* Centre Breakout and force canvas to scale to screen width. */
@media (max-width: 700px) {
  #breakout {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 4px !important;
    box-sizing: border-box;
  }
  #breakout canvas {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3;
  }
  body { margin: 0 !important; padding: 0 !important; }
}

/* ─── 2048 ─────────────────────────────────────────────────────────── */
/* 2048 has its own responsive CSS but the wrapper sometimes overflows
   with browser scrollbar logic on iOS. Force the container to fit. */
@media (max-width: 520px) {
  .container { width: calc(100vw - 16px) !important; padding: 8px !important; }
  .game-container { max-width: 100%; }
}

/* ─── HEXTRIS ──────────────────────────────────────────────────────── */
/* Hextris uses JS-driven sizing but a safety net helps when CSS hasn't
   loaded yet (avoids flash of huge canvas). */
@media (max-width: 700px) {
  body { margin: 0 !important; padding: 0 !important; }
  #score-container { max-width: 100vw; }
}

/* ─── CLUMSY BIRD ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  body { margin: 0 !important; padding: 0 !important; }
}