/* === Universal popup/modal centering (applies site‑wide) === */
:where(.modal,.popup,.dialog) {
  /* Hidden by default; JS will set display:flex when opened */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2140; /* above UI */
  /* Use flexbox so the content is perfectly centered */
  align-items: center;
  justify-content: center;
  /* Respect mobile safe areas and dynamic viewport height */
  padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px);
           max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px);
  height: calc(var(--vh, 1vh) * 100);
}

:where(.modal,.popup,.dialog) > :where(.modal-content,.popup-content,.dialog-content) {
  /* Remove top/bottom margins that could push content off center */
  margin: 0 auto;
  max-height: min(82vh, calc(var(--vh, 1vh) * 100 - 64px));
  overflow-y: auto;
}

/* --- BEGIN leaderboard-style-3.css (shared) --- */
/* --- 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;
}

/* --- 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: 480px) {
  #checkerWarp { display: none !important; }
  body::after { animation: none !important; }
  body::before { animation-duration: 24s !important; }
}

/* --- 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; }
}

/* --- END leaderboard-style-3.css --- */
/* --- BEGIN leaderboard-style-2.css (shared) --- */
/* === Mobile sizing & responsive polish === */
:root{--space:clamp(8px,2.5vw,16px);--fs-base:clamp(14px,3.5vw,18px);--fs-title:clamp(20px,6vw,28px);}
html,body{max-width:100%; overflow-x:hidden;}
body{font-size:var(--fs-base);}
.section-title, h1, h2{font-size:var(--fs-title);}
.devil-button,.btn,button,a.button-secondary,a.devil-button{min-height:44px; padding:.75rem 1rem; font-size:var(--fs-base); line-height:1.2;}
.leaderboard-table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-spacing:0;}
.leaderboard-table table{width:100%;}
table th, table td{padding:.6rem .5rem; white-space:nowrap;}
.modal,.popup,.dialog{max-width:min(680px,96vw);}
.container,.wrap,.game-section{padding:var(--space);}
img,canvas,video{max-width:100%; height:auto;} 

@media (pointer:coarse){ .btn, .devil-button, button{padding:.85rem 1.1rem;} }

/* --- END leaderboard-style-2.css --- */