/* === Responsive Scaling Fixes (2025-08-13) === */
:root{
  /* base fluid scale that feels consistent on phones + desktops */
  --scale: clamp(0.92, 0.8 + 0.6vw, 1.18);
  --fs-xs: calc(0.78rem * var(--scale));
  --fs-sm: calc(0.9rem * var(--scale));
  --fs-md: calc(1rem * var(--scale));
  --fs-lg: calc(1.25rem * var(--scale));
  --fs-xl: calc(1.6rem * var(--scale));
  --fs-2xl: calc(2.2rem * var(--scale));
  --fs-3xl: calc(3rem * var(--scale));
}

/* Prevent layout from exceeding viewport on desktop ultra-wide */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Tighten container and use real viewport units for mobile chrome */
.container, .game-container, .main-container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: clamp(8px, 2vw, 16px);
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Headings & title scale fluidly */
.title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
}
.subtitle { font-size: clamp(0.9rem, 2.4vw, 1.1rem); }

/* Buttons: consistent, legible hit targets on all devices */
.devil-button, .btn, button, a.button, a.devil-button {
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
  padding: clamp(10px, 1.8vw, 14px) clamp(14px, 2.6vw, 20px);
  min-height: 44px;
  border-radius: clamp(10px, 1.6vw, 14px);
}

/* Top controls stack on phones, row on tablets/pc */
.hdr, .control-row, .game-controls {
  gap: clamp(8px, 2vw, 12px);
  flex-wrap: wrap;
}
@media (max-width: 640px){
  .hdr, .control-row, .game-controls { flex-direction: column; align-items: stretch; }
  .control-row .devil-button, .game-controls .devil-button { width: 100%; }
}

/* Inputs scale, prevent iOS zoom jitter */
.devil-input, input, select, textarea {
  font-size: 16px;
  padding: clamp(10px, 2vw, 12px);
}

/* Roll area sizing: readable but not overflowing */
.game-canvas {
  min-height: clamp(180px, 36vh, 420px);
}
.roll-display {
  font-size: clamp(1.8rem, 8vw, 3rem);
}

/* Sticky status stays compact and readable */
.status-display {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
}

/* Modals fit smaller screens */
.modal-content {
  width: min(92vw, 520px);
  max-height: 84dvh;
  overflow: auto;
}

/* Leaderboard table scrolls on narrow screens */
.leaderboard-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard-table table { width: 100%; }

/* Desktop polish: nudge type a bit larger */
@media (min-width: 1024px){
  .title { font-size: clamp(2rem, 2.6vw, 2.8rem); }
  .roll-display { font-size: clamp(2.2rem, 4vw, 3.4rem); }
}

/* Guard against earlier CSS syntax errors by ensuring our block closes cleanly */

/* === Mobile button sizing adjustments: smaller but still tap-friendly === */
/* === Fix overlapping top links (Public Leaderboard / Upload Scores) on mobile === */
/* === Robust mobile stacking for top links (no overlap) === */
@media (max-width: 700px) {
  #startScreen .section-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 10px !important;
    text-align: center;
  }
  #startScreen .section-title .devil-button {
    display: block !important;       /* anchors become block buttons */
    width: 100% !important;          /* full width */
    margin: 0 !important;            /* no side margins that could force overlap */
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  #startScreen .section-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: center; /* keep the title centered */
  }
  #startScreen .section-title .devil-button {
    width: 100%;
    margin: 0;
  }
}

/* === Extra-small in-game buttons on mobile === */
@media (max-width: 640px) {
  #gameScreen .game-controls .devil-button,
  #gameScreen .control-row .devil-button {
    font-size: clamp(0.75rem, 3.2vw, 0.9rem);
    padding: clamp(5px, 1.8vw, 7px) clamp(8px, 3vw, 12px);
    min-height: 32px; /* just above WCAG minimum */
    border-radius: clamp(5px, 1.8vw, 8px);
    width: 100%;
  }

  /* Roll button stays a touch bigger for emphasis */
  #gameScreen #rollButton {
    font-size: clamp(0.9rem, 4.8vw, 1.1rem) !important;
    padding: clamp(6px, 2vw, 10px) clamp(10px, 3.5vw, 16px) !important;
    min-height: 36px;
    width: 100%;
  }

  #gameScreen .control-row {
    flex-direction: column;
    gap: 6px;
  }
}

/* === Smaller in-game buttons on mobile === */
@media (max-width: 640px) {
  #gameScreen .game-controls .devil-button,
  #gameScreen .control-row .devil-button {
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    padding: clamp(6px, 2vw, 8px) clamp(10px, 3vw, 14px);
    min-height: 36px; /* still above WCAG minimum touch target */
    border-radius: clamp(6px, 2vw, 10px);
    width: 100%; /* match widths for all in-game buttons */
  }

  /* Keep roll button prominent */
  #gameScreen #rollButton {
    font-size: clamp(1rem, 5vw, 1.2rem) !important;
    padding: clamp(8px, 2.5vw, 12px) clamp(14px, 4vw, 18px) !important;
    min-height: 42px;
    width: 100%; /* full width for roll button too */
  }

  /* Ensure control-row buttons (like Devil's Pact & Unleash Power) align */
  #gameScreen .control-row {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 640px){
  .devil-button, .btn, button, a.button, a.devil-button {
    font-size: clamp(0.85rem, 3.8vw, 1rem);
    padding: clamp(8px, 2.6vw, 10px) clamp(10px, 4vw, 14px);
    min-height: 40px; /* smaller tap target but above WCAG minimum */
    border-radius: clamp(8px, 2vw, 12px);
    width: auto; /* don't force full-width */
  }
}


/* === Play-mode compact buttons (mobile only) === */
@media (max-width: 700px), (pointer: coarse) {
  body.playing #gameScreen .game-controls,
  body.playing #gameScreen .control-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.playing #gameScreen .devil-button {
    width: 100%;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
    line-height: 1.05;
    padding: clamp(6px, 2.2vw, 10px) clamp(10px, 3.2vw, 16px);
    min-height: 36px;
    border-radius: 10px;
    border-width: 2px;
  }

  /* Keep the Roll CTA a touch bigger */
  body.playing #gameScreen #rollButton {
    font-size: clamp(0.95rem, 4.8vw, 1.2rem) !important;
    padding: clamp(8px, 2.6vw, 12px) clamp(12px, 4vw, 18px) !important;
    min-height: 42px;
    width: 100%;
  }

  /* Prevent overlap with leaderboard/upload bars if present */
  body.playing #gameScreen .top-bar,
  body.playing #gameScreen .cta-row {
    flex-wrap: wrap;
  }
}


/* === Center gameplay buttons on mobile (phones & touch) === */
@media (max-width: 640px), (pointer: coarse) {

  /* Make mute button overlay smaller on mobile */
  #muteButton {
    transform: scale(0.8);
    transform-origin: top right;
  }

  #gameScreen .game-controls,
  #gameScreen .control-row {
    align-items: center !important;
  }
  #gameScreen .devil-button {
    width: auto !important;
    min-width: 220px;
    max-width: 90vw;
    margin: 0 auto !important;
    text-align: center;
  }
  #gameScreen #rollButton {
    width: auto !important;
    min-width: 260px;
    max-width: 92vw;
    margin: 0 auto !important;
  }

}