/* ===== 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;
  width:min(100%,560px);
  box-sizing:border-box;
  position:relative;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
@media (pointer:coarse), (max-width:820px){
  .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-btn:focus-visible{ outline:3px solid #ffc24b; outline-offset:2px; }
.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; }
.gc-prefs{position:absolute;right:10px;top:-38px;display:flex;gap:6px;align-items:center}
.gc-pref{height:32px;min-width:32px;padding:0 9px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(10,12,28,.82);color:#fff;font-size:11px;font-weight:700;font-family:inherit;touch-action:manipulation}
.gc-pref:focus-visible{outline:3px solid #ffc24b;outline-offset:2px}
.gc-speed{min-width:62px}

@media (max-width:480px){
  .game-controls{ gap:10px; padding:4px 2px; margin-top:42px; }
  .gc-prefs{right:2px;top:-36px}
  .gc-pad{ gap:6px; }
  .gc-pad-4{ grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,48px); }
  .gc-pad-2{ grid-template-columns:repeat(2,48px); }
  .gc-pad-3{ grid-template-columns:repeat(3,48px); }
  .gc-pad-updown{ grid-template-columns:48px; gap:7px; }
  .gc-btn{ width:48px; height:48px; border-radius:12px; }
  .gc-actions{ gap:8px; }
  .gc-action{ width:auto; min-width:76px; height:48px; padding:0 12px; font-size:14px; }
  .gc-action.gc-big{ min-width:132px; height:54px; font-size:16px; }
}

/* 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; }