:root {
  --responsive-page-pad: clamp(0.9rem, 3.5vw, 1.5rem);
  --responsive-card-pad: clamp(1rem, 3.8vw, 1.5rem);
}

html,
body,
#root {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

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

.container-safe {
  width: min(100%, 72rem);
  padding-left: var(--responsive-page-pad) !important;
  padding-right: var(--responsive-page-pad) !important;
}

.card {
  min-width: 0;
}

.btn,
.btn-tab,
button,
select,
input {
  max-width: 100%;
}

body.bg-ink header:has(nav) .container-safe {
  width: min(100%, 80rem);
}

body.bg-ink header:has(nav) nav {
  min-width: 0;
}

body.bg-ink header:has(nav) nav a,
body.bg-ink header:has(nav) button {
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.bg-ink header:has(nav) .container-safe {
    padding-bottom: 0.7rem !important;
    padding-top: 0.75rem !important;
  }

  body.bg-ink header:has(nav) .container-safe > .flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem 0.85rem !important;
    align-items: center;
  }

  body.bg-ink header:has(nav) .container-safe > .flex > a[href="/"] {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  body.bg-ink header:has(nav) .container-safe > .flex > div:nth-child(2) {
    display: none !important;
  }

  body.bg-ink header:has(nav) .container-safe > .flex > div:last-child {
    display: contents !important;
  }

  body.bg-ink header:has(nav) .container-safe > .flex > div:last-child > div {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    gap: 0.4rem !important;
    justify-content: flex-end;
    margin-left: 0 !important;
  }

  body.bg-ink header:has(nav) nav.hidden,
  body.bg-ink header:has(nav) nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    gap: 0.45rem !important;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.bg-ink header:has(nav) nav::-webkit-scrollbar {
    display: none;
  }

  body.bg-ink header:has(nav) nav a {
    flex: 0 0 auto;
    min-height: 2.35rem;
    padding: 0.45rem 0.72rem !important;
  }

  body.bg-ink header:has(nav) a[href="/"] img {
    height: 2.25rem !important;
    width: 2.25rem !important;
  }

  body.bg-ink header:has(nav) a[href="/"] .text-2xl {
    font-size: clamp(1.55rem, 6vw, 2rem) !important;
    line-height: 1.05 !important;
  }

  body.bg-ink header:has(nav) a[href="/"] .text-white\/70 {
    font-size: clamp(0.78rem, 3vw, 0.95rem) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 420px) {
  body.bg-ink header:has(nav) a[href="/"] {
    gap: 0.55rem !important;
  }

  body.bg-ink header:has(nav) a[href="/"] img {
    height: 2rem !important;
    width: 2rem !important;
  }

  body.bg-ink header:has(nav) a[href="/"] .text-white\/70 {
    display: none;
  }
}

@media (max-width: 360px) {
  body.bg-ink header:has(nav) nav.hidden,
  body.bg-ink header:has(nav) nav {
    gap: 0.25rem !important;
    justify-content: space-between;
    overflow-x: visible;
  }

  body.bg-ink header:has(nav) nav a {
    flex: 1 1 0;
    font-size: 0.88rem;
    min-height: 2.15rem;
    padding: 0.35rem 0.35rem !important;
    text-align: center;
  }
}

@media (max-width: 700px) {
  main section {
    padding-bottom: 1.5rem !important;
    padding-top: 1.5rem !important;
  }

  main section h1 {
    font-size: clamp(2.15rem, 11vw, 3.25rem) !important;
    line-height: 1.08 !important;
  }

  main section h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }

  main section p {
    overflow-wrap: anywhere;
  }

  main .card,
  main aside.card,
  main .rounded-2xl.border,
  main .rounded-xl.border {
    padding: var(--responsive-card-pad) !important;
  }

  main .grid.grid-cols-2,
  main .grid.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  main section:has(.category-sep) header > div,
  main section:has(.category-sep) header > div > div:last-child {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  main section:has(.category-sep) header label {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  main section:has(.category-sep) header select {
    margin-left: 0 !important;
    width: 100%;
  }

  main section:has(.category-sep) .category-sep {
    flex-wrap: wrap;
  }

  main section:has(.category-sep) .card h3 {
    align-items: flex-start;
    font-size: clamp(1.15rem, 5.6vw, 1.45rem) !important;
    line-height: 1.18 !important;
  }

  main section:has(.category-sep) .card .badge,
  main section:has(.category-sep) .card span.text-xs {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  main section:first-child .flex.gap-3 {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr;
  }

  main section:first-child .btn {
    justify-content: center;
    width: 100%;
  }
}

main section:has(input[name="pairs-theme"]) {
  overflow-x: clip;
}

main section:has(input[name="pairs-theme"]) .card,
main section:has(input[name="pairs-theme"]) .rounded-2xl.border {
  min-width: 0;
}

main section:has(input[name="pairs-theme"]) button:has(img[src^="/assets/themes/"]),
main section:has(input[name="pairs-theme"]) button[aria-label^="Carte"] {
  min-width: 0;
}

@media (max-width: 700px) {
  main section:has(input[name="pairs-theme"]) > .flex,
  main section:has(button[aria-label="Vert"]) > .flex,
  main section:has(button[aria-label="Vert"]) > div {
    gap: 1rem !important;
  }

  main section:has(input[name="pairs-theme"]) header,
  main section:has(button[aria-label="Vert"]) header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  main section:has(input[name="pairs-theme"]) header > div:last-child,
  main section:has(button[aria-label="Vert"]) header > div:last-child {
    margin-left: 0 !important;
    width: 100%;
  }

  main section:has(input[name="pairs-theme"]) label:has(input[name="pairs-theme"]) {
    flex: 1 1 auto;
    justify-content: center;
  }

  div:has(> button[aria-label="Vert"]):has(> button[aria-label="Rouge"]):has(> button[aria-label="Bleu"]):has(> button[aria-label="Jaune"]) {
    height: min(82vw, 380px) !important;
    width: min(82vw, 380px) !important;
  }
}

@media (max-width: 380px) {
  main section:has(input[name="pairs-theme"]) label:has(input[name="pairs-theme"]) {
    font-size: 0.92rem;
    min-height: 2.2rem;
  }

  main section:has(input[name="pairs-theme"]) .btn,
  main section:has(button[aria-label="Vert"]) .btn {
    min-height: 2.75rem;
    width: 100%;
  }
}

@media (max-width: 640px) {
  body.crossword-plus-active #crossword-plus-root,
  .cw-page {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .cw-page {
    padding: 0.95rem !important;
  }

  .cw-shell,
  .cw-hero > div {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    width: 100%;
  }

  .cw-hero {
    gap: 0.9rem !important;
    margin-bottom: 0.9rem !important;
  }

  .cw-hero h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.85rem) !important;
    line-height: 1.04 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .cw-meta {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cw-meta span {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0;
    text-align: center;
    white-space: normal;
  }

  .cw-progress {
    min-width: 0 !important;
    width: 100%;
  }

  .cw-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }

  .cw-segment {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .cw-segment[aria-label="Mode"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cw-segment button,
  .cw-actions button {
    min-width: 0;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    white-space: normal;
  }

  .cw-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cw-actions button[data-action="next"] {
    grid-column: auto;
  }

  .cw-board-card {
    border-radius: 18px !important;
    padding: 0.65rem !important;
  }

  .cw-clues-card {
    border-radius: 18px !important;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  main section:has(.category-sep) .grid.grid-cols-2,
  main section:has(.category-sep) .grid.sm\:grid-cols-2,
  main section:has(.category-sep) .grid.lg\:grid-cols-3,
  main section:has(.category-sep) .grid.xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cw-layout {
    grid-template-columns: 1fr !important;
  }

  .cw-clues-card {
    max-height: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn,
  .btn-tab,
  button,
  select {
    min-height: 2.5rem;
  }
}