/* ═══════════════════════════════════════════════════════════
   FISSY GAMES — Mobile-First Overrides
   Applied to ALL themes. Makes the game feel like a native app.
   ═══════════════════════════════════════════════════════════ */

/* ── Base mobile container ── */
#game-root {
  max-width: 100vw;
  overflow-x: hidden;
}

.g-container {
  max-width: 520px;          /* Phone-sized column */
  padding: 0 16px;
}

/* ── Larger base font on mobile ── */
@media (max-width: 480px) {
  #game-root { font-size: 16px; }

  .g-hero { padding: 28px 16px 20px; }
  .g-hero__title { font-size: clamp(24px, 7vw, 32px); }
  .g-hero__sub   { font-size: 15px; }

  /* ── Decisions: full-width stack on small screens ── */
  .decision-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .decision-btn {
    min-height: 80px;          /* Shorter for mobile */
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 20px;
  }
  .decision-btn__emoji { font-size: 32px; }
  .decision-btn__title { font-size: 17px; text-align: left; }
  .decision-btn__sub   { text-align: left; }

  /* ── Spend grid: 3 cols still works on mobile ── */
  .spend-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .spend-btn  { padding: 12px 6px; }
  .spend-btn__emoji { font-size: 22px; }

  /* ── Role grid: 2 cols on mobile ── */
  .g-role-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-role-card { padding: 14px 12px; }

  /* ── Buttons: full width, tall touch targets ── */
  .g-btn     { min-height: 52px; font-size: 16px; }
  .g-btn--lg { min-height: 56px; font-size: 18px; }
  .g-btn--xl { min-height: 60px; font-size: 19px; }

  /* ── Cards ── */
  .g-card { padding: 18px 16px; }

  /* ── Entry grid: single column ── */
  .g-entry-grid { grid-template-columns: 1fr; }

  /* ── Code badge: bigger code on mobile ── */
  .g-code-badge__code { font-size: 28px; letter-spacing: .15em; }

  /* ── Input / select: 16px prevents iOS zoom ── */
  .g-input,
  .g-select { font-size: 16px; padding: 14px 16px; }
}

/* ── Tablet / large phone (481-768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
  .g-container { max-width: 520px; }

  .decision-grid { grid-template-columns: 1fr; gap: 12px; }
  .decision-btn  { min-height: 80px; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 14px 18px; }

  .g-btn { min-height: 50px; }
}

/* ── Safe area (notch phones: iPhone X+, Android notch) ── */
@supports (padding: max(0px)) {
  #game-root {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ── Smooth scrolling + tap highlight ── */
#game-root {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

/* ── Prevent text selection on game buttons ── */
.decision-btn,
.spend-btn,
.g-role-card,
.g-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Hide dark/light toggle on game pages ── */
/* Each game has a fixed intentional theme; the toggle conflicts with the design */
body[data-tool] .theme-switch,
body[data-tool] .theme-icon {
  display: none !important;
}