/* ======= index.css ======= */

/* 全局背景：用偽元素固定鋪底，避免 mobile Safari 重新定位造成閃爍 */
html, body { min-height: 100%; }
body { background: none; } /* 交由 :root::before 負責背景 */
:root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/static/images/background.jpg') center / cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
}

/* ===== 變數區 ===== */
:root {
  --bp-md: 768px;

  /* 間距最小 / 理想 / 最大 */
  --gap-min: 0.5rem;
  --gap-fluid: 4vw;
  --gap-max: 1.5rem;

  /* 按鈕內距/字體（保留做為未來非 neon 按鈕可用的設計變數；本檔不直接套用） */
  --btn-pad-v-min: 0.5rem;
  --btn-pad-v-fluid: 2vw;
  --btn-pad-v-max: 1rem;
  --btn-pad-h-min: 1rem;
  --btn-pad-h-fluid: 3vw;
  --btn-pad-h-max: 1.5rem;

  --font-btn-min: 0.75rem;
  --font-btn-fluid: 2vw;
  --font-btn-max: 1rem;
}

/* ===== 左上角按鈕群（僅佈局，不碰按鈕外觀） ===== */
.top-buttons {
  position: fixed;
  inset-block-start: env(safe-area-inset-top, clamp(10px, 5vw, 20px));
  inset-inline-start: clamp(10px, 5vw, 20px);
  display: flex;
  gap: clamp(var(--gap-min), var(--gap-fluid), var(--gap-max));
  z-index: 1000;
}

/* ===== 右下角按鈕群（僅佈局，不碰按鈕外觀） ===== */
.bottom-buttons {
  position: fixed;
  inset-block-end: env(safe-area-inset-bottom, clamp(10px, 5vw, 20px));
  inset-inline-end: clamp(10px, 5vw, 20px);
  display: flex;
  gap: clamp(var(--gap-min), var(--gap-fluid), var(--gap-max));
  z-index: 1000;
}

/* ===== 單一斷點：大螢幕優化 (≥768px) ===== */
@media (min-width: var(--bp-md)) {
  .top-buttons {
    inset-block-start: env(safe-area-inset-top, 20px);
    inset-inline-start: 20px;
    gap: 1rem;
  }

  .bottom-buttons {
    inset-block-end: env(safe-area-inset-bottom, 20px);
    inset-inline-end: 20px;
    gap: 1rem;
  }
}