/* ============================================================
   MOBILE SPACING & LAYOUT POLISH  (loaded last; overrides)
   ============================================================ */

/* ---- Connect 4: keep the disc drop animation contained inside the board
   so falling discs never fly off the top of the screen ---- */
.c4-board{ overflow:hidden; }
.c4-cell .disc{ animation:dropIn .42s cubic-bezier(.33,1.12,.62,1); }
@keyframes dropIn{ 0%{transform:translateY(-360px)} 100%{transform:translateY(0)} }

@media (max-width:760px){
  .topbar{ gap:8px; padding:9px 12px; flex-wrap:wrap; }
  .topbar .spacer{ display:none; }
  .logo-mark{ width:32px; height:32px; font-size:17px; }
  .logo h1{ font-size:11px; }
  .logo small{ display:none; }
  .pill{ padding:7px 11px; font-size:11px; gap:6px; }

  .main{ padding:18px 16px 88px; }

  .hero{ padding:22px 20px; border-radius:20px; margin-bottom:20px; }
  .hero h2{ font-size:23px; line-height:1.22; }
  .hero p{ font-size:13.5px; line-height:1.5; }
  .hero .hero-actions{ gap:10px; margin-top:14px; }
  .hero .floaties{ font-size:32px; right:14px; top:8px; opacity:.45; }

  .section-title{ margin:22px 2px 12px; font-size:13px; letter-spacing:1px; }
  .game-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .game-card{ padding:14px 13px 12px; }
  .game-card .art{ height:72px; font-size:34px; margin-bottom:10px; }
  .game-card h3{ font-size:14.5px; }
  .game-card p{ font-size:11.5px; min-height:30px; }

  .stage-head{ gap:8px; margin-bottom:14px; }
  .stage-head .spacer{ display:none; }
  .stage-head h2{ font-size:18px; }
  #stageTools{ width:100%; order:9; justify-content:center; margin-left:0 !important; margin-top:2px; }
  .game-surface{ padding:16px 12px; border-radius:18px; min-height:360px; gap:12px; }
  .hud{ gap:10px; font-size:13px; }
  .hud .hud-item{ padding:6px 12px; }

  .modal{ padding:20px 18px; border-radius:18px; }
  .modal h3{ font-size:18px; }
  .modal p{ font-size:13px; }
  .modal .row{ gap:8px; }
}
@media (max-width:480px){
  .topbar{ gap:6px; padding:8px 10px; }
  .pill{ padding:6px 9px; font-size:10.5px; gap:5px; }
  .hero{ padding:18px 16px; }
  .hero h2{ font-size:20px; }
  .hero p{ font-size:12.5px; }
  .hero .floaties{ display:none; }
  .game-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .game-card{ padding:12px 11px 11px; }
  .game-card .art{ height:60px; font-size:28px; margin-bottom:8px; }
  .game-card h3{ font-size:13.5px; }
  .game-card p{ font-size:11px; min-height:26px; }
  .main{ padding:14px 11px 88px; }
  .btn{ padding:10px 16px; font-size:13px; }
  .btn.small{ padding:7px 12px; }
  .seg button{ padding:7px 10px; font-size:11.5px; }
  .section-title{ margin:18px 2px 10px; }
}

/* ============================================================
   FIXED-SIZE GAME BOARDS — shrink to fit small phone screens
   (mirrors the canvas viewport-fit so the whole board is visible
   without horizontal scrolling or content running off-screen)
   ============================================================ */
@media (max-width:480px){
  /* Minesweeper (12 columns — the widest board in the deck) */
  .mine-grid{ grid-template-columns:repeat(12,23px) !important; gap:2px; padding:6px; }
  .mine-cell{ width:23px; height:23px; font-size:12px; }
  /* Mole Smash */
  .whack-grid{ grid-template-columns:repeat(3,86px); gap:12px; }
  .hole{ width:86px; height:74px; font-size:34px; }
  /* Lights Out */
  .lights-grid{ grid-template-columns:repeat(5,52px); gap:7px; }
  .lights-grid .cell{ width:52px; height:52px; }
  /* Simon Says */
  .simon-grid{ grid-template-columns:repeat(2,116px); gap:12px; }
  .simon-pad{ width:116px; height:116px; }
  /* Connect 4 */
  .c4-board{ padding:10px; gap:6px; }
  .c4-cell{ width:34px; height:34px; }
}
@media (max-width:360px){
  .mine-grid{ grid-template-columns:repeat(12,20px) !important; gap:2px; }
  .mine-cell{ width:20px; height:20px; font-size:10px; }
  .whack-grid{ grid-template-columns:repeat(3,76px); gap:10px; }
  .hole{ width:76px; height:66px; font-size:30px; }
  .lights-grid{ grid-template-columns:repeat(5,46px); gap:6px; }
  .lights-grid .cell{ width:46px; height:46px; }
  .c4-board{ padding:8px; gap:5px; }
  .c4-cell{ width:30px; height:30px; }
}