/* Mobile override pack (2025-08-13): layout, tap targets, viewport, safe scaling */
:root { --safe-vh: 1vh; }
@supports (height: 100dvh) {
  :root { --safe-vh: 1dvh; }
}
html, body { min-height: calc(var(--safe-vh) * 100); }
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Prevent overlays from blocking taps */
#checkerWarp, .checker-overlay, .bg-overlay { pointer-events: none !important; }
.main, .wrap, .container, .game-container { position: relative; z-index: 1; }

/* Header buttons stack and scale */
@media (max-width: 700px) {
  .hdr, .header, .top-actions, .game-controls, .control-row {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  }
  .hdr a, .hdr button, .hdr .btn,
  .top-actions a, .top-actions button, .top-actions .btn,
  .game-controls .btn, .game-controls button, .game-controls a {
    width: 100%; min-height: 44px;
    font-size: clamp(0.95rem, 4.5vw, 1.2rem);
  }
  #rollButton { min-height: 48px; font-weight: 700; }
  #muteButton, .mute-btn, .muteButton {
    transform: scale(0.8);
    transform-origin: top right;
  }
}

/* Roll / Play screen sizing */
.roll-screen, .play-screen, .game-stage, canvas, #gameCanvas, #rollCanvas {
  max-width: 100vw !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}
/* Fallback for fixed-size canvases: constrain by container */
@media (max-width: 700px) {
  .roll-screen.fixed, .play-screen.fixed, canvas.fixed, #gameCanvas.fixed, #rollCanvas.fixed {
    width: 100% !important; height: auto !important;
  }
}

/* Prevent giant buttons during gameplay */
@media (max-width: 700px) {
  .gameplay-buttons, .action-buttons, .bottom-buttons {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .gameplay-buttons > *, .action-buttons > *, .bottom-buttons > * {
    min-height: 44px; font-size: clamp(0.9rem, 4vw, 1.05rem);
  }
}

/* Avoid sticky 100vh bugs */
@media (max-width: 700px) {
  .wrap, .container, .game-container { min-height: calc(var(--safe-vh) * 100); }
}

/* Keep the checker animation running but non-blocking */
#checkerWarp {
  pointer-events: none !important;
  animation-play-state: running !important;
  opacity: 0.15 !important;
}

/* Modal safety */
body.modal-open { overflow: hidden; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* --- Checker BG: ensure it animates and is visible on mobile --- */
.bg-checker #checkerWarp {
  display: block !important;
  opacity: 0.22 !important;
  animation: checkerFlowB 28s ease-in-out infinite alternate !important;
  filter: url(#checkerWaves) !important;
  will-change: transform, background-position, filter;
}
body.bg-checker::after {
  animation: checkerFlowA 28s linear infinite !important;
  opacity: 0.3;
}

/* If user has reduced motion, keep it off unless they opt-in via .force-animated-bg */
@media (prefers-reduced-motion: reduce) {
  body.force-animated-bg #checkerWarp,
  body.force-animated-bg::after {
    animation: checkerFlowB 28s ease-in-out infinite alternate !important;
  }
}


/* --- Modal visibility & layering override (fixes DoN & End Game popups not showing) --- */
.modal { z-index: 2147483647 !important; }
.modal .close-button { cursor: pointer; }