/* BreakPlay Global Mobile Responsive Framework */
:root {
  --bp-max-width: 520px;
  --bp-gap: clamp(8px, 2vw, 14px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* If a page uses #bp-root, treat it as the centered frame */
#bp-root {
  width: 100%;
  max-width: var(--bp-max-width);
  margin: 0 auto;
  padding: var(--bp-gap);
  box-sizing: border-box;
}

/* Generic centering for play areas */
.bp-game-frame {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--bp-gap);
  box-sizing: border-box;
}

/* Constrain common game containers */
.bp-game-frame canvas,
.bp-game-frame #game,
.bp-game-frame #game-board,
.bp-game-frame #playarea,
.bp-game-frame #board,
.bp-game-frame .game-container,
.bp-game-frame .play-area {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Center text and prevent overflow */
.bp-game-root h1,
.bp-game-root h2,
.bp-game-root h3,
.bp-game-root .title {
  text-align: center;
  word-break: break-word;
  margin-left: auto;
  margin-right: auto;
}

/* On very small screens, use every pixel */
@media (max-width: 380px) {
  :root {
    --bp-max-width: 100vw;
  }
  .bp-game-frame {
    padding: 6px;
  }
}

/* Desktop polish */
@media (min-width: 521px) {
  body {
    background-attachment: fixed;
  }
}

/* ── Touch-target floor (real, game-agnostic) ─────────────────────────────
   Icon-only HUD controls (sound / pause / restart) are often square 38px
   buttons that fail the 44px tap-target guideline on phones. Raise their
   real box here (no overflow pseudo-elements, so scrollHeight stays equal
   to clientHeight). Scoped to coarse pointers so desktop is unaffected. */
@media (hover: none) and (pointer: coarse) {
  /* Square icon HUD buttons across the mini-game shells. */
  #mute,
  #pause,
  #restart,
  #sound,
  #btn-mute,
  #btn-pause,
  #btn-restart,
  .hud button,
  .top .btns button,
  .btns button:not(.big) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
  }
}

/* Width-based fallback so the 44px HUD floor also holds on narrow viewports
   even if the pointer/hover media query does not match (e.g. desktop
   emulation at a phone width, or before the bp-site-mobile class lands). */
@media (max-width: 540px) {
  #mute,
  #pause,
  #restart,
  #sound,
  #btn-mute,
  #btn-pause,
  #btn-restart,
  .hud button,
  .top .btns button,
  .btns button:not(.big) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
  }
}

/* ── Injected touch gamepad bar (BPMobileBar / bp-mobile.js) ──────────────
   bp-mobile.js injects this bar (d-pad + action buttons) on touch devices,
   but the buttons had no styles at all — tiny default browser buttons.
   Give them a proper 46px touch floor and a real d-pad cross layout. */
#bp-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 14, 22, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.bp-has-mobile-bar { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.bp-mobile-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-mobile-cluster-dpad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(2, 46px);
  gap: 4px;
}
.bp-mobile-cluster-dpad .bp-mob-btn[data-bp-key="ArrowUp"] { grid-column: 2; grid-row: 1; }
.bp-mobile-cluster-dpad .bp-mob-btn[data-bp-key="ArrowLeft"] { grid-column: 1; grid-row: 2; }
.bp-mobile-cluster-dpad .bp-mob-btn[data-bp-key="ArrowDown"] { grid-column: 2; grid-row: 2; }
.bp-mobile-cluster-dpad .bp-mob-btn[data-bp-key="ArrowRight"] { grid-column: 3; grid-row: 2; }
.bp-dpad-spacer { width: 46px; height: 46px; }
.bp-mob-btn {
  min-width: 46px;
  min-height: 46px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #f5f6fa;
  font: 800 0.8rem/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bp-mob-btn:active { background: rgba(0, 212, 255, 0.25); }
.bp-mob-btn-wide { min-width: 64px; }
.bp-mob-btn-danger { border-color: rgba(255, 77, 77, 0.5); color: #ff6b6b; }

/* ── AEO: on-page FAQ section for playable game pages ── */
.game-faq {
  max-width: 780px;
  margin: 28px auto 40px;
  padding: 0 16px;
}
.game-faq h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  color: #f5f6fa;
  margin: 0 0 12px;
}
.game-faq .faq-grid {
  display: grid;
  gap: 8px;
}
.game-faq details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 10px 14px;
}
.game-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: #f5f6fa;
  font-size: 0.95rem;
  list-style: none;
}
.game-faq summary::-webkit-details-marker { display: none; }
.game-faq summary::before { content: "+ "; color: #7c5cff; font-weight: 800; }
.game-faq details[open] summary::before { content: "− "; }
.game-faq details p {
  margin: 8px 0 2px;
  line-height: 1.6;
  color: #c7cbd9;
  font-size: 0.92rem;
}