/* ===== mobile.css (mobile-only overrides) ===== */
/* Include after style.css */

@media (max-width: 768px) {
  :root {
    --mobile-bar-h: 64px;
    --radius: 16px;
  }

  html, body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Let page scroll beneath a fixed bottom bar */
  body {
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Make draw area ~50% of the viewport on mobile */
  #canvasWrap {
    height: 50vh;
    min-height: 280px;
  }

  /* Canvas: allow custom pan/zoom gestures */
  #canvas { touch-action: none; }

  /* Bottom control bar (buttons are moved here by JS on mobile) */
  #mobileControls {
    position: fixed; left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    height: var(--mobile-bar-h);
    display: flex; gap: 12px; justify-content: center; align-items: center;
    padding: 8px 12px;
    background: rgba(18,22,28,0.85);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,.08);
    z-index: 60; /* under popup */
  }
  #mobileControls button {
    flex: 1 1 auto; min-width: 0;
    font-size: 16px; padding: 10px 12px; border-radius: 12px;
  }

  /* Convert pixel popup to a bottom sheet */
  body.is-mobile #pixelPopup {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    top: auto; transform: none;
    width: auto; max-width: none;
    margin: 0 8px;
    background: #0f1318; color: #e6edf3;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    z-index: 70; /* above #mobileControls */
  }
  /* Optional row layout inside popup (if you add data-row wrappers) */
  #pixelPopup [data-row] {
    display: grid; grid-template-columns: 1fr auto;
    gap: 10px; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #popupClose {
    position: absolute; right: 8px; top: 8px;
    width: 44px; height: 44px; border-radius: 50%;
    background: #161b22; color: #e6edf3;
    border: 1px solid rgba(255,255,255,.06);
  }
  #claimBtn {
    position: sticky; bottom: 8px; width: 100%;
    margin: 12px 0 4px;
    padding: 14px 16px; font-weight: 700;
    border-radius: 12px; border: none;
    background: #00c2ff; color: #051923;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }
  #claimNote { opacity: .85; font-size: .9em; }

  /* Larger, thumb-friendly color picker */
  #popupColorInput {
    width: 48px; height: 48px; border-radius: 10px;
    -webkit-appearance: none; appearance: none; padding: 0; border: none; background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  }
  #popupColorInput::-webkit-color-swatch-wrapper { padding: 0; }
  #popupColorInput::-webkit-color-swatch { border: none; border-radius: 10px; }
  #popupColorHex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    opacity: .9;
  }

  /* Bigger tap targets globally */
  button, .btn, input[type="color"] { min-height: 44px; }

  /* Hide desktop-only UI blocks if you mark them */
  .desktop-only { display: none !important; }
}