/* BBCC Arcade — shared mobile controls (fullscreen, rotate, touch pad) */
/* Elements are hidden by default and only shown on touch / coarse-pointer devices. */

#am-rotate, #am-fsbtn, #am-pad, #am-look { display: none; }

body.am-touch #am-fsbtn { display: flex; }
#am-fsbtn { display: flex; }
body.am-touch #am-pad { display: flex; }
body.am-touch.am-needs-rotate #am-rotate { display: flex; }
body.am-touch.am-dos #am-look { display: block; }

/* Rotate-to-landscape prompt */
#am-rotate {
  position: fixed; inset: 0; z-index: 9000;
  flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: rgba(10, 9, 8, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-align: center; padding: 32px;
}
#am-rotate svg { width: 64px; height: 64px; color: var(--ember); animation: am-rot 2.4s ease-in-out infinite; }
@keyframes am-rot { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(78deg); } }
#am-rotate h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
#am-rotate p { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); letter-spacing: 1px; text-transform: uppercase; max-width: 280px; line-height: 1.7; }
#am-rotate button {
  margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ember); background: var(--ember-soft); border: 1px solid var(--ember-line);
  padding: 10px 20px; border-radius: 100px; cursor: pointer;
}

/* Fullscreen toggle */
#am-fsbtn {
  position: fixed; top: 64px; right: 14px; z-index: 8000;
  width: 46px; height: 46px; border-radius: 14px;
  align-items: center; justify-content: center;
  background: rgba(20, 17, 14, 0.82); border: 1px solid var(--line-2);
  color: var(--text); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
#am-fsbtn:hover { border-color: var(--ember-line); color: var(--ember); }
#am-fsbtn svg { width: 22px; height: 22px; pointer-events: none; }
#am-fsbtn.am-fs-left { left: 14px; right: auto; }

/* Touch control pad */
#am-pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 7000;
  justify-content: space-between; align-items: flex-end;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}
#am-pad .am-cluster { display: flex; gap: 14px; pointer-events: none; }
#am-pad button {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none;
  -webkit-user-select: none;
}

/* D-pad */
#am-dpad {
  width: 156px; height: 156px; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}
#am-dpad button {
  background: rgba(29, 25, 21, 0.86); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#am-dpad button svg { width: 24px; height: 24px; }
#am-dpad button:active { background: var(--ember-soft); border-color: var(--ember-line); color: var(--ember); }
#am-dir-up { grid-area: 1 / 2; } #am-dir-left { grid-area: 2 / 1; }
#am-dir-right { grid-area: 2 / 3; } #am-dir-down { grid-area: 3 / 2; }

/* Action buttons */
#am-actions { flex-direction: column; align-items: flex-end; }
#am-actions button {
  min-width: 64px; height: 64px; padding: 0 16px; border-radius: 50%;
  background: rgba(29, 25, 21, 0.86); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#am-actions button:active { background: var(--grad); color: #1A0D02; border-color: transparent; }
#am-actions button.am-big { min-width: 92px; height: 92px; font-size: 16px; }

/* Virtual mouse / look surface for DOS games */
#am-look {
  position: fixed; inset: 56px 0 172px 0; z-index: 6000;
  touch-action: none;
}

/* In fullscreen the stage fills the screen; scale canvas games to fit */
.am-fs-active.board-wrap { display: flex; align-items: center; justify-content: center; }
.am-fs-active.board-wrap canvas {
  width: 100% !important; height: 100% !important; object-fit: contain; max-width: none;
}

@media (max-width: 380px) {
  #am-dpad { width: 138px; height: 138px; }
  #am-actions button { min-width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  #am-rotate svg { animation: none; }
}