/* Shared mobile safeguards for every game under /dd-games/. */
html {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

main,
header,
footer,
section,
article,
nav,
aside,
div {
  min-width: 0;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
a,
label,
select,
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="submit"] {
  touch-action: manipulation;
}

@media (max-width: 600px) {
  body > .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  [role="dialog"],
  .dialog,
  .modal-content {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  /* Number memory: wrap long rounds instead of shrinking off screen. */
  #numbersContainer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #numbersContainer > div {
    width: 3rem !important;
    height: 3rem !important;
    font-size: 1.25rem !important;
  }

  #gameArea,
  #inputArea {
    padding: 1rem !important;
  }

  #inputsContainer {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem !important;
  }

  #inputsContainer > * {
    min-width: 0;
  }

  /* Character recognition: keep every tile inside the viewport. */
  #words-grid {
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  #words-grid > * {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1;
  }

  #pagination {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  #pagination button {
    padding: 0.65rem 0.8rem !important;
    font-size: 1rem !important;
  }

  #page-info {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
    font-size: 1rem !important;
  }

  .no-scroll {
    touch-action: pan-y !important;
  }

  .stats-section {
    position: static !important;
  }

  .page-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .char-grid-container {
    height: auto !important;
    padding: 0 !important;
  }

  .pagination-content.active {
    height: auto;
  }

  .char-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, auto) !important;
    gap: 0.35rem !important;
  }

  .char-tag {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1;
    border-radius: 0.6rem !important;
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
  }

  .pagination-container {
    gap: 1rem !important;
    margin: 0.8rem 0 !important;
  }

  /* Diary editor: preserve room for the save control and safe areas. */
  .modal-content {
    padding: 20px !important;
  }

  .color-option {
    padding-left: 0 !important;
    font-size: 1.125rem !important;
  }

  .text-show,
  .text-input {
    padding: 16px 10px 76px !important;
    font-size: clamp(1rem, 5vw, 1.375rem) !important;
  }

  #saveBtn {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    min-height: 44px;
    font-size: 1rem !important;
  }

  /* Arithmetic controls must wrap without inline margins causing overflow. */
  #next-btn {
    margin-left: 0 !important;
  }

  #question-container {
    padding: 1rem 0.5rem !important;
  }

  #visual-aid {
    min-height: 150px !important;
    margin-block: 1rem !important;
  }
}

@media (max-width: 360px) {
  #inputsContainer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}