/* ===== Universal mobile game controls + start/pause shell ===== */

/* Controls bar: hidden on desktop, shown on touch / small screens. */
.game-controls{
  display:none;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin:14px auto 6px;
  max-width:560px;
  padding:6px 10px;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
@media (pointer:coarse), (max-width:760px){
  .game-controls{ display:flex; }
}

.gc-pad{ display:grid; gap:8px; }
.gc-pad-4{
  grid-template-columns:repeat(3,52px);
  grid-template-rows:repeat(2,52px);
  grid-template-areas:". up ." "left down right";
}
.gc-pad-2{ grid-template-columns:repeat(2,56px); }
.gc-pad-3{ grid-template-columns:repeat(3,52px); }
.gc-pad-updown{ grid-template-columns:56px; gap:10px; }

.gc-pad-4 .gc-up{ grid-area:up; }
.gc-pad-4 .gc-down{ grid-area:down; }
.gc-pad-4 .gc-left{ grid-area:left; }
.gc-pad-4 .gc-right{ grid-area:right; }

.gc-actions{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; }

.gc-btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:20px;
  font-weight:800;
  font-family:inherit;
  width:52px; height:52px;
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:background .08s, transform .08s;
}
.gc-btn.active{ background:#7c5cff; transform:scale(.94); }
.gc-action{ width:auto; min-width:84px; height:52px; padding:0 16px; font-size:15px; background:rgba(124,92,255,.22); }
.gc-action.gc-big{ min-width:150px; height:60px; font-size:18px; }
.game-controls.gc-disabled{ pointer-events:none; opacity:.35; }

/* Pause overlay over the game surface. */
.shell-pause-overlay{
  position:absolute; inset:0; z-index:8;
  display:grid; place-items:center;
  background:rgba(8,10,24,.72);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  border-radius:inherit;
}
.shell-pause-card{ text-align:center; padding:24px 28px; }
.shell-pause-card h3{ margin:0 0 6px; font-size:24px; color:#fff; }
.shell-pause-card p{ margin:0 0 16px; color:rgba(255,255,255,.7); font-size:14px; }