/* --- Viewport & safe areas --- */
:root { --vh: 1vh; }
html, body { max-width: 100%; overflow-x: hidden; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.header, .wrap { padding-top: max(env(safe-area-inset-top), 12px); padding-bottom: env(safe-area-inset-bottom); }

/* --- Touch targets --- */
button, .btn, .devil-button, a.button, a.devil-button, a.button-secondary {
  min-height: 44px;
  line-height: 1.2;
  touch-action: manipulation;

  font-size: var(--btn-fs, clamp(14px, 3.5vw, 18px));
  padding: var(--btn-pad-y, clamp(10px, 2.6vw, 14px)) var(--btn-pad-x, clamp(14px, 4vw, 20px));
  border-radius: clamp(10px, 3vw, 14px);
}


/* --- Prevent iOS zoom on form focus --- */
input, select, textarea {
  font-size: 16px !important;
}

/* --- Containers scale to real viewport height on mobile --- */
.container, .game-container, .main-container, .game-canvas {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* --- Background/animation performance on mobile --- */


@media (pointer: coarse), (max-width: 640px) {
  /* Full intensity animated background on phones */
  body.bg-checker #checkerWarp { display: block !important; opacity: 1 !important; }
  /* Restore normal/fast animation timing for overlays */
  body::after { pointer-events: none;  animation-duration: 16s !important; }
  body::before { pointer-events: none;  animation-duration: 18s !important; }
}

  body::before { animation-duration: 8s !important; pointer-events: none; }
/* Removed stray closing braces and duplicate animation declarations that
   caused CSS parse errors. */

/* --- Layout stacking & full‑width controls on small screens --- */
@media (max-width: 480px) {
  .control-row,
  .actions,
  .hdr { flex-direction: column; align-items: stretch; }
  .control-row .devil-button,
  .actions .btn,
  .hdr a { width: 100%; }
}

/* --- Tables scroll instead of overflowing --- */
.leaderboard-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard-table table { width: 100%; border-spacing: 0; }
.leaderboard-table th, .leaderboard-table td { white-space: nowrap; }

/* --- Sticky status bar should not jitter under iOS --- */
.status-display { position: sticky; top: 0; will-change: transform; backface-visibility: hidden; }

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* stacked top buttons */
@media (max-width: 600px) {
  .hdr { flex-direction: column; align-items: stretch; }
  .hdr a, .hdr .btn, .hdr button {
    width: 100%;
    font-size: clamp(16px, 4.5vw, 20px);
    padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 24px);
    margin: 4px 0;
  }
}

/* Aggressive stacking for top controls on small screens */
@media (max-width: 640px) {
  .game-controls, .control-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .game-controls > .devil-button,
  .control-row > .devil-button,
  .game-controls > .btn,
  .control-row > .btn {
    width: 100%;
    font-size: clamp(16px, 5vw, 20px);
    padding: clamp(12px, 3.4vw, 16px) clamp(16px, 4.5vw, 22px);
  }
  /* Keep the big roll CTA readable */
  #rollButton { font-size: clamp(18px, 6vw, 22px) !important;

  }
}